/* ═══════════════════════════════════════════════════════════════════════════
   GoodLeads Platform — Styles
   Professional, data-dense, desktop-focused UI
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Custom Properties ──────────────────────────────────────────────────── */

:root {
    /* ── GoodLeads Design Guide Tokens (3-30) ──────────────────────────── */
    /* Core brand palette — warm grays + amber */
    --gl-bg:           #CECECB;
    --gl-bg-alt:       #E0E0DC;
    --gl-bg-dark:      #3C3C3A;
    --gl-bg-darker:    #252523;
    /* Graph-canvas backdrop for the Formation Services maps — a warm charcoal that
       belongs to the palette rather than the stark near-black, so the maps read as
       part of the dashboard while the color-coded nodes still pop. */
    --gl-graph-bg:     #33322F;
    --gl-text:         #2A2A28;
    --gl-text-mid:     #5C5C59;
    --gl-text-lite:    #E8E8E4;
    --gl-text-dim:     rgba(232,232,228,0.72);
    --gl-amber:        #D77A00;
    --gl-amber-dk:     #B56600;
    --gl-gold:         #C59A2E;
    --gl-fire:         #C94A1A;
    --gl-green:        #78B878;

    /* Typography — Design Guide */
    --font-display:    'Outfit', -apple-system, sans-serif;
    --font-body:       'Geist', -apple-system, sans-serif;
    --font-data:       'Geist Mono', 'SF Mono', monospace;

    /* ── Platform tokens (existing, preserved for browse/detail views) ── */
    --color-navy:       #1a1a2e;
    --color-navy-light: #252545;
    --color-accent:     #D77A00;
    --color-accent-hover: #B56600;

    /* Surfaces */
    --color-bg:         #CECECB;
    --color-surface:    #E0E0DC;
    --color-border:     rgba(42,42,40,0.12);
    --color-border-light: rgba(42,42,40,0.06);

    /* Text */
    --color-text:       #2A2A28;
    --color-text-muted: #5C5C59;
    --color-text-light: #9ca3af;
    --color-text-inverse: #E8E8E4;

    /* Tier colors — must match reachability_score.py TIERS */
    --tier-on-fire:     #C94A1A;
    --tier-very-hot:    #D77A00;
    --tier-hot:         #C59A2E;
    --tier-warm:        #8B8B85;
    --tier-cold:        #5C5C59;
    /* Withheld — non-operating entities (held by Contact Intelligence).
       Muted blue-grey: distinct from active tiers, signals "we don't
       recommend dialing" without competing for attention. */
    --tier-withheld:    #4a5568;

    /* Status colors */
    --color-success:    #78B878;
    --color-warning:    #C59A2E;
    --color-error:      #C94A1A;
    --color-info:       #D77A00;

    /* Layout */
    --header-height:    56px;
    --sidebar-width:    0px;
    --content-max:      1400px;
    --radius:           8px;
    --radius-sm:        4px;
    --shadow:           0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-lg:        0 4px 12px rgba(0,0,0,0.15);

    /* Type — fallback for existing code */
    --font-ui:          'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:        'Geist Mono', "SF Mono", "Fira Code", "Consolas", monospace;
    --font-size-xs:     12px;
    --font-size-sm:     14px;
    --font-size-base:   15px;
    --font-size-md:     16px;
    --font-size-lg:     18px;
    --font-size-xl:     22px;
    --font-size-2xl:    30px;
}


/* ── Reset & Base ───────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--gl-text);
    background: var(--gl-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Subtle texture — premium matte feel (Design Guide) */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.032;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    z-index: 9999;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }


/* ── Top Bar ────────────────────────────────────────────────────────────── */

.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--header-height);
    background: var(--gl-bg);
    border-bottom: 1px solid rgba(42,42,40,0.12);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 24px;
}

/* The brand is an <a> to the home route, not a bare div — it is the only way
   back to the landing page from inside the app. Styled flat so it reads as the
   masthead it is, with a hover and a focus ring so it reads as clickable too. */
.top-bar-brand {
    display: flex;
    align-items: baseline;
    gap: 0;
    flex-shrink: 0;
    text-decoration: none;
    padding: 4px 6px;
    margin-left: -6px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.top-bar-brand:hover { background: rgba(42,42,40,0.06); text-decoration: none; }
.top-bar-brand:focus-visible { outline: 2px solid var(--gl-amber); outline-offset: 2px; }

.brand-name {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--gl-text);
    letter-spacing: -0.3px;
}

.brand-dot {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--gl-amber);
}

.brand-tag {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--gl-text-mid);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-left: 12px;
}

.top-bar-nav {
    display: flex;
    gap: 4px;
}

.nav-link {
    /* Six items across the bar now carry two- and three-word labels. Without
       this they wrap mid-label at the tighter desktop widths and the caret
       lands on its own line. Below 1180px the bar is a drawer, where the
       column layout makes nowrap a no-op. */
    white-space: nowrap;
    padding: 6px 11px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gl-text-mid);
    transition: all 0.15s;
    text-decoration: none;
}

.nav-link:hover {
    color: var(--gl-text);
    background: rgba(42,42,40,0.06);
    text-decoration: none;
}

.nav-link.active {
    color: var(--gl-text);
    background: rgba(42,42,40,0.1);
}


.top-bar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Mobile nav: hamburger + slide-down drawer (≤1180px) ────────────────
   Below 1180px the six nav items plus the action buttons can't fit in the
   fixed header row, so the row is hidden and .top-bar-nav is repositioned as
   a drawer under the header, opened by .nav-toggle. Same element, same links,
   same .active handling in handleRoute() — only the presentation changes.

   1180 rather than 1100 (raised with the six-group consolidation): a keyed
   session also carries Share Access and the lock button, and at 1101px the
   right edge of that row clipped. A drawer beats a clipped header. */

.nav-toggle {
    display: none;                /* desktop: hidden entirely */
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;                  /* full-size thumb target */
    height: 44px;
    margin-right: -10px;          /* optical alignment with the 16px page pad */
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--gl-text);
    cursor: pointer;
}
.nav-toggle:hover { background: rgba(42,42,40,0.06); }
.nav-toggle:focus-visible { outline: 2px solid var(--gl-amber); outline-offset: 2px; }

/* Hamburger bars morph into an X while open */
.nav-toggle .bar {
    position: absolute;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle .bar:nth-child(1) { transform: translateY(-6px); }
.nav-toggle .bar:nth-child(3) { transform: translateY(6px); }
body.nav-open .nav-toggle .bar:nth-child(1) { transform: rotate(45deg); }
body.nav-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle .bar:nth-child(3) { transform: rotate(-45deg); }

.nav-backdrop { display: none; }


/* ── One-Pagers nav group ──────────────────────────────────────────────
   Desktop: a hover/focus-within dropdown — pure CSS, no JS, closes on
   mouse-out so nothing can get stuck open. Drawer (≤1180px): the title
   turns into a static group label and the links render inline. */
.nav-group { position: relative; }
.nav-group-title { cursor: default; display: inline-flex; align-items: center; gap: 5px; }
.nav-caret { font-size: 9px; line-height: 1; opacity: 0.7; }
.nav-group-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 120;
    min-width: 216px;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--gl-bg);
    border: 1px solid rgba(42,42,40,0.15);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}
.nav-group:hover .nav-group-menu,
.nav-group:focus-within .nav-group-menu { display: flex; }
.nav-group:hover .nav-group-title,
.nav-group:focus-within .nav-group-title { color: var(--gl-text); background: rgba(42,42,40,0.06); }
/* Dropdown rows read as a list, not as more tabs: the bar's uppercase tracking
   is for six words across a row, and stacking six of them reads as shouting and
   scans slower. Sentence case at 13.5px, which also clears the 14px-equivalent
   x-height the rest of the UI holds to. */
.nav-group-menu .nav-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 13.5px;
    padding: 7px 11px;
}

/* A short qualifier on a dropdown row — "live", "experiment". Says what kind of
   thing the link opens without turning the label into a sentence. */
.nav-hint {
    font-family: var(--font-data);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(42,42,40,0.42);
}

/* The Buy group is the one call to action in the bar: its title IS the link to
   /buy.html (buying stays one click) and the dropdown adds the packaged shelf.
   The amber has to survive the .nav-group hover rule above, hence the override. */
.nav-link-buy,
.nav-group-buy:hover .nav-link-buy,
.nav-group-buy:focus-within .nav-link-buy {
    color: var(--gl-text-lite);
    background: var(--gl-amber);
    cursor: pointer;
}

.nav-link-buy:hover { color: var(--gl-text-lite); background: var(--gl-amber-dk); }
.nav-group-buy .nav-group-menu { left: auto; right: 0; }

@media (max-width: 1180px) {
    .top-bar { gap: 16px; padding: 0 16px; }
    .nav-toggle { display: inline-flex; }

    body.nav-open { overflow: hidden; }   /* drawer scrolls, page doesn't */

    .nav-backdrop {
        display: block;
        position: fixed;
        inset: var(--header-height) 0 0 0;
        z-index: 98;
        background: rgba(42,42,40,0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

    .top-bar-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        z-index: 99;
        flex-direction: column;
        gap: 0;
        background: var(--gl-bg);
        border-bottom: 1px solid rgba(42,42,40,0.12);
        box-shadow: 0 12px 32px rgba(0,0,0,0.18);
        padding: 8px 12px 16px;
        max-height: calc(100dvh - var(--header-height));
        overflow-y: auto;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
    }
    body.nav-open .top-bar-nav {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .top-bar-nav .nav-link {
        display: flex;
        align-items: center;
        min-height: 48px;             /* comfortable tap target */
        padding: 10px 14px;
        font-size: 16px;              /* readable on a phone — never below 14px */
        text-transform: none;
        letter-spacing: 0.03em;
    }
    .top-bar-nav .nav-link.active { box-shadow: inset 3px 0 0 var(--gl-amber); }


    /* One-Pagers group flattens into the drawer: label + inline links.
       .top-bar-nav prefix out-specifies the drawer's .top-bar-nav .nav-link rule. */
    .nav-group { position: static; }
    .top-bar-nav .nav-group-title {
        cursor: default;
        min-height: 0;
        padding: 8px 14px 2px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gl-text-mid);
        background: none;
    }
    .top-bar-nav .nav-group:hover .nav-group-title,
    .top-bar-nav .nav-group:focus-within .nav-group-title { color: var(--gl-text-mid); background: none; }
    /* ...except Buy, which is a real link, not a section heading. In the drawer
       it renders as the full-width call to action with its two storefronts
       listed underneath. */
    .top-bar-nav .nav-link-buy,
    .top-bar-nav .nav-group-buy:hover .nav-link-buy,
    .top-bar-nav .nav-group-buy:focus-within .nav-link-buy {
        color: var(--gl-text-lite);
        background: var(--gl-amber);
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: none;   /* the drawer is sentence case throughout */
        padding: 10px 14px;
        margin: 6px 14px 2px;
        border-radius: var(--radius-sm);
        min-height: 0;
    }
    .nav-caret { display: none; }
    .nav-group-menu {
        display: flex;
        position: static;
        min-width: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: none;
    }
}

/* Between the drawer breakpoint and a roomy desktop, the six nav items plus two
   labelled action buttons need ~1300px. Rather than clip the right edge (or push
   the hamburger up to 1300 and hand a 13" laptop a drawer it does not need), the
   two action buttons go icon-only here. Both keep their title attribute, so the
   tooltip still names them. */
@media (max-width: 1320px) {
    #btn-share-access { font-size: 0; }
    #btn-share-access svg { margin-right: 0 !important; }
    #auth-label { display: none; }
}

@media (max-width: 480px) {
    /* Below the drawer breakpoint the rule above already applies; kept as the
       explicit floor for the smallest screens. */
    #auth-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle .bar,
    .nav-backdrop,
    .top-bar-nav { transition: none; }
}

/* SSE connection status dot */
.connection-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gl-text-mid);
    transition: background 0.3s;
}
.connection-status.connected { background: var(--gl-green); }
.connection-status.disconnected { background: var(--gl-fire); }


/* ── Main Content ───────────────────────────────────────────────────────── */

#app {
    margin-top: var(--header-height);
    padding: 20px;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
}


/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}
.btn-primary:hover:not(:disabled) {
    background: var(--color-accent-hover);
}

.btn-outline {
    background: transparent;
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.25);
}
.btn-outline:hover:not(:disabled) {
    background: rgba(255,255,255,0.08);
    color: white;
    border-color: rgba(255,255,255,0.4);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}
.btn-ghost:hover:not(:disabled) {
    background: var(--color-bg);
    color: var(--color-text);
}

.btn-danger {
    background: var(--color-error);
    color: white;
    border-color: var(--color-error);
}
.btn-danger:hover:not(:disabled) {
    background: #dc2626;
}

.btn-sm {
    padding: 4px 10px;
    font-size: var(--font-size-xs);
}

/* Anchors in a button row render with the UA's native button face, so an
   <a class="btn"> matches its sibling <button>s in both themes. */
.detail-actions a.btn,
.map-detail-actions a.btn:not(.btn-primary) {
    background: ButtonFace;
    color: ButtonText;
}
.detail-actions a.btn:hover,
.map-detail-actions a.btn:not(.btn-primary):hover {
    text-decoration: none;
    filter: brightness(0.96);
}

.btn-icon {
    padding: 5px 8px;
}


/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: var(--font-size-md);
    font-weight: 600;
}

.card-body {
    padding: 18px;
}


/* ── Dashboard Cards Grid ───────────────────────────────────────────────── */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.state-card {
    cursor: pointer;
    background: var(--gl-bg-alt);
    border: 1px solid rgba(42,42,40,0.08);
    transition: box-shadow 0.15s, transform 0.15s;
}
.state-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.state-card-header {
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(42,42,40,0.08);
}

.state-card-header h3 {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--gl-text);
    margin-bottom: 2px;
}

.state-card-header .state-total {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--gl-text-mid);
}

.state-card-body {
    padding: 14px 18px 18px;
}

.state-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--gl-text);
}

.stat-label {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--gl-text-mid);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.tier-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-bg);
}

.tier-bar-segment {
    height: 100%;
    transition: width 0.3s ease;
}

.tier-section {
    margin-top: 12px;
}

.tier-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.tier-breakdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.tier-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.tier-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tier-row-name {
    width: 60px;
    font-weight: 500;
    color: var(--color-text);
}

.tier-row-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--color-bg);
    border-radius: 3px;
    overflow: hidden;
}

.tier-row-bar {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.tier-row-count {
    width: 32px;
    text-align: right;
    font-weight: 600;
    color: var(--color-text);
}

.tier-row-pct {
    width: 36px;
    text-align: right;
    color: var(--color-text-muted);
    font-size: 12px;
}

.tier-empty {
    font-size: 13px;
    color: var(--color-text-muted);
    font-style: italic;
    padding: 4px 0;
}

.sector-section {
    margin-top: 12px;
}

.sector-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.sector-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--color-bg);
    border-radius: 12px;
    font-size: 11px;
    color: var(--color-text-muted);
}

.sector-pill strong {
    color: var(--color-text);
}

/* Legacy tier legend (kept for browse table) */
.tier-bar-legend {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.tier-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.tier-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}


/* ── Tables ─────────────────────────────────────────────────────────────── */

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

thead th {
    background: var(--color-bg);
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
    user-select: none;
}

thead th.sortable {
    cursor: pointer;
}

thead th.sortable:hover {
    color: var(--color-text);
}

thead th .sort-arrow {
    font-size: 10px;
    margin-left: 2px;
    opacity: 0.4;
}

thead th.sorted .sort-arrow {
    opacity: 1;
    color: var(--color-accent);
}

tbody tr {
    border-bottom: 1px solid var(--color-border-light);
    transition: background 0.1s;
}

tbody tr:nth-child(even) {
    background: #fafafe;
}

tbody tr:hover {
    background: #f0f2ff;
}

tbody tr.clickable {
    cursor: pointer;
}

tbody td {
    padding: 8px 12px;
    vertical-align: middle;
}

td.mono {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
}

td.truncate {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Checkbox column */
th.col-check,
td.col-check {
    width: 36px;
    text-align: center;
    padding-left: 8px;
    padding-right: 4px;
}

input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--color-accent);
}


/* ── Score Badge ────────────────────────────────────────────────────────── */

.score-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    font-family: var(--font-mono);
    color: white;
    white-space: nowrap;
}

.score-badge .score-num {
    font-weight: 700;
}

