/* ═══════════════════════════════════════════════════════════════════════════
   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: 32px;
}

.top-bar-brand {
    display: flex;
    align-items: baseline;
    gap: 0;
    flex-shrink: 0;
}

.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 {
    padding: 6px 14px;
    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 (≤1100px) ────────────────
   Below 1100px the 11 nav links 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. */

.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; }

/* Drawer group markers (Reference section) — drawer-only */
.nav-drawer-divider,
.nav-drawer-label { 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 (≤1100px): the title
   turns into a static group label and the links render inline, same
   pattern as .nav-drawer-label. */
.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: 200px;
    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); }
.nav-group-menu .nav-link { display: block; white-space: nowrap; }

@media (max-width: 1100px) {
    .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); }

    .nav-drawer-divider {
        display: block;
        height: 1px;
        background: rgba(42,42,40,0.12);
        margin: 8px 14px;
    }
    .nav-drawer-label {
        display: block;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gl-text-mid);
        padding: 8px 14px 2px;
    }

    /* 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; }
    .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;
    }
}

@media (max-width: 480px) {
    #auth-label { display: none; }    /* icon-only Set Key on the smallest screens */
}

@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;
}

.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;
}


/* ── 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;
    gap: 8px;
    flex-shrink: 0;
}

.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;
}

/* 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;
    flex: 1;
}
.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 input { accent-color: var(--gl-amber); }

.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"],
.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: 1100px;
    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;
}
/* Wide ledger scrolls inside its own container on narrow viewports. */
#orders-body {
    overflow-x: auto;
}
.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);
}
/* 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;
}