/* ============================================================
   app-shell.css — v2 app shell layout
   Owner: Agent B (Phase 1)
   Provides: light-theme header, 260px sidebar, scrollable main,
             context banner. Does NOT define source panel
             (.src-panel — Agent D) or raw tables view
             (.rp / .rtc — Agent E).
   Tokens: see static/css/styles.css :root
   ============================================================ */

/* Reset overflow behavior for the new shell.
   The old dark shell allowed page scroll; v2 keeps header/sidebar
   pinned and scrolls only the main column. */
html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--f);
    background: var(--bg);
    color: var(--tx);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}

/* ── APP HEADER ── */
.app-hdr {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: var(--hdr-h);
    background: var(--s1);
    border-bottom: 1px solid var(--bd2);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 1.25rem;
    gap: 1rem;
}

.hdr-left   { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.hdr-center { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.hdr-right  { display: flex; align-items: center; justify-content: flex-end; gap: .625rem; }

/* Logo wrapper — keeps swatch + wordmark together as a single clickable link
   at the left edge of the header. */
.hdr-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}

.hdr-swatch {
    height: 26px;
    opacity: .9;
}
.hdr-name {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--tx);
}
.hdr-name .ai { color: var(--ac); }

/* Header access code chip + credit bar (carryover IDs from old shell) */
.hdr-left .dashboard-access {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.hdr-left .dashboard-code-wrapper { position: relative; }
.hdr-left .dashboard-code-btn {
    font-family: var(--fm);
    font-size: .7rem;
    color: var(--txm);
    background: var(--s2);
    border: 1px solid var(--bd);
    border-radius: 3px;
    padding: .2rem .5rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
    transition: all .15s;
}
.hdr-left .dashboard-code-btn:hover {
    color: var(--tx);
    border-color: var(--txm);
}
.hdr-left .dashboard-code-caret { font-size: .55rem; opacity: .7; }
.hdr-left .dashboard-code-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--s1);
    border: 1px solid var(--bd);
    border-radius: var(--rs);
    box-shadow: 0 4px 12px rgba(15, 22, 41, .08);
    min-width: 140px;
    z-index: 220;
    overflow: hidden;
}
.hdr-left .dashboard-code-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: .45rem .65rem;
    font-size: .75rem;
    color: var(--tx);
    background: transparent;
    border: none;
    cursor: pointer;
}
.hdr-left .dashboard-code-menu-item:hover { background: var(--s2); }

.hdr-left .dashboard-credits {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.hdr-left .dashboard-credit-bar {
    width: 60px;
    height: 4px;
    background: var(--s3);
    border-radius: 2px;
    overflow: hidden;
}
.hdr-left .dashboard-credit-fill {
    height: 100%;
    background: var(--success);
    border-radius: 2px;
    width: 0%;
    transition: width .25s ease;
}
.hdr-left .dashboard-credit-text {
    font-family: var(--fm);
    font-size: .63rem;
    color: var(--txm);
}

/* Preview-mode indicator (right side) */
.hdr-preview-ind {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}
.preview-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
}
.preview-label {
    font-size: .75rem;
    color: var(--txm);
}

/* Trial-only CTA strip in the header — shown only in app_mode === 'trial'
   so anonymous visitors have an obvious path to a code / paid credits. */
.hdr-trial-cta {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}
.hdr-trial-link {
    font-size: .75rem;
    color: var(--ac);
    text-decoration: none;
    padding: .25rem .375rem;
    border-radius: var(--rs);
    transition: all .15s;
    white-space: nowrap;
}
.hdr-trial-link:hover {
    color: var(--tx);
    background: var(--ac2);
}
.hdr-trial-sep {
    color: var(--txd);
    font-size: .65rem;
}

/* Inline "Already have a code?" entry in the trial header strip.
   Compact label + input + small Go button, sized to match the other
   .hdr-trial-link items so the strip stays balanced. */
.hdr-code-entry {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}
.hdr-code-label {
    font-size: .72rem;
    color: var(--txm);
    white-space: nowrap;
}
.hdr-code-form {
    display: inline-flex;
    align-items: stretch;
    gap: .25rem;
}
.hdr-code-form input {
    width: 230px;
    padding: .25rem .45rem;
    border: 1px solid var(--bd);
    border-radius: var(--rs);
    font-family: var(--fm);
    font-size: .72rem;
    color: var(--tx);
    background: var(--s1);
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: border-color .15s;
}
.hdr-code-form input:focus {
    outline: none;
    border-color: var(--ac);
    box-shadow: 0 0 0 2px var(--ac2);
}
.hdr-code-form .btn {
    padding: .25rem .65rem;
    font-size: .72rem;
    line-height: 1.1;
    background: var(--ac);
    color: #fff;
    border: 1px solid var(--ac);
    border-radius: var(--rs);
    font-weight: 600;
    cursor: pointer;
    /* "Go →" needs to stay on one line — the right-arrow glyph was
       wrapping under the "Go" text in narrow flex layouts. */
    white-space: nowrap;
    flex-shrink: 0;
}
.hdr-code-form .btn:hover { background: #2d4fd6; border-color: #2d4fd6; }
.hdr-code-msg {
    font-size: .7rem;
    margin-left: .375rem;
}
.hdr-code-msg.error { color: var(--error); }
.hdr-code-msg.ok    { color: var(--success); }

/* Header settings + home link (small, low-key) */
.hdr-settings-link,
.hdr-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: var(--txm);
    padding: .3rem .55rem;
    border-radius: var(--rs);
    border: 1px solid transparent;
    transition: all .15s;
    text-decoration: none;
    line-height: 1;
}
.hdr-home-link { font-size: .75rem; }
.hdr-settings-link:hover,
.hdr-home-link:hover {
    color: var(--tx);
    background: var(--s2);
    border-color: var(--bd);
}

/* Bucket A2 — Data View Redesign: mockup .tbtn (header Import/Export).
   White surface, --bd border, 6px radius, .82rem weight 500. Hover
   darkens border only — no bg flash. */