.score-badge .score-tier {
    font-weight: 500;
    font-family: var(--font-ui);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.score-badge.tier-on-fire  { background: var(--tier-on-fire); }
.score-badge.tier-very-hot { background: var(--tier-very-hot); }
.score-badge.tier-hot      { background: var(--tier-hot); }
.score-badge.tier-warm     { background: var(--tier-warm); color: #1a1a2e; }
.score-badge.tier-cold     { background: var(--tier-cold); }
.score-badge.tier-withheld {
    background: var(--tier-withheld);
    opacity: 0.7;
}
.score-badge.tier-withheld .score-num { opacity: 0.55; }

/* Large score for detail page */
.score-large {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--radius);
    color: white;
}

.score-large.tier-on-fire  { background: var(--tier-on-fire); }
.score-large.tier-very-hot { background: var(--tier-very-hot); }
.score-large.tier-hot      { background: var(--tier-hot); }
.score-large.tier-warm     { background: var(--tier-warm); color: #1a1a2e; }
.score-large.tier-cold     { background: var(--tier-cold); }
.score-large.tier-withheld { background: var(--tier-withheld); opacity: 0.7; }

.score-large .score-number {
    font-family: var(--font-mono);
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
}

/* The word in the dark block ("Not yet checked" / "Held") at a readable size. */
.score-large.score-word .score-number {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 700;
}

.score-large .score-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.score-large .score-tier-label {
    font-size: var(--font-size-lg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.score-large .score-sublabel {
    font-size: var(--font-size-xs);
    opacity: 0.8;
}


/* ── Filter Chips ───────────────────────────────────────────────────────── */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    flex-wrap: wrap;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #eef1ff;
    border: 1px solid #c7d2fe;
    border-radius: 16px;
    font-size: var(--font-size-xs);
    color: var(--color-accent);
    white-space: nowrap;
}

.filter-chip .chip-field {
    font-weight: 600;
}

.filter-chip .chip-value {
    font-family: var(--font-mono);
}

.filter-chip .chip-remove {
    cursor: pointer;
    opacity: 0.6;
    font-size: 14px;
    line-height: 1;
    margin-left: 2px;
}
.filter-chip .chip-remove:hover {
    opacity: 1;
}


/* (Filter builder row removed — replaced by gl-filter-popover) */


/* ── GL Filter System (shared chip bar + popover) ──────────────────────── */

/* ── Active filter chip bar ─────────────────────────────────────────────── */

.gl-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 36px;
    padding: 8px 0;
}

.gl-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: white;
    border: 1px solid rgba(215,122,0,0.25);
    border-radius: 20px;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    color: var(--gl-text, #2A2A28);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: all 0.15s;
}
.gl-filter-chip:hover {
    border-color: var(--gl-amber, #D77A00);
    box-shadow: 0 1px 4px rgba(215,122,0,0.12);
}

.gl-filter-chip .gl-chip-label {
    font-weight: 600;
    color: var(--gl-amber, #D77A00);
}

.gl-filter-chip .gl-chip-value {
    font-family: var(--font-data, var(--font-mono));
    font-size: var(--font-size-xs);
}

.gl-filter-chip .gl-chip-remove {
    cursor: pointer;
    opacity: 0.4;
    font-size: 15px;
    line-height: 1;
    margin-left: 2px;
    transition: opacity 0.1s;
}
.gl-filter-chip .gl-chip-remove:hover {
    opacity: 1;
    color: var(--color-error, #C94A1A);
}

/* ── Shortcut chip groups ───────────────────────────────────────────────── */

.gl-shortcut-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius, 8px);
    margin-bottom: 12px;
}

.gl-shortcut-group-label {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--gl-text-mid, #5C5C59);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gl-shortcut-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gl-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: rgba(215,122,0,0.08);
    border: 1.5px solid var(--gl-amber, #D77A00);
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gl-amber, #D77A00);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.gl-shortcut:hover {
    background: var(--gl-amber, #D77A00);
    color: #fff;
    box-shadow: 0 2px 8px rgba(215,122,0,0.25);
}
.gl-shortcut.active {
    background: var(--gl-amber, #D77A00);
    color: #fff;
    border-color: var(--gl-amber-dk, #B56600);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(215,122,0,0.3);
}

/* ── Add filter button ──────────────────────────────────────────────────── */

.gl-filter-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border: 1.5px dashed rgba(215,122,0,0.4);
    border-radius: 8px;
    background: transparent;
    color: var(--gl-text-mid, #5C5C59);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}
.gl-filter-add:hover {
    border-color: var(--gl-amber, #D77A00);
    color: var(--gl-amber, #D77A00);
    background: rgba(215,122,0,0.04);
}

/* ── Field picker popover ───────────────────────────────────────────────── */

.gl-filter-popover {
    position: fixed;
    z-index: 200;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 8px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    min-width: 280px;
    max-width: 360px;
    max-height: 460px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Wider mode used for searchable value pickers (industries, sectors, etc.) */
.gl-filter-popover.gl-filter-popover-wide {
    min-width: 420px;
    max-width: 460px;
    max-height: 560px;
}

.gl-filter-popover-search {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.gl-filter-popover-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    background: var(--color-bg, #CECECB);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.gl-filter-popover-search input::placeholder {
    color: var(--gl-text-mid, #5C5C59);
}
.gl-filter-popover-search input:focus {
    border-color: var(--gl-amber, #D77A00);
    box-shadow: 0 0 0 2px rgba(215,122,0,0.12);
    background: white;
}

#gl-pop-items {
    overflow-y: auto;
    flex: 1;
    padding: 4px 0;
}

.gl-filter-popover-item {
    padding: 8px 16px;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    color: var(--gl-text, #2A2A28);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    border-left: 3px solid transparent;
}
.gl-filter-popover-item:hover {
    background: rgba(215,122,0,0.06);
    color: var(--gl-amber, #D77A00);
    border-left-color: var(--gl-amber, #D77A00);
}

.gl-filter-popover-cat {
    padding: 12px 16px 4px;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    color: var(--gl-text-mid, #5C5C59);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.gl-filter-popover-cat:first-child {
    padding-top: 8px;
}

/* ── Value input step inside popover ────────────────────────────────────── */

#gl-pop-value {
    border-top: 1px solid var(--color-border-light);
}

.gl-filter-value-row {
    padding: 12px 14px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.gl-filter-value-row select,
.gl-filter-value-row input {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    background: var(--color-bg, #CECECB);
    color: var(--color-text);
    flex: 1;
    min-width: 0;
}
.gl-filter-value-row select:focus,
.gl-filter-value-row input:focus {
    outline: none;
    border-color: var(--gl-amber, #D77A00);
    box-shadow: 0 0 0 2px rgba(215,122,0,0.12);
    background: white;
}

.gl-filter-value-row .btn {
    flex-shrink: 0;
}

/* ── Taxonomy value picker (sector / industry typeahead) ───────────────── */

.gl-tx-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-subtle, #F7F6F2);
    flex-shrink: 0;
}

.gl-tx-back {
    background: none;
    border: none;
    color: var(--gl-text-mid, #5C5C59);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}
.gl-tx-back:hover {
    background: rgba(0,0,0,0.05);
    color: var(--gl-amber, #D77A00);
}

.gl-tx-title {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--gl-amber, #D77A00);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    flex: 1;
}

.gl-tx-scope-note {
    padding: 8px 14px;
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    color: var(--gl-text-mid, #5C5C59);
    background: rgba(215,122,0,0.06);
    border-bottom: 1px solid var(--color-border-light);
}

.gl-tx-input-row {
    padding: 10px 14px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.gl-tx-input-row select,
.gl-tx-input-row input {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    background: var(--color-bg, #CECECB);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.gl-tx-input-row input {
    flex: 1;
    min-width: 0;
}
.gl-tx-input-row input:focus {
    border-color: var(--gl-amber, #D77A00);
    box-shadow: 0 0 0 2px rgba(215,122,0,0.12);
    background: white;
}

.gl-tx-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    min-height: 200px;
}

.gl-tx-empty {
    padding: 24px 16px;
    color: var(--gl-text-mid, #5C5C59);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    text-align: center;
}

.gl-tx-opt {
    padding: 8px 16px;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    color: var(--gl-text, #2A2A28);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    border-left: 3px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.gl-tx-opt:hover,
.gl-tx-opt.gl-tx-opt-active {
    background: rgba(215,122,0,0.06);
    color: var(--gl-amber, #D77A00);
    border-left-color: var(--gl-amber, #D77A00);
}
.gl-tx-opt-meta {
    font-size: 11px;
    color: var(--gl-text-mid, #5C5C59);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}
.gl-tx-opt:hover .gl-tx-opt-meta,
.gl-tx-opt.gl-tx-opt-active .gl-tx-opt-meta {
    color: var(--gl-amber, #D77A00);
    opacity: 0.7;
}

.gl-tx-footer {
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-subtle, #F7F6F2);
    flex-shrink: 0;
    gap: 8px;
}
.gl-tx-selected {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    color: var(--gl-text-mid, #5C5C59);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gl-tx-selected strong {
    color: var(--gl-text, #2A2A28);
}

/* ── Active filter label ────────────────────────────────────────────────── */

.gl-active-label {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--gl-text-mid, #5C5C59);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

/* ── Preview count ──────────────────────────────────────────────────────── */

.gl-filter-preview {
    margin-top: 10px;
    padding: 10px 14px;
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius, 8px);
    font-size: var(--font-size-sm);
    font-family: var(--font-ui);
    color: var(--gl-text, #2A2A28);
}
.gl-filter-preview:empty { display: none; }
.gl-filter-preview strong {
    color: var(--gl-amber, #D77A00);
    font-weight: 700;
}

/* ── Preset actions row ─────────────────────────────────────────────────── */

.gl-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
}

/* ── Toolbar / Controls Bar ─────────────────────────────────────────────── */

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 12px;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.state-selector select {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-ui);
    background: white;
}


/* ── Pagination ─────────────────────────────────────────────────────────── */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid var(--color-border-light);
    margin-top: 4px;
}

.pagination-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-controls select {
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-family: var(--font-ui);
    background: white;
}

.page-btn {
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: white;
    font-size: var(--font-size-xs);
    cursor: pointer;
    color: var(--color-text);
}
.page-btn:hover:not(:disabled) {
    background: var(--color-bg);
}
.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ── Selection Bar (fixed bottom) ───────────────────────────────────────── */

.selection-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--color-navy);
    color: white;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
    transform: translateY(100%);
    transition: transform 0.2s ease;
}

.selection-bar.visible {
    transform: translateY(0);
}

.selection-bar .selection-count {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.selection-bar .selection-actions {
    display: flex;
    gap: 8px;
}

.selection-bar .btn {
    font-size: var(--font-size-xs);
}

.selection-bar .btn-export {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}
.selection-bar .btn-export:hover {
    background: var(--color-accent-hover);
}

.selection-bar .btn-enrich {
    background: #10b981;
    color: white;
    border-color: #10b981;
}
.selection-bar .btn-enrich:hover {
    background: #059669;
}

.selection-bar .btn-hubspot {
    background: #ff7a59;
    color: white;
    border-color: #ff7a59;
}
.selection-bar .btn-hubspot:hover {
    background: #e5683f;
}

/* Push to CRM destination picker (modal) */
.crm-destinations {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}
.crm-destination {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border, #d5d5d2);
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
}
.crm-destination:has(input:checked) {
    border-color: #D77A00;
    background: rgba(215, 122, 0, 0.06);
}
.crm-destination .crm-provider {
    color: var(--text-secondary, #6b6b68);
    font-size: 14px;
}

.selection-bar .btn-clear-selection {
    background: transparent;
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.25);
}
.selection-bar .btn-clear-selection:hover {
    color: white;
}


/* ── Detail Page ────────────────────────────────────────────────────────── */

.detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.detail-header h1 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: 4px;
}

.detail-header .detail-meta {
    display: flex;
    gap: 12px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.detail-header .detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.detail-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.contact-field:last-child {
    border-bottom: none;
}

.contact-field-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.contact-field-value {
    font-size: var(--font-size-md);
    font-family: var(--font-mono);
    word-break: break-all;
}

.contact-field-value a {
    color: var(--color-accent);
}


/* ── Provenance Table ───────────────────────────────────────────────────── */

.provenance-group-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    padding: 8px 12px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
}

.license-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Provenance Method badge — how an attribute was derived. "AI" = the LLM
   teacher (amber, brand-forward); "Rules" = the free deterministic engine. */
.method-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.method-badge.ai {
    background: var(--gl-amber, #D77A00);
    color: #fff;
}

.method-badge.rules {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-muted, #667085);
}

.license-badge.public {
    background: #dcfce7;
    color: #166534;
}

.license-badge.commercial {
    background: #fef3c7;
    color: #92400e;
}


/* ── Status Badges ──────────────────────────────────────────────────────── */

.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge.running,
.status-badge.in_progress {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-badge.completed,
.status-badge.success {
    background: #dcfce7;
    color: #166534;
}

.status-badge.failed,
.status-badge.error {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.pending {
    background: #f3f4f6;
    color: #6b7280;
}

.pipeline-error-msg {
    font-size: 0.7rem;
    color: #991b1b;
    margin-top: 4px;
    white-space: normal;
    word-break: break-word;
}

.stage-progress-wrap {
    margin-top: 5px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    width: 100px;
}

.stage-progress-bar {
    height: 100%;
    background: var(--color-primary, #3b82f6);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.stage-progress-label {
    color: #6b7280;
    margin-top: 2px;
}

.btn-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.btn-danger:hover {
    background: #fca5a5;
}

.status-badge.cancelled {
    background: #f3f4f6;
    color: #374151;
}


/* ── Pipeline Trigger Form (redesigned) ────────────────────────────────── */

.trigger-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid var(--color-border-light);
}

.trigger-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trigger-state-select {
    padding: 10px 20px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: var(--font-size-lg);
    font-weight: 600;
    background: white;
    color: var(--gl-text, #2A2A28);
    cursor: pointer;
    min-width: 180px;
}
.trigger-state-select:focus {
    outline: none;
    border-color: var(--gl-amber, #D77A00);
    box-shadow: 0 0 0 2px rgba(215,122,0,0.12);
}

.trigger-header-row .btn-primary {
    padding: 12px 32px;
    font-size: var(--font-size-md);
    font-weight: 600;
    border-radius: 8px;
}

.trigger-body {
    padding: 0 32px 32px;
}

.trigger-section {
    padding: 24px 0 20px;
    border-bottom: 1px solid var(--color-border-light);
}
.trigger-section:last-child {
    border-bottom: none;
}

.trigger-section-label {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--gl-text-mid, #5C5C59);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
}

.trigger-stage-toggle {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.trigger-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--gl-text, #2A2A28);
    cursor: pointer;
}
.trigger-radio input[type="radio"] {
    accent-color: var(--gl-amber, #D77A00);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#trigger-stages-detail {
    margin-top: 16px;
    padding: 16px 20px;
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius, 8px);
}

#trigger-stages-detail .stages-checkboxes {
    gap: 14px;
}

#trigger-stages-detail .stage-check {
    font-size: var(--font-size-sm);
}

#trigger-stages-detail input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.trigger-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.trigger-date-label {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--gl-text-mid, #5C5C59);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-right: 4px;
}
.trigger-date-sep {
    font-size: var(--font-size-sm);
    color: var(--gl-text-mid, #5C5C59);
}
.trigger-date-row input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    background: white;
    color: var(--gl-text);
}
.trigger-date-row input[type="date"]:focus {
    outline: none;
    border-color: var(--gl-amber, #D77A00);
    box-shadow: 0 0 0 2px rgba(215,122,0,0.12);
}

/* ── Flatpickr — GoodLeads skin (shared date / date-range picker) ────────────
   One themed picker for every date input: filter popover + pull dates. Amber
   selection, warm-gray surface, our radii + fonts. Overrides flatpickr 4.6. */
.gl-date-input {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    background: #fff;
    color: var(--gl-text);
    min-width: 180px;
}
.gl-date-input:focus {
    outline: none;
    border-color: var(--gl-amber, #D77A00);
    box-shadow: 0 0 0 2px rgba(215,122,0,0.12);
}
.flatpickr-calendar {
    background: #ECECE8;
    border: 0.5px solid rgba(42,42,40,0.14);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(37,37,35,0.16);
    font-family: var(--font-ui);
    padding: 4px;
}
.flatpickr-calendar.hasTime .flatpickr-time { border-top-color: rgba(42,42,40,0.1); }
.flatpickr-months { padding-top: 4px; }
.flatpickr-current-month, .flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: 13px; font-weight: 500; color: var(--gl-text);
}
.flatpickr-current-month input.cur-year { font-weight: 500; color: var(--gl-text); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--gl-text-mid, #5C5C59); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--gl-amber, #D77A00); }
span.flatpickr-weekday { color: #8A8A85; font-size: 11px; font-weight: 500; text-transform: uppercase; }
.flatpickr-day {
    color: var(--gl-text); border-radius: 7px; border: 1px solid transparent;
    font-size: 12.5px; height: 32px; line-height: 32px;
    /* No max-width narrower than flatpickr's 39px: .dayContainer is a fixed
       307.875px flex-wrap grid, and narrower cells let 8 days fit per row,
       breaking weekday alignment (July 6 rendered under SAT). */
}
/* flatpickr pads multi-month grids with out-of-month days classed `hidden`,
   relying on visibility:hidden so they keep their grid slots. Our global
   `.hidden { display:none !important }` utility would collapse them and
   shift every month's day 1 to the Sunday column — re-assert flatpickr's
   behavior with higher specificity. */
.flatpickr-day.hidden { display: block !important; visibility: hidden; }
.flatpickr-day:hover, .flatpickr-day:focus { background: rgba(42,42,40,0.07); border-color: transparent; }
.flatpickr-day.today { border-color: rgba(215,122,0,0.45); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled { color: #B4B2A9; }
.flatpickr-day.inRange, .flatpickr-day.inRange:hover {
    background: rgba(215,122,0,0.15); border-color: transparent; border-radius: 0;
    box-shadow: -5px 0 0 rgba(215,122,0,0.15), 5px 0 0 rgba(215,122,0,0.15);
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
    background: var(--gl-amber, #D77A00); border-color: var(--gl-amber, #D77A00);
    color: #fff; font-weight: 500; box-shadow: none;
}
.flatpickr-day.startRange { border-radius: 7px 0 0 7px; }
.flatpickr-day.endRange { border-radius: 0 7px 7px 0; }
.flatpickr-day.startRange.endRange { border-radius: 7px; }
/* Presets rail injected into the calendar (matches the mockup).
   The calendar is a flex ROW: [ presets rail | .gl-fp-cal column ]. The
   column re-stacks flatpickr's month header above the day grid (app.js
   onReady moves them in) so the month/year label is never crushed.
   width:auto !important overrides flatpickr's inline 2-month pixel width, which
   otherwise gets shared with the rail and clips the second month. The rail and
   calendar column each size to their own content (flex:0 0 auto). */
.flatpickr-calendar.gl-has-presets { display: flex; align-items: stretch; width: auto !important; }
.flatpickr-calendar.gl-has-presets .gl-fp-presets,
.flatpickr-calendar.gl-has-presets .gl-fp-cal { flex: 0 0 auto; }
.flatpickr-calendar.gl-has-presets .gl-fp-cal { display: flex; flex-direction: column; }
/* Header spans both months; the day grid keeps its natural (two-month) width. */
.flatpickr-calendar.gl-has-presets .flatpickr-months { width: 100%; }
.gl-fp-presets {
    display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 10px 8px;
    border-right: 0.5px solid rgba(42,42,40,0.1);
}
.flatpickr-calendar.gl-has-presets .gl-fp-presets { flex: 0 0 140px; }
.gl-fp-presets .gl-fp-preset {
    text-align: left; padding: 7px 10px; font-size: 12px; font-family: var(--font-ui);
    color: var(--gl-text); background: transparent; cursor: pointer;
    border: 0.5px solid rgba(42,42,40,0.12); border-radius: 8px;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.gl-fp-presets .gl-fp-preset:hover { border-color: var(--gl-amber, #D77A00); color: var(--gl-amber-dk, #B56600); background: rgba(215,122,0,0.08); }
.gl-fp-presets .gl-fp-preset-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #8A8A85; margin: 2px 2px 4px; }
.gl-fp-presets .gl-fp-preset-hint {
    margin-top: auto; padding: 8px 2px 2px; font-size: 10.5px; line-height: 1.45;
    color: #9A988F; border-top: 0.5px solid rgba(42,42,40,0.08);
}
/* Larger, easier-to-hit month nav arrows; give the static month label room. */
.flatpickr-calendar.gl-has-presets .flatpickr-months { padding: 4px 2px 6px; align-items: center; }
.flatpickr-calendar.gl-has-presets .flatpickr-prev-month,
.flatpickr-calendar.gl-has-presets .flatpickr-next-month {
    padding: 4px 8px; height: auto; border-radius: 7px;
}
.flatpickr-calendar.gl-has-presets .flatpickr-prev-month:hover,
.flatpickr-calendar.gl-has-presets .flatpickr-next-month:hover { background: rgba(42,42,40,0.06); }

/* Advanced options (collapsible) */
.trigger-advanced {
    padding: 16px 0 0;
}

.trigger-summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
}
.trigger-summary::before {
    content: '\25B8';
    font-size: 12px;
    color: var(--gl-text-mid, #5C5C59);
    transition: transform 0.15s;
}
.trigger-advanced[open] .trigger-summary::before {
    transform: rotate(90deg);
}
.trigger-summary::-webkit-details-marker { display: none; }

/* Texas weekly-file download runbook — collapsed by default, opens in place */
.tx-runbook {
    margin-top: 12px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius, 8px);
    background: rgba(215,122,0,0.04);
    overflow: hidden;
}
.tx-runbook-summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gl-text, #2A2A28);
}
.tx-runbook-summary::-webkit-details-marker { display: none; }
.tx-runbook-summary::before {
    content: '\25B8';
    font-size: 12px;
    color: var(--gl-amber, #D77A00);
    transition: transform 0.15s;
}
.tx-runbook[open] .tx-runbook-summary::before { transform: rotate(90deg); }
.tx-runbook-meta {
    margin-left: auto;
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--gl-text-mid, #5C5C59);
}
.tx-runbook-body {
    padding: 4px 16px 16px;
    border-top: 1px solid var(--color-border-light);
}
.tx-runbook-cta {
    display: inline-flex;
    align-items: center;
    margin: 14px 0 4px;
    padding: 8px 14px;
    background: var(--gl-amber, #D77A00);
    color: #fff;
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: 6px;
}
.tx-runbook-cta:hover { background: var(--gl-amber-dk, #B56600); }
.tx-runbook-steps {
    margin: 12px 0 0;
    padding-left: 20px;
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: var(--gl-text, #2A2A28);
}
.tx-runbook-steps strong { font-weight: 500; }
.tx-runbook-steps code,
.tx-runbook-trap code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--font-size-xs);
    background: rgba(42,42,40,0.07);
    padding: 1px 5px;
    border-radius: 3px;
}
.tx-runbook-trap {
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(215,122,0,0.08);
    border-left: 3px solid var(--gl-amber, #D77A00);
    border-radius: 0 4px 4px 0;
    font-size: var(--font-size-xs);
    line-height: 1.6;
    color: #412402;
}
.tx-runbook-trap strong { font-weight: 500; }

.trigger-advanced-body {
    margin-top: 12px;
    padding: 12px 16px;
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius, 8px);
    display: flex;
    align-items: center;
    gap: 12px;
}

.trigger-field-label {
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gl-text, #2A2A28);
    white-space: nowrap;
}

.trigger-input-sm {
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    background: white;
    color: var(--gl-text);
    width: 120px;
}
.trigger-input-sm:focus {
    outline: none;
    border-color: var(--gl-amber, #D77A00);
    box-shadow: 0 0 0 2px rgba(215,122,0,0.12);
}

/* Legacy trigger-form kept for backward compat */
.trigger-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 16px 18px;
    flex-wrap: wrap;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-group select,
.form-group input[type="text"] {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-ui);
    background: white;
}

.stages-checkboxes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.stage-check {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
}

.stage-check input[type="checkbox"] {
    width: 13px;
    height: 13px;
}


/* ── Send to Pipeline: per-state fan-out breakdown ───────────────────────── */
/* A cross-state selection runs as one job per state. These rows are the
   confirm step for that spend: the operator approves the SHAPE of it
   (CO 41 · FL 28 · VA 9), and every state that will NOT run says so here
   rather than only turning up in the result list afterwards. */

.stp-breakdown {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.stp-legs {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stp-leg {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: var(--font-size-sm);
}

.stp-leg-state {
    font-family: var(--font-mono);
    font-weight: 600;
    min-width: 2.5em;
}

.stp-leg-count {
    font-variant-numeric: tabular-nums;
    min-width: 4em;
}

.stp-leg-status {
    color: var(--color-text-muted);
}

.stp-leg-skip {
    color: var(--color-text-muted);
    font-style: italic;
}

.stp-leg-detail {
    margin: 0 0 4px calc(2.5em + 10px);
}

/* Only the failure states get colour — a started leg is the expected case and
   does not need to shout. */
.stp-leg-error .stp-leg-status {
    color: var(--color-error);
}

.stp-leg-blocked .stp-leg-status,
.stp-leg-unavailable .stp-leg-status,
.stp-leg-skipped .stp-leg-status {
    color: var(--color-warning);
}


/* ── Pipeline Job Cards ──────────────────────────────────────────────────── */

.pipeline-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
}

/* ─── Scope Picker ─────────────────────────────────────────────────── */
.scope-mode-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.scope-tab {
    padding: 6px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface); cursor: pointer; font-size: 13px; font-weight: 500;
    transition: all 0.15s;
}
.scope-tab:hover { background: var(--color-bg); }
.scope-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.scope-panel { margin-top: 8px; }
.scope-info { color: var(--color-text-secondary); font-size: 13px; padding: 8px 0; }

/* (Old scope filter rows removed — replaced by gl-filter-* components) */
.preset-select { padding: 5px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; }

/* min-width + overflow-wrap: a scope containing an unbreakable token (UUID
   list, long URL) must wrap inside the flex row, never widen it — a blown row
   pushes the View leads / Download actions past the card edge. */
.pipeline-job-scope { margin-top: 2px; min-width: 0; overflow-wrap: anywhere; }

.pipeline-job-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: box-shadow 0.15s;
}

.pipeline-job-card.is-expanded {
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.pipeline-job-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    background: var(--color-surface);
    user-select: none;
}

.pipeline-job-header:hover {
    background: var(--color-bg);
}

.pipeline-job-card.is-expanded .pipeline-job-header {
    border-bottom: 1px solid var(--color-border-light);
}

.pipeline-job-chevron {
    font-size: 13px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    width: 14px;
}

.pipeline-job-primary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 40%;
}

/* A failed job's error (e.g. a CannotPullContainerError with a long unbroken
   registry URL) wraps on its own line inside the cell. Unwrapped, it widened
   this cell and squeezed the scope text into a column a few px wide — one
   card grew ~3,000px tall and pushed every other job off the screen. */
.pipeline-job-primary .pipeline-error-msg {
    flex-basis: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pipeline-job-state {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.pipeline-job-stages-label {
    flex: 1;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
}

.pipeline-job-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.pipeline-job-id {
    color: var(--color-text-muted);
}

.pipeline-job-body {
    background: var(--color-bg);
    padding: 12px 14px 12px 40px;
}

.pipeline-stages-table {
    width: 100%;
    font-size: var(--font-size-xs);
}

.pipeline-stages-table th {
    background: transparent;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 10px;
    padding: 4px 10px;
    text-align: left;
}

.pipeline-stages-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--color-border-light);
}

.pipeline-stages-table tbody tr:last-child td {
    border-bottom: none;
}

.pipeline-stages-table tr.pipeline-stage-detail-row td.pipeline-stage-detail {
    padding: 4px 10px 8px 24px;
    color: var(--color-text-muted, #555);
    background: var(--color-bg-subtle, rgba(0,0,0,0.015));
    font-size: 11px;
    line-height: 1.5;
    border-bottom: 1px solid var(--color-border-light);
}

.pipeline-stages-table tr.pipeline-stage-detail-row td.pipeline-stage-detail strong {
    color: var(--color-text, #111);
    font-weight: 600;
}


/* ── Loading & Empty States ─────────────────────────────────────────────── */

.loading-full {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
}

.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-right: 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Browse loading feedback ─────────────────────────────────────────────
   Progress bar across the top of the table card, stale rows dimmed under a
   shimmer, and a dark status pill (sticky, so it stays in view however far
   the table is scrolled) that narrates the wait. States on the card:
   .is-loading → .is-done (green landing, result count) | .is-error (fire). */

.browse-table-card { position: relative; }

.browse-progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    z-index: 6;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
    background: rgba(215, 122, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.browse-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--gl-amber-dk, #B56600), var(--gl-amber, #D77A00) 60%, #F2A33A);
    box-shadow: 0 0 10px rgba(215, 122, 0, 0.55);
    transition: width 0.35s ease-out;
}
.browse-table-card.is-loading .browse-progress { opacity: 1; }
.browse-table-card.is-loading .browse-progress-bar {
    animation: browse-progress-crawl 14s cubic-bezier(0.1, 0.7, 0.25, 1) forwards;
}
@keyframes browse-progress-crawl {
    0%   { width: 0; }
    12%  { width: 38%; }
    35%  { width: 66%; }
    100% { width: 93%; }
}
.browse-table-card.is-done .browse-progress,
.browse-table-card.is-error .browse-progress {
    opacity: 0;
    transition: opacity 0.5s ease 0.6s;
}
.browse-table-card.is-done .browse-progress-bar { width: 100%; }
.browse-table-card.is-error .browse-progress-bar {
    width: 100%;
    background: var(--gl-fire, #C94A1A);
    box-shadow: none;
}

/* Stale rows stay readable but clearly "old" while the new set is fetched. */
.browse-table-card .table-wrapper { position: relative; }
.browse-table-card #leads-tbody { transition: opacity 0.2s ease; }
.browse-table-card.is-loading #leads-tbody { opacity: 0.42; }
.browse-table-card.is-loading .table-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
    background-size: 220% 100%;
    animation: browse-shimmer 1.5s linear infinite;
}
@keyframes browse-shimmer {
    from { background-position: 180% 0; }
    to   { background-position: -80% 0; }
}

/* Status pill — sticky under the top bar so it never scrolls out of view. */
.browse-loading-anchor {
    position: sticky;
    top: calc(var(--header-height, 64px) + 12px);
    height: 0;
    z-index: 7;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.browse-loading-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 72px;
    padding: 11px 20px;
    max-width: min(92%, 680px);
    border-radius: 999px;
    background: #252523;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.3s ease;
}
.browse-table-card.is-loading .browse-loading-pill,
.browse-table-card.is-done .browse-loading-pill,
.browse-table-card.is-error .browse-loading-pill {
    opacity: 1;
    transform: none;
}
.browse-loading-dot {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--gl-amber, #D77A00);
    animation: browse-dot-pulse 1.2s ease-out infinite;
}
@keyframes browse-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(215, 122, 0, 0.75); }
    100% { box-shadow: 0 0 0 11px rgba(215, 122, 0, 0); }
}
.browse-loading-pill[data-phase="slow"] { background: #3A2A12; }
.browse-loading-pill[data-phase="slow"] .browse-loading-dot { animation-duration: 0.7s; }
.browse-loading-pill[data-phase="done"] { background: #1E4D2B; }
.browse-loading-pill[data-phase="done"] .browse-loading-dot {
    background: #5BD37A;
    animation: none;
}
.browse-loading-pill[data-phase="done"] .browse-loading-msg::before { content: '\2713  '; }
.browse-loading-pill[data-phase="error"] { background: #5A2416; }
.browse-loading-pill[data-phase="error"] .browse-loading-dot {
    background: #FF7A5C;
    animation: none;
}
.browse-loading-time {
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    opacity: 0.72;
}
.browse-loading-time:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
    .browse-table-card.is-loading .browse-progress-bar { animation: none; width: 60%; }
    .browse-table-card.is-loading .table-wrapper::after { animation: none; background: none; }
    .browse-loading-dot { animation: none; }
    .browse-loading-pill { transition: opacity 0.2s ease; transform: none; }
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
}

.empty-state h3 {
    font-size: var(--font-size-md);
    margin-bottom: 6px;
    color: var(--color-text);
}

.empty-state p {
    font-size: var(--font-size-sm);
}

.error-message {
    padding: 12px 16px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    color: #991b1b;
    font-size: var(--font-size-sm);
    margin: 8px 0;
}

.warning-message {
    padding: 12px 16px;
    background: #fef9c3;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    color: #854d0e;
    font-size: var(--font-size-sm);
    margin: 8px 0;
}


/* ── Toast ──────────────────────────────────────────────────────────────── */

#toast-container {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 10px 16px;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.2s ease;
    max-width: 380px;
}

.toast.success {
    background: #166534;
    color: white;
}

.toast.error {
    background: #991b1b;
    color: white;
}

.toast.info {
    background: var(--color-navy);
    color: white;
}

@keyframes slideIn {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}


/* ── Modal / Dialog ─────────────────────────────────────────────────────── */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 380px;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border-light);
    font-weight: 600;
    font-size: var(--font-size-md);
}

.modal-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
}

.modal-body input[type="text"],
.modal-body input[type="password"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-mono);
    margin-top: 8px;
}

.modal-body input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(67,97,238,0.15);
}

.modal-body p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.modal-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}


/* ── Publish Status Panel ───────────────────────────────────────────────── */

.publish-results {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.publish-stat {
    text-align: center;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
}

.publish-stat .publish-stat-num {
    font-family: var(--font-mono);
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.publish-stat .publish-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
}


/* ── Back Link ──────────────────────────────────────────────────────────── */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.back-link:hover {
    color: var(--color-accent);
    text-decoration: none;
}


/* ── Section Title ──────────────────────────────────────────────────────── */

.section-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gl-text);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gl-amber);
}


/* ── Commerce free/paid boundary — masked contact lock icon ─────────────── */

.contact-lock {
    display: inline-block;
    margin-left: 4px;
    opacity: 0.7;
    cursor: help;
    font-size: 0.9em;
}
.contact-lock:hover { opacity: 1; }


/* ── Utility ────────────────────────────────────────────────────────────── */

.text-muted   { color: var(--color-text-muted); }
.text-mono    { font-family: var(--font-mono); }
.text-xs      { font-size: var(--font-size-xs); }
.text-sm      { font-size: var(--font-size-sm); }
.mt-4         { margin-top: 4px; }
.mt-8         { margin-top: 8px; }
.mt-16        { margin-top: 16px; }
.mb-8         { margin-bottom: 8px; }
.mb-16        { margin-bottom: 16px; }
.gap-8        { gap: 8px; }
.flex         { display: flex; }
.items-center { align-items: center; }
.hidden       { display: none !important; }


/* ── Dashboard Aggregate Bar ──────────────────────────────────────────── */

.dashboard-aggregate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 16px 24px;
    background: var(--gl-bg-darker);
    border-radius: var(--radius);
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.agg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.agg-value {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--gl-text-lite);
}

.agg-label {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--gl-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

/* Sprint 16 PR 4 — non-operating tile is clickable, agg-pct dims the percentage,
   agg-info renders the info circle next to the label. */
.agg-item-clickable {
    cursor: pointer;
    transition: opacity 0.15s;
}
.agg-item-clickable:hover {
    opacity: 0.85;
}
.agg-pct {
    font-size: 0.6em;
    font-weight: 600;
    color: var(--gl-text-dim);
    margin-left: 4px;
}
.agg-info {
    font-size: 0.7em;
    color: var(--gl-text-dim);
    margin-left: 4px;
    cursor: help;
}
.state-total-secondary {
    color: var(--gl-text-dim);
    font-weight: 400;
    margin-left: 4px;
    cursor: help;
}


/* ── Clickable Tier Rows ──────────────────────────────────────────────── */

.tier-row-clickable {
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 3px 6px;
    margin: -3px -6px;
    transition: background 0.15s;
}

.tier-row-clickable:hover {
    background: rgba(67,97,238,0.06);
}


/* ── Clickable Sector Pills ───────────────────────────────────────────── */

.sector-pill-clickable {
    cursor: pointer;
    transition: all 0.15s;
}

.sector-pill-clickable:hover {
    background: #dbeafe;
    border-color: var(--color-accent);
    color: var(--color-accent);
}


/* ── Select All Matching Banner ───────────────────────────────────────── */

.select-all-banner {
    padding: 10px 16px;
    background: #eef1ff;
    border: 1px solid #c7d2fe;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    text-align: center;
    margin-bottom: 8px;
}

.select-all-banner a {
    font-weight: 600;
    margin-left: 4px;
}


/* ── Pre-Action Summary ───────────────────────────────────────────────── */

.pre-action-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0 4px;
}

.pre-action-stat {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.pre-action-stat strong {
    font-family: var(--font-mono);
}


/* ── Copy Buttons ─────────────────────────────────────────────────────── */

.copy-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.copy-btn {
    opacity: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text-muted);
    padding: 1px 3px;
    border-radius: 3px;
    line-height: 1;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.copy-wrap:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--color-accent); background: var(--color-bg-secondary, rgba(0,0,0,0.06)); }
.copy-btn.copy-btn-ok { opacity: 1; color: #22c55e; }
.copy-btn-lg { font-size: 14px; }

/* ── GLID Reference Badges ────────────────────────────────────────────── */

.glid-ref {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--font-size-xs);
    color: var(--color-accent);
    letter-spacing: -0.2px;
}

.glid-suffix {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text-muted);
    letter-spacing: -0.2px;
}

/* ADR-059: business-origin label beside the name on the registration shapes */
.origin-badge {
    display: inline-block;
    font-size: 11px;
    line-height: 1.3;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 3px;
    border: 1px solid var(--color-border, rgba(42,42,40,0.14));
    background: rgba(42,42,40,0.06);
    color: var(--color-text-muted);
    vertical-align: middle;
    white-space: nowrap;
}

/* Detail page GLID display */
.detail-glid {
    margin-bottom: 6px;
}

.glid-ref-lg {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: -0.3px;
}

.glid-suffix-lg {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-left: 8px;
    padding: 2px 8px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    letter-spacing: -0.2px;
}


/* ── Also Owns Section (detail page) ──────────────────────────────────── */

.also-owns-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.also-owns-item:last-child {
    border-bottom: none;
}

.also-owns-item a {
    font-weight: 500;
    font-size: var(--font-size-sm);
}


/* ── Neighbors Panel (other entities at this address) ─────────────────── */

.card-count {
    font-size: var(--font-size-sm);
    color: var(--gl-text-dim, var(--color-text-dim));
    font-weight: 500;
}

.card-footer {
    padding: 10px 18px;
    border-top: 1px solid var(--color-border-light);
}

.neighbors-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 360px;
    overflow-y: auto;
    padding: 0;
}

.neighbor-item {
    padding: 8px 18px;
    border-bottom: 1px solid var(--color-border-light);
}

.neighbor-item:last-child {
    border-bottom: none;
}

.neighbor-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.neighbor-name {
    font-weight: 500;
    font-size: var(--font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.neighbor-name .glid-ref {
    font-family: var(--font-mono, monospace);
    font-size: var(--font-size-xs);
    color: var(--gl-text-dim, var(--color-text-dim));
    margin-right: 4px;
}

.neighbor-score {
    flex-shrink: 0;
}

.neighbor-row2 {
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── Responsive: auto-size dashboard grid ─────────────────────────────── */

@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-aggregate {
        flex-wrap: wrap;
        gap: 16px;
    }
}


/* ── Enrichment Preview ───────────────────────────────────────────────── */

.enrich-preview {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.enrich-section {
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 12px;
}

.enrich-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.enrich-section h4 {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.enrich-stat {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    padding: 2px 0;
}

.enrich-stat strong {
    font-family: var(--font-mono);
    font-weight: 600;
}

.enrich-stat.enrich-good strong {
    color: #10b981;
}

.enrich-stat.enrich-bad strong {
    color: #ef4444;
}

.enrich-stat.enrich-highlight {
    color: var(--color-accent);
    font-weight: 500;
}

.enrich-cost {
    background: var(--color-bg);
    padding: 12px;
    border-radius: 6px;
    border: none;
}

.enrich-total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-base);
}

.enrich-total strong {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    color: var(--color-text);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Intelligence Grid — Tiles + Chat Panel
   Ported from grid/grid.css, styled per GoodLeads Design Guide (3-30)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Intelligence Section Layout ────────────────────────────────────────── */

.intelligence-section {
    margin-top: 40px;
}

.intelligence-section .section-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gl-text-mid);
    margin-bottom: 16px;
}

.intelligence-section .section-label .rule {
    display: inline-block;
    width: 44px;
    height: 2px;
    background: var(--gl-amber);
    vertical-align: middle;
    margin-right: 12px;
}

/* ── Industry Word Cloud ────────────────────────────────────────────────── */

.industry-cloud-section {
    margin-top: 12px;
    margin-bottom: 32px;
}

.industry-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    background: var(--card-bg);
    border: 1px solid var(--gl-border);
    border-radius: var(--radius);
}

.cloud-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    border-radius: 20px;
    cursor: pointer;
    font-family: var(--font-body);
    color: var(--gl-text);
    background: rgba(206,206,203,0.12);
    border: 1px solid var(--gl-border);
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
    text-transform: capitalize;
    white-space: nowrap;
}

.cloud-chip:hover {
    background: rgba(215,122,0,0.1);
    border-color: var(--gl-amber);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.cloud-chip strong {
    font-family: var(--font-data);
    color: var(--gl-text-dim);
}

.cloud-chip.cloud-xl {
    font-size: 18px;
    font-weight: 700;
    padding: 10px 22px;
    background: rgba(215,122,0,0.1);
    border-color: rgba(215,122,0,0.25);
    color: var(--gl-amber-dk, #B56A00);
}
.cloud-chip.cloud-xl strong { color: var(--gl-amber); font-size: 16px; }

.cloud-chip.cloud-lg {
    font-size: 15px;
    font-weight: 600;
    padding: 8px 18px;
}
.cloud-chip.cloud-lg strong { font-size: 13px; }

.cloud-chip.cloud-md {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
}
.cloud-chip.cloud-md strong { font-size: 12px; }

.cloud-chip.cloud-sm {
    font-size: 12px;
    font-weight: 400;
    padding: 5px 12px;
}
.cloud-chip.cloud-sm strong { font-size: 11px; }

.cloud-chip.cloud-xs {
    font-size: 11px;
    font-weight: 400;
    padding: 4px 10px;
    opacity: 0.7;
}
.cloud-chip.cloud-xs strong { font-size: 10px; }

/* Anchor-based cloud chips (Inventory page) — kill the default link underline. */
a.cloud-chip { text-decoration: none; }

/* ── Inventory page (data-as-infographic) ──────────────────────────────── */

.inv-page { max-width: 1120px; }

.inv-sub {
    color: var(--gl-text-mid);
    font-size: 15px;
    line-height: 1.5;
    margin: -4px 0 28px;
    max-width: 760px;
}

/* Hero — a live coverage map: count-up + tagline on the left, a US map with
   the live states glowing amber on the right. */
.inv-hero {
    display: flex;
    align-items: stretch;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #2A2724 0%, #221d19 100%);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 300px;
}

.inv-hero-left {
    flex: 1 1 50%;
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inv-hero-value {
    font-family: var(--font-data);
    font-size: 68px;
    font-weight: 600;
    line-height: 1;
    color: var(--gl-amber);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.inv-hero-label {
    color: #E7E2DC;
    font-size: 16px;
    margin-top: 12px;
}

.inv-hero-tagline {
    color: #fff;
    font-family: var(--font-display, 'Outfit', sans-serif);
    font-weight: 700;
    font-size: 22px;
    margin-top: 4px;
    letter-spacing: -0.01em;
}

.inv-hero-stats2 {
    display: flex;
    gap: 34px;
    margin-top: 26px;
    flex-wrap: wrap;
}
.inv-stat2 { display: flex; flex-direction: column; }
.inv-stat2-val {
    font-family: var(--font-data);
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.inv-stat2-lbl { color: #B7AFA6; font-size: 12px; margin-top: 2px; }

.inv-hero-map {
    flex: 1 1 50%;
    position: relative;
    min-height: 300px;
}
.inv-hero-map svg { width: 100%; height: 100%; display: block; }

.inv-body { margin-bottom: 28px; }

/* Freshness windows */
.inv-windows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.inv-window-card {
    display: block;
    text-decoration: none;
    background: var(--card-bg);
    border: 1px solid var(--gl-border);
    border-left: 4px solid var(--gl-amber);
    border-radius: var(--radius);
    padding: 24px;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.inv-window-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    border-color: var(--gl-amber);
}
.inv-window-count {
    font-family: var(--font-data);
    font-size: 32px;
    font-weight: 700;
    color: var(--gl-amber-dk, #B56600);
    line-height: 1;
}
.inv-window-label {
    font-weight: 600;
    color: var(--gl-text);
    margin-top: 10px;
    font-size: 15px;
}
.inv-window-sub { color: var(--gl-text-mid); font-size: 13px; margin-top: 2px; }
.inv-window-dates {
    font-family: var(--font-data);
    font-size: 11px;
    color: var(--gl-text-mid);
    margin-top: 12px;
    opacity: 0.75;
}

/* Who-needs-it story rows */
.inv-who {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.inv-who-row {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    background: var(--card-bg);
    border: 1px solid var(--gl-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    transition: transform 0.12s, border-color 0.12s;
}
.inv-who-row:hover { transform: translateX(3px); border-color: var(--gl-amber); }
.inv-who-count {
    font-family: var(--font-data);
    font-size: 22px;
    font-weight: 700;
    color: var(--gl-amber-dk, #B56600);
    min-width: 90px;
}
.inv-who-text { flex: 1; color: var(--gl-text); font-size: 15px; }
.inv-who-text strong { text-transform: capitalize; }
.inv-who-offer { color: var(--gl-text-mid); font-weight: 500; }
.inv-who-arrow { color: var(--gl-amber); font-size: 20px; }

/* Hottest-pockets leaderboard — ranked industry × metro cohorts */
.inv-combos {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--gl-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.inv-combo-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    text-decoration: none;
    border-bottom: 1px solid var(--gl-border);
    transition: background 0.12s;
}
.inv-combo-row:last-child { border-bottom: none; }
.inv-combo-row:hover { background: rgba(215,122,0,0.06); }
.inv-combo-rank {
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 600;
    color: var(--gl-text-dim);
    min-width: 22px;
    text-align: right;
}
.inv-combo-label {
    flex: 0 0 38%;
    color: var(--gl-text);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inv-combo-label strong { font-weight: 600; }
.inv-combo-sep { color: var(--gl-amber); margin: 0 4px; }
.inv-combo-bar-wrap {
    flex: 1;
    height: 8px;
    background: rgba(0,0,0,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.inv-combo-bar {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--gl-amber-dk), var(--gl-amber));
}
.inv-combo-count {
    font-family: var(--font-data);
    font-weight: 600;
    color: var(--gl-text);
    min-width: 64px;
    text-align: right;
}
.inv-combo-arrow { color: var(--gl-amber); font-size: 18px; min-width: 16px; }
@media (max-width: 860px) {
    .inv-combo-label { flex-basis: 52%; white-space: normal; }
    .inv-combo-bar-wrap { display: none; }
}

.inv-empty {
    color: var(--gl-text-mid);
    text-align: center;
    padding: 40px;
    background: var(--card-bg);
    border: 1px dashed var(--gl-border);
    border-radius: var(--radius);
}

/* CTA band */
.inv-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--gl-bg-alt);
    border: 1px solid var(--gl-border);
    border-radius: var(--radius);
    padding: 22px 26px;
}
.inv-cta-text { color: var(--gl-text-mid); font-size: 14px; max-width: 520px; }
.inv-cta-actions { display: flex; gap: 12px; }
.inv-cta-actions a { text-decoration: none; }

/* Sections — the scroll-through "report" */
.inv-section { margin-top: 56px; }
.inv-section-head { margin-bottom: 18px; }
.inv-kicker {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gl-amber);
}
.inv-section-title {
    font-family: var(--font-display, 'Outfit', sans-serif);
    font-size: 26px;
    font-weight: 700;
    color: var(--gl-text);
    margin: 6px 0 6px;
    letter-spacing: -0.01em;
}
.inv-section-sub {
    color: var(--gl-text-mid);
    font-size: 14.5px;
    line-height: 1.5;
    max-width: 760px;
    margin: 0;
}

/* Viz containers — charts size off these explicit heights */
.inv-viz {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--gl-border);
    border-radius: var(--radius);
    padding: 8px;
}
.inv-viz-tall  { height: 440px; }
.inv-viz-bubbles { height: 560px; }
.inv-viz-trend { height: 240px; margin-bottom: 16px; }
.inv-viz-cloud { height: 380px; margin-bottom: 16px; }
.inv-viz .inv-empty { border: none; background: transparent; }

/* Scroll-reveal — sections fade up as they enter the viewport */
.inv-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.inv-reveal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .inv-reveal { opacity: 1; transform: none; transition: none; }
}

.inv-cta { margin-top: 56px; }

@media (max-width: 860px) {
    .inv-hero { flex-direction: column; }
    .inv-hero-map { min-height: 240px; }
    .inv-windows { grid-template-columns: 1fr; }
    .inv-hero-value { font-size: 52px; }
    .inv-viz-tall { height: 360px; }
    .inv-viz-bubbles { height: 460px; }
}

/* ── Intelligence Tile Grid ────────────────────────────────────────────── */

.tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

@media (max-width: 1100px) {
    .tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .tile-grid { grid-template-columns: 1fr; }
}

/* ── Tile Cards ─────────────────────────────────────────────────────────── */

.tile {
    background: var(--gl-bg-darker);
    border: 1px solid rgba(232,232,228,0.06);
    border-bottom: 2px solid rgba(0,0,0,0.3);
    border-radius: var(--radius);
    padding: 24px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
    min-height: 170px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
}
.tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.15);
    border-color: rgba(215,122,0,0.2);
}

/* medium tiles no longer span 2 — all tiles same width for consistent grid */
/* .tile.medium { grid-column: span 2; } */

/* Tile header */
.tile-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.tile-icon {
    width: 20px;
    height: 20px;
    color: var(--gl-amber);
    flex-shrink: 0;
}
.tile-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--gl-amber);
    stroke-width: 1.75;
}

.tile-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gl-text-lite);
    flex: 1;
}

.tile-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tile-status-dot.healthy { background: var(--gl-amber); }
.tile-status-dot.warning { background: var(--gl-gold); }
.tile-status-dot.alert   { background: var(--gl-fire); }

/* Tile body — narrative */
.tile-headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--gl-text-lite);
    margin-bottom: 8px;
}

.tile-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.65;
    color: var(--gl-text-dim);
    flex: 1;
}

/* Tile footer — actions + chips */
.tile-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.tile-chip {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    color: var(--gl-amber);
    background: rgba(215,122,0,0.08);
    border: 1px solid rgba(215,122,0,0.2);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.tile-chip:hover {
    background: rgba(215,122,0,0.15);
}

/* Empty narrative state */
.tile-empty {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--gl-text-dim);
    font-style: italic;
}

/* Active press-down for all tiles */
.tile:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* LAUNCH tile specific */
.tile.launch {
    border-bottom: 2px solid rgba(215,122,0,0.15);
}
.tile.launch:hover {
    border-color: var(--gl-amber);
}
.tile.launch:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.tile.launch .tile-cta {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gl-amber);
    margin-top: auto;
    padding-top: 16px;
    transition: color 0.15s;
}
.tile.launch:hover .tile-cta {
    color: var(--gl-text-lite);
}

/* ── Chat Panel ─────────────────────────────────────────────────────────── */

.chat-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    height: 100vh;
    background: var(--gl-bg-dark);
    border-left: 1px solid rgba(232,232,228,0.08);
    display: flex;
    flex-direction: column;
    z-index: 200;
    transform: translateX(0);
    transition: transform 0.25s ease;
    box-shadow: -8px 0 32px rgba(0,0,0,0.3);
}
.chat-panel.hidden {
    transform: translateX(100%);
    pointer-events: none;
}

@media (max-width: 960px) {
    .chat-panel { width: 100%; }
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(232,232,228,0.08);
}

.chat-agent-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-agent-icon {
    width: 20px;
    height: 20px;
    color: var(--gl-amber);
}
.chat-agent-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--gl-amber);
    stroke-width: 1.75;
}

.chat-agent-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--gl-text-lite);
}

.chat-close {
    background: none;
    border: none;
    color: var(--gl-text-dim);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
}
.chat-close:hover { color: var(--gl-text-lite); }

/* Messages */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-msg {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chat-msg.agent {
    background: var(--gl-bg-darker);
    color: var(--gl-text-lite);
    align-self: flex-start;
    border: 1px solid rgba(232,232,228,0.06);
}

.chat-msg.user {
    background: var(--gl-amber);
    color: var(--gl-text);
    align-self: flex-end;
}

/* Browse links in agent messages */
.chat-msg a.browse-link {
    color: var(--gl-amber);
    text-decoration: underline;
    text-decoration-color: var(--gl-gold);
    cursor: pointer;
    font-weight: 500;
}
.chat-msg a.browse-link:hover {
    color: var(--gl-gold);
}

/* Follow-up chips in chat */
.chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 20px 8px;
}

/* Input area */
.chat-input-area {
    display: flex;
    gap: 8px;
    padding: 12px 20px 20px;
    border-top: 1px solid rgba(232,232,228,0.08);
}

.chat-input {
    flex: 1;
    background: var(--gl-bg-darker);
    border: 1px solid rgba(232,232,228,0.12);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--gl-text-lite);
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
}
.chat-input:focus {
    border-color: var(--gl-amber);
}
.chat-input::placeholder {
    color: var(--gl-text-dim);
}

.chat-send {
    background: var(--gl-amber);
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    color: var(--gl-text);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
}
.chat-send:hover { background: var(--gl-amber-dk); }

/* Minimized state — collapses to a small tab at bottom-right */
.chat-panel.minimized {
    height: auto;
    top: auto;
    bottom: 0;
    width: 320px;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: -4px -4px 20px rgba(0,0,0,0.3);
}
.chat-panel.minimized .chat-messages,
.chat-panel.minimized .chat-chips,
.chat-panel.minimized .chat-input-area {
    display: none;
}
.chat-panel.minimized .chat-header {
    cursor: pointer;
}

/* ── Chat Log Table ────────────────────────────────────────────────────── */

.chatlog-table {
    width: 100%;
    border-collapse: collapse;
}

.chatlog-table th {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gl-text-dim);
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gl-border);
}

.chatlog-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gl-border);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--gl-text);
    vertical-align: top;
    line-height: 1.5;
}

.chatlog-row {
    cursor: pointer;
    transition: background 0.15s;
}
.chatlog-row:hover {
    background: rgba(215,122,0,0.04);
}

.chatlog-ts {
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--gl-text-dim);
    white-space: nowrap;
}

.chatlog-agent {
    font-weight: 600;
    color: var(--gl-amber);
    white-space: nowrap;
}

.chatlog-user {
    color: var(--gl-text);
}

.chatlog-response {
    color: var(--gl-text-dim);
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chat log detail modal */
.chatlog-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chatlog-modal.hidden { display: none; }

.chatlog-modal-content {
    background: var(--card-bg);
    border: 1px solid var(--gl-border);
    border-radius: var(--radius);
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}

.chatlog-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gl-border);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--gl-text);
}

.chatlog-detail-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gl-border);
}
.chatlog-detail-section:last-child { border-bottom: none; }

.chatlog-detail-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gl-amber);
    margin-bottom: 8px;
}

.chatlog-detail-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.7;
    color: var(--gl-text);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ── Formation Services Page ────────────────────────────────────────────── */

.svc-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.svc-header {
    margin-bottom: 28px;
}

.svc-header .section-title {
    font-size: 22px;
    letter-spacing: 0.02em;
}

.svc-subtitle {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--gl-text-mid);
    margin-top: 8px;
    line-height: 1.5;
}

/* Summary cards grid — the SLA view */
.svc-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

@media (max-width: 1100px) {
    .svc-summary-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .svc-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

.svc-card {
    background: var(--gl-bg-darker);
    border: 1px solid rgba(232,232,228,0.06);
    border-radius: var(--radius);
    padding: 20px;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.svc-card:hover {
    transform: translateY(-2px);
    border-color: var(--gl-amber);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.svc-card.active {
    border-color: var(--gl-amber);
    box-shadow: 0 0 0 2px rgba(215,122,0,0.3);
}

.svc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.svc-card-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--gl-text-lite);
}

.svc-card-badge {
    font-family: var(--font-data);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
}

.svc-card-badge.direct {
    color: var(--gl-green);
    background: rgba(120,184,120,0.12);
    border: 1px solid rgba(120,184,120,0.25);
}

.svc-card-badge.ra_only {
    color: var(--gl-gold);
    background: rgba(197,154,46,0.12);
    border: 1px solid rgba(197,154,46,0.25);
}

.svc-card-total {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 32px;
    color: var(--gl-amber);
    line-height: 1;
}

.svc-card-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--gl-text-mid);
    margin-top: 4px;
    margin-bottom: 12px;
}

.svc-card-states {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.svc-state-pill {
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--gl-text-dim);
    background: rgba(232,232,228,0.06);
    padding: 3px 9px;
    border-radius: var(--radius-sm);
}

.svc-state-pill.empty {
    opacity: 0.35;
}

.svc-card-ra {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--gl-text-mid);
    margin-top: 8px;
    font-style: italic;
}

/* Coverage bar */
.svc-coverage-bar {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 20px 24px;
    background: var(--gl-bg-darker);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 28px;
    border: 1px solid rgba(232,232,228,0.06);
}

@media (max-width: 900px) {
    .svc-coverage-bar { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
    .svc-coverage-bar { grid-template-columns: repeat(2, 1fr); }
}

.svc-coverage-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.svc-cov-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    color: var(--gl-text-lite);
}

.svc-cov-label {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--gl-text-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Section styling */
.svc-section {
    margin-bottom: 32px;
}

.svc-section-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--gl-text-lite);
    margin-bottom: 6px;
}

.svc-section-desc {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--gl-text-mid);
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Confidence cards */
.svc-conf-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 1100px) {
    .svc-conf-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .svc-conf-grid { grid-template-columns: repeat(2, 1fr); }
}

.svc-conf-card {
    background: var(--gl-bg-darker);
    border: 1px solid rgba(232,232,228,0.06);
    border-radius: var(--radius);
    padding: 14px 18px;
}

.svc-conf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 6px;
}

.svc-conf-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--gl-text-lite);
    margin-bottom: 2px;
}

