/* Platform-wide divider atom. `.global-divider` is the canonical hairline rule —
   the single treatment for "break this stack of content in two", with or without
   a centered label sitting in the gap.

   Two shapes, one class:

       <hr class="global-divider">                          plain rule
       <div class="global-divider"><span>or</span></div>    labeled rule
       <div class="global-divider global-divider--caps"><span>Your Earnings</span></div>

   The labeled shape works because the flex row grows two pseudo-element rules
   around whatever child sits between them; there is no separate --label class to
   remember. `--caps` is the micro uppercase eyebrow treatment (11px, tracked) for
   a section label rather than a connective word like "or".

   Scope: horizontal separation only. A VERTICAL 1px separator between inline
   controls (.opportunities-record-header__divider) is a different job and stays its own
   thing, and the form builder's `divider` field type renders a plain <hr class=
   "form-divider"> inside the public form's own stylesheet — forms are not a
   target here.

   Every color resolves to a token, so a call site migrating onto this is a class
   swap that drops its hand-rolled rule color. */

.global-divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
    margin: var(--spacing-smd) 0;
    /* Reset the UA <hr> box so the same class works on <hr> and <div>. The rule
       itself is drawn by the ::before/::after pair below, never by a border, so
       both elements land on identical pixels. */
    border: 0;
    padding: 0;
    height: auto;
    opacity: 1;
    /* The label is real prose on the login and signup pages, so it must clear
       WCAG AA. --color-text-muted (#9ca3af) dropped it to 2.5:1 and failed.
       --color-text-light reads dark today (#33232c) but tokens.css flags it as a
       broken alias a separate gated PR redefines to --color-grey-600, so we bind
       straight to --color-grey-600 (#6c6467, 5.7:1 on white) — a real token that
       resolves dark today and is where the alias is headed anyway. Size is
       --font-size-lg (15px), the original "or" size the absorbed clones used;
       --font-size-sm (13px) had shrunk it. --caps overrides both below. */
    color: var(--color-grey-600);
    font-size: var(--font-size-lg);
    line-height: 1.4;
}

.global-divider::before,
.global-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* The PLAIN shape this component's own docstring documents — <hr
   class="global-divider"> — has nothing between its two pseudo rules, so the
   row's gap opened a 14px hole in the middle of what is supposed to read as one
   hairline. :empty is exactly "no label": an <hr> is a void element and always
   matches, and a labeled <div> never does, so the labeled shape keeps its gap
   untouched. Found on the leads card, the first call site to use the plain
   shape — every other one is labeled, which is why the rule went unnoticed. */
.global-divider:empty {
    gap: 0;
}

/* --caps: uppercase micro eyebrow — a section label ("Your Earnings"), not a
   connective word. */
.global-divider--caps {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --flush: no vertical margin, for a caller that owns its own spacing (a flex
   column using `gap`, or a panel that wants the rule tight under a heading). */
.global-divider--flush {
    margin: 0;
}