.app-hdr .btn-outline.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .8rem;
    border-radius: var(--rs);
    font-size: .82rem;
    font-weight: 500;
    border: 1px solid var(--bd);
    color: var(--tx);
    background: var(--s1);
    transition: all .15s;
    white-space: nowrap;
    cursor: pointer;
}
.app-hdr .btn-outline.btn-sm:hover:not(:disabled) {
    border-color: var(--txm);
}
.app-hdr .btn-outline.btn-sm:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ── APP LAYOUT ── */
.app-layout {
    display: flex;
    height: calc(100vh - var(--hdr-h));
    margin-top: var(--hdr-h);
    overflow: hidden;
}

/* ── SIDEBAR ── */
.sidebar {
    width: var(--sb-w);
    min-width: 200px;
    max-width: 520px;
    flex-shrink: 0;
    background: var(--s2);
    border-right: 1px solid var(--bd);
    display: flex;
    position: relative;
    flex-direction: column;
    overflow: hidden;
}

.sb-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .625rem .875rem;
    border-bottom: 1px solid var(--bd);
    flex-shrink: 0;
    background: var(--s1);
}
.sb-hdr-label {
    font-family: var(--fm);
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--txm);
}
.sb-hdr-actions {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.sb-add-btn,
.sb-sort-btn,
.sb-hier-btn,
.sb-collapse-btn {
    color: var(--txm);
    font-size: .72rem;
    padding: .2rem .5rem;
    border-radius: 3px;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1;
}
.sb-add-btn:hover,
.sb-sort-btn:hover,
.sb-hier-btn:hover,
.sb-collapse-btn:hover {
    color: var(--tx);
    background: var(--s2);
    border-color: var(--bd);
}

/* Queued (pending) files: italic + lighter to signal "waiting in line".
   Active and complete files use the default style. The status badge
   (.fi-meta) follows the same treatment. */
.fi-wrap.fi-queued .fi-name,
.fi-wrap.fi-queued .fi-meta,
.fi-wrap.fi-queued .hole-empty {
    font-style: italic;
    color: var(--txm);
    opacity: 0.75;
}

/* Phase 2 (code-system workplan §8): visual treatment for files hydrated
   from a user's local JSON via the Load button. Italic filename + a small
   "loaded" hint signals these aren't server-side jobs. */
.fi-wrap.loaded-from-file .fi-name {
    font-style: italic;
    color: var(--txm);
}
.fi-wrap.loaded-from-file .fi-hdr::after {
    content: 'loaded';
    font-family: var(--fm, 'Space Mono', monospace);
    font-size: .58rem;
    text-transform: uppercase;
    color: var(--txm);
    background: var(--s2);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: .3rem;
    opacity: .8;
}

.sb-collapse-btn[data-mode="collapsed"] svg {
    transform: rotate(180deg);
}

/* ── Sidebar right-edge resize handle ──
   12px-wide grab strip straddling the sidebar's right border. Same UX
   pattern as the source panel's left-edge resize handle. Hidden in
   collapsed mode (no point resizing a hidden sidebar). */
.sb-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6px;
    width: 12px;
    cursor: col-resize;
    z-index: 15;
    background: transparent;
    transition: background .15s;
}
.sb-resize-handle::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4.5px;
    width: 3px;
    background: transparent;
    transition: background .15s;
}
.sb-resize-handle:hover::after,
.sidebar.resizing .sb-resize-handle::after {
    background: var(--ac);
    opacity: .35;
}
.sidebar.resizing {
    transition: none;
}

/* ── Sidebar collapse/expand ──
   When .sidebar-toggled-closed is on the layout, the sidebar slides off
   (width 0, no resize). A small floating "Show files" button takes its
   place at the top-left of the main column. */
.app-layout.sidebar-toggled-closed .sidebar {
    width: 0 !important;
    min-width: 0 !important;
    border-right: none;
    overflow: hidden;
}
.app-layout.sidebar-toggled-closed .sb-resize-handle {
    display: none;
}

/* Floating "show sidebar" affordance — icon-only chip pinned to the very
   left edge of the main column when the sidebar is hidden. Compact so it
   doesn't crowd the ctx-banner that lives in the same row. */
.sb-show-btn {
    display: none;
    position: absolute;
    top: calc(var(--hdr-h) + 6px);
    left: 4px;
    z-index: 100;
    background: var(--s1);
    border: 1px solid var(--bd);
    border-radius: var(--rs);
    color: var(--txm);
    width: 26px;
    height: 26px;
    padding: 0;
    cursor: pointer;
    transition: all .15s;
    box-shadow: 0 1px 3px rgba(15, 22, 41, .08);
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.app-layout.sidebar-toggled-closed .sb-show-btn {
    display: inline-flex;
}
.sb-show-btn:hover {
    color: var(--tx);
    border-color: var(--txm);
}
/* When sidebar is hidden, indent the ctx-banner so its leading text
   ("Live Demo — explore samples or upload your own…") clears the show
   button instead of running under it. */
.app-layout.sidebar-toggled-closed .ctx-banner {
    padding-left: 40px;
}

/* Hide-sidebar button in the sidebar header (mirrors the show button when
   open). Sits in .sb-hdr-actions to the right of the existing toggles. */
.sb-hide-btn {
    color: var(--txm);
    font-size: .72rem;
    padding: .2rem .4rem;
    border-radius: 3px;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1;
}
.sb-hide-btn:hover {
    color: var(--tx);
    background: var(--s2);
    border-color: var(--bd);
}

/* ── Don't-ask-again checkbox inside the confirm dialog ── */
.confirm-dialog-suppress {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0 1rem;
    font-size: .8rem;
    color: var(--txm);
    cursor: pointer;
    user-select: none;
}
.confirm-dialog-suppress input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--ac);
    cursor: pointer;
}
.confirm-dialog-suppress:hover {
    color: var(--tx);
}

/* Sort button: SVG icon flips vertically when direction is desc, so the same
   asset reads as A→Z (up arrow / ascending) or Z→A (down arrow). */
.sb-sort-btn[data-direction="desc"] svg {
    transform: scaleY(-1);
}
.sb-sort-btn .sb-sort-lbl,
.sb-hier-btn .sb-hier-lbl {
    font-family: var(--fm);
    font-size: .6rem;
    letter-spacing: .05em;
}

/* Hierarchy toggle styled as the sidebar's primary label — replaces the
   static "FILES" span. The label text flips FILES ↔ HOLES based on the
   active hierarchy mode; the swap icon hints at the toggle behavior. */