.svc-conf-count {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    color: var(--gl-amber);
}

.svc-conf-explain {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--gl-text-mid);
    line-height: 1.5;
    margin: 8px 0;
}

.svc-conf-states {
    display: flex;
    gap: 10px;
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--gl-text-mid);
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(232,232,228,0.06);
}

.svc-conf-inline {
    font-family: var(--font-data);
    font-size: 14px;
    font-weight: 500;
}

/* Registry groups */
.svc-registry-group {
    margin-bottom: 20px;
}

.svc-registry-header {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--gl-amber);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.svc-registry-count {
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--gl-text-mid);
    font-weight: 400;
}

/* Registry tables — dark theme, consistent with dashboard */
.svc-registry-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-body);
    font-size: 14px;
    background: var(--gl-bg-darker);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(232,232,228,0.06);
}

.svc-registry-table th {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gl-text-dim);
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(232,232,228,0.08);
    background: rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
}

.svc-registry-table td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(232,232,228,0.04);
    color: var(--gl-text-lite);
    font-size: 14px;
    vertical-align: middle;
}

.svc-registry-table td.text-mono {
    color: var(--gl-text-dim);
    font-size: 14px;
}

.svc-registry-table tbody tr {
    background: transparent;
    transition: background 0.12s ease;
}

.svc-registry-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.02);
}