.sb-hier-label {
    color: var(--txm) !important;
    padding: .2rem .4rem !important;
}
.sb-hier-label .sb-hier-lbl {
    font-family: var(--fm);
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--txm);
}
.sb-hier-label:hover .sb-hier-lbl,
.sb-hier-label[data-mode="by-hole"] .sb-hier-lbl {
    color: var(--ac);
}
.sb-hier-label[data-mode="by-hole"] {
    color: var(--ac) !important;
}

/* Bucket B3 — Data View Redesign: mockup .ftool square icon buttons
   with hover-reveal behavior. Open icon stays faintly visible (.55
   opacity) so the affordance is discoverable; pin/remove/delete fade
   in on row hover (opacity 0 → .7), bright on icon hover (1). */
.fi-hdr .fi-open, .hole-item .fi-open,
.fi-hdr .fi-remove, .hole-item .fi-remove,
.fi-hdr .fi-pin,
.fi-hdr .fi-delete {
    width: 26px;
    height: 26px;
    border-radius: var(--rs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--txm);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all .12s;
    flex-shrink: 0;
    line-height: 1;
    margin-left: .1rem;
    padding: 0;
}
/* All file-action icons are persistently visible at .55 opacity so the
   row's affordances are always discoverable. Row hover brightens them
   to .9; per-icon hover (below) goes to full 1. */
.fi-hdr .fi-open,
.fi-hdr .fi-remove,
.fi-hdr .fi-pin,
.fi-hdr .fi-delete { opacity: .55; }
.fi-wrap:hover > .fi-hdr .fi-open,
.fi-wrap:hover > .fi-hdr .fi-remove,
.fi-wrap:hover > .fi-hdr .fi-pin,
.fi-wrap:hover > .fi-hdr .fi-delete,
.hole-item:hover .fi-open { opacity: .9; }
/* Icon-level hovers — pin/open get neutral bg; remove/delete get danger. */
.fi-hdr .fi-open:hover,
.hole-item .fi-open:hover,
.fi-hdr .fi-pin:hover {
    background: var(--s3);
    color: var(--tx);
    opacity: 1 !important;
}
.fi-hdr .fi-remove:hover,
.fi-hdr .fi-delete:hover,
.hole-item .fi-remove:hover {
    background: #fdeaea;
    color: #c0392b;
    opacity: 1 !important;
}
.fi-pin.pinned {
    color: var(--ac);
    opacity: 1 !important;
}
/* Visual hint on the whole row when the file is pinned */
.fi-wrap.fi-pinned-row > .fi-hdr {
    border-left: 2px solid var(--ac);
}

/* ── Phase 5 — slow-glow expiry warning chip ──
   Renders for unpinned files within 7 days of expiry. Slow orange fade
   draws the eye without being obnoxious. Tooltip on hover explains
   "pin or download to keep." */
.fi-expiry-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .3rem;
    padding: .05rem .35rem;
    font-family: var(--fm);
    font-size: .6rem;
    color: #9a6e10;
    background: #fef3c7;
    border: 1px solid #fbd38d;
    border-radius: 999px;
    cursor: help;
    animation: fi-expiry-glow 2.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes fi-expiry-glow {
    0%, 100% {
        background: #fef3c7;
        box-shadow: 0 0 0 0 rgba(251, 211, 141, 0.6);
    }
    50% {
        background: #fde68a;
        box-shadow: 0 0 0 4px rgba(251, 191, 36, 0);
    }
}

/* ── Processed-at timestamp in file meta line ──
   Bucket B2 — Data View Redesign: mockup .fsub timestamp typography
   (.68rem mono --txd). */
.fi-timestamp {
    margin-left: .3rem;
    font-family: var(--fm);
    font-size: .68rem;
    color: var(--txd);
    white-space: nowrap;
    flex-shrink: 0;
    cursor: help;
}

/* (Bucket B3 redundant block removed — the consolidated rule earlier
   already covers .fi-hdr .fi-delete:hover, .fi-hdr .fi-remove:hover,
   and .hole-item .fi-remove:hover with the danger hover treatment.) */

/* ── Hidden files section — pinned at the TOP of the sidebar, always
   discoverable. Click the header to expand/collapse the dismissed list. */
/* Bucket B5 — Data View Redesign (revised spec): top-border divider;
   header is sentence-case button (not uppercase mono); count pill --s3;
   chevron rotates -90deg when CLOSED (rather than 180 when open);
   restore + delete BOTH bordered 24px square buttons. */
.sb-hidden-section {
    margin: .45rem .25rem 0;
    padding-top: .4rem;
    border-top: 1px solid var(--bd);
}
.sb-hidden-hdr {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .45rem .55rem;
    border: none;
    background: transparent;
    border-radius: var(--rs);
    color: var(--txm);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
}
.sb-hidden-hdr:hover {
    background: var(--s1);
}
.sb-hidden-chev {
    transition: transform .15s;
}
.sb-hidden-section:not(.open) .sb-hidden-chev {
    transform: rotate(-90deg);
}
.sb-hidden-title {
    flex: 1;
    text-align: left;
}
.sb-hidden-count {
    font-family: var(--fm);
    font-size: .66rem;
    font-weight: 700;
    background: var(--s3);
    color: var(--txm);
    border-radius: 999px;
    padding: .05rem .42rem;
    min-width: 18px;
    text-align: center;
}
/* When the section has nothing in it, dim the count badge so it reads
   as a passive indicator rather than an active alert. */
.sb-hidden-section.empty .sb-hidden-count {
    opacity: .55;
}
.sb-hidden-empty {
    font-family: var(--fm);
    font-size: .68rem;
    color: var(--txd);
    padding: .35rem .55rem;
    font-style: italic;
}
.sb-hidden-body {
    display: none;
    flex-direction: column;
    gap: .1rem;
    padding: .15rem .3rem 0;
}
.sb-hidden-section.open .sb-hidden-body {
    display: flex;
}
.sb-hidden-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .55rem;
    border-radius: var(--rs);
}
.sb-hidden-row:hover {
    background: var(--s1);
}
.sb-hidden-name {
    flex: 1;
    min-width: 0;
    font-size: .8rem;
    color: var(--txm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-hidden-ts {
    font-family: var(--fm);
    font-size: .66rem;
    color: var(--txd);
    flex-shrink: 0;
}
.sb-hidden-restore,
.sb-hidden-delete {
    width: 24px;
    height: 24px;
    border-radius: var(--rs);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bd);
    background: var(--s1);
    color: var(--txm);
    cursor: pointer;
    transition: all .12s;
}
.sb-hidden-restore:hover {
    border-color: var(--ac);
    color: var(--ac);
}
.sb-hidden-delete:hover {
    border-color: #e0a0a0;
    color: #c0392b;
    background: #fdeaea;
}

/* ── Sidebar two-mode sections (trial: Your Files + Preloaded Samples) ──
   Each section gets a slightly different surface tint so the two groups
   are distinguishable at a glance even without reading the labels. */
.sb-section {
    border-bottom: 1px solid var(--bd);
}
.sb-section:last-child {
    border-bottom: none;
}
/* Your Files: bright white surface — emphasizes that it's the user's primary work */
.sb-section[data-section-id="user-files"] {
    background: var(--s1);
}
/* Preloaded Samples: keep the sidebar's --s2 tint to recede slightly */
.sb-section[data-section-id="preloaded-samples"] {
    background: var(--s2);
}
.sb-section-hdr {
    display: flex;
    align-items: center;
    gap: .425rem;
    padding: .425rem .75rem;
    cursor: pointer;
    transition: background .1s;
    user-select: none;
}
.sb-section-hdr:hover {
    background: var(--s3);
}
.sb-section-chev {
    color: var(--txm);
    transition: transform .15s;
    flex-shrink: 0;
}
.sb-section:not(.open) .sb-section-chev {
    transform: rotate(-90deg);
}
.sb-section-title {
    font-family: var(--fm);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--txm);
    flex: 1;
    min-width: 0;
}
.sb-section-count {
    font-family: var(--fm);
    font-size: .58rem;
    color: var(--txd);
    background: var(--s1);
    border: 1px solid var(--bd);
    border-radius: 999px;
    padding: 0 .4rem;
    line-height: 1.5;
}
.sb-section-body {
    padding-top: .25rem;
    padding-bottom: .375rem;
}
.sb-section:not(.open) .sb-section-body {
    display: none;
}

.sb-content {
    flex: 1;
    overflow-y: auto;
    padding: .5rem 0;
}
.sb-content::-webkit-scrollbar { width: 4px; }
.sb-content::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 2px; }

/* Divider between sb-content and sb-view-section */
.sb-view-section {
    padding: .5rem .875rem;
    border-top: 1px solid var(--bd2);
}
.sb-view-label {
    font-family: var(--fm);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--txd);
    margin-bottom: .375rem;
}
.sb-view-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .5rem;
    border-radius: 4px;
    width: 100%;
    text-align: left;
    font-size: .78rem;
    color: var(--txm);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all .1s;
}
.sb-view-btn:hover { color: var(--tx); background: var(--s2); }
.sb-view-btn.active { color: var(--tx); background: var(--s2); }

/* Page nav section (raw tables mode only) — visibility controlled by JS */
#sb-page-nav {
    padding: .5rem .875rem;
    border-top: 1px solid var(--bd2);
}

/* ── MAIN CONTENT ── */
.app-main {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
    background: var(--bg);
}
.app-main::-webkit-scrollbar { width: 6px; }
.app-main::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; }

/* ── CONTEXT BANNER ── */
/* ── Context banner ──
   Sits at the top of the main content area in trial / live-demo mode.
   Padding + border match .sb-hdr (the sidebar "FILES + Add" header) so the
   two stripes line up horizontally and the chrome reads as a single bar
   across the top. Amber kept as the semantic accent for "live demo / trial"
   state, but softened — light amber tint on white, with the dot-style accent
   moved to a small leading badge rather than a heavy border. */
.ctx-banner {
    background: var(--s1);
    border-bottom: 1px solid var(--bd);
    padding: .625rem .875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    min-height: 41px;  /* matches .sb-hdr's natural height for cross-column alignment */
    box-sizing: border-box;
}
.ctx-banner > span {
    font-size: .75rem;
    color: var(--tx);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
/* Leading accent dot — the semantic "live demo" indicator. Subtle, no full bg. */
.ctx-banner > span::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber);
    flex-shrink: 0;
}
.ctx-banner a {
    font-size: .75rem;
    color: var(--ac);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s;
    white-space: nowrap;
}
.ctx-banner a:hover {
    color: var(--tx);
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════
   POST-PHASE-1 FIX PASS (Results Viewer v2 fidelity)
   These rules were missing from Agent B's initial app-shell.css.
   Lifted directly from Results Viewer v2.html so the rendered UI
   matches the prototype 1:1.
   ════════════════════════════════════════════════════════════════ */

/* ── Body / font baseline (prototype default) ──
   Override the v1 dark-theme body so the new shell renders consistently. */
body {
    font-family: var(--f);
    background: var(--bg);
    color: var(--tx);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}
a { color: inherit; text-decoration: none; }
button {
    font-family: var(--f);
    cursor: pointer;
    border: none;
    background: transparent;
    color: inherit;
}

/* ── Sidebar header — match prototype class names emitted by Agent B ── */
.sb-hdr-label, .sb-title {
    font-family: var(--fm);
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--txm);
}

/* ── File tree (.fi-*) ── */
.fi-wrap { margin-bottom: .125rem; }
.fi-hdr {
    display: flex; align-items: center; gap: .5rem;
    padding: .425rem .75rem .425rem .5rem;
    cursor: pointer;
    border-radius: 4px;
    margin: 0 .25rem;
    transition: background .1s;
}
.fi-hdr:hover { background: var(--s2); }
/* Bucket B1 — Data View Redesign: active file row gets a white
   surface + hairline ring on the WRAPPER (not the inner header).
   Removed: prior --ac2 tint and inset left accent bar. Filename
   colored accent for affordance. */
.fi-wrap.active {
    background: var(--s1);
    border-radius: var(--r);
    box-shadow: 0 0 0 1px var(--bd);
}
.fi-wrap.active > .fi-hdr {
    background: transparent;
    box-shadow: none;
}
.fi-wrap.active > .fi-hdr .fi-name { color: var(--ac); font-weight: 600; }
/* Preloaded-Samples section uses --s2 as its body bg; explicit override
   ensures the active wrapper still pops as elevated white surface. */