.svc-registry-table tbody tr:hover {
    background: rgba(215,122,0,0.06);
}

.svc-evidence {
    font-size: 14px;
    color: var(--gl-text-dim);
    max-width: 360px;
    line-height: 1.5;
}

/* Tooltips */
.svc-tip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted rgba(232,232,228,0.3);
}

.svc-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--gl-bg-dark);
    color: var(--gl-text-lite);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.45;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(232,232,228,0.12);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    white-space: normal;
    width: max-content;
    max-width: 280px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 100;
}

.svc-tip:hover::after {
    opacity: 1;
}

/* Drilldown panel */
.svc-drilldown {
    background: var(--gl-bg-darker);
    border: 1px solid rgba(215,122,0,0.15);
    border-radius: var(--radius);
    padding: 24px;
    margin: 24px auto 0;
    max-width: 1200px;
}

.svc-drilldown-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.svc-drilldown-count {
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--gl-text-mid);
}

.svc-drilldown-filters {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

/* ── Flow View (Sankey) ────────────────────────────────────────────────── */

.svc-flow-view {
    position: relative;
}

.svc-flow-container {
    width: 100%;
    height: calc(100vh - 160px);
    min-height: 600px;
    background: var(--gl-graph-bg);
    border: 1px solid rgba(232,232,228,0.06);
    border-radius: var(--radius);
    overflow: hidden;
}

.svc-flow-container svg {
    width: 100%;
    height: 100%;
}

.svc-flow-tooltip {
    display: none;
    position: fixed;
    background: rgba(37,37,35,0.95);
    color: var(--gl-text-lite);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(215,122,0,0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    pointer-events: none;
    z-index: 200;
    max-width: 300px;
}

.svc-flow-tooltip strong {
    color: var(--gl-amber);
}

/* ── Graph View (Network) ──────────────────────────────────────────────── */

.svc-graph-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--gl-graph-bg);
    border: 1px solid rgba(232,232,228,0.06);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
}

.svc-graph-toolbar-label {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--gl-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 2px;
}

.svc-graph-toolbar-sep {
    width: 1px;
    height: 20px;
    background: rgba(232,232,228,0.1);
    margin: 0 8px;
}

.svc-filter-btn {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1;
    color: var(--gl-text-lite);
    background: rgba(232,232,228,0.04);
    border: 1px solid rgba(232,232,228,0.12);
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.svc-filter-btn:hover {
    background: rgba(232,232,228,0.08);
    border-color: rgba(232,232,228,0.28);
    color: var(--gl-text-lite);
}

.svc-filter-btn.active {
    background: var(--gl-amber);
    border-color: var(--gl-amber);
    color: var(--gl-bg-darker);
    font-weight: 600;
}

.svc-filter-btn.active:hover {
    background: var(--gl-amber-dk);
    border-color: var(--gl-amber-dk);
}

.svc-graph-toolbar + .svc-graph-container {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.svc-view-toggle {
    display: flex;
    gap: 0;
    background: var(--gl-bg-darker);
    border-radius: var(--radius);
    border: 1px solid rgba(232,232,228,0.08);
    overflow: hidden;
}

.svc-view-btn {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--gl-text-dim);
    background: transparent;
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.svc-view-btn:hover {
    background: rgba(232,232,228,0.06);
    color: var(--gl-text-lite);
}

.svc-view-btn.active {
    background: var(--gl-amber);
    color: var(--gl-bg-darker);
}

.svc-graph-view {
    position: relative;
}

.svc-graph-container {
    width: 100%;
    height: calc(100vh - 160px);
    min-height: 600px;
    background: var(--gl-graph-bg);
    border: 1px solid rgba(232,232,228,0.06);
    border-radius: var(--radius);
}

.svc-graph-legend {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(37,37,35,0.92);
    border: 1px solid rgba(232,232,228,0.1);
    border-radius: var(--radius);
    padding: 16px 20px;
    z-index: 10;
}

.svc-legend-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--gl-text-lite);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.svc-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--gl-text-dim);
    margin-bottom: 6px;
}

.svc-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.svc-legend-tip {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--gl-text-mid);
    margin-top: 10px;
    font-style: italic;
    line-height: 1.4;
}

.svc-graph-fit-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--gl-text-dim);
    background: rgba(37,37,35,0.92);
    border: 1px solid rgba(232,232,228,0.1);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    cursor: pointer;
    z-index: 10;
    transition: border-color 0.15s, color 0.15s;
}

.svc-graph-fit-btn:hover {
    border-color: var(--gl-amber);
    color: var(--gl-text-lite);
}

.svc-graph-detail {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(37,37,35,0.92);
    border: 1px solid rgba(215,122,0,0.25);
    border-radius: var(--radius);
    padding: 20px 24px;
    z-index: 10;
    min-width: 220px;
    max-width: 340px;
}

.svc-graph-detail-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--gl-text-lite);
    margin-bottom: 6px;
    word-break: break-word;
}

.svc-graph-detail-stat {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--gl-amber);
    margin-bottom: 4px;
}

.svc-graph-detail-states {
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--gl-text-dim);
    margin-bottom: 6px;
}

.svc-graph-detail-sub {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--gl-text-mid);
    margin-top: 4px;
}

/* Addresses graph legend is pushed down to clear the filter toolbar above the graph
   (unlike the Network view, which has no toolbar above its legend). */
.svc-addr-legend {
    top: 88px;
    left: 16px;
    max-width: 300px;
}

/* Addresses graph — legend swatches encode the shape/color language */
.svc-addr-key {
    width: 15px;
    height: 15px;
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
}

.svc-addr-key-hub {
    border-radius: 3px;
    background: var(--gl-amber);
}

.svc-addr-key-dedicated {
    border-radius: 3px;
    background: #26251F;
    border: 2px solid var(--gl-amber);
}

.svc-addr-key-shared {
    width: 17px;
    background: #E8A33D;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

/* Lazy-load state for the Addresses graph (heavy EAV scan, ~30-45s) */
.svc-graph-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 400px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--gl-text-dim);
}

.svc-graph-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(232,232,228,0.2);
    border-top-color: var(--gl-amber);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* ── Intelligence Grid Toast ────────────────────────────────────────────── */

.toast.grid-alert { border-left: 3px solid var(--gl-fire); }
.toast.grid-success { border-left: 3px solid var(--gl-green); }

/* ── Map View — PR 2 of MAP_VIEW_FL_MVP.md ─────────────────────────────── */

.map-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px); /* viewport minus top-bar */
    margin: 0;
    padding: 0;
}

.map-container {
    flex: 1;
    width: 100%;
    background: var(--color-bg);
    position: relative;
}

.map-container .maplibregl-canvas {
    outline: none;
}

/* Tier legend in the bottom-right corner. Mirrors the dashboard's tier
   color language so a buyer who's seen the dashboard knows what each pin
   color means without explanation. */
.map-legend {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--gl-bg-alt, #E0E0DC);
    border-radius: 4px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-family: var(--font-body);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}
.map-legend-title {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}
.map-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
}
.map-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Pin click popup. Compact — full detail is one click away via the
   "View full detail" link (route handled by the existing #detail screen). */
.maplibregl-popup .map-popup {
    min-width: 220px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text);
}
.map-popup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.map-popup-tier {
    font-size: 11px;
    font-weight: 600;
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.map-popup-ref {
    font-family: var(--font-data, monospace);
    font-size: 11px;
    color: var(--color-text-muted);
}
.map-popup-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1.3;
}
.map-popup-meta {
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.map-popup-actions a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
}
.map-popup-actions a:hover {
    text-decoration: underline;
}

/* Map filter strip — grouped "Where" (geo) and "What" (quality) shortcuts
   sit alongside the +Add filter chip bar and sellable toggle. Grouping by
   intent (PR 6 design principle #1) makes the strip scannable instead of
   a single chip wall — buyers can tell at a glance which axis they're
   filtering on. */
.map-filter-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: var(--gl-bg-alt, #E0E0DC);
    border-bottom: 1px solid var(--gl-bg, #CECECB);
    flex-wrap: wrap;
}
.map-shortcut-group {
    /* flex:1 1 auto + min-width:0 lets the group fit on the same row as
       its siblings when there's space, but shrink (and let its inner
       chip row scroll horizontally) when there isn't. Replaces an older
       `flex:0 0 auto` that sized to content — at 1900px FL produced a
       1300px-wide WHERE group that bled off the right edge of the page.
       Applies to every state; chip count + label length determine
       whether the row scrolls. */
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 12px 2px 0;
    border-right: 1px solid var(--gl-bg, #CECECB);
    /* Anchor for the right-edge scroll-fade below. */
    position: relative;
}
.map-shortcut-group:last-of-type {
    border-right: none;
}
/* Soft fade on the right edge of every shortcut group — signals that
   the chip row scrolls horizontally. Without this, FL's Cape Coral chip
   looks like it's just clipped against an opaque wall. The fade is
   subtle (24px) so it reads as "there's more here" without dominating. */
.map-shortcut-group::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--gl-bg-alt, #E0E0DC));
    pointer-events: none;
}
.map-shortcut-group-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    flex-shrink: 0;
}
.map-shortcut-row {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* min-width:0 lets this flex child actually shrink below its content
       size — without it, overflow-x never engages and the chips push
       through the parent's right edge. */
    flex: 1 1 0;
    min-width: 0;
}
.map-shortcut-loading {
    font-style: italic;
    padding: 4px 8px;
}
.map-filter-chips {
    flex: 1 1 auto;
    min-width: 200px;
}
.map-sellable-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Map detail side panel — PR 4 of MAP_VIEW_FL_MVP.md. Slides in from the
   right when a pin is clicked; keeps the map context visible so buyers
   can compare leads by clicking multiple pins. */