.sb-section[data-section-id="preloaded-samples"] .fi-wrap.active {
    background: var(--s1);
}
.sb-section[data-section-id="preloaded-samples"] .fi-wrap.active > .fi-hdr {
    background: transparent;
}
.fi-chev {
    color: var(--txm);
    transition: transform .15s;
    flex-shrink: 0;
}
.fi-wrap.open .fi-chev { transform: rotate(0deg); }
.fi-wrap:not(.open) .fi-chev { transform: rotate(-90deg); }
.fi-check {
    font-size: .65rem;
    color: var(--success);
    flex-shrink: 0;
    width: 12px;
    text-align: center;
}
/* Bucket B2 — Data View Redesign: mockup .fname / .fsub typography. */
.fi-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--tx);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fi-meta {
    font-family: var(--f);
    font-size: .74rem;
    font-weight: 500;
    color: var(--txm);
    white-space: nowrap;
    flex-shrink: 0;
}
.hole-list {
    display: none;
    padding: .125rem 0 .25rem 2rem;
}
.fi-wrap.open .hole-list { display: block; }
/* Bucket B4 — Data View Redesign: mockup .hrow.
   Green status dot (7px --green), mono .hole-id (.8rem/700/--tx),
   dim mono page count, active row tinted --ac2 with id flipped --ac. */
.hole-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .55rem;
    margin: 0 .25rem;
    border-radius: var(--rs);
    cursor: pointer;
    transition: background .12s;
}
.hole-item:hover { background: var(--s2); }
.hole-item.active {
    background: var(--ac2);
}
.hole-item.active .hole-id {
    color: var(--ac);
}
.hole-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}
.hole-item.active .hole-dot { background: var(--ac); }
.hole-id {
    font-family: var(--fm);
    font-size: .8rem;
    font-weight: 700;
    color: var(--tx);
    letter-spacing: -.01em;
}
.hole-pages {
    font-family: var(--fm);
    font-size: .66rem;
    color: var(--txd);
    margin-left: auto;
}

/* ── Sidebar empty state ── */
.sb-empty {
    padding: .75rem 1rem;
    font-size: .75rem;
    color: var(--txd);
    text-align: center;
}

/* ── Sidebar page nav (raw-tables mode) ── */
.sb-pg-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem;
    padding: .325rem .5rem;
    border-radius: 4px;
    margin: 0 .25rem .125rem;
    width: calc(100% - .5rem);
    text-align: left;
    font-size: .78rem;
    color: var(--txm);
    cursor: pointer;
    transition: all .1s;
}
.sb-pg-item:hover { color: var(--tx); background: var(--s3); }
.sb-pg-item.active { color: var(--tx); background: var(--s3); }
.sb-pg-label { flex: 1; }
.sb-pg-meta {
    font-family: var(--fm);
    font-size: .6rem;
    color: var(--txd);
}

/* ── Section toggle (Lithology / Survey / Assays pills) ──
   categorized-view.js emits .section-toggle-* classes; we style them to match
   the prototype's .show-tab visual treatment (rounded pill, accent on active). */
.section-toggle-bar,
.show-tabs {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: 1rem 0 .875rem;
    border-bottom: 1px solid var(--bd2);
    margin-bottom: 0;
    flex-wrap: wrap;
}
.section-toggle-label,
.show-lbl {
    font-family: var(--fm);
    font-size: .63rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--txm);
    margin-right: .25rem;
}
.section-toggle-pill,
.show-tab {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .75rem;
    border: 1px solid var(--bd);
    color: var(--txm);
    background: transparent;
    transition: all .15s;
    white-space: nowrap;
    cursor: pointer;
    font-family: var(--f);
}
.section-toggle-pill:hover,
.show-tab:hover {
    border-color: var(--txm);
    color: var(--tx);
}
.section-toggle-pill.active,
.show-tab.active {
    border-color: var(--ac);
    color: var(--ac);
    background: var(--ac2);
}
.section-toggle-pill.disabled,
.show-tab[style*="opacity"] {
    opacity: .5;
    cursor: not-allowed;
}
.section-toggle-count,
.show-tab .cnt {
    font-family: var(--fm);
    font-size: .65rem;
}

/* ── Hole-view section TABS (replaced the prior multi-select pill toggles).
   One tab is active at a time; the matching section renders below the tab
   bar and inactive sections are hidden via inline display:none. Emitted as
   .section-tab-bar + .section-tab + .section-tab-count from
   categorized-view.js. */
.section-tab-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 .35rem;            /* D3 — flush with the panel border above */
    margin-bottom: 0;
    border-bottom: 1px solid var(--bd);
    flex-wrap: nowrap;            /* D2 — tabs + tools stay on one line */
    background: var(--s1);
}

/* D2 — Tools area: count label + page-source pill, right-aligned inside
   the section tab strip. */
.section-tab-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .6rem;
    flex-shrink: 0;
}
.section-tab-count-label {
    font-family: var(--fm);
    font-size: .7rem;
    color: var(--txd);
    white-space: nowrap;
}
.section-src-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .6rem;
    border-radius: var(--rs);
    background: var(--s1);
    border: 1px solid var(--bd);
    font-family: var(--fm);
    font-size: .7rem;
    color: var(--txm);
    cursor: pointer;
    transition: all .12s;
    white-space: nowrap;
}
.section-src-link:hover {
    border-color: var(--ac);
    color: var(--ac);
}

/* D2 — Hide the now-redundant section-meta-strip; the source pill +
   count moved into the tab bar. */
.section-meta-strip { display: none; }

/* Bucket C3 — Data View Redesign (revised spec): mockup .dtab.
   Drop hover border-bottom-color so only ACTIVE gets the accent rail.
   Badge weight 700; active badge inverts to accent fill / white text. */
.section-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem .9rem;
    font-size: .85rem;
    font-family: var(--f);
    font-weight: 600;
    color: var(--txm);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;          /* overlap the bar's bottom border */
    cursor: pointer;
    transition: color .12s, border-color .12s;
    white-space: nowrap;
}
.section-tab:hover:not(.no-data) {
    color: var(--tx);
}
.section-tab.active {
    color: var(--ac);
    border-bottom-color: var(--ac);
    font-weight: 600;
}
.section-tab.no-data {
    opacity: .4;
    cursor: not-allowed;
}
.section-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 0 .42rem;
    height: 1.15rem;
    font-family: var(--fm);
    font-size: .66rem;
    font-weight: 700;
    color: var(--txm);
    background: var(--s3);
    border-radius: 999px;
}
.section-tab.active .section-tab-count {
    color: #fff;
    background: var(--ac);
}