.map-detail-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 90vw;
    background: var(--color-bg, #CECECB);
    border-left: 1px solid var(--gl-bg, #CECECB);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    transition: transform 200ms ease-out;
}
.map-detail-panel.hidden {
    transform: translateX(110%);
    pointer-events: none;
}

.map-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--gl-bg, #CECECB);
    background: var(--color-surface, #E0E0DC);
}
.map-detail-tier-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.map-detail-tier {
    font-size: 11px;
    font-weight: 600;
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.map-detail-ref {
    font-family: var(--font-data, monospace);
    font-size: 11px;
    color: var(--color-text-muted);
}
.map-detail-score {
    font-family: var(--font-data, monospace);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-accent, #D77A00);
}
.map-detail-close {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0 4px;
}
.map-detail-close:hover {
    color: var(--color-text);
}

.map-detail-body {
    padding: 14px;
    flex: 1;
}
.map-detail-name {
    font-family: var(--font-display, var(--font-body));
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px;
    line-height: 1.25;
    color: var(--color-text);
    word-break: break-word;
}
.map-detail-subline {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 14px;
}
.map-detail-loading,
.map-detail-error,
.map-detail-empty {
    font-size: 12px;
    color: var(--color-text-muted);
    font-style: italic;
}
.map-detail-error {
    color: var(--gl-fire, #C94A1A);
}

.map-detail-section {
    margin-bottom: 14px;
    border-bottom: 1px dashed var(--gl-bg, #CECECB);
    padding-bottom: 10px;
}
.map-detail-section:last-of-type {
    border-bottom: none;
}
.map-detail-section-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}
.map-detail-row {
    display: flex;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 4px;
    line-height: 1.35;
}
.map-detail-row-label {
    flex: 0 0 70px;
    color: var(--color-text-muted);
}
.map-detail-row-val {
    flex: 1;
    color: var(--color-text);
    word-break: break-word;
}
.map-detail-row-val a {
    color: var(--color-accent, #D77A00);
    text-decoration: none;
}
.map-detail-row-val a:hover {
    text-decoration: underline;
}

.map-detail-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Map View polish — mail-drop visual, loading, tilt hint ─────────────── */

/* Hollow ring legend swatch. Inverts the dot — colored border, transparent
   fill — so the legend reads "this thing is the address signal, not a
   tier color." */
.map-legend-ring {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--gl-amber, #D77A00);
    background: transparent;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.map-legend-divider {
    width: 100%;
    height: 1px;
    background: var(--gl-bg, #CECECB);
    margin: 4px 0;
}

/* Center-of-map spinner overlay. Shown while /leads/geo fetch is in flight
   (state change, sellable toggle, geo-chip click); hidden when the cached
   client-side path runs (instant). Position absolute over the map canvas
   so it doesn't push layout. */
.map-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
    transition: opacity 150ms ease-out;
}
.map-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
.map-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--gl-amber, #D77A00);
    border-radius: 50%;
    animation: map-spin 0.8s linear infinite;
}
@keyframes map-spin {
    to { transform: rotate(360deg); }
}
.map-loading-label {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text);
    background: var(--color-surface, #E0E0DC);
    padding: 4px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Tilt / rotate hint — bottom-left corner over the map canvas. Small,
   muted, but discoverable. The full how-to lives in the title= tooltip
   so the visual stays clean while still teaching the gesture on hover. */
.map-tilt-hint {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--gl-bg-alt, #E0E0DC);
    border-radius: 999px;
    padding: 4px 10px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    cursor: help;
}
.map-tilt-hint-icon {
    font-size: 13px;
    line-height: 1;
}

/* Territory draw-to-select — dock (top-left of canvas), the in-draw hint,
   and the selection summary card. The card is the "what did I just select"
   surface: count, tier mix, fill rates, and the export / pipeline actions. */
.map-draw-dock {
    position: absolute;
    left: 12px;
    top: 12px; /* anchored to the map canvas, not the page */
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.map-draw-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--gl-bg-alt, #E0E0DC);
    border-radius: 6px;
    padding: 7px 12px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.map-draw-btn:hover {
    border-color: var(--gl-amber, #D77A00);
    color: var(--gl-amber, #D77A00);
}
.map-draw-btn-icon {
    color: var(--gl-amber, #D77A00);
    font-size: 14px;
    line-height: 1;
}
.map-draw-hint {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 48px;
    z-index: 1;
    background: rgba(30, 30, 28, 0.85);
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    pointer-events: none;
}
.map-draw-hint.hidden { display: none; }
.map-territory-card {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--gl-bg-alt, #E0E0DC);
    border-left: 3px solid var(--gl-amber, #D77A00);
    border-radius: 8px;
    padding: 12px 14px;
    min-width: 230px;
    max-width: 300px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    font-family: var(--font-body);
}
.map-territory-card.hidden { display: none; }
.map-territory-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
.map-territory-card-count {
    font-family: var(--font-display, inherit);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}
.map-territory-card-tiers,
.map-territory-card-fill {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 3px;
}
.map-territory-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* Pulsing dot on the status label while a viewport refresh is in flight —
   the non-blocking replacement for the full-map overlay on pan/zoom. */
.map-status-refreshing::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--gl-amber, #D77A00);
    animation: map-refresh-pulse 0.9s ease-in-out infinite;
    vertical-align: baseline;
}
@keyframes map-refresh-pulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ops Dashboard (sprint-17 PR-1)
   Ported from frontend/ops-mock.html. Card grid + top strip + running strip
   + L2 expand-inline. L3 drill is a stub modal in PR-1.
   ═══════════════════════════════════════════════════════════════════════════ */

.ops-page { max-width: 1400px; margin: 0 auto; padding: 24px; }
.ops-title-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.ops-title { font-family: var(--font-display); font-weight: 700; font-size: 28px; margin: 0; letter-spacing: -0.5px; color: var(--gl-text); }
.ops-sub { color: var(--gl-text-mid); font-size: 13px; margin-bottom: 24px; }
.ops-last-check { font-family: var(--font-data); font-size: 12px; color: var(--gl-text-mid); }
.ops-title-actions { display: flex; align-items: center; gap: 14px; }
.ops-refresh-all {
    font-family: var(--font-body); font-size: 12px; font-weight: 500;
    padding: 5px 12px; border-radius: 4px; border: 1px solid var(--color-border);
    background: var(--gl-bg-alt); color: var(--gl-text); cursor: pointer;
}
.ops-refresh-all:hover { background: white; }
.ops-autorefresh {
    font-family: var(--font-data); font-size: 11px; color: var(--gl-text-mid);
    display: flex; align-items: center; gap: 6px;
}
.ops-autorefresh select {
    font-family: var(--font-data); font-size: 11px; padding: 3px 6px;
    border: 1px solid var(--color-border); border-radius: 3px; background: white;
}

.ops-loading { color: var(--gl-text-mid); font-size: 13px; padding: 12px; font-style: italic; }
.ops-error { color: var(--gl-fire); font-size: 13px; padding: 12px; font-family: var(--font-data); }

/* Top status strip */
.ops-status-strip {
    background: var(--gl-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 32px;
}
.ops-verdict { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ops-verdict-dot {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--gl-green);
    box-shadow: 0 0 0 4px rgba(120,184,120,0.18);
}
.ops-verdict-dot.warn { background: var(--gl-gold); box-shadow: 0 0 0 4px rgba(197,154,46,0.18); }
.ops-verdict-dot.fire { background: var(--gl-fire); box-shadow: 0 0 0 4px rgba(201,74,26,0.18); }
.ops-verdict-text { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--gl-text); }
.ops-verdict-sub { color: var(--gl-text-mid); font-size: 13px; font-weight: 500; }
.ops-strip-stats { display: flex; gap: 28px; flex: 1; justify-content: flex-end; }
.ops-stat { display: flex; flex-direction: column; align-items: flex-start; }
.ops-stat-num { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--gl-text); line-height: 1; }
.ops-stat-num.warn { color: var(--gl-gold); }
.ops-stat-num.fire { color: var(--gl-fire); }
.ops-stat-label { font-size: 11px; color: var(--gl-text-mid); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; }

/* Running-now strip + section header */
.ops-section { margin-bottom: 28px; }
.ops-section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.ops-section-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--gl-text-mid); }
.ops-section-meta { font-size: 12px; color: var(--color-text-light); font-family: var(--font-data); }

.ops-running-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.ops-running-card {
    background: var(--gl-bg-alt);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--gl-green);
    border-radius: 8px;
    padding: 14px 16px;
}
.ops-running-card.ops-running-empty { border-left-color: var(--color-border); color: var(--gl-text-mid); }
.ops-rc-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--gl-text); }
.ops-rc-sub { font-family: var(--font-data); font-size: 12px; color: var(--gl-text-mid); margin-top: 4px; }

/* Service card grid + cards */
.ops-group { margin-bottom: 24px; }
.ops-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.ops-card {
    background: var(--gl-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s;
}
.ops-card:hover { background: #E8E8E4; }
.ops-card.expanded {
    padding: 18px 20px;
    cursor: default;
    grid-column: 1 / -1;
}
.ops-card-head { display: flex; align-items: center; gap: 10px; }
.ops-card-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--gl-green); }
.ops-card-dot.warn { background: var(--gl-gold); }
.ops-card-dot.fire { background: var(--gl-fire); }
.ops-card-dot.unknown { background: var(--color-text-light); }
.ops-card-name { font-family: var(--font-display); font-weight: 600; font-size: 13px; flex: 1; color: var(--gl-text); }
.ops-card-headline { font-family: var(--font-data); font-size: 11px; color: var(--gl-text-mid); }
.ops-card-headline.warn { color: var(--gl-gold); font-weight: 500; }
.ops-card-headline.fire { color: var(--gl-fire); font-weight: 500; }
.ops-card-collapse { background: transparent; border: none; color: var(--gl-text-mid); font-family: var(--font-data); font-size: 12px; cursor: pointer; margin-left: auto; }

/* Expanded L2 body */
.ops-card-body { margin-top: 16px; display: grid; grid-template-columns: 2fr 3fr; gap: 24px; }
.ops-l2-trend h4, .ops-l2-events h4 {
    font-family: var(--font-display); font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.5px; color: var(--gl-text-mid);
    margin: 0 0 8px;
}
.ops-trend-baseline { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 12px; }
.ops-trend-stat { display: flex; flex-direction: column; align-items: flex-start; }
.ops-trend-stat .ops-stat-num { font-size: 18px; }
.ops-trend-chart {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    padding: 8px;
}
.ops-trend-chart svg { width: 100%; height: 80px; display: block; }
.ops-trend-window { display: flex; gap: 4px; margin-top: 8px; }
.ops-trend-window button {
    background: transparent; border: 1px solid var(--color-border);
    font-family: var(--font-data); font-size: 11px;
    padding: 3px 10px; border-radius: 3px; cursor: pointer; color: var(--gl-text-mid);
}
.ops-trend-window button.active { background: var(--gl-text); color: var(--gl-text-lite); border-color: var(--gl-text); }

.ops-event-row {
    display: grid; grid-template-columns: 70px 1fr auto;
    padding: 6px 8px;
    font-family: var(--font-data);
    font-size: 12px;
    border-bottom: 1px solid var(--color-border-light);
    align-items: center;
    gap: 12px;
}
.ops-event-row:last-child { border-bottom: none; }
.ops-event-time { color: var(--gl-text-mid); }
.ops-event-msg { color: var(--gl-text); }
.ops-event-msg.fire { color: var(--gl-fire); }
.ops-event-count { color: var(--gl-text-mid); font-size: 11px; }
.ops-event-empty { color: var(--gl-text-mid); font-size: 12px; font-style: italic; padding: 8px; }

.ops-card-actions {
    margin-top: 14px; display: flex; gap: 8px; align-items: center;
    border-top: 1px solid var(--color-border-light); padding-top: 14px;
}

.ops-group-callout {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(201, 74, 26, 0.06);
    border-left: 3px solid var(--gl-fire);
    border-radius: 4px;
    font-size: 12px;
    color: var(--gl-text-mid);
}
.ops-group-callout strong { color: var(--gl-fire); font-family: var(--font-display); margin-right: 4px; }
.ops-group-callout code { font-family: var(--font-data); font-size: 11px; background: rgba(0,0,0,0.04); padding: 1px 4px; border-radius: 3px; }

/* ── PR-3: SLO grid ───────────────────────────────────────────────────── */
.ops-slo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}
.ops-slo-card {
    background: var(--gl-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px 16px;
}
.ops-slo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ops-slo-name { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--gl-text); }
.ops-slo-stats { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ops-slo-current { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--gl-text); line-height: 1; }
.ops-slo-target { font-family: var(--font-data); font-size: 11px; color: var(--gl-text-mid); }
.ops-slo-bar { background: var(--color-border-light); border-radius: 3px; height: 6px; overflow: hidden; margin-bottom: 6px; }
.ops-slo-bar-fill { background: var(--gl-green); height: 100%; transition: width 0.3s ease; }
.ops-slo-bar-fill.warn { background: var(--gl-gold); }
.ops-slo-bar-fill.fire { background: var(--gl-fire); }
.ops-slo-budget { font-family: var(--font-data); font-size: 11px; color: var(--gl-text-mid); margin-bottom: 6px; }
.ops-slo-desc {
    font-size: 11px; color: var(--gl-text-mid); margin-top: 8px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border-top: 1px dashed var(--color-border-light); padding-top: 8px;
}

/* ── PR-3: DORA grid ──────────────────────────────────────────────────── */
.ops-dora-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.ops-dora-card {
    background: var(--gl-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px 16px;
    text-align: left;
}
.ops-dora-card.muted { opacity: 0.65; }
.ops-dora-label {
    font-family: var(--font-display); font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.4px; color: var(--gl-text-mid);
    margin-bottom: 4px;
}
.ops-dora-value { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--gl-text); line-height: 1.1; }
.ops-dora-sub {
    font-family: var(--font-data); font-size: 11px; color: var(--gl-text-mid); margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── PR-3: Incidents ──────────────────────────────────────────────────── */
.ops-incidents-list { display: flex; flex-direction: column; gap: 8px; }
.ops-incident-row {
    background: var(--gl-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px 16px;
}
.ops-incident-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.ops-incident-sev {
    font-family: var(--font-data); font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 3px;
    background: var(--gl-green); color: var(--gl-text-lite);
}
.ops-incident-sev.warn { background: var(--gl-gold); }
.ops-incident-sev.fire { background: var(--gl-fire); }
.ops-incident-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--gl-text); flex: 1; }
.ops-incident-status {
    font-family: var(--font-data); font-size: 11px; color: var(--gl-text-mid);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.ops-incident-meta {
    display: flex; gap: 16px; font-family: var(--font-data); font-size: 11px; color: var(--gl-text-mid);
}
.ops-incident-blast { font-size: 12px; color: var(--gl-text-mid); margin-top: 6px; line-height: 1.4; }
.ops-link { color: var(--gl-amber); text-decoration: none; font-size: 12px; font-family: var(--font-data); }
.ops-link:hover { text-decoration: underline; }


/* ── Commerce — products grid + success page (Sprint 17, Project E) ────── */

.commerce-page {
    max-width: 1100px;
    margin: 32px auto;
    padding: 0 24px;
}
.commerce-page h1 {
    font-size: 28px;
    margin-bottom: 8px;
}
.commerce-intro {
    color: var(--gl-text-mid);
    margin-bottom: 24px;
    max-width: 720px;
}
.commerce-search {
    width: 100%;
    max-width: 420px;
    margin-bottom: 20px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--gl-bg-dark);
    background: var(--gl-bg-alt);
    color: var(--gl-text);
    font-size: 14px;
}
.commerce-state-group {
    margin-bottom: 32px;
}
.commerce-state-heading {
    font-size: 20px;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gl-bg-dark);
}
.commerce-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.commerce-card {
    /* --gl-bg-1/--gl-border were never defined, so this card always hit the
       dark fallbacks while inheriting the page's dark text — invisible titles.
       Pin the dark-panel design to real palette tokens with explicit text. */
    background: var(--gl-bg-dark);
    border: 1px solid var(--gl-bg-darker);
    color: var(--gl-text-lite);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.commerce-card-name {
    font-weight: 600;
    font-size: 18px;
}
.commerce-card-meta {
    color: var(--gl-text-dim);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.commerce-card-desc {
    flex: 1;
    color: var(--gl-text-lite);
    font-size: 14px;
    line-height: 1.4;
    margin: 8px 0;
}
.commerce-card-price {
    font-weight: 700;
    font-size: 22px;
    color: var(--gl-green, #2d7a4f);
    margin: 4px 0 12px;
}
.commerce-buy-btn { width: 100%; }
.commerce-buy-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.commerce-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--gl-bg-1, #1a1a1a);
    border: 1px solid var(--gl-border, #2a2a2a);
    border-radius: 8px;
    margin: 16px 0;
}
.commerce-status-spinner { font-size: 24px; }
.commerce-status-label { font-size: 14px; }
.commerce-directions {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 60ch;
    line-height: 1.5;
}
.commerce-directions p { margin: 0; }

/* CRM-delivery confirmation — the counts box on the success page. Mirrors the
   file-download page; the box sits where the Download button does. Amber accent
   (the brand accent), Outfit display for the number. */
.commerce-crm-box {
    margin-top: 22px;
    max-width: 520px;
    background: var(--gl-bg-alt, #E0E0DC);
    border: 1px solid var(--color-border, rgba(42,42,40,0.12));
    border-radius: 12px;
    overflow: hidden;
}
.commerce-crm-hero {
    padding: 22px 22px 18px;
    display: flex;
    align-items: baseline;
    gap: 11px;
}
.commerce-crm-num {
    font-family: var(--font-display, 'Outfit', sans-serif);
    font-size: 44px;
    font-weight: 700;
    color: var(--color-accent, #D77A00);
    line-height: 1;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}
.commerce-crm-lab { font-size: 15px; font-weight: 500; color: var(--gl-text, #2A2A28); }
.commerce-crm-prov { color: var(--color-accent, #D77A00); }
.commerce-crm-sub {
    border-top: 1px solid var(--color-border, rgba(42,42,40,0.12));
    padding: 13px 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    font-size: 13px;
    color: var(--gl-text-mid, #5C5C59);
}
.commerce-crm-sub strong { font-weight: 600; color: var(--gl-text, #2A2A28); }
.commerce-crm-close { margin-top: 20px; max-width: 56ch; font-size: 16px; line-height: 1.55; }
.commerce-crm-close .text-muted { display: block; margin-top: 6px; }

/* The original coffee-cup mark in the delivery hero (replaces the ☕ emoji). */
.gl-coffee {
    height: 0.82em;
    width: auto;
    vertical-align: -0.06em;
    margin: 0 0.06em;
    color: var(--color-accent, #D77A00);
}

/* ── Filter popover: checkbox multi-select, date presets, value suggestions ── */
.gl-pop-checklist {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}
/* Long lists (MSA names, pipeline stages) get the wide popover + a search
   box (see ENUM_CHECKLIST_SEARCH_THRESHOLD) — give them more room to scroll. */
.gl-filter-popover-wide .gl-pop-checklist {
    max-height: 320px;
}
.gl-pop-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    border-radius: 6px;
}
.gl-pop-check:hover { background: var(--color-bg-subtle, #faf8f2); }
.gl-pop-check:has(input:checked) { background: rgba(215,122,0,0.08); }
.gl-pop-check input { accent-color: var(--gl-amber); flex-shrink: 0; }

.gl-pop-checklist-actions {
    display: flex;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--color-border-light);
}
.gl-pop-link-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--gl-text-mid, #5C5C59);
    cursor: pointer;
}
.gl-pop-link-btn:hover {
    color: var(--gl-amber, #D77A00);
    text-decoration: underline;
}

.gl-pop-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
}
.gl-preset-btn {
    border: 1px solid var(--color-border-light);
    background: var(--color-bg, #fff);
    border-radius: 14px;
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    cursor: pointer;
    color: var(--color-text);
}
.gl-preset-btn:hover { border-color: var(--gl-amber); color: var(--gl-amber); }

.gl-pop-suggest {
    border-top: 1px solid var(--color-border-light);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}
.gl-suggest-hint {
    padding: 6px 12px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.gl-suggest-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 12px;
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.gl-suggest-item:hover { background: var(--color-bg-subtle, #faf8f2); }
.gl-suggest-item.gl-suggest-added { opacity: 0.45; pointer-events: none; }
.gl-suggest-count {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Saved views ("My lists") + keyboard highlight ── */
.gl-views-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.gl-view-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--gl-amber);
    background: var(--color-bg, #fff);
    color: var(--gl-amber);
    border-radius: 14px;
    padding: 3px 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
}
.gl-view-chip:hover { background: var(--color-bg-subtle, #faf8f2); }
.gl-view-chip.active {
    background: var(--gl-amber, #D77A00);
    color: #fff;
    border-color: var(--gl-amber-dk, #B56600);
    box-shadow: 0 2px 8px rgba(215,122,0,0.3);
}
.gl-view-chip.active .gl-view-link, .gl-view-chip.active .gl-view-remove { color: #fff; }
.gl-view-link, .gl-view-remove {
    cursor: pointer;
    opacity: 0.7;
    font-weight: 400;
}
.gl-view-link:hover, .gl-view-remove:hover { opacity: 1; }
.gl-view-save {
    border: 1px dashed var(--color-border);
    background: transparent;
    border-radius: 14px;
    padding: 3px 10px;
    font-size: var(--font-size-xs);
    cursor: pointer;
    color: var(--color-text-muted);
}
.gl-view-save:hover { border-color: var(--gl-amber); color: var(--gl-amber); }
.gl-filter-popover-item.kb-active {
    background: var(--color-bg-subtle, #faf8f2);
    outline: 1px solid var(--gl-amber);
}


/* ── Formation Calendar ─────────────────────────────────────────────────────
   Per-state month grid for gap-spotting + daily inventory. Tokens only — warm
   greys + amber heat ramp from the GoodLeads design guide. Everything is scoped
   under .cal-* so nothing else in the app is affected.

   Legibility priorities (fix for the "blurry/cramped" draft):
     · count is the prominent figure (data mono, 20px)
     · industries read at 12.5px / 1.4 with a right-aligned count, max 4 inline
     · the Commercial|Everything toggle is a labelled, shadowed segmented control
     · heat-shaded cells keep AA-contrast text (dark brown on the strong amber) */

/* Heat ramp + on-heat ink. Not in :root because they're a screen-local scale,
   but hoisted here so the four amber steps and their AA-contrast text colors
   live in one place instead of being repeated as magic hex across the block.
   Steps extend the brand amber (--gl-amber #D77A00) toward pale on one end and
   deep amber on the other; the ink colors are verified ≥6:1 on their tile. */
.cal-screen {
    --cal-heat-1:      #F3E7D2;   /* pale amber  — low volume                  */
    --cal-heat-2:      #F2C77F;   /* mid amber                                  */
    --cal-heat-3:      #E79A2A;   /* deep amber  — high volume                  */
    --cal-ink-count:   #3d2402;   /* count on heat-2/3   (~8.5–12.8:1)          */
    --cal-ink-ind:     #5a3000;   /* industry on heat-2/3 (~6.4–9.7:1)          */
    --cal-ink-muted:   #6b3d05;   /* day-num / counts on heat-2/3 (~6:1)        */
    padding: 4px 0 40px;
    position: relative;   /* anchor for the .cal-busy loading overlay */
}

/* Loading states — give every in-screen action immediate feedback. While a
   fetch is in flight the grid dims, controls disable (no click-stacking), and
   a centered spinner shows over the grid. Reuses the app's `spin` keyframe. */
.cal-busy .cal-grid,
.cal-busy .cal-detail {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.cal-busy .cal-toolbar { pointer-events: none; }
.cal-busy::after {
    content: "";
    position: absolute;
    top: 140px;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    z-index: 2;
}
.cal-detail-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* Toolbar */
.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.cal-toolbar-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cal-toolbar-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.cal-select {
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    /* Custom caret so the picker reads as a deliberate control, not a raw
       native select — matches the warm-grey toolbar. */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235C5C59' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    -webkit-appearance: none;
    appearance: none;
    color: var(--gl-text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.cal-select:hover { border-color: var(--gl-amber); }
.cal-select:focus-visible {
    outline: none;
    border-color: var(--gl-amber);
    box-shadow: 0 0 0 2px rgba(215, 122, 0, 0.12);
}

.cal-monthnav { display: flex; align-items: center; gap: 8px; }
.cal-nav-btn {
    width: 36px; height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--gl-text);
    font-size: 20px; line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.cal-nav-btn:hover { background: var(--gl-bg-alt); border-color: var(--gl-amber); color: var(--gl-amber); }
.cal-nav-btn:focus-visible {
    outline: none;
    border-color: var(--gl-amber);
    color: var(--gl-amber);
    box-shadow: 0 0 0 2px rgba(215, 122, 0, 0.12);
}
.cal-month-label {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--gl-text);
    min-width: 150px;
    text-align: center;
}
.cal-summary { font-size: 13px; color: var(--gl-text-mid); }

/* Commercial | Everything — the key control. Labelled, shadowed segmented
   control so it reads as deliberate, not a faint pill. */
.cal-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.cal-toggle-btn {
    border: none;
    background: transparent;
    color: var(--gl-text-mid);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 9px 18px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.cal-toggle-btn + .cal-toggle-btn { border-left: 1px solid var(--color-border); }
.cal-toggle-btn:hover { background: var(--gl-bg-alt); color: var(--gl-text); }
/* Active = amber fill + white, matching the house active pattern
   (.gl-shortcut.active / .scope-tab.active / .btn-primary). Hover keeps the
   same fill (an active segment shouldn't darken on hover) and adds the brand
   amber glow used elsewhere. */
.cal-toggle-btn.active {
    background: var(--gl-amber);
    color: #fff;
}
.cal-toggle-btn.active:hover {
    background: var(--gl-amber);
    color: #fff;
    box-shadow: inset 0 0 0 99px rgba(255, 255, 255, 0.08);
}
.cal-toggle-btn:focus-visible { outline: 2px solid var(--gl-amber-dk); outline-offset: -2px; }

.cal-legend { display: flex; align-items: center; gap: 7px; }
.cal-legend-label { font-size: 12px; color: var(--gl-text-mid); }
.cal-swatch {
    width: 15px; height: 15px;
    border-radius: var(--radius-sm);
    display: inline-block;
    border: 1px solid var(--color-border-light);
}

.cal-hint { font-size: 13px; color: var(--gl-text-mid); margin: 0 0 14px; }
.cal-hint strong { color: var(--gl-text); font-weight: 600; }

/* Weekday header row */
.cal-weekday-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}
.cal-weekday {
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gl-text-mid);
}

/* Month grid */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
.cal-cell {
    min-height: 132px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    padding: 10px 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow: hidden;
}
.cal-cell-blank { background: transparent; border: none; box-shadow: none; min-height: 0; }

/* Keyboard affordance for the in-cell links (day, count, industries, gap,
   expand) — the codebase convention is an amber focus ring. Scoped tight so it
   never fights the heat-tile text colors. */
.cal-cell a:focus-visible,
.cal-expand:focus-visible {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 2px rgba(215, 122, 0, 0.35);
}

/* Heat ramp — pale → strong amber, matching the GoodLeads warm palette. */
.cal-heat-0 { background: var(--color-surface); }
.cal-heat-1 { background: var(--cal-heat-1); }
.cal-heat-2 { background: var(--cal-heat-2); }
.cal-heat-3 { background: var(--cal-heat-3); }
.cal-swatch.cal-heat-1 { background: var(--cal-heat-1); }
.cal-swatch.cal-heat-2 { background: var(--cal-heat-2); }
.cal-swatch.cal-heat-3 { background: var(--cal-heat-3); }

/* Zero-count days: the gaps the view exists to surface. Faint fire wash + a
   dashed fire border so an empty day reads as flagged at a glance — distinct
   from heat-0 (a present-but-low day), since both sit on the surface grey. */
.cal-cell-gap {
    background: rgba(201, 74, 26, 0.05);
    border: 1px dashed var(--gl-fire);
    box-shadow: none;
}
.cal-gap-label {
    margin-top: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--gl-fire);
    text-decoration: none;
}
a.cal-gap-label:hover { text-decoration: underline; }
.cal-gap-label.cal-gap-hint { color: var(--gl-text-mid); font-weight: 500; cursor: default; }
.cal-cell-selected { outline: 2px solid var(--gl-amber-dk); outline-offset: -1px; }

/* Cell head — day number (subtle) + count (prominent). */
.cal-cell-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}
.cal-daynum {
    font-size: 13px;
    font-weight: 600;
    color: var(--gl-text-mid);
    text-decoration: none;
}
.cal-daynum:hover { color: var(--gl-amber-dk); text-decoration: underline; }
.cal-count {
    font-family: var(--font-data);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: var(--gl-text);
    text-decoration: none;
}
.cal-count:hover { color: var(--gl-amber-dk); text-decoration: underline; }
/* On the strongest heat tiles, ensure AA contrast with dark brown. */
.cal-heat-2 .cal-daynum,
.cal-heat-3 .cal-daynum { color: var(--cal-ink-muted); }
.cal-heat-2 .cal-count,
.cal-heat-3 .cal-count { color: var(--cal-ink-count); }

/* Inline industries — one row each, name + count, ellipsised. */
.cal-inds { display: flex; flex-direction: column; gap: 2px; }
.cal-ind {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--gl-amber-dk);
    text-decoration: none;
}
.cal-ind-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-ind-count {
    font-family: var(--font-data);
    font-size: 11.5px;
    color: var(--gl-text-mid);
    flex-shrink: 0;
}
.cal-ind:hover .cal-ind-name { text-decoration: underline; }
/* Industry text on the amber tiles → readable dark brown. */
.cal-heat-2 .cal-ind, .cal-heat-3 .cal-ind { color: var(--cal-ink-ind); }
.cal-heat-2 .cal-ind-count, .cal-heat-3 .cal-ind-count { color: var(--cal-ink-muted); }

.cal-unclassified {
    margin-top: auto;
    font-size: 12.5px;
    font-style: italic;
    color: var(--gl-text-mid);
    text-decoration: none;
}
.cal-unclassified:hover { color: var(--gl-amber-dk); text-decoration: underline; }
.cal-heat-2 .cal-unclassified, .cal-heat-3 .cal-unclassified { color: var(--cal-ink-muted); }

.cal-expand {
    margin-top: auto;
    align-self: flex-start;
    background: none;
    border: none;
    padding: 2px 0 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--gl-amber-dk);
    cursor: pointer;
}
.cal-expand:hover { text-decoration: underline; }
.cal-heat-2 .cal-expand, .cal-heat-3 .cal-expand { color: var(--cal-ink-ind); }

/* Expanded day — top-20 detail panel. */
.cal-detail { margin-top: 24px; }
.cal-detail:empty { display: none; }
.cal-detail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 14px 18px;
}
.cal-detail-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--gl-text);
}
.cal-detail-sub { margin: 3px 0 0; font-size: 13px; color: var(--gl-text-mid); }
.cal-detail-open {
    font-size: 13px;
    font-weight: 600;
    color: var(--gl-amber-dk);
    text-decoration: none;
    white-space: nowrap;
}
.cal-detail-open:hover { text-decoration: underline; }
.cal-detail-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 8px 18px 14px;
}
.cal-detail-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-border-light);
    text-decoration: none;
    color: var(--gl-text);
}
.cal-detail-row:hover { color: var(--gl-amber-dk); }
.cal-detail-rank {
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--gl-text-mid);
    min-width: 22px;
}
.cal-detail-name { font-size: 13.5px; flex: 1; }
.cal-detail-row:hover .cal-detail-name { text-decoration: underline; }
.cal-detail-count { font-family: var(--font-data); font-size: 13px; color: var(--gl-text-mid); }
.cal-detail-empty {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--gl-text-mid);
    font-style: italic;
    margin: 10px 0;
}

@media (max-width: 760px) {
    .cal-toolbar { gap: 14px; }
    .cal-detail-list { grid-template-columns: 1fr; }
    .cal-cell { min-height: 112px; padding: 8px 9px; }
    .cal-count { font-size: 18px; }
}

/* ── Share Access (partner magic link) ──────────────────────────────────── */

.btn-share {
    background: transparent;
    color: var(--gl-amber-dk);
    border-color: rgba(215,122,0,0.45);
}
.btn-share:hover:not(:disabled) {
    background: rgba(215,122,0,0.08);
}

.share-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gl-text-mid);
}

.share-scope-note {
    background: rgba(120,184,120,0.16);
    border: 1px solid rgba(120,184,120,0.55);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--gl-text);
    margin-top: 12px;
}

.share-linkbox {
    display: flex;
    gap: 8px;
    margin: 10px 0 4px;
}
.share-linkbox code {
    flex: 1;
    background: var(--gl-bg-darker);
    color: #E8E8E4;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 12px;
    font-family: var(--font-data);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-expiry {
    font-size: 12px;
    color: var(--gl-text-mid);
    margin-top: 8px;
}

/* ── Sell this list (operator → Stripe payment link) ─────────────────────── */
.sell-cohort {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 14px;
    background: var(--gl-bg-alt, rgba(0,0,0,0.02));
}
.sell-cohort-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}
.sell-scope {
    font-weight: 600;
    font-size: 13px;
}
.sell-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--gl-amber, #D77A00);
}
.sell-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sell-filter-pill {
    font-size: 11.5px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    color: var(--gl-text-mid);
}
.sell-muted {
    font-size: 12px;
    color: var(--gl-text-mid);
}
.sell-mt { margin-top: 14px; }
.sell-compose-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 0;
}
.sell-radio-row {
    display: flex;
    gap: 18px;
    margin-top: 6px;
    font-size: 13px;
}
.sell-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.sell-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}
.modal-body input[type="number"],
.modal-body input[type="email"],
.modal-body input[type="time"],
.sell-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-mono);
    margin-top: 8px;
    background: var(--color-surface);
    color: var(--gl-text);
}
.sell-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
    cursor: pointer;
}
.sell-error {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: rgba(215,60,60,0.10);
    border: 1px solid rgba(215,60,60,0.45);
    color: var(--gl-fire, #C0392B);
    font-size: 12.5px;
}
.sell-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
}
.sell-badge-test {
    background: rgba(120,184,120,0.18);
    border: 1px solid rgba(120,184,120,0.6);
    color: #2E7D32;
}
.sell-badge-live {
    background: var(--gl-amber, #D77A00);
    color: #fff;
}

/* ── Orders (admin-only operator ledger) ─────────────────────────────────── */
.orders-page {
    max-width: 1240px;
    margin: 32px auto;
    padding: 0 24px;
}
.orders-page h1 {
    font-size: 28px;
    margin-bottom: 8px;
}
.orders-intro {
    color: var(--gl-text-mid);
    margin-bottom: 24px;
    max-width: 720px;
}
/* Re-send purchased data modal. */
.resend-intro {
    color: var(--gl-text-mid);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 12px;
}
.resend-cohort {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-bottom: 14px;
    background: var(--gl-bg-alt, rgba(0,0,0,0.02));
    font-weight: 600;
    font-size: 13px;
}
.resend-hint {
    color: var(--gl-text-mid);
    font-size: 12px;
    margin: 6px 0 0;
}
.orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.orders-table tbody tr {
    border-bottom: 1px solid var(--color-border-light);
}
.orders-table td {
    padding: 10px 12px;
    vertical-align: middle;
    white-space: nowrap;
}
.orders-muted {
    color: var(--gl-text-mid);
}
.orders-actions {
    display: flex;
    gap: 8px;
    white-space: nowrap;
}
/* Status pill — delivered=green, paid=amber, pending=grey, failed=red. */
.orders-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 9px;
    border-radius: 10px;
}
.orders-pill-delivered {
    background: rgba(120,184,120,0.18);
    border: 1px solid rgba(120,184,120,0.6);
    color: #2E7D32;
}
.orders-pill-paid {
    background: rgba(215,122,0,0.14);
    border: 1px solid rgba(215,122,0,0.55);
    color: var(--gl-amber, #D77A00);
}
.orders-pill-pending {
    background: rgba(120,120,120,0.14);
    border: 1px solid rgba(120,120,120,0.4);
    color: var(--gl-text-mid);
}
.orders-pill-failed {
    background: rgba(215,60,60,0.10);
    border: 1px solid rgba(215,60,60,0.45);
    color: var(--gl-fire, #C0392B);
}
/* Canceled — withdrawn before payment. Muted: it is not a failure, just closed. */
.orders-pill-canceled {
    background: rgba(120,120,120,0.08);
    border: 1px solid rgba(120,120,120,0.3);
    color: var(--gl-text-mid);
    text-decoration: line-through;
}
/* Expired — the payment link timed out unpaid. Closed, not failed. */
.orders-pill-expired {
    background: rgba(120,120,120,0.08);
    border: 1px solid rgba(120,120,120,0.3);
    color: var(--gl-text-mid);
}
/* Cancel-order dialog */
.cancel-reasons { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.cancel-reason { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.cancel-reason input { margin-top: 4px; }
.cancel-email-toggle { display: flex; gap: 8px; align-items: center; margin: 14px 0 10px; font-size: 14px; }
.cancel-preview-subject { font-weight: 700; font-size: 13px; margin: 4px 0; }
.cancel-preview {
    white-space: pre-wrap;
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
    background: rgba(120,120,120,0.08);
    border-radius: 8px;
    padding: 12px;
    max-height: 200px;
    overflow: auto;
    margin: 0;
}
/* Comp — a free POC / design-partner delivery. Distinct (blue) so a gift can
   never be visually mistaken for a paid state on the ledger. */
.orders-pill-comp {
    background: rgba(70,130,180,0.12);
    border: 1px solid rgba(70,130,180,0.5);
    color: #2C6E9E;
}

/* ── Orders ledger: tabs + a five-column table that fits the page ──────────
   One tab on screen at a time; fixed column widths with the list name taking
   what is left, so nothing scrolls sideways. One button per row, the rest
   under "···". Below 760px every row becomes a card. */
.orders-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.orders-head h1 { margin: 0; }
.orders-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.orders-kpi { background: var(--gl-bg-alt); border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 14px; min-width: 128px; }
.orders-kpi b { display: block; font: 600 18px/1.2 var(--font-display); }
.orders-kpi span { font-size: 12px; color: var(--gl-text-mid); }
.orders-kpi-attn b { color: var(--gl-amber-dk); }

.orders-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); margin-bottom: 14px; overflow-x: auto; }
.orders-tab { appearance: none; border: 0; background: none; font: 600 14px var(--font-body); color: var(--gl-text-mid); padding: 10px 14px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.orders-tab[aria-selected="true"] { color: var(--gl-text); border-bottom-color: var(--gl-amber); }
.orders-tab-n:not(:empty) { font-weight: 500; font-size: 12px; background: rgba(42,42,40,0.08); border-radius: 9px; padding: 1px 7px; margin-left: 4px; }
.orders-tab-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gl-fire); margin-left: 6px; vertical-align: middle; }
.orders-tab-dot[hidden] { display: none; }
.orders-panel[hidden] { display: none; }

.ledger-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ledger-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ledger-chip { appearance: none; border: 1px solid var(--color-border); background: var(--gl-bg-alt); color: var(--gl-text-mid); font: 500 13px var(--font-body); padding: 4px 11px; border-radius: 16px; cursor: pointer; }
.ledger-chip[aria-pressed="true"] { background: var(--gl-text); color: var(--gl-text-lite); border-color: var(--gl-text); }
.ledger-tools { display: flex; gap: 8px; align-items: center; }
.ledger-search { border: 1px solid var(--color-border); background: #E8E8E4; border-radius: 8px; padding: 6px 10px; font: 13px var(--font-body); width: 220px; max-width: 100%; }

.orders-table.ledger { table-layout: fixed; background: #E8E8E4; border: 1px solid var(--color-border); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.ledger th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gl-text-mid); padding: 10px 14px; background: var(--gl-bg-alt); border-bottom: 1px solid var(--color-border); }
.ledger td { padding: 10px 14px; white-space: normal; border-bottom: 1px solid var(--color-border-light); }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr:hover { background: #F1F1EE; }
.ledger .num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger th.ledger-acts-h { text-align: right; }
.ledger-what { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-what a { color: inherit; }
.ledger-clip, .orders-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orders-sub { font-size: 12px; color: var(--gl-text-mid); }
.ledger tr.ledger-dim td { color: var(--gl-text-mid); }
.ledger tr.ledger-dim .ledger-what { font-weight: 500; }
.ledger-acts .orders-actions { justify-content: flex-end; gap: 6px; }
.ledger-more { text-align: center; padding: 12px; }
.ledger-empty { padding: 28px; text-align: center; color: var(--gl-text-mid); background: #E8E8E4; border: 1px solid var(--color-border); border-radius: 10px; }

/* "···" menu — the row's other actions, same buttons, listed. */
.ledger-menu-wrap { position: relative; display: inline-block; }
.ledger-more-btn { letter-spacing: 1px; }
.ledger-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 168px; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.14); padding: 4px; }
.ledger-menu-wrap.open .ledger-menu { display: block; }
.ledger-menu .btn { display: block; width: 100%; text-align: left; border: 0; background: none; box-shadow: none; padding: 7px 10px; border-radius: 5px; }
.ledger-menu .btn:hover { background: #F1F1EE; }
/* The table clips its rounded corners; let an open menu escape it. */
.orders-table.ledger:has(.ledger-menu-wrap.open) { overflow: visible; }

@media (max-width: 760px) {
    .orders-page { padding: 0 16px; margin-top: 18px; }
    .ledger-tools { width: 100%; }
    .ledger-search { flex: 1; width: auto; }
    .orders-table.ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: 100%; }
    .orders-table.ledger { background: none; border: 0; overflow: visible; }
    .ledger colgroup, .ledger thead { display: none; }
    .ledger tbody tr { background: #E8E8E4; border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 10px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
    .ledger td { padding: 0; border: 0; }
    .ledger td.ledger-main, .ledger td.ledger-acts { grid-column: 1 / -1; }
    .ledger td.num { text-align: left; }
    .ledger td.ledger-acts { margin-top: 6px; }
    .ledger-acts .orders-actions { justify-content: flex-start; }
    .ledger-what, .orders-sub, .ledger-clip { white-space: normal; }
    .ledger-menu { right: auto; left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME (root landing, #home — the bare-URL fallback in parseHash())
   The conversion landing place for directory / MCP traffic. Rendered by
   lib/home_page.js; same --gl-* tokens as the rest of the app. On this route
   the app's own top bar is hidden (body.screen-home) and the page carries its
   own header + drawer, so a cold visitor never meets the ops nav first.
   ═══════════════════════════════════════════════════════════════════════ */
body.screen-home .top-bar, body.screen-home .nav-backdrop { display: none; }
body.screen-home #app { padding: 0; margin: 0; max-width: none; }
.home-page { max-width: 100%; margin: 0; color: var(--gl-text); }
.home-page .center { text-align: center; }
.home-page a { text-decoration: none; }
/* One keyboard ring for every control on the page: dark on the light ground,
   light on the dark surfaces (door strip, scored step, frames, closing band). */
.home-page :focus-visible { outline: 2px solid var(--gl-text); outline-offset: 2px; }
.home-doorstrip :focus-visible, .home-band :focus-visible { outline-color: var(--gl-text-lite); }
.home-page a, .home-page button { transition: background-color 0.15s, border-color 0.15s, color 0.15s; }

/* Header: brand, two calls, burger — every control 40px tall on one baseline. */
.home-nav { position: sticky; top: 0; z-index: 90; background: var(--gl-bg); display: flex; align-items: center; gap: 12px; padding: 12px 28px; border-bottom: 1px solid rgba(42,42,40,0.14); }
.home-nav.scrolled { box-shadow: 0 1px 0 rgba(42,42,40,0.14), 0 6px 18px rgba(28,27,25,0.08); }
.home-brand { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--gl-text); letter-spacing: -0.01em; }
.home-brand span { color: var(--gl-amber); }
.home-nav-spacer { flex: 1; }
.home-nav .btn-home-amber, .home-nav .btn-home-secondary { height: 40px; padding-left: 16px; padding-right: 16px; font-size: 13.5px; }
.home-burger { background: none; border: 1.5px solid rgba(42,42,40,0.3); border-radius: 8px; width: 40px; height: 40px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; cursor: pointer; }
.home-burger:hover { border-color: rgba(42,42,40,0.5); background: rgba(42,42,40,0.05); }
.home-burger span { width: 18px; height: 2px; background: var(--gl-text-mid); border-radius: 1px; }
.home-menu { position: fixed; inset: 0; background: rgba(28,27,25,0.5); z-index: 120; }
.home-menu-sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 88vw); background: var(--gl-bg); padding: 12px 16px 28px; box-shadow: -8px 0 30px rgba(0,0,0,0.2); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; box-sizing: border-box; }
.home-menu-close { align-self: flex-end; flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: 8px; font-size: 24px; line-height: 1; color: var(--gl-text-mid); cursor: pointer; margin: 0 -6px 4px 0; padding: 0; }
.home-menu-close:hover { color: var(--gl-text); border-color: rgba(42,42,40,0.25); }
.home-menu-label { font-family: var(--font-data); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gl-text-mid); margin: 16px 0 4px; padding: 0 10px; }
.home-menu-sheet .home-menu-label:first-of-type { margin-top: 6px; }
.home-menu-sheet a { padding: 10px 10px; border-radius: 8px; font-size: 14px; line-height: 1.3; color: var(--gl-text); }
.home-menu-sheet a:hover { background: rgba(42,42,40,0.07); }

/* Hero */
.home-eyebrow { font-family: var(--font-data); font-size: clamp(11.5px, 0.8vw, 13px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gl-amber); margin: 0 0 16px; font-weight: 500; text-wrap: balance; }
.home-hero { padding: 56px 24px 44px; max-width: 1400px; margin: 0 auto; text-align: center; }
.home-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6.8vw, 100px); line-height: 0.96; letter-spacing: -0.015em; margin: 0 auto 20px; text-transform: uppercase; max-width: 12ch; text-wrap: balance; }
.home-title em { font-style: normal; color: var(--gl-amber); }
.home-dek { font-size: clamp(17px, 1.25vw, 21px); line-height: 1.5; color: var(--gl-text-mid); max-width: 44ch; margin: 0 auto 36px; text-wrap: pretty; }
.home-quickbuy { max-width: 720px; margin: 0 auto; background: var(--gl-bg-alt); border: 1px solid rgba(42,42,40,0.16); border-radius: 16px; padding: 20px 24px 22px; box-shadow: 0 1px 2px rgba(28,27,25,0.08), 0 10px 26px rgba(28,27,25,0.1); text-align: left; }
/* Segmented control, full width, two equal halves. */
.home-quickbuy .qb-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--gl-bg); border: 1px solid rgba(42,42,40,0.2); border-radius: 10px; padding: 3px; margin-bottom: 18px; }
.home-quickbuy .qb-toggle button { font-family: var(--font-body); font-weight: 600; font-size: 13px; line-height: 1; height: 34px; border-radius: 7px; border: none; background: none; color: var(--gl-text-mid); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.home-quickbuy .qb-toggle button:hover { color: var(--gl-text); }
.home-quickbuy .qb-toggle button[aria-pressed="true"] { background: var(--gl-amber); color: #1a1005; }
.home-quickbuy .qb-label { font-family: var(--font-data); font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gl-text-mid); margin-bottom: 10px; }
/* Chips: an equal-width grid, so a row never leaves one chip orphaned. */
.home-quickbuy .qb-states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.home-quickbuy .qb-states[hidden], .home-menu[hidden] { display: none; }
.home-quickbuy .qb-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 12px 0 14px; border-radius: 8px; border: 1.5px solid rgba(42,42,40,0.2); text-decoration: none; background: var(--gl-bg); color: var(--gl-text); font-family: var(--font-body); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; }
.home-quickbuy .qb-chip:hover { border-color: rgba(42,42,40,0.45); }
.home-quickbuy .qb-chip.sel { border-color: var(--gl-amber); background: rgba(215,122,0,0.12); color: var(--gl-amber-dk); font-weight: 600; }
.home-quickbuy .qb-chip-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-quickbuy .qb-chip-r { font-family: var(--font-data); font-size: 11px; color: var(--gl-text-mid); flex: none; }
.home-quickbuy .qb-chip.sel .qb-chip-r { color: var(--gl-amber-dk); }
/* Price and the call to action share one row, both aligned to the grid. */
.home-quickbuy .qb-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding-top: 18px; border-top: 1px solid rgba(42,42,40,0.12); }
.home-quickbuy .qb-price { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; color: var(--gl-text); }
.home-quickbuy .qb-price-cap { display: block; font-family: var(--font-data); font-size: 10.5px; line-height: 1.3; font-weight: 400; color: var(--gl-text-mid); margin-top: 6px; }
.home-quickbuy .qb-go { min-width: 200px; }
.home-quickbuy .qb-fine { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--gl-text-mid); margin: 14px 0 0; text-wrap: pretty; }
.home-quickbuy .qb-sample { color: var(--gl-amber-dk); text-decoration: underline; text-underline-offset: 2px; }
.home-quickbuy .qb-sample:hover { color: var(--gl-amber); }
.home-doorstrip { max-width: 720px; margin: 14px auto 0; background: var(--gl-bg-darker); color: var(--gl-text-lite); border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.home-doorstrip span { font-family: var(--font-body); font-size: 13.5px; line-height: 1.4; color: var(--gl-text-dim); flex: 1; text-align: left; text-wrap: pretty; }
.home-doorstrip code { font-family: var(--font-data); font-size: 12px; line-height: 1; background: var(--gl-bg-dark); padding: 9px 12px; border-radius: 6px; color: var(--gl-amber); white-space: nowrap; }

/* One button system for the whole page. Primary = filled amber, secondary =
   the same box with a 1.5px amber outline; .lg / .sm scale both the same way;
   .on-dark is the secondary on the dark surfaces. Nothing else on the page
   is a button. */
.btn-home-amber, .btn-home-secondary { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 44px; padding: 0 22px; border-radius: 8px; border: 1.5px solid var(--gl-amber); font-family: var(--font-body); font-weight: 600; font-size: 13.5px; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.btn-home-amber { background: var(--gl-amber); color: #1a1005; }
.btn-home-amber:hover { background: var(--gl-amber-dk); border-color: var(--gl-amber-dk); color: #1a1005; }
.btn-home-secondary { background: transparent; color: var(--gl-amber-dk); }
.btn-home-secondary:hover { background: rgba(215,122,0,0.12); color: var(--gl-amber-dk); }
.btn-home-secondary.on-dark { color: var(--gl-amber); border-color: var(--gl-amber); }
.btn-home-secondary.on-dark:hover { background: rgba(215,122,0,0.18); color: #E6A13F; border-color: #E6A13F; }
.btn-home-amber.lg, .btn-home-secondary.lg { height: 52px; padding: 0 30px; font-size: 16px; }
.btn-home-amber.sm, .btn-home-secondary.sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 6px; }

/* Value sections */
.home-value { max-width: 1400px; margin: 0 auto; padding: clamp(48px, 4.5vw, 72px) 24px; border-top: 1px solid rgba(42,42,40,0.14); }
.home-value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.home-commodity { font-family: var(--font-data); font-size: clamp(10.5px, 0.75vw, 12.5px); line-height: 1.6; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gl-text-mid); margin: 0 0 12px; text-wrap: balance; }
.home-commodity s { color: #A8462C; text-decoration: line-through; }
.home-value-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 52px); margin: 0 0 14px; line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; }
.home-value-h.center { max-width: 22ch; margin-left: auto; margin-right: auto; }
.home-value-h em { font-style: normal; color: var(--gl-amber); }
.home-value-sub { font-size: clamp(15px, 1.15vw, 19px); line-height: 1.55; color: var(--gl-text-mid); margin: 0 0 24px; max-width: 42ch; text-wrap: pretty; }
.home-value-sub.center { max-width: 60ch; margin-left: auto; margin-right: auto; }
.home-value-sub.wide { max-width: 64ch; }
.home-cta-row { margin-top: 30px; display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.home-caption { font-family: var(--font-data); font-size: 12px; line-height: 1.5; color: var(--gl-text-mid); display: inline-block; text-wrap: balance; }

.home-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
@media (min-width: 1200px) { .home-timeline { grid-template-columns: repeat(6, 1fr); gap: 14px; } }
.home-tl-step { background: var(--gl-bg-alt); border: 1px solid rgba(42,42,40,0.16); border-radius: 14px; padding: 18px 20px 22px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(28,27,25,0.06); }
.home-tl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 22px; margin-bottom: 10px; }
.home-tl-date { font-family: var(--font-data); font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gl-amber-dk); }
.home-tl-step.final .home-tl-h { color: var(--gl-amber-dk); }
.home-tl-h { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.25; margin-bottom: 6px; text-wrap: balance; }
.home-tl-p { font-size: 14px; line-height: 1.5; color: var(--gl-text-mid); text-wrap: pretty; }
/* The elapsed-time badge sits in the card's top-right corner so the date line
   stays on one baseline across the row. */
.home-tl-badge { font-family: var(--font-data); font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: 0.06em; background: var(--gl-amber); color: #1a1005; padding: 6px 9px; border-radius: 20px; white-space: nowrap; }

/* Screenshot strips: frames scale with the image (never a forced height).
   The strip bleeds 16px past the content edge so frame shadows are not
   clipped by the scroll box; on a phone that makes it edge-to-edge. */
/* Screenshot strips: every frame in a strip is the same size. The strip sets
   the aspect ratio (square for the record pages, 7:4 for the map views) and
   the image fills it from the top-left; the stacked wide frames keep their
   natural height. */
.home-strip { display: grid; gap: 16px; margin-top: 32px; }
.home-strip.cols-3 { grid-template-columns: repeat(3, 1fr); }
.home-strip.cols-4 { grid-template-columns: repeat(4, 1fr); }
.home-frame { margin: 0; background: var(--gl-bg-darker); border-radius: 14px; padding: 8px; box-sizing: border-box; box-shadow: 0 1px 2px rgba(28,27,25,0.08), 0 10px 26px rgba(28,27,25,0.1); }
.home-frame img { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--gl-bg-dark); }
.home-strip.square .home-frame img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; }
.home-strip.wide .home-frame img { aspect-ratio: 7 / 4; object-fit: cover; object-position: top left; }
.home-frame figcaption { font-family: var(--font-data); font-size: 12px; line-height: 1.4; color: var(--gl-text-dim); text-align: center; padding: 9px 4px 2px; }
.home-stack { display: flex; flex-direction: column; gap: 18px; max-width: 1040px; margin: 30px auto 0; }
.home-frame.full { flex: none; width: 100%; min-width: 0; }

/* The week's volume: one bar per live state. */
.home-visual { background: var(--gl-bg-alt); border: 1px solid rgba(42,42,40,0.16); border-radius: 16px; padding: 26px 24px 22px; box-shadow: 0 1px 2px rgba(28,27,25,0.08), 0 10px 26px rgba(28,27,25,0.1); }
.home-vol-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 3.6vw, 60px); color: var(--gl-amber); line-height: 1; letter-spacing: -0.01em; }
.home-vol-lbl { font-family: var(--font-data); font-size: 12px; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gl-text-mid); margin: 8px 0 20px; }
.home-bars { display: flex; align-items: flex-end; gap: 10px; height: clamp(120px, 10vw, 180px); }
.home-bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.home-bar { width: 100%; background: var(--gl-amber); border-radius: 5px 5px 0 0; min-height: 2px; }
.home-bar-lbl { font-family: var(--font-data); font-size: 10px; line-height: 1.2; color: var(--gl-text); white-space: nowrap; margin-top: 2px; }
.home-bar-n { font-family: var(--font-data); font-size: 9.5px; line-height: 1.2; color: var(--gl-text-mid); white-space: nowrap; }