/* ── Categorized data table chrome (.ts / .ts-head / .dt) ── */
.ts {
    margin-top: 1.25rem;
    border: 1px solid var(--bd);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--s1);
}
.ts-head {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem 1rem;
    background: var(--s2);
    border-bottom: 1px solid var(--bd);
}
.ts-title {
    font-family: var(--fm);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tx);
    font-weight: 700;
}
.ts-spacer { flex: 1; }
.ts-rows {
    font-family: var(--fm);
    font-size: .63rem;
    color: var(--txm);
}

/* ── Standard data table (matches Style Guide §8) ── */
.dt { width: 100%; border-collapse: collapse; }
.dt th {
    font-family: var(--fm);
    font-size: .63rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--txm);
    padding: .5rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--bd);
    background: var(--s2);
    white-space: nowrap;
    font-weight: 400;
}
.dt td {
    font-size: .8rem;
    color: var(--tx);
    padding: .45rem .75rem;
    border-bottom: 1px solid var(--bd2);
    background: var(--s1);
    vertical-align: top;
}
.dt tr:hover td { background: var(--ac2); }
.dt tr:last-child td { border-bottom: none; }

/* Source Column Handoff — the prior hover-reveal rules for
   .row-source-link / .section-source-link (opacity:0 → 1 on row hover)
   have been REMOVED. Per the new spec the pill is ALWAYS visible.
   The pill base styling now lives entirely in styles.css under
   "Source Column Handoff". Only the `.active` state remains here. */
.row-source-link.active,
.section-source-link.active {
    color: var(--ac);
}
/* Section-level source links (in section headers) stay visible always. */
.section-source-link {
    opacity: 1;
    margin-left: .5rem;
}

/* ── Hover effect on all data-table rows (prototype: .dt tr:hover td) ── */
.dt tr:hover td,
table.data-table tr:hover td,
.section-table tr:hover td {
    background: var(--ac2);
}

/* ── Trailing source-link column in the legacy raw view (.extracted-table) ──
   The legacy raw-results-view (Components.createPageSection) now adds a
   trailing source-link column per row, matching the .rtt / hole view
   pattern. Hidden by default, revealed on row hover. */
.extracted-table .extracted-table-src-col {
    width: 32px;
    background: var(--s2);
}
.extracted-table .extracted-table-src-cell {
    width: 32px;
    text-align: center;
    padding: 0 .25rem !important;
    vertical-align: middle;
}
.extracted-table .extracted-table-src-cell .row-source-link {
    opacity: 0;
    padding: .2rem .4rem;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--txm);
    font-size: .8rem;
    cursor: pointer;
    transition: all .15s;
    line-height: 1;
}
.extracted-table tr:hover .extracted-table-src-cell .row-source-link {
    opacity: 1;
}
.extracted-table .extracted-table-src-cell .row-source-link:hover {
    color: var(--ac);
    background: var(--ac2);
}
.extracted-table .extracted-table-src-cell .row-source-link.active {
    opacity: 1;
    color: var(--ac);
}

/* ── HITL flag (future use; matches prototype .hitl-flag) ── */
.hitl-flag {
    opacity: 0;
    padding: .2rem .3rem;
    color: var(--txd);
    cursor: pointer;
    transition: all .15s;
    font-size: .8rem;
}
.dt tr:hover .hitl-flag { opacity: 1; }
.hitl-flag:hover { color: var(--amber); background: var(--amber2); }
tr.flagged td { background: var(--amber2); }

/* ── TRIAL-MODE PINNED FILE (Phase 5b) ──
   Visual accent applied to a freshly uploaded trial job so the user can
   quickly distinguish their own file from preloaded samples. */
/* .trial-pinned visual treatment (Phase 5b) was removed — the "Your Files"
   vs "Preloaded Samples" section split now provides that distinction
   without the per-row accent border. The class is still emitted by
   sidebar-nav.js for backward compat / future use but renders as a no-op. */

/* ── Per-tab processing UI (replaces legacy dogbone spinner) ──
   Rendered into a .tab-content while its corresponding file is queued or
   actively processing. Pulses the swatch logo and shows a determinate
   progress bar driven by Components.updateTabProgress(). */
.tab-progress-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1.5rem;
    max-width: 420px;
    margin: 2rem auto;
}
/* Processing UI sizing — logo 2× (64px → 128px); text elements 1.5×. */
.tab-progress-swatch-wrap {
    width: 128px;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tab-progress-swatch {
    width: 100%;
    height: auto;
    display: block;
    animation: tab-progress-pulse 1.6s ease-in-out infinite;
    transform-origin: center;
}
@keyframes tab-progress-pulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.06); }
}
.tab-progress-name {
    font-size: 1.35rem;  /* was .9rem (1.5×) */
    font-weight: 500;
    color: var(--tx);
    text-align: center;
    word-break: break-all;
    max-width: 100%;
}
.tab-progress-bar-wrap {
    width: 100%;
    height: 6px;
    background: var(--s3);
    border-radius: 3px;
    overflow: hidden;
}
.tab-progress-bar-fill {
    height: 100%;
    background: var(--ac);
    border-radius: 3px;
    transition: width .2s ease;
}
.tab-progress-status {
    font-family: var(--fm);
    font-size: .975rem;  /* was .65rem (1.5×) */
    color: var(--txm);
    text-align: center;
    letter-spacing: .03em;
    min-height: 1em;
}
.tab-progress-tagline {
    font-size: 1.08rem;  /* was .72rem (1.5×) */
    color: var(--txm);
    text-align: center;
    margin-top: .5rem;
    line-height: 1.4;
    max-width: 28rem;
}

/* Legacy dogbone spinner — neutralized in v2 (replaced by .tab-progress-card).
   Keep the rule rather than purging callers in case any pre-v2 code path
   still injects the element. */
.dogbone-spinner,
.dogbone-spinner-container { display: none !important; }

/* ── TRIAL EMAIL GATE MODAL (Phase 5c) ──
   Opens on Export click in trial mode when server returns 402
   {require_email_gate: true}. */