/* Closing band: four sectors, three windows each. */
.home-band { background: var(--gl-bg-darker); color: var(--gl-text-lite); padding: clamp(56px, 5vw, 80px) 24px; text-align: center; }
.home-band h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.6vw, 56px); line-height: 1.04; letter-spacing: -0.01em; margin: 0 0 36px; text-transform: uppercase; text-wrap: balance; }
.home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1200px; margin: 0 auto 28px; text-align: left; }
.home-col-h { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin-bottom: 12px; text-align: center; }
.home-cell { background: var(--gl-bg-dark); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.home-cell:last-child { margin-bottom: 0; }
.home-cell-l { font-family: var(--font-data); font-size: 9px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gl-text-dim); display: block; margin-bottom: 4px; }
.home-cell-n { font-family: var(--font-data); font-size: 12px; line-height: 1.2; color: var(--gl-text-lite); }
.home-cell-n b { color: var(--gl-amber); font-weight: 700; font-size: 18px; }
/* The Buy link keeps its visual size; padding + negative margin grow the hit area. */
.home-cell .btn-home-secondary { flex: none; }
.home-band-fine { font-family: var(--font-data); font-size: 12.5px; line-height: 1.6; color: var(--gl-text-dim); max-width: 56ch; margin: 0 auto 28px; text-wrap: pretty; }