.trial-gate-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 22, 41, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
}
.trial-gate-content {
    background: var(--s1);
    padding: 1.75rem 1.75rem 1.5rem;
    border-radius: var(--r);
    border: 1px solid var(--bd);
    max-width: 420px;
    width: calc(100% - 2rem);
    box-shadow: 0 12px 36px rgba(15, 22, 41, .18);
    font-family: var(--f);
}
.trial-gate-content h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--tx);
    margin: 0 0 .5rem;
    letter-spacing: -.005em;
}
.trial-gate-content p {
    font-size: .85rem;
    color: var(--txm);
    line-height: 1.5;
    margin: 0 0 1rem;
}
.trial-gate-content form {
    display: flex;
    flex-direction: column;
}
.trial-gate-content input[type=email] {
    width: 100%;
    padding: .625rem .75rem;
    background: var(--s1);
    border: 1px solid var(--bd);
    border-radius: var(--rs);
    font-family: var(--f);
    font-size: .875rem;
    color: var(--tx);
    margin-bottom: .375rem;
    transition: border-color .15s;
    box-sizing: border-box;
}
.trial-gate-content input[type=email]:focus {
    outline: none;
    border-color: var(--ac);
    box-shadow: 0 0 0 3px rgba(59, 93, 232, .12);
}
.trial-gate-error {
    color: var(--error);
    font-size: .78rem;
    min-height: 1.1rem;
    margin-bottom: .5rem;
    line-height: 1.35;
}
.trial-gate-content .btn {
    width: 100%;
    padding: .625rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--rs);
}
.trial-gate-content .btn-primary {
    background: var(--ac);
    color: var(--s1);
    border: 1px solid var(--ac);
}
.trial-gate-content .btn-primary:hover:not(:disabled) {
    filter: brightness(1.05);
}
.trial-gate-content .btn-primary:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ============================================================
   Settings page layout (Phase 6a)
   Sidebar + content panel pattern mirroring the app shell.
   ============================================================ */
.settings-layout {
    display: grid;
    grid-template-columns: var(--sb-w) 1fr;
    height: calc(100vh - var(--hdr-h));
    margin-top: var(--hdr-h);
    overflow: hidden;
}

.settings-sidebar {
    background: var(--s2);
    border-right: 1px solid var(--bd);
    padding: .5rem 0 1rem;
    overflow-y: auto;
    min-width: 0;
}
.settings-sidebar::-webkit-scrollbar { width: 4px; }
.settings-sidebar::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 2px; }

.settings-sidebar-hdr {
    padding: .75rem .875rem .5rem;
}
.settings-sidebar-title {
    font-family: var(--fm);
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--txm);
}

.settings-group { margin-bottom: .5rem; }
.settings-group-label {
    font-family: var(--fm);
    font-size: .58rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--txd);
    padding: .75rem .875rem .25rem;
}

.settings-sidebar .sb-item {
    padding: .375rem .875rem;
    border-radius: 0;
}
.settings-sidebar .sb-item:hover { background: var(--s3); color: var(--tx); }
.settings-sidebar .sb-item.active {
    background: var(--ac2);
    color: var(--ac);
    border-left: 2px solid var(--ac);
    padding-left: calc(.875rem - 2px);
    font-weight: 500;
}

.settings-main {
    overflow-y: auto;
    padding: 2rem 2.5rem;
    background: var(--bg);
    min-width: 0;
}
.settings-main::-webkit-scrollbar { width: 6px; }
.settings-main::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; }

.settings-panel {
    display: none;
    max-width: 1180px;
    margin: 0 auto;
}
.settings-panel.active { display: block; }

.settings-panel-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 .25rem;
    color: var(--tx);
}
.settings-panel-desc {
    color: var(--txm);
    font-size: .85rem;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}
.settings-panel-desc a {
    color: var(--ac);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
.settings-panel-desc a:hover { opacity: .85; }

.settings-panel h3 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--tx);
    margin: 1.5rem 0 .75rem;
    padding-bottom: .375rem;
    border-bottom: 1px solid var(--bd2);
}
.settings-panel section + section { margin-top: 1rem; }
.settings-panel-actions {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bd2);
    display: flex;
    gap: .5rem;
}


/* ── Header: Import + Export button group ── */
.hdr-transfer-btns {
    display: flex;
    gap: .375rem;
    align-items: center;
}

/* Active state for outline header buttons (flyout open) */
.btn.btn-outline.btn-sm.active {
    border-color: var(--ac);
    background: var(--ac2);
    color: var(--ac);
}

/* ── Import flyout ── */
.import-flyout {
    position: fixed;
    top: calc(var(--hdr-h) + .375rem);
    right: 1rem;                    /* JS will offset left of the export flyout */
    background: var(--s1);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    box-shadow: 0 4px 20px rgba(15, 22, 41, .10), 0 1px 4px rgba(15, 22, 41, .05);
    width: 280px;
    z-index: 220;
    overflow: hidden;
}
.import-flyout-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .575rem .875rem;
    background: var(--s2);
    border-bottom: 1px solid var(--bd);
    font-family: var(--fm);
    font-size: .63rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--txm);
}
.import-flyout-info {
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--txd);
    color: var(--txd);
    font-size: .6rem;
    font-family: var(--fm);
    transition: border-color .15s, color .15s;
}
.import-flyout-info:hover { border-color: var(--txm); color: var(--txm); }

.import-dropzone {
    margin: .875rem;
    border: 1.5px dashed var(--bd);
    border-radius: var(--r);
    padding: 1.75rem 1rem 1.25rem;
    text-align: center;
    cursor: pointer;
    background: var(--s1);
    transition: border-color .2s, background .2s;
}
.import-dropzone:hover,
.import-dropzone.dz-over {
    border-color: var(--ac);
    background: var(--ac2);
}
.import-dropzone:hover .import-dz-icon,
.import-dropzone.dz-over .import-dz-icon { color: var(--ac); }

.import-dz-icon {
    color: var(--txd);
    margin-bottom: .625rem;
    transition: color .2s;
}
.import-dz-title {
    font-size: .875rem;
    font-weight: 500;
    color: var(--tx);
    margin-bottom: .25rem;
}
.import-dz-sub {
    font-size: .78rem;
    color: var(--txm);
}
.import-dz-meta {
    font-family: var(--fm);
    font-size: .6rem;
    color: var(--txd);
    margin-top: .875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Export flyout ────────────────────────────────────────────────── */
.export-flyout {
    position: fixed;
    top: calc(var(--hdr-h) + .375rem);
    right: 1rem;
    background: var(--s1);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    box-shadow: 0 4px 20px rgba(15, 22, 41, .10), 0 1px 4px rgba(15, 22, 41, .05);
    width: 300px;
    z-index: 220;
    overflow: hidden;
}

/* Header strip */
.export-flyout-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .575rem .875rem;
    background: var(--s2);
    border-bottom: 1px solid var(--bd);
    font-family: var(--fm);
    font-size: .63rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--txm);
}
.export-flyout-title-left {
    display: flex;
    align-items: center;
    gap: .375rem;
}
.export-flyout-info {
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--txd);
    color: var(--txd);
    font-size: .6rem;
    font-family: var(--fm);
    line-height: 1;
    transition: border-color .15s, color .15s;
    user-select: none;
}
.export-flyout-info:hover { border-color: var(--txm); color: var(--txm); }
.export-flyout-info:focus { outline: 2px solid var(--ac); outline-offset: 2px; border-radius: 50%; }

/* Format buttons — outline cards, blue only on hover */
.export-flyout-formats {
    display: flex;
    gap: .5rem;
    padding: .75rem .875rem;
    border-bottom: 1px solid var(--bd2);
}
.export-flyout-formats .export-fmt-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: .625rem .375rem;
    border-radius: var(--rs);
    background: var(--s1);
    color: var(--tx);
    border: 1px solid var(--bd);
    font-family: inherit;
    font-weight: 600;
    font-size: .82rem;
    line-height: 1.1;
    cursor: pointer;
    transition: all .15s ease;
}
.export-flyout-formats .export-fmt-btn:hover {
    background: var(--ac2);
    border-color: var(--ac);
    color: var(--ac);
}
.export-flyout-formats .export-fmt-btn:hover .export-fmt-ext {
    color: var(--ac);
    opacity: .7;
}
.export-flyout-formats .export-fmt-btn:active {
    transform: translateY(1px);
    background: #dce5fc;
}
.export-flyout-formats .export-fmt-btn .export-fmt-name {
    font-weight: 600;
    font-size: .82rem;
}
.export-flyout-formats .export-fmt-btn .export-fmt-ext {
    font-size: .62rem;
    font-weight: 400;
    color: var(--txd);
    font-family: var(--fm);
    letter-spacing: .02em;
    transition: color .15s;
}

/* Download icon above each format button (CSS mask) */
.export-flyout-formats .export-fmt-btn::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    margin-bottom: 2px;
    background: var(--txd);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: background .15s;
    flex-shrink: 0;
}
.export-flyout-formats .export-fmt-btn:hover::before {
    background: var(--ac);
}

/* Toggle rows */
.export-flyout-toggles {
    display: flex;
    flex-direction: column;
}
.export-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .575rem .875rem;
    border-bottom: 1px solid var(--bd2);
}
.export-toggle-row:last-child { border-bottom: none; }
.export-toggle-label {
    font-size: .82rem;
    color: var(--txm);
    font-family: var(--f);
}
.export-toggle-label .export-hint {
    font-family: var(--fm);
    color: var(--txd);
    font-size: .65rem;
    margin-left: .25rem;
}

/* Pill-style toggle (matches all other toggles in the app) */
.export-toggle {
    display: inline-flex;
    gap: 2px;
    background: var(--s2);
    border: 1px solid var(--bd);
    border-radius: 5px;
    padding: 2px;
    flex-shrink: 0;
}
.export-toggle button {
    background: transparent;
    border: none;
    padding: .275rem .625rem;
    font-family: var(--f);
    font-size: .75rem;
    font-weight: 500;
    color: var(--txm);
    cursor: pointer;
    border-radius: 3px;
    transition: all .12s ease;
    white-space: nowrap;
}
.export-toggle button:hover:not(.on) { color: var(--tx); }
.export-toggle button.on {
    background: var(--s1);
    color: var(--tx);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 22, 41, .08);
}

/* Preserved — other flyout helpers used elsewhere */
.export-flyout-section { padding: .75rem 0; border-bottom: 1px solid var(--bd2); }
.export-flyout-section:last-child { border-bottom: none; }
.export-flyout-label {
    font-family: var(--fm);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--txm);
    margin-bottom: .5rem;
}
.export-flyout .pill-wrap {
    display: flex; gap: .25rem;
    background: var(--s2); border: 1px solid var(--bd);
    border-radius: 6px; padding: 3px;
}
.export-flyout .pill {
    padding: .3rem .75rem; border-radius: 4px;
    font-size: .78rem; font-weight: 500; cursor: pointer;
    border: none; background: transparent; color: var(--txm);
    flex: 1; transition: all .15s; font-family: var(--f);
}
.export-flyout .pill:hover:not(.on) { color: var(--tx); }
.export-flyout .pill.on {
    background: var(--s1); color: var(--tx);
    box-shadow: 0 1px 3px rgba(15, 22, 41, .08);
}
.export-flyout .export-checkbox,
.export-flyout .export-radio {
    display: flex; align-items: center; gap: .5rem;
    font-size: .82rem; color: var(--tx); padding: .2rem 0; cursor: pointer;
}
.export-flyout .export-checkbox input,
.export-flyout .export-radio input { accent-color: var(--ac); }
.export-flyout .export-checkbox.disabled { opacity: .5; cursor: not-allowed; }
.export-flyout-buttons { display: flex; gap: .375rem; flex-wrap: wrap; }
.export-flyout-buttons .btn { flex: 1; min-width: 60px; justify-content: center; }
.export-flyout .btn-sm {
    padding: .35rem .55rem; font-size: .78rem; border-radius: var(--rs);
    border: 1px solid var(--bd); background: var(--s1); color: var(--tx);
    font-weight: 500; transition: all .15s; cursor: pointer; line-height: 1.3;
}
.export-flyout .btn-sm:hover { border-color: var(--txm); background: var(--s2); }
.export-flyout .btn-primary.btn-sm {
    background: var(--ac); color: #fff; border-color: var(--ac);
}
.export-flyout .btn-primary.btn-sm:hover { opacity: .9; }