.home-footer { padding: 30px 24px 46px; border-top: 1px solid rgba(42,42,40,0.14); text-align: center; }
.home-footer p { font-size: 12px; color: var(--gl-text-mid); margin: 4px 0; }
.home-footer a { color: inherit; }
.home-footer a:hover { color: var(--gl-text); }
.home-legal { font-family: var(--font-data); font-size: 11px; display: flex; gap: 6px 14px; justify-content: center; flex-wrap: wrap; margin-top: 10px; color: var(--gl-text-mid); }
.home-legal a { padding: 6px 2px; }

@media (max-width: 860px) {
    .home-value-grid { grid-template-columns: 1fr; gap: 34px; }
    .home-timeline { grid-template-columns: 1fr 1fr; }
    .home-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
    .home-strip.cols-3, .home-strip.cols-4 { display: flex; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 4px 16px 18px; scroll-snap-type: x proximity; }
    .home-strip .home-frame { flex: 0 0 260px; scroll-snap-align: start; }
    .home-value-sub, .home-value-sub.wide { max-width: 60ch; }
    /* Two-line price caption keeps price + button on one row down to 560px. */
    .home-quickbuy .qb-price-cap { max-width: 30ch; }
}
@media (max-width: 560px) {
    .home-nav { padding: 10px 16px; gap: 10px; }
    .home-nav .home-nav-agent { display: none; }
    .home-hero { padding: 40px 16px 36px; }
    .home-title { margin-bottom: 14px; }
    .home-dek { font-size: 16px; margin-bottom: 26px; }
    .home-quickbuy { padding: 16px 16px 14px; border-radius: 14px; }
    .home-quickbuy .qb-toggle { display: flex; width: 100%; box-sizing: border-box; }
    .home-quickbuy .qb-toggle button { flex: 1; padding: 10px 12px; }
    .home-quickbuy .qb-chip { padding: 9px 14px; }
    .home-quickbuy { padding: 16px 16px 18px; }
    .home-quickbuy .qb-states { grid-template-columns: 1fr 1fr; }
    .home-quickbuy .qb-row { grid-template-columns: 1fr; gap: 14px; }
    .home-quickbuy .qb-go { width: 100%; }
    .home-doorstrip { flex-direction: column; align-items: stretch; text-align: center; }
    .home-doorstrip code { text-align: center; }
    .home-quickbuy .qb-price-cap { max-width: none; }
    .home-quickbuy .qb-go { flex: none; }
    .home-doorstrip { padding: 14px 16px; gap: 10px 8px; }
    .home-doorstrip span { flex: 1 1 100%; }
    .home-value { padding: 44px 16px; }
    .home-timeline, .home-grid { grid-template-columns: 1fr; }
    .home-timeline { margin-top: 28px; }
    .home-tl-step { padding: 14px 16px 18px; }
    .home-strip { margin-top: 24px; gap: 10px; }
    .home-strip .home-frame { flex-basis: 240px; }
    .home-frame { border-radius: 12px; padding: 6px; }
    /* The two wide frames would shrink to a line at phone width; let the image
       keep a legible width and scroll inside its frame. The caption stays put. */
    .home-frame.full { overflow-x: auto; }
    .home-frame.full img { min-width: 640px; }
    .home-frame.full figcaption { position: sticky; left: 0; }
    .home-stack { margin-top: 26px; gap: 14px; }
    .home-visual { padding: 22px 18px 18px; }
    .home-vol-num { font-size: 36px; }
    .home-bars { gap: 6px; height: 100px; }
    .home-bar-col { gap: 3px; }
    .home-bar-lbl { font-size: 9.5px; }
    .home-bar-n { font-size: 9px; letter-spacing: -0.01em; }
    .home-band { padding: 44px 16px 48px; }
    .home-band h2 { margin-bottom: 24px; }
    .home-col + .home-col { margin-top: 8px; }
    .home-footer { padding: 26px 16px 40px; }
}

/* ─── Offer codes on the Orders page (ADR-058) ─────────────────────────── */
.offers-section { margin: 0 0 32px; padding: 0 0 24px; border-bottom: 1px solid var(--border, #e5e5e5); }
.offers-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offers-head h2, .orders-h2 { font-size: 1.15rem; margin: 0; }
.orders-h2 { margin-bottom: 4px; }
.offers-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; letter-spacing: 0.02em; }
.offers-note { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offers-revoke { color: var(--danger, #b42318); }
.offers-empty p { margin: 0; }
.offers-price-row { display: flex; align-items: center; gap: 8px; }
.offers-price-row input { flex: 1; min-width: 0; }
.offers-dollar { color: var(--text-muted, #6b6b6b); font-weight: 600; }
#offer-free.is-on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.offers-hint { margin: 4px 0 0; font-size: 0.85rem; color: var(--text-muted, #6b6b6b); }
.offers-error { margin: 12px 0 0; color: var(--danger, #b42318); font-size: 0.9rem; }
.offers-created-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.8rem; font-weight: 700; letter-spacing: 0.06em; text-align: center; padding: 12px 0 4px; }
@media (max-width: 720px) { .offers-note { display: none; } }

/* ── Filing kind (events feed, ADR-061) — the badge, the hidden chip, the record's History ── */
.filing-kind-badge {
    display: inline-block;
    font-size: 11px;
    line-height: 1.3;
    padding: 1px 7px;
    margin-left: 6px;
    border-radius: 999px;
    border: 1px solid var(--color-border, rgba(42,42,40,0.14));
    background: rgba(42,42,40,0.06);
    color: var(--color-text-muted);
    vertical-align: middle;
    white-space: nowrap;
    font-family: var(--font-ui);
    font-weight: 600;
}
.filing-kind-badge.new { display: none; }              /* the default wears no badge on a row */
.detail-meta .filing-kind-badge.new { display: inline-block; margin-left: 0; }
.filing-kind-badge.existing { background: rgba(215,122,0,0.10); border-color: rgba(215,122,0,0.45); color: var(--gl-amber-dk, #B56600); }
.filing-kind-badge.nonprofit { background: rgba(42,42,40,0.04); }
.filing-kind-badge.dissolved { background: rgba(160,40,40,0.08); border-color: rgba(160,40,40,0.35); color: #8a2a2a; }
tr.row-dissolved td { opacity: 0.7; }
tr.row-dissolved .entity-name-struck { text-decoration: line-through; }
.gl-timeline { list-style: none; margin: 0; padding: 0; }
.gl-timeline li { display: grid; grid-template-columns: 110px 14px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border, rgba(42,42,40,0.10)); }
.gl-timeline li:last-child { border-bottom: 0; }
.gl-timeline .tl-date { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); }
.gl-timeline .tl-date small { display: block; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.gl-timeline .tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gl-amber, #D77A00); margin-top: 4px; }
.gl-timeline li.genesis .tl-dot { background: var(--color-text-muted); }
.gl-timeline li.exit .tl-dot { background: #8a2a2a; }
.gl-timeline .tl-title { font-weight: 600; font-size: 13px; }
.gl-timeline .tl-body { font-size: 12px; color: var(--color-text-muted); }
@media (max-width: 640px) { .gl-timeline li { grid-template-columns: 84px 12px 1fr; } }

/* Edit delivery modal (Orders ▸ Deliveries). */
.dlv-gap { display: block; margin-top: 14px; }
.dlv-email-note { margin-top: 8px; }
.dlv-days { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.dlv-day { margin-top: 8px; }
.modal-body .dlv-words { margin: 10px 0 0; color: var(--gl-text); }