/* ============================================================
   JOB DATASET SYSTEM — SOFT PASTEL UI
   A cream canvas with soft-dark text. Each section keeps its own
   accent, now drawn from a soft pastel family (pink, mint, lavender,
   baby blue, peach, butter yellow) — true pastel tints for fills and
   badges, deeper "dusty" versions of the same hues for nav, buttons
   and anything that needs to carry white text.
   ============================================================ */

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

:root {
    /* --- core brand gradient (dusty lavender -> dusty rose) --- */
    --primary: #7c5ca6;
    --primary-dark: #63447f;
    --primary-light: #d8c8f0;

    --nav-bg: #7c5ca6;
    --nav-bg-2: #c2467d;
    --nav-hover: rgba(255,255,255,0.16);
    --nav-active: #c2467d;
    --nav-text: #f8f2fb;
    --nav-text-dim: #e1cdec;

    --background: #fffdf8;
    --card: #ffffff;

    --text: #3f3f46;
    --heading: #3f3f46;
    --muted: #8b8792;
    --border: #f0e6f2;

    /* --- soft pastel per-role accents: true pastel tint (-bg) paired
       with a deeper "ink" of the same hue for text/icons --- */
    --blue: #4f8fc0;      --blue-bg: #c9e4f6;
    --teal: #3fa68f;      --teal-bg: #cdede4;
    --green: #4fa66b;     --green-bg: #cdeccf;
    --orange: #e0894d;    --orange-bg: #ffd8c2;
    --pink: #d6588c;      --pink-bg: #f8c8dc;
    --purple: #8b5fbf;    --purple-bg: #d8c8f0;
    --yellow: #c9a227;    --yellow-bg: #fff1b8;
    --red: #e0645f;       --red-bg: #fbd8d8;
    --cyan: #4fa8b8;      --cyan-bg: #d6f0f2;

    --success: var(--green); --success-bg: var(--green-bg); --success-text: #3c8556;
    --warning: var(--orange); --warning-bg: var(--orange-bg);
    --danger: var(--red); --danger-bg: var(--red-bg); --danger-text: #c14e49;
    --info-bg: var(--blue-bg); --info-text: #3c74a1;

    --radius: 14px;
    --radius-sm: 9px;
    --radius-pill: 999px;

    --shadow: 0 1px 2px rgba(63,63,70,0.05), 0 4px 14px color-mix(in srgb, var(--primary) 10%, transparent);
    --shadow-md: 0 12px 30px color-mix(in srgb, var(--primary) 18%, transparent), 0 6px 14px rgba(63,63,70,0.07);
    --shadow-sm: 0 1px 2px rgba(63,63,70,0.06);
    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
    --nav-height: 64px;

    /* Dashboard's Aambal-vs-ASDC series pair — deliberately its own tokens,
       not var(--blue)/var(--purple): that pair fails colorblind-safety
       validation (chroma + normal-vision floor) run via the dataviz skill's
       validate_palette.js. These pass every check in both light and dark
       (values chosen from the skill's own validated categorical palette). */
    --series-aambal: #2a78d6;
    --series-asdc: #e87ba4;
}

/* Dark theme — the same pastel family, deepened onto a muted
   plum-black canvas so every accent still reads as soft, just lifted
   to a brighter, higher-contrast version of its daytime hue. */
[data-theme="dark"] {
    --primary: #c9a8e8;
    --primary-dark: #b695d9;
    --primary-light: #4a3d5c;

    --nav-bg: #3d3148;
    --nav-bg-2: #5c3350;
    --nav-hover: rgba(255,255,255,0.08);
    --nav-text: #f3ecf7;
    --nav-text-dim: #c6aed9;

    --background: #2a2430;
    --card: #362e40;

    --text: #f3ecf7;
    --muted: #b3a6be;
    --border: rgba(255,255,255,0.08);

    --blue: #8fc3e8;   --blue-bg: rgba(79,143,192,0.22);
    --teal: #7fd4c0;   --teal-bg: rgba(63,166,143,0.20);
    --green: #8fd6a0;  --green-bg: rgba(79,166,107,0.20);
    --orange: #f0ad7a; --orange-bg: rgba(224,137,77,0.20);
    --pink: #f0a0c4;   --pink-bg: rgba(214,88,140,0.20);
    --purple: #c9a8e8; --purple-bg: rgba(139,95,191,0.22);
    --yellow: #e8cc6a; --yellow-bg: rgba(201,162,39,0.20);
    --red: #f0908c;    --red-bg: rgba(224,100,95,0.20);
    --cyan: #8fd8e0;   --cyan-bg: rgba(79,168,184,0.20);

    --success: var(--green); --success-bg: var(--green-bg); --success-text: #8fd6a0;
    --warning: var(--orange); --warning-bg: var(--orange-bg);
    --danger: var(--red); --danger-bg: var(--red-bg); --danger-text: #f0908c;
    --info-bg: var(--blue-bg); --info-text: #8fc3e8;

    --series-aambal: #3987e5;
    --series-asdc: #d55181;
}

/* ============================================================
   BRAND THEMES — color picker (independent of light/dark above).
   Each [data-brand] block recolors ONLY the brand identity tokens
   (--primary*, --nav-bg*) that the base :root / [data-theme="dark"]
   blocks already define above — nothing else changes: neutral
   surfaces (--background/--card/--text/--border) and every functional
   status color (success/warning/danger/info, the per-role accents)
   are identical across all five themes, in both light and dark mode.
   "lavender" is the default and has no block — it IS the values above.
   Every other theme is generated from the same saturation/lightness
   curve as lavender (only hue rotated), so contrast and visual weight
   stay matched across themes; only the hue changes.
   ============================================================ */
[data-brand="ocean"] {
    --primary: #5e8ea6; --primary-dark: #44657e; --primary-light: #c7e3f0;
    --nav-bg: #5e8ea6; --nav-bg-2: #4752c2;
}
[data-theme="dark"][data-brand="ocean"] {
    --primary: #a6cce7; --primary-dark: #96bfd9; --primary-light: #3d525c;
    --nav-bg: #323f49; --nav-bg-2: #333c5c;
}

[data-brand="forest"] {
    --primary: #5ea676; --primary-dark: #447e5d; --primary-light: #c7f0d3;
    --nav-bg: #5ea676; --nav-bg-2: #47c2b8;
}
[data-theme="dark"][data-brand="forest"] {
    --primary: #a6e7c1; --primary-dark: #96d9b0; --primary-light: #3d5c47;
    --nav-bg: #32493b; --nav-bg-2: #335c53;
}

[data-brand="sunset"] {
    --primary: #a6805e; --primary-dark: #7e6544; --primary-light: #f0d9c7;
    --nav-bg: #a6805e; --nav-bg-2: #bcc247;
}
[data-theme="dark"][data-brand="sunset"] {
    --primary: #e7caa6; --primary-dark: #d9b996; --primary-light: #5c4b3d;
    --nav-bg: #493e32; --nav-bg-2: #5c5933;
}

[data-brand="slate"] {
    --primary: #6a799a; --primary-dark: #4e5574; --primary-light: #cbd6ec;
    --nav-bg: #6a799a; --nav-bg-2: #6f54b6;
}
[data-theme="dark"][data-brand="slate"] {
    --primary: #acb8e2; --primary-dark: #9daad2; --primary-light: #454a54;
    --nav-bg: #383a43; --nav-bg-2: #3e3a55;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-feature-settings: "cv11", "ss01", "liga" 1, "calt" 1;
    background: var(--background);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; }

/* ============================================================
   TOP NAVBAR
   ============================================================ */

.topnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--nav-bg);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 18px rgba(124, 92, 166, 0.30);
}

.topnav-inner { display: flex; align-items: center; gap: 26px; padding: 0 24px; height: var(--nav-height); }
.topnav-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.logo-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--nav-bg-2);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px; letter-spacing: 0.5px;
    box-shadow: 0 6px 16px rgba(194, 70, 125, 0.45);
}

/* Explicit color (not just inherited from .topnav) so the wordmark stays
   readable even if a brand's own [data-brand] block forgets to override
   .topnav's color — this is what was silently broken for Ledger light. */
.brand-mark { font-size: 16px; color: var(--heading); line-height: 1.1; letter-spacing: -0.2px; font-weight: 600; }

.topnav-links { display: flex; align-items: center; gap: 4px; flex: 1; }

.topnav-link {
    display: flex; align-items: center; gap: 8px; padding: 9px 15px;
    border-radius: 10px; color: var(--nav-text); font-size: 14px; font-weight: 500;
    transition: background 0.18s, color 0.18s; white-space: nowrap;
}
.topnav-link:hover { background: var(--nav-hover); color: #fff; }
.topnav-link.active {
    background: var(--nav-bg-2);
    color: #fff; box-shadow: 0 6px 16px rgba(194, 70, 125, 0.40);
}
.topnav-link .nav-icon { font-size: 15px; opacity: 0.95; }

.topnav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.topnav-actions #currentDate { font-size: 13px; color: var(--nav-text-dim); white-space: nowrap; }

.menu-toggle {
    display: none; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: #fff;
    width: 40px; height: 40px; border-radius: var(--radius-sm); font-size: 18px; cursor: pointer;
    align-items: center; justify-content: center;
}

.theme-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px;
    border-radius: 9px; background: rgba(255,255,255,0.08); color: var(--nav-text);
    border: 1px solid rgba(255,255,255,0.12); cursor: pointer; font-size: 16px;
}
.theme-btn:hover { background: rgba(255,255,255,0.18); }

/* Settings (brand theme picker) */
.settings-wrap { position: relative; }
.settings-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px;
    border-radius: 9px; background: rgba(255,255,255,0.08); color: var(--nav-text);
    border: 1px solid rgba(255,255,255,0.12); cursor: pointer; font-size: 16px;
}
.settings-btn:hover, .settings-btn[aria-expanded="true"] { background: rgba(255,255,255,0.18); }

.theme-popover {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); padding: 8px; min-width: 190px;
}
.theme-popover-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); padding: 4px 8px 6px;
}
.theme-swatch-row {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px;
    background: transparent; border: none; border-radius: 8px; cursor: pointer; text-align: left;
    font-size: 13px; color: var(--text);
}
.theme-swatch-row:hover { background: var(--primary-light); }
.theme-swatch-row.active { background: var(--primary-light); font-weight: 600; }
.theme-swatch-dot {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.08);
}
.theme-swatch-check { margin-left: auto; color: var(--primary); font-size: 13px; }

/* ============================================================
   SKILL GRAPH — SEARCH+RESULTS+ANALYZE JOB (left) / GRAPH (center) /
   DETAIL (right)  (JD2SkillGraph)
   Every color here is an existing token (--primary/--blue/--purple/--card/
   --border/etc., already redefined per [data-brand] and for dark mode
   elsewhere in this file) — no new palette, so this themes automatically
   across every brand skin without brand-specific override blocks.

   Three columns: a narrow left panel (Search by + a single search box,
   Results List tabs, and a numbered Analyze Job list), a large center
   Graph (the primary visual element — gets the remaining flex space),
   and a narrow right Detail panel (persistent, not an overlay) that
   shows whatever was last clicked: a graph node, a result, or a job.
   See frontend/js/sg-skill-graph.js for the layout math (buildGraphModel)
   that positions every node/edge this CSS styles.
   ============================================================ */
/* No page-head on this page any more (see sg-skill-graph.html) — the
   workspace covers the page instead of sharing it with a duplicate
   title+description, so there's no top padding reserved for one. */
.sg-page-content { padding-top: 0; }
/* ROLE DATA / SKILL DATA — two tabs in the graph card's view switcher (see
   #sgViewTabs), populated by loadJobStructureAndRender() in
   sg-skill-graph.js. Same scrollable-body recipe as .sg-detail-body. */
.sg-role-data-view, .sg-skill-data-view { flex: 1; min-height: 0; overflow-y: auto; }
.sg-role-data-view[hidden], .sg-skill-data-view[hidden] { display: none !important; }
.sg-role-data-body, .sg-skill-data-body { padding: 16px 22px 24px; }
/* .sg-role-header is normally centered (it doubles as the Skill Graph's own
   section header) — left-align it here, it's the top of a wide read panel. */
.sg-role-data-body .sg-role-header { max-width: none; margin: 0 0 20px; text-align: left; }
.sg-skill-data-summary { margin-bottom: 16px; }
.sg-data-group { margin-bottom: 18px; }
.sg-data-group:last-child { margin-bottom: 0; }
.sg-data-group-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.sg-workspace { display: flex; gap: 16px; align-items: stretch; margin-top: 10px; min-height: calc(100vh - var(--nav-height) - 50px); }
/* Panel widths are user-adjustable (drag .sg-resize-handle — see
   setupResizeHandle() in sg-skill-graph.js): each panel's flex-basis
   reads a CSS custom property that JS writes while dragging and
   restores from localStorage on load. The left panel's fallback (no
   drag yet) is its own resize minimum — it has no separate minimize/
   collapse mode any more, so "compact by default" just means starting
   at the low end of its drag range. */
.sg-left-panel { flex: 0 0 var(--sg-left-w, 220px); display: flex; }
.sg-graph-panel { flex: 1 1 auto; min-width: 0; display: flex; }
.sg-detail-panel-static { flex: 0 0 var(--sg-detail-w, 300px); display: flex; }
.sg-left-panel .card, .sg-graph-panel .card, .sg-detail-panel-static .card {
    flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%;
}

/* ---- Resize handles between panels — flex items in their own right
   (width 16px) so they have a real, always-clickable hit area; visually
   just a thin centered bar that brightens on hover/drag/focus. Hidden
   below the three-column breakpoint (panels stack there instead, so
   there's nothing horizontal to resize) and while the adjacent Detail
   panel is closed (nothing to drag against — see openDetailPanel()/
   closeDetailPanel()). ---- */
.sg-resize-handle {
    flex: none; width: 16px; align-self: stretch; cursor: col-resize; position: relative;
    display: flex; align-items: center; justify-content: center;
    touch-action: none; -webkit-user-select: none; user-select: none;
}
.sg-resize-handle::before {
    content: ""; width: 3px; height: 40px; border-radius: 3px;
    background: var(--border); transition: background .15s, height .15s;
}
.sg-resize-handle:hover::before,
.sg-resize-handle.dragging::before,
.sg-resize-handle:focus-visible::before { background: var(--primary); height: 64px; }
.sg-resize-handle:focus-visible { outline: none; }

body.sg-resizing { cursor: col-resize; user-select: none; }

@media (min-width: 1181px) {
    /* The handles themselves supply the horizontal gap on desktop (so
       there's something to grab); below this breakpoint the panels
       stack vertically instead and go back to a plain flexbox gap. */
    .sg-workspace { gap: 0; }
}

.sg-panel-toggle-btn {
    flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); cursor: pointer;
    padding: 0; transition: background .15s, border-color .15s, color .15s;
}
.sg-panel-toggle-btn:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.sg-panel-toggle-btn:disabled { opacity: .4; cursor: default; }
.sg-panel-toggle-btn:disabled:hover { background: transparent; border-color: var(--border); color: var(--muted); }

/* ---- Skill Graph zoom controls (graph panel header) — see applyZoom()/
   setZoom() in sg-skill-graph.js. ---- */
.sg-graph-header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.sg-zoom-controls { display: flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 7px; padding: 2px; }
.sg-zoom-controls .sg-panel-toggle-btn { border: none; width: 26px; height: 26px; }
.sg-zoom-level {
    flex: none; min-width: 44px; height: 26px; padding: 0 4px; background: transparent; border: none;
    font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: 5px;
    font-variant-numeric: tabular-nums; transition: background .15s, color .15s;
}
.sg-zoom-level:hover { background: var(--primary-light); color: var(--primary); }

/* Detail panel is closed by default and only takes layout space once a
   node/result is selected (see openDetailPanel()/closeDetailPanel() in
   sg-skill-graph.js) — the graph panel's flex:1 1 auto absorbs the space
   either way. */
.sg-detail-panel-static:not(.is-open) { display: none; }

/* Skill Graph full screen — .sg-graph-panel itself is the element the
   Fullscreen API targets (see toggleGraphFullscreen()); the UA sizes it
   to the viewport automatically, this just supplies a real background
   (transparent by default) for both the element and its ::backdrop. */
.sg-graph-panel:fullscreen,
.sg-graph-panel:-webkit-full-screen { background: var(--bg); padding: 16px; }
.sg-graph-panel:fullscreen::backdrop,
.sg-graph-panel:-webkit-full-screen::backdrop { background: var(--bg); }
.sg-graph-panel:fullscreen .card,
.sg-graph-panel:-webkit-full-screen .card { height: 100%; }

@media (max-width: 1180px) {
    .sg-workspace { flex-wrap: wrap; }
    .sg-resize-handle { display: none; }
    .sg-left-panel { flex: 1 1 320px; }
    .sg-left-panel .card { max-height: 640px; }
    .sg-graph-panel { flex: 1 1 100%; order: 3; }
    .sg-graph-panel .card { height: 640px; }
    .sg-detail-panel-static { flex: 1 1 320px; order: 2; }
    .sg-detail-panel-static .card { max-height: 560px; }
}
@media (max-width: 640px) {
    .sg-left-panel, .sg-detail-panel-static { flex: 1 1 100%; }
}

/* ---- Search (top of the left panel): "Search by" radios in one row,
   then a single free-text box that searches whichever field is picked. ---- */
.sg-search-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.sg-search-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.sg-radio-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-radio-option { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); font-size: 12.5px; color: var(--text); cursor: pointer; transition: background .15s, border-color .15s; }
.sg-radio-option:hover { border-color: var(--primary); }
.sg-radio-option.active { background: var(--primary-light); border-color: var(--primary); font-weight: 600; color: var(--primary-dark); }
.sg-radio-option input[type="radio"] { accent-color: var(--primary); width: 14px; height: 14px; cursor: pointer; }

/* ---- Results List — 4 tabs switch which level of the hierarchy is
   listed; independent of the Search by radio above, which only decides
   what field the typed text matches against (so you can e.g. search by
   Skill while browsing the Task tab, to see every task under a matching
   skill). ---- */
.sg-results-section { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---- Role scope banner — shown once a Role is selected (see
   setSelectedRole() in sg-skill-graph.js); makes explicit that the
   Skill/Subskill/Task tabs below are now drilling into THIS role's data
   only, and gives a one-click way back out to browsing every role. ---- */
.sg-role-scope {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin: 12px 20px 0; padding: 7px 8px 7px 12px; border-radius: 8px;
    background: var(--primary-light); border: 1px solid var(--primary);
    font-size: 12px; color: var(--primary-dark);
}
.sg-role-scope-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-role-scope-text strong { font-weight: 700; }
.sg-role-scope-clear {
    flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--primary-dark); cursor: pointer; font-size: 12px; border-radius: 5px;
    padding: 0; line-height: 1; transition: background .15s;
}
.sg-role-scope-clear:hover { background: rgba(0,0,0,0.1); }

.sg-tabs { display: flex; gap: 4px; padding: 12px 20px 0; }
.sg-tab, .sg-view-tab {
    flex: 1; background: transparent; border: 1px solid var(--border); color: var(--muted);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
    padding: 7px 3px; border-radius: 7px; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.sg-tab:hover, .sg-view-tab:hover { border-color: var(--primary); color: var(--primary); }
.sg-tab.active, .sg-view-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.sg-results-list { flex: 1; overflow-y: auto; padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.sg-result-item {
    display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent;
    border-radius: 8px; padding: 8px 10px; cursor: pointer; transition: background .12s, border-color .12s;
}
.sg-result-item:hover { background: var(--primary-light); }
.sg-result-item.selected { background: var(--primary-light); border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.sg-result-item-label { font-size: 13px; font-weight: 600; color: var(--text); }
.sg-result-item-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.sg-results-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ---- Graph panel — plain HTML/SVG, one section per analyzed role,
   matching the user-provided reference mockup (opm-skill-graph-v2.html):
   a header built from that role's real JD data, a legend, then Skill as
   a vertical spine with Subskill fanning sideways off each Skill and
   Task fanning further out on the same side (see buildRoleGraphHtml/
   renderGraph in sg-skill-graph.js). Colors reuse the app's existing
   --yellow/--orange/--purple tokens (already theme- and brand-aware) —
   the same 3 hues the reference uses for Skill Group/Subskill/Task —
   rather than introducing a separate palette. Role itself isn't drawn
   as a box (its info is the section header instead, matching the
   reference); Skill/Subskill/Task boxes are real, clickable, and feed
   this page's own persistent Detail panel. */
.sg-graph-body { flex: 1; min-height: 520px; position: relative; background: var(--card); min-width: 0; }
/* One shared scrollable canvas for the WHOLE graph — every analyzed
   role's section lives in here, not one independently-scrolling region
   per role (an earlier version gave each role its own .sg-tree-scroll;
   that read as several separate mini-graphs rather than one complete
   structure graph you pan around). Works because every role's spine
   sits at the identical x offset (buildRoleGraphHtml's geometry
   constants don't vary by role), so one shared scrollLeft still lines
   every role's spine up at once — see the scroll-into-view call in
   renderGraph(). overflow-x/-y are set explicitly (not the `overflow`
   shorthand) and the scrollbar below is drawn always-visible rather than
   a thin OS auto-hide bar, so the horizontal one stays as obvious and
   grabbable as the vertical one instead of being easy to miss — the
   graph's own content width/height (data-orig-w/-h, set in
   renderGraph()) never shrinks to fit this box; this box scrolls to it
   instead. */
.sg-graph-mount { position: absolute; inset: 0; overflow-x: auto; overflow-y: auto; padding: 20px; cursor: grab; }
.sg-graph-mount { scrollbar-width: auto; scrollbar-color: var(--muted) var(--card); }
.sg-graph-mount::-webkit-scrollbar { width: 14px; height: 14px; }
.sg-graph-mount::-webkit-scrollbar-track { background: var(--card); }
.sg-graph-mount::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 8px; border: 3px solid var(--card); }
.sg-graph-mount::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
.sg-graph-mount::-webkit-scrollbar-corner { background: var(--card); }
/* Click-and-drag panning (setupGraphPan() in sg-skill-graph.js) — a
   plain mouse wheel only ever drives vertical scroll (browser/OS
   behavior, not something this CSS controls), so dragging is the only
   way to reach the horizontal axis without a modifier key or hunting
   for the scrollbar; the grab/grabbing cursor is the usual affordance
   that a canvas like this can be dragged. */
.sg-graph-mount.sg-panning { cursor: grabbing; user-select: none; }

.sg-role-section { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
.sg-role-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.sg-role-header { max-width: 640px; margin: 0 auto 16px; text-align: center; }
.sg-role-kicker { font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 8px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.sg-role-kicker-icon { flex: none; width: 14px; height: 14px; }
.sg-role-title { font-size: 19px; font-weight: 800; margin: 0 0 6px; color: var(--heading); letter-spacing: -0.2px; }
.sg-role-meta { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }

.sg-role-legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px;
    padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--card); width: fit-content; margin: 0 auto 20px; font-size: 11px; color: var(--muted);
}
.sg-legend-item { display: flex; align-items: center; gap: 6px; }
.sg-legend-swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; border: 1.5px solid; }
.sg-legend-swatch.sg-level-skill { background: var(--yellow-bg); border-color: var(--yellow); }
.sg-legend-swatch.sg-level-subskill { background: var(--orange-bg); border-color: var(--orange); }
.sg-legend-swatch.sg-level-task { background: var(--purple-bg); border-color: var(--purple); }
.sg-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* Zoom (applyZoom() in sg-skill-graph.js) is split across two layers so
   the zoom factor only ever gets applied once:
   .sg-tree-canvas-wrap resizes to orig*zoom (governs the scrollable
   area, no transform of its own); .sg-tree-canvas-inner stays at the
   UNSCALED size its absolutely-positioned nodes/edges were authored for
   and gets transform:scale(zoom) instead, which visually stretches it to
   exactly fill the resized wrap around it. Putting both the resize and
   the transform on the same element would scale twice (orig*zoom²) —
   see the comment on applyZoom(). */
.sg-tree-canvas-wrap { position: relative; margin: 0 auto; transition: width .12s ease, height .12s ease; }
.sg-tree-canvas-inner { transform-origin: top left; transition: transform .12s ease; }

.sg-graph-edges { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.sg-graph-edge { fill: none; stroke: var(--border); stroke-width: 1.4; stroke-dasharray: 4 4; transition: stroke .15s, opacity .15s, stroke-width .15s; }
.sg-graph-edge.sg-graph-edge-task { stroke-width: 1.1; }
.sg-graph-edge.sg-edge-active { stroke: var(--primary); stroke-width: 2.2; }
.sg-graph-edge.sg-edge-dim { opacity: .15; }

.sg-graph-node {
    position: absolute; display: flex; align-items: center; justify-content: center; text-align: center;
    box-sizing: border-box; border-radius: 8px; border: 2px solid var(--border); background: var(--card);
    padding: 0 10px; font-weight: 600; line-height: 1.2; color: var(--text); cursor: pointer;
    transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease, border-color .15s ease;
}
.sg-graph-node:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.sg-graph-node.sg-level-skill { background: var(--yellow-bg); border-color: var(--yellow); font-size: 13.5px; font-weight: 700; z-index: 3; }
.sg-graph-node.sg-level-subskill {
    background: var(--orange-bg); border-color: var(--orange); font-size: 12px; font-weight: 500;
    justify-content: flex-start; gap: 6px; z-index: 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-node-dots { display: flex; gap: 3px; flex: none; }
.sg-node-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sg-node-label { overflow: hidden; text-overflow: ellipsis; }
.sg-graph-node.sg-level-task {
    background: var(--purple-bg); border-color: var(--purple); font-size: 10.5px; font-weight: 500;
    border-width: 1.5px; z-index: 3; text-align: left; justify-content: flex-start;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding: 6px 10px;
}
.sg-graph-node.sg-node-dim { opacity: .25; }
.sg-graph-node.sg-node-selected { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- Detail panel (right) — persistent, always in the layout; content
   swaps in place on every node/result/job click. The level badge is the
   same accent color as that level's graph nodes, so the two always read
   as the same thing. ---- */
.sg-detail-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
.sg-level-badge {
    display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: 3px 9px; border-radius: var(--radius-pill); margin-bottom: 8px;
    border: 1px solid transparent;
}
.sg-level-badge.sg-level-role { background: var(--blue-bg); color: var(--blue); border-color: var(--blue); }
.sg-level-badge.sg-level-skill { background: var(--purple-bg); color: var(--purple); border-color: var(--purple); }
.sg-level-badge.sg-level-subskill { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.sg-level-badge.sg-level-task { background: var(--orange-bg); color: var(--orange); border-color: var(--orange); }
.sg-level-badge.sg-level-job { background: var(--yellow-bg); color: var(--yellow); border-color: var(--yellow); }
.sg-cell-empty { color: var(--border); }

/* ---- Analyze Job detail content — rendered inside the right Detail
   panel when a job is picked from the numbered list. ---- */
.sg-analyze-section { margin-top: 22px; }
.sg-analyze-section:first-child { margin-top: 0; }
.sg-analyze-section h3 {
    font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--primary-dark); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.sg-basic-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.sg-info-item-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.sg-info-item-value { font-size: 13.5px; color: var(--text); font-weight: 500; }
.sg-desc-block { margin-bottom: 16px; }
.sg-desc-block:last-child { margin-bottom: 0; }
.sg-desc-block h4 { font-size: 12.5px; font-weight: 700; color: var(--heading); margin-bottom: 6px; }
.sg-desc-block p { font-size: 13px; color: var(--text); line-height: 1.6; }
.sg-desc-block ul { font-size: 13px; color: var(--text); line-height: 1.6; padding-left: 20px; margin: 0; }
.sg-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.sg-skill-tree-node { border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; background: var(--card); }
.sg-skill-tree-node:last-child { margin-bottom: 0; }
.sg-skill-tree-node-title { font-weight: 700; color: var(--heading); font-size: 14px; margin-bottom: 6px; }
.sg-skill-tree-sub { margin: 8px 0 0 14px; padding-left: 14px; border-left: 2px solid var(--border); }
.sg-skill-tree-sub:first-of-type { margin-top: 10px; }
.sg-skill-tree-sub-title { font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 4px; }
.sg-skill-tree-tasks { margin: 4px 0 10px; padding-left: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.sg-skill-tree-tasks:last-child { margin-bottom: 0; }

.theme-popover-footer { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.theme-popover-version {
    display: block; padding: 7px 8px; border-radius: 8px;
    font-size: 12px; color: var(--muted); text-decoration: none; transition: background .15s, color .15s;
}
.theme-popover-version:hover { background: var(--primary-light); color: var(--primary); }

.nav-user { display: flex; align-items: center; gap: 8px; }
.nav-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--nav-bg-2); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.nav-username { font-size: 13px; color: var(--nav-text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-logout {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
    color: var(--nav-text); border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; transition: background .15s;
}
.nav-logout:hover { background: rgba(255,255,255,0.2); color: #fff; }

.topnav .btn-primary {
    background: var(--nav-bg-2); color: #fff; border: none;
    box-shadow: none; padding: 9px 15px; font-size: 13px;
}
.topnav .btn-primary:hover { background: color-mix(in srgb, var(--nav-bg-2) 85%, black); transform: none; }

/* ============================================================
   MAIN / CONTENT
   ============================================================ */

.main-content { width: 100%; min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    min-height: 70px; background: var(--card); border-bottom: 1px solid var(--border);
    padding: 16px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.topbar h1 { font-size: 22px; margin-bottom: 3px; letter-spacing: -0.4px; color: var(--heading); font-weight: 800; }
.topbar p { color: var(--muted); font-size: 13px; }
.topbar-actions { display: flex; align-items: center; gap: 15px; }
#currentDate { font-size: 13px; color: var(--muted); white-space: nowrap; }

.page-content { padding: 10px 12px 22px; width: 100%; flex: 1; }
.page-head { margin-bottom: 18px; }
.page-head h1 {
    font-size: 24px; font-weight: 800; letter-spacing: -0.4px;
    color: var(--primary-dark);
}
.page-head p { color: var(--muted); font-size: 13px; margin-top: 3px; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    border: none; border-radius: 8px; padding: 10px 16px; cursor: pointer; font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    transition: transform 0.14s ease, background 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.btn-primary {
    background: var(--primary);
    color: #fff; box-shadow: 0 4px 14px rgba(124, 92, 166, 0.32);
}
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 8px 22px rgba(124, 92, 166, 0.45); transform: translateY(-1px); }

.btn-secondary { background: var(--card); border: 1px solid var(--border); color: var(--text); }
.btn-secondary:hover { background: var(--primary-light); border-color: var(--primary); }

.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--primary-light); color: var(--primary); }

.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 7px 12px; font-size: 12px; }

/* ============================================================
   SEARCH COMPONENT
   ============================================================ */

.search-group { min-width: 280px; }
.search-input-wrap {
    display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 4px 4px 4px 12px; transition: border-color 0.2s, box-shadow 0.2s;
}
.search-input-wrap:focus-within { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.search-icon { font-size: 14px; color: var(--muted); flex-shrink: 0; }
.search-input-wrap input { flex: 1; border: none; outline: none; background: transparent; padding: 8px 0; font-size: 13px; color: var(--text); min-width: 0; }
.search-input-wrap input::placeholder { color: #b0a8b8; }
.search-btn { flex-shrink: 0; padding: 8px 16px; border-radius: 7px; }

/* ============================================================
   STAT CARDS — each a distinct vivid hue
   ============================================================ */

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 25px; }

.stat-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
    display: flex; justify-content: space-between; align-items: flex-start; box-shadow: var(--shadow);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; position: relative; overflow: hidden;
}
.stat-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--stat-accent, var(--primary));
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary); }

.stat-info span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; font-weight: 500; }
.stat-info strong { display: block; font-size: 30px; margin-bottom: 4px; letter-spacing: -0.6px; color: var(--heading); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; line-height: 1.1; }
.stat-info small { color: var(--muted); font-size: 11px; }

.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }

.stat-icon.blue,  .quick-icon.blue   { background: var(--blue-bg);   color: var(--blue); }
.stat-icon.green, .quick-icon.green  { background: var(--green-bg); color: var(--success); }
.stat-icon.orange { background: var(--orange-bg); color: var(--warning); }
.stat-icon.purple, .quick-icon.purple { background: var(--purple-bg); color: var(--purple); }

.stat-card:nth-child(4n+1) { --stat-accent: var(--blue); }
.stat-card:nth-child(4n+2) { --stat-accent: var(--green); }
.stat-card:nth-child(4n+3) { --stat-accent: var(--orange); }
.stat-card:nth-child(4n+4) { --stat-accent: var(--purple); }

.section-heading { margin: 4px 0 14px; }
.section-heading h2 { font-size: 16px; font-weight: 700; color: var(--heading); margin: 0 0 2px; }
.section-heading p { font-size: 12.5px; color: var(--muted); margin: 0; }

.stats-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-bottom: 25px; }
@media (max-width: 1200px) { .stats-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .stats-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stats-grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-bottom: 25px; }
@media (max-width: 1300px) { .stats-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .stats-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat-icon.slate { background: var(--cyan-bg); color: #2e7a88; }
.stat-icon.teal  { background: var(--green-bg); color: #1d7a6f; }

/* ============================================================
   RECORD DISTRIBUTION DONUT
   ============================================================ */

.distribution-donut { display: flex; align-items: center; gap: 22px; padding: 18px 22px 20px; flex-wrap: wrap; }
.distribution-donut .donut-ring { width: 120px; height: 120px; }
.distribution-donut .donut-ring .donut-center { font-size: 16px; }
.distribution-legend { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.distribution-legend strong { font-size: 14px; color: var(--heading); }
.distribution-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.distribution-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex-shrink: 0; }

/* ============================================================
   ACTIVITY TREND (line chart, hand-built SVG)
   ============================================================ */

.trend-chart { padding: 18px 22px 20px; }
.trend-chart svg { width: 100%; height: auto; display: block; }
.trend-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.trend-legend span { display: inline-flex; align-items: center; gap: 6px; }
.trend-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.trend-legend i.aambal { background: var(--series-aambal); }
.trend-legend i.asdc { background: var(--series-asdc); }

/* ============================================================
   ANALYSIS & STRUCTURE OVERVIEW (mini ring cards)
   ============================================================ */

.mini-ring-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 18px 22px 20px; }
@media (max-width: 900px) { .mini-ring-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mini-ring-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px;
    display: flex; align-items: center; gap: 12px;
}
.mini-ring-card .donut-ring { width: 58px; height: 58px; flex-shrink: 0; }
.mini-ring-card .donut-ring .donut-center { font-size: 11px; }
.mini-ring-card .mini-ring-info span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }
.mini-ring-card .mini-ring-info strong { display: block; font-size: 20px; color: var(--heading); }

/* ============================================================
   AAMBAL VS ASDC COMPARE CHART (hand-built, no chart library)
   ============================================================ */

.compare-chart { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 16px; }
.compare-row .compare-row-label { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.compare-row .compare-bar-line { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.compare-row .compare-bar-track { flex: 1; height: 10px; border-radius: 6px; background: var(--border-light, var(--border)); overflow: hidden; }
.compare-row .compare-bar-fill { height: 100%; border-radius: 6px; transition: width 0.5s ease; }
.compare-row .compare-bar-fill.aambal { background: var(--series-aambal); }
.compare-row .compare-bar-fill.asdc { background: var(--series-asdc); }
.compare-row .compare-bar-value { min-width: 34px; text-align: right; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.compare-legend { display: flex; gap: 18px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.compare-legend span { display: inline-flex; align-items: center; gap: 6px; }
.compare-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.compare-legend i.aambal { background: var(--series-aambal); }
.compare-legend i.asdc { background: var(--series-asdc); }

/* ============================================================
   STATUS DONUTS + ASDC STATUS BARS
   ============================================================ */

.status-donuts { display: flex; gap: 20px; padding: 4px 22px 10px; flex-wrap: wrap; }
.donut-block { display: flex; align-items: center; gap: 14px; }
/* SVG stroke rings (not CSS conic-gradient/border-radius circles) so these
   stay circular under brand skins that force `border-radius: 0 !important`
   on every element (ledger, stencil, kalamkari, foundry). */
.donut-ring { position: relative; width: 76px; height: 76px; flex-shrink: 0; }
.donut-ring svg { width: 100%; height: 100%; display: block; }
.donut-ring .donut-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 13px; font-weight: 700; color: var(--heading); white-space: nowrap;
}
.donut-legend { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.donut-legend strong { color: var(--heading); font-size: 12.5px; display: block; margin-bottom: 2px; }
.donut-legend span { display: inline-flex; align-items: center; gap: 6px; }
.donut-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.asdc-status-bars { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.asdc-status-bars .status-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.asdc-status-bars .status-bar-label { width: 130px; flex-shrink: 0; color: var(--text); font-weight: 500; }
.asdc-status-bars .status-bar-track { flex: 1; height: 9px; border-radius: 5px; background: var(--border-light, var(--border)); overflow: hidden; }
.asdc-status-bars .status-bar-fill { height: 100%; border-radius: 5px; }
.asdc-status-bars .status-bar-count { min-width: 20px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   DASHBOARD GRID
   ============================================================ */

.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 25px; }

/* ============================================================
   CARD
   ============================================================ */

.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px;
    border-bottom: 1px solid var(--border); background: var(--card);
}
.card-header h2 { font-size: 15px; font-weight: 700; color: var(--heading); letter-spacing: -0.2px; }
.card-header p { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.view-link { color: var(--primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.view-link:hover { text-decoration: underline; }

/* ============================================================
   FILTER BAR
   ============================================================ */

.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.search-group { min-width: 280px; flex: 1; }
.field-filter { min-width: 160px; }
label { font-size: 12px; font-weight: 500; color: var(--muted); }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], select, textarea {
    width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    padding: 9px 12px; font-size: 13px; color: var(--text); transition: border-color 0.18s, box-shadow 0.18s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }

.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.filter-input { min-width: 160px; }
.filter-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.results-summary { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 22px 0; }
.rs-item { font-size: 12.5px; color: var(--primary); font-weight: 600; }
#rsTotal { font-weight: 700; color: var(--pink); }

/* ============================================================
   QUICK ACTIONS — each tinted with its own icon color
   ============================================================ */

.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px 22px 22px; }
.quick-action { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color 0.18s, background 0.18s, box-shadow 0.18s; }
.quick-action:hover { border-color: var(--primary); background: var(--primary-light); box-shadow: var(--shadow); }
.quick-icon { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 18px; }
.quick-action strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--heading); }
.quick-action span { font-size: 12px; color: var(--muted); }

.activity-list { padding: 8px 12px 14px; display: flex; flex-direction: column; }
.activity-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 10px; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-item .a-name { font-size: 13px; font-weight: 600; color: var(--text); }
.activity-item .a-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   DASHBOARD REDESIGN — hero header, KPI tiles, chart grid, quick-action
   tiles. Deliberately its own class set (dash-*) rather than repurposing
   .stat-card/.quick-action: those two stay exactly as they are (and keep
   working) for every other page and every [data-brand] override that
   already targets them — this page no longer uses them. A brand skin that
   doesn't explicitly restyle dash-* simply inherits these base rules,
   which is the correct, intentional fallback (see the file's brand-theme
   header comment above): neutral surfaces/spacing stay consistent, only
   --primary/--nav-bg* differ per brand.
   ============================================================ */

.dash-page { width: 100%; }

.dash-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--card)) 0%, var(--card) 65%);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 26px 28px; margin-bottom: 22px;
}
.dash-eyebrow { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.dash-hero h1 { margin: 0 0 8px; font-size: 25px; font-weight: 800; letter-spacing: -0.4px; color: var(--heading); }
.dash-hero-sub { margin: 0; max-width: 560px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.dash-hero-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dash-hero-side strong { display: block; font-size: 13px; font-weight: 700; color: var(--heading); }
.dash-hero-side span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; max-width: 280px; }
.dash-live-dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--success); flex-shrink: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 22%, transparent);
    animation: dash-pulse 2.2s ease-in-out infinite;
}
@keyframes dash-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (max-width: 720px) { .dash-hero { padding: 20px; } .dash-hero-side { align-items: flex-start; } }

/* ---- Overview: one Total hero tile + one grouped panel per data source
   (Aambal, ASDC) — each group's own Approved-Active/Analyzed/Structured
   breakdown lives together, with a progress bar per row, instead of six
   flat tiles that mixed combined and per-source counts side by side. ---- */
.dash-kpi-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.dash-kpi-icon svg { width: 19px; height: 19px; }

.dash-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.6fr); gap: 16px; margin-bottom: 24px; align-items: stretch; }
@media (max-width: 980px) { .dash-overview-grid { grid-template-columns: 1fr; } }

.dash-total-card {
    padding: 20px; display: flex; flex-direction: column; gap: 8px; justify-content: center;
    background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 8%, var(--card)) 0%, var(--card) 70%);
}
.dash-total-card .dash-kpi-icon { background: var(--cyan-bg); color: #2e7a88; margin-bottom: 4px; }
.dash-total-label { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.dash-total-card strong { font-size: 38px; font-weight: 800; letter-spacing: -0.8px; color: var(--heading); line-height: 1; font-variant-numeric: tabular-nums; }
.dash-total-sub { font-size: 12.5px; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--border); }
.dash-total-sub strong { display: inline; font-size: 13px; font-weight: 700; color: var(--heading); letter-spacing: normal; }

.dash-group-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.dash-group-head { display: flex; align-items: center; gap: 12px; }
.dash-group-title { flex: 1; min-width: 0; }
.dash-group-title h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--heading); }
.dash-group-title p { margin: 1px 0 0; font-size: 11.5px; color: var(--muted); }
.dash-group-total { font-size: 24px; font-weight: 800; letter-spacing: -0.4px; color: var(--heading); font-variant-numeric: tabular-nums; flex-shrink: 0; }

.dash-group-card[data-group="aambal"] .dash-kpi-icon { background: var(--blue-bg); color: var(--series-aambal); }
.dash-group-card[data-group="asdc"] .dash-kpi-icon { background: var(--pink-bg); color: var(--series-asdc); }

.dash-group-stats { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--border); padding-top: 12px; }
.dash-group-stat { display: grid; grid-template-columns: 104px 1fr 32px; align-items: center; gap: 10px; font-size: 12px; }
.dash-group-stat span { color: var(--muted); font-weight: 500; white-space: nowrap; }
.dash-group-stat strong { text-align: right; color: var(--heading); font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-group-bar { height: 7px; border-radius: 4px; background: var(--border-light, var(--border)); overflow: hidden; }
.dash-group-bar-fill { display: block; height: 100%; border-radius: 4px; width: 0%; transition: width 0.6s ease; }
.dash-group-bar-fill.aambal { background: var(--series-aambal); }
.dash-group-bar-fill.asdc { background: var(--series-asdc); }
@media (max-width: 460px) { .dash-group-stat { grid-template-columns: 78px 1fr 26px; } }

/* ---- chart grid ---- */
.dash-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; align-items: stretch; }
.dash-chart-card { display: flex; flex-direction: column; }
.dash-chart-wide { grid-column: 1 / -1; }
@media (max-width: 980px) { .dash-chart-grid { grid-template-columns: 1fr; } .dash-chart-wide { grid-column: auto; } }

.dash-recent-card { margin-bottom: 24px; }

/* ---- quick actions ---- */
.dash-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 8px; }
@media (max-width: 980px) { .dash-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dash-quick-grid { grid-template-columns: 1fr; } }

.dash-quick-card {
    display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow-sm); transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s, background 0.16s;
}
.dash-quick-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); background: var(--primary-light); }
.dash-quick-card strong { font-size: 14px; font-weight: 700; color: var(--heading); }
.dash-quick-card span { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ============================================================
   UPDATES LIST (updates.html — "What's New")
   ============================================================ */

.updates-list { display: flex; flex-direction: column; }
.update-entry { display: flex; gap: 22px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.update-entry:last-child { border-bottom: none; }
.update-entry-meta { flex: 0 0 100px; display: flex; flex-direction: column; gap: 4px; }
.update-version { font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.update-date { font-size: 12px; color: var(--muted); }
.update-entry-body { flex: 1 1 auto; min-width: 0; }
.update-entry-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.update-entry-head h3 { font-size: 14.5px; font-weight: 700; color: var(--heading); letter-spacing: -0.1px; }
.update-entry-body p { font-size: 13px; color: var(--text); line-height: 1.55; }

@media (max-width: 620px) {
    .update-entry { flex-direction: column; gap: 6px; }
    .update-entry-meta { flex-direction: row; gap: 10px; }
}

/* ============================================================
   STATUS GUIDE (updates.html — reference table for the product
   owner, not a changelog entry — see the card above the update list)
   ============================================================ */

/* The generic `table { min-width: 1040px; }` rule further down is
   sized for wide data tables (Records/Aambal) with many columns —
   override it here so this 3-column reference table doesn't force a
   wall of empty space on a normal-width screen. */
.status-guide-table { min-width: 0; width: 100%; }
.status-guide-table td { vertical-align: top; }
.status-guide-table td:first-child { white-space: nowrap; }

.status-guide-flag {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 22px; border-top: 1px solid var(--border);
}
.status-guide-flag .status-badge { flex-shrink: 0; margin-top: 1px; }
.status-guide-flag p { margin: 0; font-size: 13px; color: var(--text); line-height: 1.55; }

.status-guide-note { padding: 2px 22px 18px; font-size: 12.5px; }

/* ============================================================
   TABLES
   ============================================================ */

.table-wrapper { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; border: 1px solid var(--border); }
thead th {
    position: sticky; top: 0; z-index: 2; background: var(--primary-light);
    text-align: left; font-weight: 700; color: var(--primary-dark);
    font-size: 11.5px; letter-spacing: 0.3px; text-transform: uppercase;
    padding: 13px 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody td { padding: 13px 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.work-experience-column { width: 220px; min-width: 220px; max-width: 220px; white-space: normal; overflow-wrap: anywhere; }
tbody tr { transition: background 0.12s; }
tbody tr:hover td { background: var(--primary-light); }
.loading-row td { text-align: center; padding: 30px; color: var(--muted); }
.record-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

table { min-width: 1040px; }
.sticky-col-id, .sticky-col-name, .sticky-col-action, .sticky-action-cell { position: sticky; z-index: 2; background: var(--card); border: 1px solid var(--border); }
.sticky-col-id { left: 0; width: 260px; min-width: 260px; max-width: 260px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.sticky-col-name { left: 260px; width: 240px; min-width: 240px; max-width: 240px; }
.sticky-col-action, .sticky-action-cell { left: 500px; width: 200px; min-width: 200px; max-width: 200px; }
thead th.sticky-col { z-index: 4; background: var(--primary-light); }
tbody tr:hover .sticky-col, tbody tr:hover .sticky-action-cell { background: var(--primary-light); }

.sticky-col-id .job-id-link { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.job-id-link { font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--primary); font-weight: 600; }
.job-id-link:hover { text-decoration: underline; }
.job-name-link { color: var(--text); }
.job-name-link:hover { color: var(--pink); }
.job-name-cell { font-weight: 600; }

.action-cell-inner { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.action-workflow { width: 100%; padding: 8px 10px; font-size: 12px; background: #fff; border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.action-workflow:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }

/* Expandable "Manage access" panel row (admin-users.js) — reads as an
   inset drawer attached to the row above it, not another data row. */
.access-edit-row td { padding: 0; background: var(--primary-light); box-shadow: inset 3px 0 0 var(--primary); }
.access-edit-row:hover td { background: var(--primary-light); } /* don't let the generic row-hover rule fight the panel's own tint */
.access-edit-row .filter-bar { padding: 16px 22px; border-bottom: none; }
.access-edit-row .filter-field { min-width: 170px; }

.export-all-button { width: 100%; padding: 6px 8px; font-size: 11.5px; font-weight: 500; background: transparent; border: 1px dashed var(--border); color: var(--muted); border-radius: 7px; cursor: pointer; transition: all .15s; }
.export-all-button:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

.empty-cell { background: var(--red-bg); }
.cell-link { color: var(--primary); text-decoration: none; }
.cell-link:hover { text-decoration: underline; }
.muted { color: var(--muted); }

.recent-job-cell { display: flex; align-items: center; gap: 10px; }
.company-avatar { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--primary); color: #fff; }
.job-title { font-size: 13px; font-weight: 600; }
.col-file { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted); }
.count-chip { display: inline-flex; align-items: center; padding: 3px 9px; font-size: 11.5px; font-weight: 600; border-radius: 999px; background: var(--purple-bg); color: var(--purple); }
.rejected-cell { display: flex; flex-direction: column; gap: 3px; }
.rejected-chip { background: var(--danger-bg); color: var(--danger-text); }
.rejected-reasons { font-size: 11px; color: var(--muted); }

/* ============================================================
   BADGES / STATUS — vivid saturated colors
   ============================================================ */

.status-badge {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; line-height: 1;
    padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .95; }

.status-approved-active, .status-active, .status-green, .badge-green { background: var(--green-bg); color: var(--success-text); }
.status-fresh-pending, .status-pending, .status-new, .status-amber, .badge-amber { background: var(--yellow-bg); color: #8a6a1c; }
.status-rejected-duplicate, .status-rejected-data-issue, .status-rejected, .status-red, .badge-red { background: var(--red-bg); color: var(--danger-text); }
.status-slate, .badge-slate { background: var(--cyan-bg); color: #2e7a88; }
.status-violet, .badge-violet { background: var(--purple-bg); color: var(--purple); }

/* ============================================================
   PAGER
   ============================================================ */

.pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border); }
.pager-info { font-size: 12.5px; color: var(--muted); margin: 0 4px; }
.pager-controls { display: flex; align-items: center; gap: 5px; }
.pager-btn { min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid var(--border); background: #fff; border-radius: 8px; font-size: 12.5px; color: var(--text); cursor: pointer; transition: background .15s, border-color .15s; }
.pager-btn:hover:not(:disabled) { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.pager-btn.active { background: var(--primary); border-color: transparent; color: #fff; font-weight: 700; }
.pager-btn:disabled { opacity: .45; cursor: default; }

/* ============================================================
   EXPORT / UPLOAD / FOOTER
   ============================================================ */

.upload-message { font-size: 12.5px; color: var(--muted); }
.upload-message.inline { display: inline; }
.upload-message.success { color: var(--success-text); }
.upload-message.error { color: var(--danger-text); }
.upload-message.info { color: var(--primary); }

.records-footer { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--border); }
#saveMessage { flex: 1; }

.upload-drop { margin: 18px 22px; padding: 28px; border: 1.5px dashed #c7ade0; border-radius: var(--radius); text-align: center; color: var(--muted); background: var(--primary-light); transition: border-color .15s, background .15s; cursor: pointer; }
.upload-drop:hover, .upload-drop.drag-over { border-color: var(--primary); background: #f0e6fa; color: var(--primary); }

.dataset-list-head { flex-wrap: wrap; }
.dataset-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   PROFILE MODAL
   ============================================================ */

.profile-modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(63,45,80,0.45); display: grid; place-items: center; padding: 20px; }
.profile-modal-overlay[hidden] { display: none; }
.profile-modal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); width: min(460px, 100%); padding: 22px; }
.profile-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.profile-modal-header h3 { font-size: 16px; font-weight: 800; color: var(--heading); }
.profile-modal-close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.profile-modal-close:hover { color: var(--text); }
.profile-fields { display: flex; flex-direction: column; gap: 0; max-height: 60vh; overflow-y: auto; }
.profile-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.profile-row:last-child { border-bottom: none; }
.profile-row.profile-full { grid-template-columns: 1fr; }
.profile-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.profile-value { font-size: 13px; color: var(--text); word-break: break-word; }
.profile-value a { color: var(--primary); }

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-icon, .empty-state-icon { font-size: 30px; margin-bottom: 10px; opacity: .7; }
.empty-state h3 { font-size: 15px; color: var(--text); font-weight: 700; margin-bottom: 4px; }
.empty-state p { font-size: 13px; }

/* ============================================================
   TOAST
   ============================================================ */

.toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
    background: var(--primary); color: #fff;
    padding: 11px 18px; border-radius: 10px; font-size: 13px; font-weight: 600;
    box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 300;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
.toast .toast-icon { margin-right: 6px; }

/* ============================================================
   SPINNER
   ============================================================ */

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #f0e6f2; border-top-color: var(--primary); display: inline-block; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2.2s; }
}

/* Non-table loading spot (a list/card/panel) — see loaderSpinnerHTML() in
   js/loader.js. Table loads use .loading-row td's own centering instead. */
.loader-inline { display: flex; align-items: center; justify-content: center; padding: 32px; color: var(--muted); }

/* ============================================================
   ICON SET (js/icons.js — vendored Lucide subset)
   Every icon renders stroke="currentColor" so it already themes through
   whatever `color` its container resolves to; this just fixes the
   baseline-alignment wobble an inline <svg> next to text otherwise has.
   ============================================================ */
.icon { vertical-align: middle; flex-shrink: 0; }
.toast-icon-wrap { display: inline-flex; vertical-align: middle; }
.loader-btn-label { vertical-align: middle; }

/* ============================================================
   AUTH PAGES
   ============================================================ */

.auth-wrap { display: flex; min-height: 100vh; }
.auth-aside { flex: 1.1; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px; background: var(--primary); color: #fff; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-logo { width: 40px; height: 40px; border-radius: 11px; background: var(--nav-bg-2); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px; box-shadow: 0 6px 16px color-mix(in srgb, var(--nav-bg-2) 45%, transparent); }
.auth-brand h1 { font-size: 18px; font-weight: 800; }
.auth-brand span { display: block; font-size: 12px; color: var(--nav-text-dim); }
.auth-pitch { max-width: 420px; }
.eyebrow { font-size: 12px; font-weight: 700; color: #ffe08a; text-transform: uppercase; letter-spacing: 0.6px; }
.auth-pitch h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.2; margin: 14px 0; }
.auth-pitch h2 b { color: #ffe08a; }
.auth-pitch p { color: #f3ecfb; font-size: 14px; }
.auth-feats { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.auth-feats li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #faf5fd; }
.tick { width: 22px; height: 22px; border-radius: 50%; background: var(--nav-bg-2); color: #fff; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; }
.auth-foot { font-size: 12px; color: var(--nav-text-dim); }

.auth-main { flex: 1; display: grid; place-items: center; padding: 40px; background: var(--background); }
.auth-card { width: min(400px, 100%); }
.auth-card h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: var(--heading); }
.auth-card .sub { color: var(--muted); font-size: 13px; margin: 6px 0 22px; }

.auth-field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.auth-inputwrap { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 0 12px; transition: border-color .15s, box-shadow .15s; }
.auth-inputwrap:focus-within { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.auth-inputwrap .ic { color: var(--muted); font-size: 14px; }
.auth-input { flex: 1; border: none; outline: none; background: transparent; padding: 12px 0; font-size: 14px; }
.auth-inputwrap.toggle .ic { cursor: pointer; }

.auth-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 18px; font-size: 13px; }
.auth-remember { display: flex; align-items: center; gap: 7px; color: var(--text); cursor: pointer; }
.auth-forgot { color: var(--pink); }
.auth-forgot:hover { text-decoration: underline; }

.auth-submit { width: 100%; position: relative; background: var(--primary); color: #fff; border: none; border-radius: 9px; padding: 13px; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s; }
.auth-submit:hover:not(:disabled) { background: var(--primary-dark); }
.auth-submit:disabled, .auth-submit.loading { opacity: .8; cursor: progress; }
/* display:none by default — this was previously unconditional, so the
   spinner spun constantly next to "Log In"/"Send verification code" even
   when the form wasn't submitting. Only .auth-submit.loading shows it. */
.auth-spinner { display: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .7s linear infinite; }
.auth-submit.loading .auth-spinner { display: inline-block; }

.auth-switch { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
.auth-switch a, .auth-card a { color: var(--pink); font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }
.auth-hint { margin-top: 18px; padding: 12px 14px; background: var(--primary-light); border: 1px solid #e6d9f0; border-radius: 9px; font-size: 12px; color: var(--text); }
.auth-hint code { font-family: "JetBrains Mono", monospace; font-size: 11.5px; background: #fff; padding: 1px 5px; border-radius: 4px; color: var(--primary); }

.auth-error, .auth-success { display: none; align-items: center; gap: 8px; padding: 11px 13px; border-radius: 9px; font-size: 13px; margin-bottom: 16px; }
.auth-error { background: var(--red-bg); color: var(--danger-text); border: 1px solid #f5b8b8; }
.auth-success { background: var(--green-bg); color: var(--success-text); border: 1px solid #b8e0bc; }
.auth-error.show, .auth-success.show { display: flex; }

.otp-stage { display: none; }
.otp-stage.active { display: block; }
.otp-head { text-align: center; margin-bottom: 18px; }
.otp-emoji { font-size: 30px; }
.otp-email { font-weight: 700; color: var(--text); }
.otp-inputs { display: flex; gap: 8px; justify-content: center; margin: 18px 0; }
.otp-inputs input { width: 46px; height: 52px; text-align: center; font-size: 20px; font-weight: 700; border: 1px solid var(--border); border-radius: 9px; background: #fff; }
.otp-inputs input.filled { border-color: var(--primary); background: var(--primary-light); }
.otp-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.otp-resend { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 12px; }
.otp-resend:disabled { color: var(--muted); cursor: default; }
.otp-back { display: block; margin: 14px auto 0; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12.5px; }
.otp-back:hover { color: var(--text); }
.otp-devhint { margin-top: 14px; font-size: 12px; color: var(--muted); text-align: center; }
.otp-devhint code { font-family: "JetBrains Mono", monospace; color: var(--primary); }

/* ============================================================
   RECORD DETAIL (full-page structurer)
   ============================================================ */

body.record-detail-body { background: #fffdf8; margin: 0; }
.detail-wrap--struct { max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; height: calc(100vh - 64px); }
.detail-header { display: none; }
.detail-title h1 { font-size: 20px; font-weight: 700; margin: 0 0 4px; color: var(--heading); }
.detail-title .job-id-label { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--primary-dark); background: var(--primary-light); display: inline-block; padding: 3px 9px; border-radius: 7px; margin-top: 6px; }
.detail-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.back-link { color: var(--primary); text-decoration: none; font-weight: 500; font-size: 13px; }
.back-link:hover { text-decoration: underline; }

.structurer-panel { background: #fffdf8; border-radius: 0; overflow: hidden; box-shadow: none; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.structurer-frame { width: 100%; border: 0; display: block; background: #fffdf8; flex: 1 1 auto; min-height: 0; height: auto; }
.structurer-loading { display: flex; align-items: center; gap: 12px; justify-content: center; flex: 1 1 auto; color: #8b8792; font-size: 14px; }
.detail-error { color: var(--danger-text); }

/* ============================================================
   AUDIT
   ============================================================ */

.audit-table thead th { font-size: 11px; }
.table-actions { display: flex; align-items: center; gap: 8px; }
.audit-table .mono, #auditTableBody .mono { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--text); }
#auditExport { text-decoration: none; }

/* ============================================================
   DATASETS
   ============================================================ */

.dataset-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.dataset-toolbar .field { display: flex; flex-direction: column; gap: 5px; }
.dataset-toolbar input, .dataset-toolbar select { min-width: 180px; }
.dataset-toolbar .spacer { flex: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .topnav-links { position: absolute; top: var(--nav-height); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--nav-bg); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 8px; display: none; }
    .topnav.open .topnav-links { display: flex; }
    .menu-toggle { display: flex; }
    .topnav-actions #currentDate, .nav-username { display: none; }
    .page-content { padding: 14px 10px 28px; }
    .quick-actions { grid-template-columns: 1fr; }
    .sticky-col-id, .sticky-col-name, .sticky-col-action, .sticky-action-cell { position: static; left: auto; min-width: 0; border-right: none; }
}
@media (max-width: 560px) {
    .stats-grid { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- Aambal Records page helpers --- */
.muted { color: var(--muted); opacity: 0.75; }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.btn-secondary { background: var(--primary-light); color: var(--primary-dark); border: 1px solid var(--border); cursor: pointer; font-weight: 600; }
.btn-secondary:hover { background: #efe3f7; }

/* ============================================================================
   LEDGER THEME  —  data-brand="ledger"
   Terminal-density register: hairline rules only, zero shadow/radius, mono
   data typography, color reserved for a currently-true signal. This is a
   STRUCTURAL theme, not a recolor — the other five brands only vary hue on
   the shared "soft pastel card" language; Ledger replaces the language.
   Two layers, matching the source ledger:
     1) TOKEN REMAP — every existing semantic token (--card, --text, --muted,
        --border, --primary*, --nav-bg*, --radius*, --shadow*, the status-
        color family) is redefined onto Ledger's own values. Any rule that
        just *consumes* a token (most inputs, links, focus rings, badge
        text/背景 pairs) renders correctly with zero further changes.
     2) CONSTRUCTION OVERRIDES — anywhere the SHAPE differs, not just the
        color (nav, buttons, stat cards → ruled pipeline row, badges → plain
        text, tables → flush hairline rows), gets an explicit rule below.
   Chosen options (design-review sign-off, 2026-09-07): top bar (not the
   rail), hybrid buttons (one filled ink action + underlined text for the
   rest), and colored status (not signal-only).
   ============================================================================ */

[data-brand="ledger"][data-theme="light"],
[data-brand="ledger"]:not([data-theme="dark"]) {
    --bg: #F6F6F4;
    --ink: #12151A;
    --ink-dim: #565C64;
    --hair: #D8DBDE;
    --hair-strong: #B7BBC0;
    --accent-live: #B3261E;
    --accent-ok: #1F6E46;
    --row-hover: #EFEFEC;
}
[data-brand="ledger"][data-theme="dark"] {
    --bg: #0B0D10;
    --ink: #E7E9EA;
    --ink-dim: #7C848C;
    --hair: #22262B;
    --hair-strong: #383E45;
    --accent-live: #E2574C;
    --accent-ok: #4FAE83;
    --row-hover: #15181C;
}

/* ---- 1) token remap: onto the app's existing semantic tokens ---- */
[data-brand="ledger"] {
    --font-data: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

    --background: var(--bg);
    --card: var(--bg);                 /* no distinct card surface — Ledger has no cards */
    --text: var(--ink);
    --heading: var(--ink);
    --muted: var(--ink-dim);
    --border: var(--hair);

    --primary: var(--ink);             /* interactive/focus/link color is plain ink, never a hue */
    --primary-dark: var(--ink);
    --primary-light: var(--row-hover);

    --nav-bg: var(--bg);
    --nav-bg-2: var(--ink);
    --nav-hover: var(--row-hover);
    --nav-active: var(--ink);
    --nav-text: var(--ink);
    --nav-text-dim: var(--ink-dim);

    --success: var(--accent-ok);  --success-bg: transparent; --success-text: var(--accent-ok);
    --warning: var(--accent-live); --warning-bg: transparent;
    --danger: var(--accent-live); --danger-bg: transparent; --danger-text: var(--accent-live);
    --info-bg: transparent; --info-text: var(--ink);

    /* per-role accents collapse to ink-dim (never decorative) except the
       two that map to a real signal (green=ok, red=live) */
    --blue: var(--ink-dim);   --blue-bg: transparent;
    --teal: var(--ink-dim);   --teal-bg: transparent;
    --green: var(--accent-ok); --green-bg: transparent;
    --orange: var(--accent-live); --orange-bg: transparent;
    --pink: var(--ink-dim);   --pink-bg: transparent;
    --purple: var(--ink-dim); --purple-bg: transparent;
    --yellow: var(--ink-dim); --yellow-bg: transparent;
    --red: var(--accent-live); --red-bg: transparent;
    --cyan: var(--ink-dim);   --cyan-bg: transparent;

    /* Dashboard's Aambal-vs-ASDC series pair (added after this remap was
       written) is the same kind of categorical, non-signal color as
       --blue/--purple above — collapses the same way, matching
       .status-slate/.status-violet (the Type badge for these same two
       categories) a few rules down, which already go ink-dim here. */
    --series-aambal: var(--ink-dim); --series-asdc: var(--ink-dim);

    --radius: 0; --radius-sm: 0; --radius-pill: 0;
    --shadow: none; --shadow-md: none; --shadow-sm: none;
    --shadow-focus: 0 0 0 1px var(--ink);
}
[data-brand="ledger"] body { font-family: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif; }

/* Safety net for the doc's one absolute, exception-free rule ("radius 0 /
   no shadow on every element without exception"). The remap above already
   zeroes every var()-driven radius/shadow; this catches the handful of
   rules elsewhere in this file that hardcode a px radius or rgba shadow
   instead of using the token — same pattern already used for
   prefers-reduced-motion above. */
[data-brand="ledger"] * { border-radius: 0 !important; box-shadow: none !important; }

/* ---- 2) construction overrides ---- */

/* Nav: same top position (never a sidebar — house rule stays), restyled */
[data-brand="ledger"] .topnav { box-shadow: none; border-bottom: 1px solid var(--hair-strong); }
[data-brand="ledger"] .brand-mark { font-family: var(--font-data); font-weight: 600; letter-spacing: .02em; color: var(--ink); }
[data-brand="ledger"] .logo-icon { background: var(--ink); color: var(--bg); }
[data-brand="ledger"] .topnav-links { counter-reset: navidx; gap: 22px; }
[data-brand="ledger"] .topnav-link {
    counter-increment: navidx;
    font-family: var(--font-data); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-dim); padding: 9px 0; gap: 0;
}
[data-brand="ledger"] .topnav-link::before {
    content: counter(navidx, decimal-leading-zero) "\00a0\00a0";
    color: var(--ink-dim); font-size: 10px; opacity: .85;
}
[data-brand="ledger"] .topnav-link:hover { background: none; color: var(--ink); }
[data-brand="ledger"] .topnav-link.active {
    background: none; color: var(--ink); font-weight: 600;
    border-bottom: 2px solid var(--ink);
}
[data-brand="ledger"] .topnav-link.active::before { color: var(--ink); }
[data-brand="ledger"] .topnav-link .nav-icon { display: none; }

[data-brand="ledger"] .theme-btn, [data-brand="ledger"] .settings-btn {
    background: none; border: 1px solid var(--hair-strong); color: var(--ink);
}
[data-brand="ledger"] .theme-btn:hover, [data-brand="ledger"] .settings-btn:hover,
[data-brand="ledger"] .settings-btn[aria-expanded="true"] { background: var(--row-hover); }
[data-brand="ledger"] .theme-popover { border: 1px solid var(--hair-strong); }
[data-brand="ledger"] .theme-popover-label { font-family: var(--font-data); }
[data-brand="ledger"] .theme-swatch-row { font-family: var(--font-data); font-size: 11px; }
[data-brand="ledger"] .theme-swatch-row:hover, [data-brand="ledger"] .theme-swatch-row.active { background: var(--row-hover); }
[data-brand="ledger"] .theme-swatch-dot { border: 1px solid var(--hair-strong); }

[data-brand="ledger"] .nav-avatar { background: var(--ink); color: var(--bg); font-family: var(--font-data); }
[data-brand="ledger"] .nav-username { font-family: var(--font-data); }
[data-brand="ledger"] .nav-logout {
    background: none; border: 1px solid var(--hair-strong); color: var(--ink);
    font-family: var(--font-data); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
}
[data-brand="ledger"] .nav-logout:hover { background: var(--row-hover); color: var(--ink); }
[data-brand="ledger"] .menu-toggle { color: var(--ink); border-color: var(--hair-strong); }
[data-brand="ledger"] .topnav.open .topnav-links { background: var(--bg); border-top: 1px solid var(--hair-strong); border-bottom: none; }

[data-brand="ledger"] .topbar { background: var(--bg); border-bottom: 1px solid var(--hair-strong); }
[data-brand="ledger"] .page-head h1, [data-brand="ledger"] .topbar h1 {
    font-family: var(--font-data); font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}

/* Buttons — hybrid: one filled ink action, everything else underlined text */
[data-brand="ledger"] .btn {
    font-family: var(--font-data); letter-spacing: .04em; text-transform: uppercase; font-size: 11px;
    transition: none;
}
[data-brand="ledger"] .btn:active { transform: none; }
[data-brand="ledger"] .btn-primary { background: var(--ink); color: var(--bg); }
[data-brand="ledger"] .btn-primary:hover { background: var(--ink); opacity: .8; transform: none; }
[data-brand="ledger"] .btn-secondary, [data-brand="ledger"] .btn-ghost, [data-brand="ledger"] .btn-outline {
    background: none; border: none; border-bottom: 1px solid var(--hair-strong);
    color: var(--ink-dim); padding: 2px 1px 3px;
}
[data-brand="ledger"] .btn-secondary:hover, [data-brand="ledger"] .btn-ghost:hover, [data-brand="ledger"] .btn-outline:hover {
    background: none; color: var(--ink); border-bottom-color: var(--ink);
}
[data-brand="ledger"] .topnav .btn-primary:hover { background: var(--ink); opacity: .8; }
[data-brand="ledger"] .view-link {
    font-family: var(--font-data); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim);
}
[data-brand="ledger"] .view-link:hover { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); }

/* Inputs / search — flat, hairline, radius already zeroed above */
[data-brand="ledger"] input, [data-brand="ledger"] select, [data-brand="ledger"] textarea {
    font-family: var(--font-ui); background: var(--bg); border-color: var(--hair-strong);
}
[data-brand="ledger"] input[type="date"], [data-brand="ledger"] .col-file, [data-brand="ledger"] .job-id-link {
    font-family: var(--font-data);
}
[data-brand="ledger"] .search-input-wrap { border-color: var(--hair-strong); }
[data-brand="ledger"] label { font-family: var(--font-data); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

/* Pipeline: stat cards become one ruled row of tabular counts, no icons */
[data-brand="ledger"] .stats-grid {
    display: flex; gap: 0; margin-bottom: 0; border-bottom: 1px solid var(--hair-strong); position: relative;
}
[data-brand="ledger"] .stats-grid::before {
    content: "01\00a0\00a0\00a0PIPELINE"; display: block;
    font-family: var(--font-data); font-size: 10px; letter-spacing: .1em; font-weight: 600; color: var(--ink);
    padding: 0 0 8px;
}
[data-brand="ledger"] .stats-grid { flex-wrap: wrap; padding-top: 16px; }
[data-brand="ledger"] .stats-grid::before { flex-basis: 100%; }
[data-brand="ledger"] .stat-card {
    flex: 1 1 0; min-width: 160px; display: block; padding: 12px 18px;
    border: none; border-right: 1px solid var(--hair); background: none;
}
[data-brand="ledger"] .stat-card:last-child { border-right: none; }
[data-brand="ledger"] .stat-card:hover { transform: none; border-right-color: var(--hair); }
[data-brand="ledger"] .stat-card::before { content: none; }
[data-brand="ledger"] .stat-icon { display: none; }
[data-brand="ledger"] .stat-info span {
    font-family: var(--font-data); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px;
}
[data-brand="ledger"] .stat-info strong {
    font-family: var(--font-data); font-size: 26px; font-weight: 600; letter-spacing: 0; color: var(--ink);
}
[data-brand="ledger"] .stat-info small { font-family: var(--font-data); color: var(--ink-dim); }
/* "Pending Reviews" is the one live signal on the dashboard */
[data-brand="ledger"] .stat-card:nth-child(4n+4) .stat-info strong { color: var(--accent-live); }

/* Cards → flush sections with a hairline header, no chrome */
[data-brand="ledger"] .card { background: none; overflow: visible; }
[data-brand="ledger"] .card-header {
    background: none; border-bottom: 1px solid var(--hair-strong); align-items: baseline; padding: 16px 0 7px;
}
[data-brand="ledger"] .card-header h2 {
    font-family: var(--font-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--ink);
}
[data-brand="ledger"] .card-header p { display: none; }
[data-brand="ledger"] .dashboard-grid { gap: 26px; }

/* Quick actions → flush list of underlined text rows, no icon tiles */
[data-brand="ledger"] .quick-actions { display: flex; flex-direction: column; gap: 0; padding: 4px 0 8px; grid-template-columns: none; }
[data-brand="ledger"] .quick-action {
    border: none; border-bottom: 1px solid var(--hair); padding: 11px 0; background: none;
}
[data-brand="ledger"] .quick-action:hover { border-color: var(--hair); background: var(--row-hover); }
[data-brand="ledger"] .quick-icon { display: none; }
[data-brand="ledger"] .quick-action strong {
    font-family: var(--font-data); font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; font-weight: 600;
}
[data-brand="ledger"] .quick-action span { font-family: var(--font-ui); }

[data-brand="ledger"] .activity-item { border-color: var(--hair); }
[data-brand="ledger"] .activity-item .a-count { font-family: var(--font-data); }
[data-brand="ledger"] .company-avatar { background: var(--ink); color: var(--bg); border-radius: 0; }

/* Tables → flush ledger rows: hairline ONLY (row dividers), no cell grid,
   header solid with a strong hairline, mono figures, row-hover — this is
   the one place Ledger deliberately diverges from the other five themes'
   "grid borders row+col" table convention; that convention stays intact
   for every other brand. */
[data-brand="ledger"] table { border: none; border-bottom: 1px solid var(--hair-strong); }
[data-brand="ledger"] thead th {
    background: var(--bg); color: var(--ink-dim);
    font-family: var(--font-data); font-size: 10px; letter-spacing: .08em; font-weight: 500;
    border-right: none; border-bottom: 1px solid var(--hair-strong);
}
[data-brand="ledger"] thead th.sticky-col { background: var(--bg); }
[data-brand="ledger"] tbody td { border-right: none; border-bottom: 1px solid var(--hair); }
[data-brand="ledger"] tbody tr:hover td { background: var(--row-hover); }
[data-brand="ledger"] .sticky-col-id, [data-brand="ledger"] .sticky-col-name,
[data-brand="ledger"] .sticky-col-action, [data-brand="ledger"] .sticky-action-cell {
    background: var(--bg); border: none; border-bottom: 1px solid var(--hair);
}
[data-brand="ledger"] tbody tr:hover .sticky-col, [data-brand="ledger"] tbody tr:hover .sticky-action-cell { background: var(--row-hover); }
[data-brand="ledger"] .job-id-link, [data-brand="ledger"] .col-file { font-family: var(--font-data); }
[data-brand="ledger"] .job-name-link:hover { color: var(--ink); }
[data-brand="ledger"] .action-workflow { background: var(--bg); border-color: var(--hair-strong); font-family: var(--font-data); }
[data-brand="ledger"] .export-all-button { border-style: solid; border-color: var(--hair-strong); font-family: var(--font-data); }
[data-brand="ledger"] .export-all-button:hover { background: var(--row-hover); border-color: var(--ink); color: var(--ink); }
[data-brand="ledger"] .empty-cell { background: none; color: var(--accent-live); }
[data-brand="ledger"] .record-count { font-family: var(--font-data); }
[data-brand="ledger"] .company-avatar, [data-brand="ledger"] .recent-job-cell .company-avatar { border: 1px solid var(--hair-strong); }

/* Status/Approval — colored (chosen option), but flat text, never a pill */
[data-brand="ledger"] .status-badge {
    background: none; border: none; padding: 0; font-family: var(--font-data);
    font-weight: 600; letter-spacing: .02em;
}
[data-brand="ledger"] .status-badge::before { display: none; }
/* Every status-badge modifier is hardcoded to its own hex (not the
   --success/--danger tokens), so the generic remap above can't reach
   them — map each one explicitly instead of leaving stray pastel hex
   values on an otherwise monochrome+signal theme. */
[data-brand="ledger"] .status-approved-active, [data-brand="ledger"] .status-active,
[data-brand="ledger"] .status-green, [data-brand="ledger"] .badge-green { color: var(--accent-ok); }
[data-brand="ledger"] .status-fresh-pending, [data-brand="ledger"] .status-pending,
[data-brand="ledger"] .status-new, [data-brand="ledger"] .status-amber, [data-brand="ledger"] .badge-amber { color: var(--ink-dim); }
[data-brand="ledger"] .status-rejected-duplicate, [data-brand="ledger"] .status-rejected-data-issue,
[data-brand="ledger"] .status-rejected, [data-brand="ledger"] .status-red, [data-brand="ledger"] .badge-red { color: var(--accent-live); }
[data-brand="ledger"] .status-slate, [data-brand="ledger"] .badge-slate,
[data-brand="ledger"] .status-violet, [data-brand="ledger"] .badge-violet { color: var(--ink-dim); }
[data-brand="ledger"] .count-chip { background: none; border: 1px solid var(--hair-strong); color: var(--ink-dim); font-family: var(--font-data); }
[data-brand="ledger"] .rejected-chip { background: none; color: var(--accent-live); }

/* Dashboard: --series-aambal/--series-asdc already collapse to the same
   ink-dim above, same as everywhere else Aambal vs ASDC is distinguished by
   label/position rather than color here. The one place that alone isn't
   enough is the Activity Trend's two overlapping lines sharing one plot —
   a dash pattern keeps them tellable apart without introducing color. */
[data-brand="ledger"] .trend-line-asdc { stroke-dasharray: 5 4; }
/* Same hardcoded #2e7a88 as .stat-icon.slate/.status-slate elsewhere —
   those already go monochrome here (.stat-icon is hidden outright,
   .status-slate maps to ink-dim); this one recolors rather than hides
   since it's this card's only visual anchor, not a repeated row icon. */
[data-brand="ledger"] .dash-total-card .dash-kpi-icon { background: transparent; color: var(--ink-dim); }

/* Pager */
[data-brand="ledger"] .pager { border-top: 1px solid var(--hair-strong); }
[data-brand="ledger"] .pager-info { font-family: var(--font-data); }
[data-brand="ledger"] .pager-btn { background: var(--bg); border-color: var(--hair-strong); font-family: var(--font-data); }
[data-brand="ledger"] .pager-btn:hover:not(:disabled) { background: var(--row-hover); border-color: var(--ink); color: var(--ink); }
[data-brand="ledger"] .pager-btn.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* Upload / dataset toolbar */
[data-brand="ledger"] .upload-drop { border-style: dashed; border-color: var(--hair-strong); background: var(--bg); color: var(--ink-dim); }
[data-brand="ledger"] .upload-drop:hover, [data-brand="ledger"] .upload-drop.drag-over { border-color: var(--ink); background: var(--row-hover); color: var(--ink); }
[data-brand="ledger"] .dataset-toolbar { border-color: var(--hair-strong); }

/* Modal / popover / toast / spinner */
[data-brand="ledger"] .profile-modal-overlay { background: color-mix(in srgb, var(--ink) 55%, transparent); }
[data-brand="ledger"] .profile-modal { border: 1px solid var(--hair-strong); }
[data-brand="ledger"] .profile-modal-header h3 { font-family: var(--font-data); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
[data-brand="ledger"] .profile-row { border-color: var(--hair); }
[data-brand="ledger"] .profile-label { font-family: var(--font-data); }
[data-brand="ledger"] .toast { background: var(--ink); color: var(--bg); }
[data-brand="ledger"] .toast.success { background: var(--accent-ok); color: #fff; }
[data-brand="ledger"] .toast.error { background: var(--accent-live); color: #fff; }
[data-brand="ledger"] .spinner { border-color: var(--hair); border-top-color: var(--ink); }

/* Empty state */
[data-brand="ledger"] .empty-state h3, [data-brand="ledger"] .empty-icon, [data-brand="ledger"] .empty-state-icon { font-family: var(--font-data); }

/* Auth pages — flat ink cover panel instead of a gradient-feeling fill */
[data-brand="ledger"] .auth-aside { background: var(--ink); color: var(--bg); }
[data-brand="ledger"] .auth-logo { background: var(--bg); color: var(--ink); box-shadow: none; }
[data-brand="ledger"] .auth-brand h1, [data-brand="ledger"] .auth-card h3 { font-family: var(--font-data); letter-spacing: .02em; }
[data-brand="ledger"] .eyebrow { color: var(--accent-live); }
[data-brand="ledger"] .auth-pitch h2 b { color: var(--bg); text-decoration: underline; }
[data-brand="ledger"] .tick { background: var(--bg); color: var(--ink); }
[data-brand="ledger"] .auth-inputwrap { background: var(--bg); border-color: var(--hair-strong); }
[data-brand="ledger"] .auth-submit { background: var(--ink); color: var(--bg); font-family: var(--font-data); letter-spacing: .04em; text-transform: uppercase; }
[data-brand="ledger"] .auth-submit:hover:not(:disabled) { background: var(--ink); opacity: .82; }
[data-brand="ledger"] .auth-forgot, [data-brand="ledger"] .auth-switch a, [data-brand="ledger"] .auth-card a { color: var(--ink); border-bottom: 1px solid var(--hair-strong); }
[data-brand="ledger"] .auth-hint { background: var(--row-hover); border-color: var(--hair-strong); }
[data-brand="ledger"] .auth-hint code, [data-brand="ledger"] .otp-devhint code { font-family: var(--font-data); background: var(--bg); border: 1px solid var(--hair-strong); }
[data-brand="ledger"] .otp-inputs input { background: var(--bg); border-color: var(--hair-strong); font-family: var(--font-data); }
[data-brand="ledger"] .otp-inputs input.filled { border-color: var(--ink); background: var(--row-hover); }
[data-brand="ledger"] .otp-resend { color: var(--ink); font-family: var(--font-data); }

/* Record detail (Job Structurer host page) */
[data-brand="ledger"] body.record-detail-body { background: var(--bg); }
[data-brand="ledger"] .structurer-panel, [data-brand="ledger"] .structurer-frame { background: var(--bg); }
[data-brand="ledger"] .detail-title .job-id-label { font-family: var(--font-data); background: var(--row-hover); color: var(--ink); }
[data-brand="ledger"] .back-link { color: var(--ink); }

/* Audit */
[data-brand="ledger"] .audit-table .mono, [data-brand="ledger"] #auditTableBody .mono { font-family: var(--font-data); }

/* ============================================================================
   CLOISTER THEME  —  data-brand="cloister"
   Soft spatial, low-contrast calm: one radical type family (Figtree), grouped
   "sheet" panels with near-invisible dividers, pastel status dots (never a
   pill), exactly ONE filled pill button anywhere — every other action is a
   plain accent-colored text link. Diffuse soft shadow for elevation in light
   mode; lightness-contrast (sheet lighter than page) in dark, no shadow.

   Domain translation note: the source doc is written for a candidate-
   pipeline product ("Sourced/Screened/Interviewing/Offer/Rejected" funnel
   with proportional bars). ATIC's dashboard has 4 independent counts, not a
   funnel with a natural total to normalize a bar against — so the pipeline
   sheet below groups them as rows without fabricating a proportional bar.
   Likewise "no table anywhere" can't literally apply to the Records/
   Datasets/Aambal tables (ATIC's own spec requires showing every column) —
   those keep their real <table> structure, restyled to read as one soft
   sheet (near-invisible dividers, generous padding, no grid lines) rather
   than rebuilt as chevron rows, same resolution as Ledger's table divergence.
   ============================================================================ */

[data-brand="cloister"][data-theme="light"],
[data-brand="cloister"]:not([data-theme="dark"]) {
    --c-bg: #F1F0EC;
    --c-sheet: #FFFFFF;
    --c-ink: #1C1C1E;
    --c-ink-dim: #8A8A8E;
    --c-divider: #F0EFEB;
    --c-accent: #5B8DEF;
    --c-accent-ink: #FFFFFF;
    --c-warn: #E0A458;
    --c-crit: #D98080;
    --c-ok: #8FBF8F;
    --c-sheet-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.035);
    --c-sheet-border: none;
}
[data-brand="cloister"][data-theme="dark"] {
    --c-bg: #1B1B1F;
    --c-sheet: #232328;
    --c-ink: #F2F1ED;
    --c-ink-dim: #8E8E93;
    --c-divider: #2C2C30;
    --c-accent: #7AA6FF;
    --c-accent-ink: #12172B;
    --c-warn: #E8B673;
    --c-crit: #E79797;
    --c-ok: #9ED49E;
    --c-sheet-shadow: none;
    --c-sheet-border: 1px solid rgba(255,255,255,.05);
}

[data-brand="cloister"] {
    --font-body: 'Figtree', -apple-system, 'SF Pro Text', 'Segoe UI', sans-serif;

    --background: var(--c-bg);
    --card: var(--c-sheet);
    --text: var(--c-ink);
    --heading: var(--c-ink);
    --muted: var(--c-ink-dim);
    --border: var(--c-divider);

    --primary: var(--c-accent);
    --primary-dark: color-mix(in srgb, var(--c-accent) 85%, black);
    --primary-light: color-mix(in srgb, var(--c-accent) 12%, var(--c-sheet));

    --nav-bg: var(--c-sheet);
    --nav-bg-2: var(--c-accent);
    --nav-hover: var(--c-divider);
    --nav-active: var(--c-accent);
    --nav-text: var(--c-ink);
    --nav-text-dim: var(--c-ink-dim);

    --success: var(--c-ok); --success-bg: transparent; --success-text: var(--c-ok);
    --warning: var(--c-warn); --warning-bg: transparent;
    --danger: var(--c-crit); --danger-bg: transparent; --danger-text: var(--c-crit);
    --info-bg: transparent; --info-text: var(--c-accent);

    --blue: var(--c-ink-dim);   --blue-bg: transparent;
    --teal: var(--c-ink-dim);   --teal-bg: transparent;
    --green: var(--c-ok);       --green-bg: transparent;
    --orange: var(--c-warn);    --orange-bg: transparent;
    --pink: var(--c-ink-dim);   --pink-bg: transparent;
    --purple: var(--c-ink-dim); --purple-bg: transparent;
    --yellow: var(--c-warn);    --yellow-bg: transparent;
    --red: var(--c-crit);       --red-bg: transparent;
    --cyan: var(--c-ink-dim);   --cyan-bg: transparent;

    --radius: 14px; --radius-sm: 10px; --radius-pill: 999px;
    --shadow: var(--c-sheet-shadow); --shadow-md: var(--c-sheet-shadow); --shadow-sm: none;
    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--c-accent) 25%, transparent);
}
[data-brand="cloister"] body { font-family: var(--font-body); font-size: 15px; line-height: 1.5; }
[data-brand="cloister"][data-theme="dark"] * { box-shadow: none !important; }

/* Nav — reads as a lifted sheet, not a saturated bar */
[data-brand="cloister"] .topnav { background: var(--c-sheet); color: var(--c-ink); box-shadow: var(--c-sheet-shadow); border-bottom: var(--c-sheet-border); }
[data-brand="cloister"] .brand-mark { color: var(--c-ink); font-weight: 700; }
[data-brand="cloister"] .logo-icon { background: var(--c-accent); box-shadow: none; }
[data-brand="cloister"] .topnav-link { color: var(--c-ink-dim); font-weight: 500; }
[data-brand="cloister"] .topnav-link:hover { background: var(--c-divider); color: var(--c-ink); }
[data-brand="cloister"] .topnav-link.active {
    background: color-mix(in srgb, var(--c-accent) 14%, var(--c-sheet));
    color: var(--c-accent); box-shadow: none; font-weight: 600;
}
[data-brand="cloister"] .topnav-link .nav-icon { display: none; }
[data-brand="cloister"] .menu-toggle { color: var(--c-ink); border-color: var(--c-divider); }
[data-brand="cloister"] .topnav.open .topnav-links { background: var(--c-sheet); }
[data-brand="cloister"] .theme-btn, [data-brand="cloister"] .settings-btn {
    background: var(--c-divider); border: none; color: var(--c-ink);
}
[data-brand="cloister"] .theme-btn:hover, [data-brand="cloister"] .settings-btn:hover,
[data-brand="cloister"] .settings-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--c-accent) 16%, var(--c-sheet)); }
[data-brand="cloister"] .theme-popover { border: none; box-shadow: var(--c-sheet-shadow); border: var(--c-sheet-border); }
[data-brand="cloister"] .nav-avatar { background: var(--c-accent); }
[data-brand="cloister"] .nav-logout { background: var(--c-divider); border: none; color: var(--c-ink); }
[data-brand="cloister"] .nav-logout:hover { background: color-mix(in srgb, var(--c-accent) 16%, var(--c-sheet)); color: var(--c-ink); }

[data-brand="cloister"] .page-head h1, [data-brand="cloister"] .topbar h1 { font-size: 28px; font-weight: 700; letter-spacing: -.01em; color: var(--c-ink); }
[data-brand="cloister"] .topbar { background: var(--c-bg); border-bottom: none; }

/* Buttons — exactly one filled pill (.btn-primary); everything else is a
   plain text link, no border, no background, no second button style */
[data-brand="cloister"] .btn { font-weight: 600; transition: none; }
[data-brand="cloister"] .btn:active { transform: none; }
[data-brand="cloister"] .btn-primary {
    background: var(--c-accent); color: var(--c-accent-ink); border-radius: var(--radius-pill);
    box-shadow: none;
}
[data-brand="cloister"][data-theme="light"] .btn-primary { box-shadow: 0 6px 16px color-mix(in srgb, var(--c-accent) 25%, transparent); }
[data-brand="cloister"] .btn-primary:hover { background: color-mix(in srgb, var(--c-accent) 88%, black); box-shadow: none; transform: none; }
[data-brand="cloister"] .btn-secondary, [data-brand="cloister"] .btn-ghost, [data-brand="cloister"] .btn-outline {
    background: none; border: none; color: var(--c-accent); padding-left: 4px; padding-right: 4px;
}
[data-brand="cloister"] .btn-secondary:hover, [data-brand="cloister"] .btn-ghost:hover, [data-brand="cloister"] .btn-outline:hover {
    background: none; color: color-mix(in srgb, var(--c-accent) 80%, black); text-decoration: underline;
}
[data-brand="cloister"] .topnav .btn-primary:hover { background: color-mix(in srgb, var(--c-accent) 88%, black); }
[data-brand="cloister"] .view-link { color: var(--c-accent); font-weight: 500; }

/* Inputs — soft, generously rounded, near-invisible border */
[data-brand="cloister"] input, [data-brand="cloister"] select, [data-brand="cloister"] textarea {
    font-family: var(--font-body); background: var(--c-sheet); border-color: var(--c-divider);
}
[data-brand="cloister"] .search-input-wrap { border-color: var(--c-divider); background: var(--c-sheet); }
[data-brand="cloister"] input:focus, [data-brand="cloister"] select:focus, [data-brand="cloister"] textarea:focus,
[data-brand="cloister"] .search-input-wrap:focus-within { border-color: var(--c-accent); }
[data-brand="cloister"] label { color: var(--c-ink-dim); font-weight: 500; }

/* Pipeline — one grouped sheet of stat rows (no fabricated proportional bar,
   see the note above), replacing the 4 KPI cards */
[data-brand="cloister"] .stats-grid {
    display: block; background: var(--c-sheet); border-radius: 20px; box-shadow: var(--c-sheet-shadow);
    border: var(--c-sheet-border); overflow: hidden; margin-bottom: 28px;
}
[data-brand="cloister"] .stats-grid::before {
    content: "Pipeline"; display: block; font-size: 13px; font-weight: 600; color: var(--c-ink-dim); padding: 18px 22px 4px;
}
[data-brand="cloister"] .stat-card {
    display: flex; justify-content: space-between; align-items: center; background: none; border: none;
    border-bottom: 1px solid var(--c-divider); border-radius: 0; padding: 14px 22px; box-shadow: none;
}
[data-brand="cloister"] .stat-card:last-child { border-bottom: none; }
[data-brand="cloister"] .stat-card:hover { transform: none; border-color: var(--c-divider); box-shadow: none; }
[data-brand="cloister"] .stat-card::before { content: none; }
[data-brand="cloister"] .stat-icon { display: none; }
[data-brand="cloister"] .stat-info { display: flex; align-items: baseline; gap: 10px; width: 100%; }
[data-brand="cloister"] .stat-info span { font-size: 15px; color: var(--c-ink); margin-bottom: 0; font-weight: 500; order: 1; }
[data-brand="cloister"] .stat-info strong { font-size: 18px; font-weight: 700; color: var(--c-ink); margin-left: auto; order: 2; letter-spacing: 0; }
[data-brand="cloister"] .stat-info small { display: none; }
[data-brand="cloister"] .stat-card:nth-child(4n+4) .stat-info strong { color: var(--c-crit); }

/* Cards → grouped sheets */
[data-brand="cloister"] .card { background: var(--c-sheet); border-radius: 20px; box-shadow: var(--c-sheet-shadow); border: var(--c-sheet-border); }
[data-brand="cloister"] .card-header { background: none; border-bottom: none; padding: 18px 22px 4px; }
[data-brand="cloister"] .card-header h2 { font-size: 13px; font-weight: 600; color: var(--c-ink-dim); }
[data-brand="cloister"] .card-header p { display: none; }
[data-brand="cloister"] .dashboard-grid { gap: 28px; }

/* Quick actions → plain rows, no icon tiles, chevron-terminated */
[data-brand="cloister"] .quick-actions { display: flex; flex-direction: column; gap: 0; padding: 4px 0 8px; grid-template-columns: none; }
[data-brand="cloister"] .quick-action { border: none; border-bottom: 1px solid var(--c-divider); border-radius: 0; padding: 16px 22px; background: none; }
[data-brand="cloister"] .quick-action:hover { border-color: var(--c-divider); background: var(--c-divider); box-shadow: none; }
[data-brand="cloister"] .quick-icon { display: none; }
[data-brand="cloister"] .quick-action strong { font-size: 16px; font-weight: 600; }
[data-brand="cloister"] .quick-action span { font-size: 13px; color: var(--c-ink-dim); }
[data-brand="cloister"] .quick-action::after { content: "\203A"; margin-left: auto; color: var(--c-ink-dim); font-size: 18px; }
[data-brand="cloister"] .quick-action { display: flex; align-items: center; }

[data-brand="cloister"] .activity-item { border-color: var(--c-divider); padding: 14px 10px; }
[data-brand="cloister"] .company-avatar { background: var(--c-accent); border-radius: 10px; }

/* Tables — read as one soft grouped sheet, near-invisible dividers, no
   grid lines (the "no table anywhere" rule adapted, see note above) */
[data-brand="cloister"] .table-wrapper { border-radius: 20px; box-shadow: var(--c-sheet-shadow); border: var(--c-sheet-border); overflow-x: auto; overflow-y: hidden; }
[data-brand="cloister"] table { border: none; }
[data-brand="cloister"] thead th {
    background: var(--c-sheet); color: var(--c-ink-dim); font-weight: 600; font-size: 11px;
    border-right: none; border-bottom: 1px solid var(--c-divider); text-transform: none; letter-spacing: 0;
}
[data-brand="cloister"] thead th.sticky-col { background: var(--c-sheet); }
[data-brand="cloister"] tbody td { border-right: none; border-bottom: 1px solid var(--c-divider); padding: 15px 16px; }
[data-brand="cloister"] tbody tr:hover td { background: var(--c-divider); }
[data-brand="cloister"] .sticky-col-id, [data-brand="cloister"] .sticky-col-name,
[data-brand="cloister"] .sticky-col-action, [data-brand="cloister"] .sticky-action-cell {
    background: var(--c-sheet); border: none; border-bottom: 1px solid var(--c-divider);
}
[data-brand="cloister"] tbody tr:hover .sticky-col, [data-brand="cloister"] tbody tr:hover .sticky-action-cell { background: var(--c-divider); }
[data-brand="cloister"] .job-id-link { font-family: var(--font-body); font-weight: 600; }
[data-brand="cloister"] .action-workflow { background: var(--c-sheet); border-color: var(--c-divider); border-radius: var(--radius-sm); }
[data-brand="cloister"] .export-all-button { border-style: solid; border-color: var(--c-divider); border-radius: var(--radius-sm); }
[data-brand="cloister"] .export-all-button:hover { background: var(--c-divider); border-color: var(--c-accent); color: var(--c-accent); }
[data-brand="cloister"] .empty-cell { background: color-mix(in srgb, var(--c-crit) 14%, transparent); }
[data-brand="cloister"] .pager-btn { border-radius: var(--radius-pill); border-color: var(--c-divider); }
[data-brand="cloister"] .pager-btn.active { background: var(--c-accent); border-color: transparent; }

/* Status/Approval → pastel dot, never a pill */
[data-brand="cloister"] .status-badge { background: none; border: none; padding-left: 15px; position: relative; font-weight: 500; }
[data-brand="cloister"] .status-badge::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 50%; opacity: 1; background: var(--c-ink-dim);
}
[data-brand="cloister"] .status-approved-active::before, [data-brand="cloister"] .status-active::before,
[data-brand="cloister"] .status-green::before, [data-brand="cloister"] .badge-green::before { background: var(--c-ok); }
[data-brand="cloister"] .status-approved-active, [data-brand="cloister"] .status-active,
[data-brand="cloister"] .status-green, [data-brand="cloister"] .badge-green { color: var(--c-ink); }
[data-brand="cloister"] .status-fresh-pending::before, [data-brand="cloister"] .status-pending::before,
[data-brand="cloister"] .status-new::before, [data-brand="cloister"] .status-amber::before, [data-brand="cloister"] .badge-amber::before { background: var(--c-warn); }
[data-brand="cloister"] .status-rejected-duplicate::before, [data-brand="cloister"] .status-rejected-data-issue::before,
[data-brand="cloister"] .status-rejected::before, [data-brand="cloister"] .status-red::before, [data-brand="cloister"] .badge-red::before { background: var(--c-crit); }
[data-brand="cloister"] .status-rejected-duplicate, [data-brand="cloister"] .status-rejected-data-issue,
[data-brand="cloister"] .status-rejected, [data-brand="cloister"] .status-red, [data-brand="cloister"] .badge-red { color: var(--c-crit); }
[data-brand="cloister"] .count-chip { background: var(--c-divider); border: none; color: var(--c-ink-dim); border-radius: var(--radius-pill); }
[data-brand="cloister"] .rejected-chip { background: none; color: var(--c-crit); }

/* Modal / popover / toast */
[data-brand="cloister"] .profile-modal-overlay { background: color-mix(in srgb, var(--c-ink) 45%, transparent); }
[data-brand="cloister"] .profile-modal { border-radius: 20px; box-shadow: var(--c-sheet-shadow); border: var(--c-sheet-border); }
[data-brand="cloister"] .profile-row { border-color: var(--c-divider); }
[data-brand="cloister"] .toast { background: var(--c-ink); color: var(--c-bg); border-radius: var(--radius-pill); box-shadow: var(--c-sheet-shadow); }
[data-brand="cloister"] .toast.success { background: var(--c-ok); color: #1c1c1e; }
[data-brand="cloister"] .toast.error { background: var(--c-crit); color: #1c1c1e; }
[data-brand="cloister"] .spinner { border-color: var(--c-divider); border-top-color: var(--c-accent); }

/* Auth — soft sheet aside instead of a saturated fill (accent stays
   reserved for the button/progress/checked roles per the doc's own rule) */
[data-brand="cloister"] .auth-aside { background: var(--c-sheet); color: var(--c-ink); box-shadow: var(--c-sheet-shadow); }
[data-brand="cloister"] .auth-logo { background: var(--c-accent); box-shadow: none; }
[data-brand="cloister"] .auth-brand h1, [data-brand="cloister"] .auth-card h3 { color: var(--c-ink); font-weight: 700; }
[data-brand="cloister"] .auth-brand span, [data-brand="cloister"] .auth-foot { color: var(--c-ink-dim); }
[data-brand="cloister"] .eyebrow { color: var(--c-accent); }
[data-brand="cloister"] .auth-pitch h2 { color: var(--c-ink); }
[data-brand="cloister"] .auth-pitch h2 b { color: var(--c-accent); }
[data-brand="cloister"] .auth-pitch p { color: var(--c-ink-dim); }
[data-brand="cloister"] .auth-feats li { color: var(--c-ink); }
[data-brand="cloister"] .tick { background: var(--c-accent); }
[data-brand="cloister"] .auth-inputwrap { background: var(--c-sheet); border-color: var(--c-divider); }
[data-brand="cloister"] .auth-submit { background: var(--c-accent); color: var(--c-accent-ink); border-radius: var(--radius-pill); }
[data-brand="cloister"] .auth-submit:hover:not(:disabled) { background: color-mix(in srgb, var(--c-accent) 88%, black); }
[data-brand="cloister"] .auth-forgot, [data-brand="cloister"] .auth-switch a, [data-brand="cloister"] .auth-card a { color: var(--c-accent); }
[data-brand="cloister"] .auth-hint { background: var(--c-divider); border-color: transparent; }
[data-brand="cloister"] .auth-hint code { background: var(--c-sheet); color: var(--c-accent); }
[data-brand="cloister"] .otp-inputs input { background: var(--c-sheet); border-color: var(--c-divider); border-radius: var(--radius-sm); }
[data-brand="cloister"] .otp-inputs input.filled { border-color: var(--c-accent); background: var(--c-divider); }
[data-brand="cloister"] .otp-resend { color: var(--c-accent); }

/* Record detail / audit */
[data-brand="cloister"] body.record-detail-body { background: var(--c-bg); }
[data-brand="cloister"] .structurer-panel, [data-brand="cloister"] .structurer-frame { background: var(--c-bg); }
[data-brand="cloister"] .detail-title .job-id-label { background: var(--c-divider); color: var(--c-ink); border-radius: var(--radius-pill); }
[data-brand="cloister"] .back-link { color: var(--c-accent); }

/* Exactly one filled pill button per screen (the doc's own rule 6: "don't
   add a second or third button style next to it"). Records page has two
   .btn-primary — Search and Download Excel — so Search is demoted to a
   plain text link, leaving Download Excel as the one filled action. */
[data-brand="cloister"] .search-btn {
    background: none; color: var(--c-accent); border: none; padding: 8px 6px; box-shadow: none; border-radius: 0;
}
[data-brand="cloister"] .search-btn:hover { background: none; color: color-mix(in srgb, var(--c-accent) 80%, black); text-decoration: underline; transform: none; }
/* columns.js renders one .btn-primary "Save" per table row (15+ on
   screen at once) — same "exactly one" violation, demoted the same way. */
[data-brand="cloister"] button[data-save] {
    background: none; color: var(--c-accent); border: none; padding: 6px 4px; box-shadow: none; border-radius: 0; font-weight: 600;
}
[data-brand="cloister"] button[data-save]:hover { background: none; color: color-mix(in srgb, var(--c-accent) 80%, black); text-decoration: underline; transform: none; }

/* ============================================================================
   YARDARM THEME  —  data-brand="yardarm"
   Command density, keyboard-first: flat bordered panels (--surface on --bg),
   8px radius, no shadow anywhere, Work Sans (UI) + JetBrains Mono (commands/
   data/counts). Color reserved for status only, never branding.

   Domain translation note: same candidate-pipeline source domain as Ledger/
   Cloister. "No buttons at all — kbd chips and a persistent shortcuts
   footer" is the doc's own stated ideal, but its own §5.5 admits the actual
   j/k row navigation and number-key jumps are "application logic the theme
   package doesn't provide" — i.e. even the source theme is CSS-only styling
   over a keyboard model ATIC doesn't have built. Rather than restyle real,
   necessary buttons (Upload, Save, Approve) as inert-looking kbd chips with
   no key behind them, they stay real flat bordered buttons in this theme's
   panel language; the kbd-chip treatment is used where it's honest — the
   dashboard pipeline (numbered 1-4, a real visual key even without a bound
   listener) and pagination (Prev/Next, semantically arrow-key-like).
   ============================================================================ */

[data-brand="yardarm"][data-theme="light"],
[data-brand="yardarm"]:not([data-theme="dark"]) {
    --y-bg: #F8F9FB;
    --y-surface: #FFFFFF;
    --y-ink: #0E1116;
    --y-ink-dim: #6B7280;
    --y-hair: #E5E7EB;
    --y-kbd-bg: #EEF0F3;
    --y-kbd-border: #D6D9DE;
    --y-focus: #4A3FE0;
    --y-warn: #B5790A;
    --y-crit: #C4383B;
    --y-ok: #1B8A82;
    --y-focus-tint: #F1F0FF;
    --y-row-hover: #FAFAFB;
}
[data-brand="yardarm"][data-theme="dark"] {
    --y-bg: #0D0F13;
    --y-surface: #15181D;
    --y-ink: #E7E9EC;
    --y-ink-dim: #7A8290;
    --y-hair: #232730;
    --y-kbd-bg: #1C2027;
    --y-kbd-border: #333944;
    --y-focus: #8A80FF;
    --y-warn: #E0A458;
    --y-crit: #E15C57;
    --y-ok: #38B2A3;
    --y-focus-tint: #1B1830;
    --y-row-hover: #181B21;
}

[data-brand="yardarm"] {
    --font-cmd: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

    --background: var(--y-bg);
    --card: var(--y-surface);
    --text: var(--y-ink);
    --heading: var(--y-ink);
    --muted: var(--y-ink-dim);
    --border: var(--y-hair);

    --primary: var(--y-focus);
    --primary-dark: var(--y-focus);
    --primary-light: var(--y-focus-tint);

    --nav-bg: var(--y-surface);
    --nav-bg-2: var(--y-focus);
    --nav-hover: var(--y-row-hover);
    --nav-active: var(--y-focus);
    --nav-text: var(--y-ink);
    --nav-text-dim: var(--y-ink-dim);

    --success: var(--y-ok); --success-bg: transparent; --success-text: var(--y-ok);
    --warning: var(--y-warn); --warning-bg: transparent;
    --danger: var(--y-crit); --danger-bg: transparent; --danger-text: var(--y-crit);
    --info-bg: transparent; --info-text: var(--y-focus);

    --blue: var(--y-ink-dim);   --blue-bg: transparent;
    --teal: var(--y-ink-dim);   --teal-bg: transparent;
    --green: var(--y-ok);       --green-bg: transparent;
    --orange: var(--y-warn);    --orange-bg: transparent;
    --pink: var(--y-ink-dim);   --pink-bg: transparent;
    --purple: var(--y-ink-dim); --purple-bg: transparent;
    --yellow: var(--y-warn);    --yellow-bg: transparent;
    --red: var(--y-crit);       --red-bg: transparent;
    --cyan: var(--y-ink-dim);   --cyan-bg: transparent;

    /* never fully rounded, never 0 — a small consistent radius throughout */
    --radius: 8px; --radius-sm: 8px; --radius-pill: 8px;
    --shadow: none; --shadow-md: none; --shadow-sm: none;
    --shadow-focus: 0 0 0 2px var(--y-focus-tint), 0 0 0 1px var(--y-focus);
}
[data-brand="yardarm"] body { font-family: 'Work Sans', -apple-system, 'Segoe UI', sans-serif; font-size: 14px; }
[data-brand="yardarm"] * { box-shadow: none !important; }

/* kbd chip — reused for the pipeline keys and pager */
[data-brand="yardarm"] .y-kbd {
    font-family: var(--font-cmd); font-size: 10px; color: var(--y-ink-dim);
    background: var(--y-kbd-bg); border: 1px solid var(--y-kbd-border); border-radius: 4px; padding: 1px 5px;
}

/* Nav — flat surface panel, hairline border only */
[data-brand="yardarm"] .topnav { background: var(--y-surface); color: var(--y-ink); box-shadow: none; border-bottom: 1px solid var(--y-hair); }
[data-brand="yardarm"] .brand-mark { color: var(--y-ink); font-weight: 600; }
[data-brand="yardarm"] .logo-icon { background: var(--y-focus); box-shadow: none; border-radius: var(--radius-sm); }
[data-brand="yardarm"] .topnav-link { color: var(--y-ink-dim); font-weight: 500; border-radius: var(--radius-sm); }
[data-brand="yardarm"] .topnav-link:hover { background: var(--y-row-hover); color: var(--y-ink); }
[data-brand="yardarm"] .topnav-link.active { background: var(--y-focus-tint); color: var(--y-focus); box-shadow: none; font-weight: 600; }
[data-brand="yardarm"] .topnav-link .nav-icon { display: none; }
[data-brand="yardarm"] .menu-toggle { color: var(--y-ink); border-color: var(--y-hair); }
[data-brand="yardarm"] .topnav.open .topnav-links { background: var(--y-surface); border-top: 1px solid var(--y-hair); }
[data-brand="yardarm"] .theme-btn, [data-brand="yardarm"] .settings-btn {
    background: var(--y-surface); border: 1px solid var(--y-hair); color: var(--y-ink); border-radius: var(--radius-sm);
}
[data-brand="yardarm"] .theme-btn:hover, [data-brand="yardarm"] .settings-btn:hover,
[data-brand="yardarm"] .settings-btn[aria-expanded="true"] { background: var(--y-row-hover); }
[data-brand="yardarm"] .theme-popover { border: 1px solid var(--y-hair); border-radius: var(--radius-sm); }
[data-brand="yardarm"] .theme-swatch-row { font-family: var(--font-cmd); font-size: 11px; }
[data-brand="yardarm"] .nav-avatar { background: var(--y-focus); border-radius: var(--radius-sm); }
[data-brand="yardarm"] .nav-username { font-family: var(--font-cmd); font-size: 12px; }
[data-brand="yardarm"] .nav-logout { background: var(--y-surface); border: 1px solid var(--y-hair); color: var(--y-ink); border-radius: var(--radius-sm); }
[data-brand="yardarm"] .nav-logout:hover { background: var(--y-row-hover); color: var(--y-ink); }
[data-brand="yardarm"] .page-head h1, [data-brand="yardarm"] .topbar h1 { font-size: 17px; font-weight: 600; color: var(--y-ink); }
[data-brand="yardarm"] .topbar { background: var(--y-bg); border-bottom: 1px solid var(--y-hair); }

/* Buttons — flat bordered panel chrome, small radius, never a big filled block */
[data-brand="yardarm"] .btn { font-family: 'Work Sans', sans-serif; font-weight: 600; transition: none; }
[data-brand="yardarm"] .btn:active { transform: none; }
[data-brand="yardarm"] .btn-primary { background: var(--y-focus-tint); color: var(--y-focus); border: 1px solid var(--y-focus); box-shadow: none; }
[data-brand="yardarm"] .btn-primary:hover { background: var(--y-focus-tint); opacity: .85; box-shadow: none; transform: none; }
[data-brand="yardarm"] .btn-secondary, [data-brand="yardarm"] .btn-ghost, [data-brand="yardarm"] .btn-outline {
    background: var(--y-surface); border: 1px solid var(--y-hair); color: var(--y-ink-dim);
}
[data-brand="yardarm"] .btn-secondary:hover, [data-brand="yardarm"] .btn-ghost:hover, [data-brand="yardarm"] .btn-outline:hover {
    background: var(--y-row-hover); border-color: var(--y-ink-dim); color: var(--y-ink);
}
[data-brand="yardarm"] .topnav .btn-primary:hover { opacity: .85; }
[data-brand="yardarm"] .view-link { font-family: var(--font-cmd); font-size: 11px; color: var(--y-ink-dim); }
[data-brand="yardarm"] .view-link:hover { color: var(--y-focus); }

/* Search — command-bar treatment on the existing search input */
[data-brand="yardarm"] .search-input-wrap { background: var(--y-surface); border-color: var(--y-hair); border-radius: var(--radius); }
[data-brand="yardarm"] .search-input-wrap::before { content: "\203A"; color: var(--y-focus); font-family: var(--font-cmd); font-weight: 600; margin-left: 4px; }
[data-brand="yardarm"] .search-input-wrap input { font-family: var(--font-cmd); font-size: 13px; }
[data-brand="yardarm"] .search-input-wrap input::placeholder { color: var(--y-ink-dim); }
[data-brand="yardarm"] input, [data-brand="yardarm"] select, [data-brand="yardarm"] textarea {
    font-family: 'Work Sans', sans-serif; background: var(--y-surface); border-color: var(--y-hair);
}
[data-brand="yardarm"] label { color: var(--y-ink-dim); font-family: var(--font-cmd); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }

/* Pipeline — number-keyed inline segmented strip, not KPI cards */
[data-brand="yardarm"] .stats-grid {
    display: flex; gap: 0; background: var(--y-surface); border: 1px solid var(--y-hair); border-radius: var(--radius);
    overflow: hidden; margin-bottom: 20px;
}
[data-brand="yardarm"] .stat-card {
    flex: 1; display: flex; align-items: center; gap: 8px; background: none; border: none;
    border-right: 1px solid var(--y-hair); border-radius: 0; padding: 10px 14px; box-shadow: none;
}
[data-brand="yardarm"] .stat-card:last-child { border-right: none; }
[data-brand="yardarm"] .stat-card:hover { transform: none; box-shadow: none; }
[data-brand="yardarm"] .stat-card::before { content: none; }
[data-brand="yardarm"] .stat-icon { display: none; }
[data-brand="yardarm"] .stat-info { display: flex; align-items: center; gap: 8px; width: 100%; }
[data-brand="yardarm"] .stat-info::before {
    content: counter(ystat); font-family: var(--font-cmd); font-size: 10px; color: var(--y-ink-dim);
    background: var(--y-kbd-bg); border: 1px solid var(--y-kbd-border); border-radius: 4px; padding: 1px 5px;
}
[data-brand="yardarm"] .stats-grid { counter-reset: ystat; }
[data-brand="yardarm"] .stat-card { counter-increment: ystat; }
[data-brand="yardarm"] .stat-info span { font-size: 11px; color: var(--y-ink-dim); margin-bottom: 0; }
[data-brand="yardarm"] .stat-info strong {
    font-family: var(--font-cmd); font-weight: 600; font-size: 13px; margin-left: auto; color: var(--y-ink); letter-spacing: 0;
}
[data-brand="yardarm"] .stat-info small { display: none; }
[data-brand="yardarm"] .stat-card:nth-child(4n+4) { background: var(--y-focus-tint); }
[data-brand="yardarm"] .stat-card:nth-child(4n+4) .stat-info strong { color: var(--y-crit); }

/* Cards — flat bordered panels */
[data-brand="yardarm"] .card { background: var(--y-surface); border: 1px solid var(--y-hair); border-radius: var(--radius); box-shadow: none; }
[data-brand="yardarm"] .card-header { background: none; border-bottom: 1px solid var(--y-hair); padding: 10px 14px; }
[data-brand="yardarm"] .card-header h2 { font-family: var(--font-cmd); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--y-ink-dim); }
[data-brand="yardarm"] .card-header p { display: none; }
[data-brand="yardarm"] .dashboard-grid { gap: 20px; }

[data-brand="yardarm"] .quick-actions { display: flex; flex-direction: column; gap: 0; padding: 0; grid-template-columns: none; }
[data-brand="yardarm"] .quick-action { border: none; border-bottom: 1px solid var(--y-hair); border-radius: 0; padding: 9px 14px; background: none; }
[data-brand="yardarm"] .quick-action:hover { border-color: var(--y-hair); background: var(--y-row-hover); box-shadow: none; }
[data-brand="yardarm"] .quick-icon { display: none; }
[data-brand="yardarm"] .quick-action strong { font-size: 13px; font-weight: 600; }
[data-brand="yardarm"] .quick-action span { font-family: var(--font-cmd); font-size: 11px; color: var(--y-ink-dim); }

[data-brand="yardarm"] .activity-item { border-color: var(--y-hair); padding: 9px 10px; }
[data-brand="yardarm"] .activity-item .a-count { font-family: var(--font-cmd); }
[data-brand="yardarm"] .company-avatar { background: var(--y-focus); border-radius: var(--radius-sm); }

/* Tables — flat bordered panel, dense single-line rows */
[data-brand="yardarm"] .table-wrapper { border: 1px solid var(--y-hair); border-radius: var(--radius); overflow-x: auto; overflow-y: hidden; }
[data-brand="yardarm"] table { border: none; }
[data-brand="yardarm"] thead th {
    background: var(--y-surface); color: var(--y-ink-dim); font-family: var(--font-cmd); font-size: 10px;
    border-right: none; border-bottom: 1px solid var(--y-hair); padding: 8px 14px;
}
[data-brand="yardarm"] thead th.sticky-col { background: var(--y-surface); }
[data-brand="yardarm"] tbody td { border-right: none; border-bottom: 1px solid var(--y-hair); padding: 9px 14px; }
[data-brand="yardarm"] tbody tr:hover td { background: var(--y-row-hover); }
[data-brand="yardarm"] .sticky-col-id, [data-brand="yardarm"] .sticky-col-name,
[data-brand="yardarm"] .sticky-col-action, [data-brand="yardarm"] .sticky-action-cell {
    background: var(--y-surface); border: none; border-bottom: 1px solid var(--y-hair);
}
[data-brand="yardarm"] tbody tr:hover .sticky-col, [data-brand="yardarm"] tbody tr:hover .sticky-action-cell { background: var(--y-row-hover); }
[data-brand="yardarm"] .job-id-link, [data-brand="yardarm"] .col-file, [data-brand="yardarm"] .record-count { font-family: var(--font-cmd); }
[data-brand="yardarm"] .action-workflow { background: var(--y-surface); border-color: var(--y-hair); font-family: 'Work Sans', sans-serif; border-radius: var(--radius-sm); }
[data-brand="yardarm"] .export-all-button { border-style: solid; border-color: var(--y-hair); border-radius: var(--radius-sm); font-family: var(--font-cmd); }
[data-brand="yardarm"] .export-all-button:hover { background: var(--y-row-hover); border-color: var(--y-focus); color: var(--y-focus); }
[data-brand="yardarm"] .empty-cell { background: color-mix(in srgb, var(--y-crit) 10%, transparent); }

/* Pager — kbd-chip styled, a genuine fit (arrow-key-like navigation) */
[data-brand="yardarm"] .pager { border-top: 1px solid var(--y-hair); }
[data-brand="yardarm"] .pager-info { font-family: var(--font-cmd); font-size: 11px; }
[data-brand="yardarm"] .pager-btn {
    background: var(--y-kbd-bg); border: 1px solid var(--y-kbd-border); border-radius: 4px; font-family: var(--font-cmd); font-size: 11px;
}
[data-brand="yardarm"] .pager-btn:hover:not(:disabled) { background: var(--y-row-hover); border-color: var(--y-focus); color: var(--y-focus); }
[data-brand="yardarm"] .pager-btn.active { background: var(--y-focus-tint); border-color: var(--y-focus); color: var(--y-focus); }

/* Status/Approval — plain colored text, dot for stage */
[data-brand="yardarm"] .status-badge { background: none; border: none; padding: 0; font-family: var(--font-cmd); font-size: 12px; }
[data-brand="yardarm"] .status-badge::before { width: 6px; height: 6px; }
[data-brand="yardarm"] .status-approved-active, [data-brand="yardarm"] .status-active,
[data-brand="yardarm"] .status-green, [data-brand="yardarm"] .badge-green { color: var(--y-ok); }
[data-brand="yardarm"] .status-fresh-pending, [data-brand="yardarm"] .status-pending,
[data-brand="yardarm"] .status-new, [data-brand="yardarm"] .status-amber, [data-brand="yardarm"] .badge-amber { color: var(--y-ink-dim); }
[data-brand="yardarm"] .status-rejected-duplicate, [data-brand="yardarm"] .status-rejected-data-issue,
[data-brand="yardarm"] .status-rejected, [data-brand="yardarm"] .status-red, [data-brand="yardarm"] .badge-red { color: var(--y-crit); }
[data-brand="yardarm"] .status-slate, [data-brand="yardarm"] .badge-slate,
[data-brand="yardarm"] .status-violet, [data-brand="yardarm"] .badge-violet { color: var(--y-ink-dim); }
[data-brand="yardarm"] .count-chip { background: var(--y-kbd-bg); border: 1px solid var(--y-kbd-border); color: var(--y-ink-dim); font-family: var(--font-cmd); border-radius: 4px; }
[data-brand="yardarm"] .rejected-chip { background: none; color: var(--y-crit); }

/* Modal / popover / toast */
[data-brand="yardarm"] .profile-modal-overlay { background: color-mix(in srgb, var(--y-ink) 50%, transparent); }
[data-brand="yardarm"] .profile-modal { border: 1px solid var(--y-hair); border-radius: var(--radius); box-shadow: none; }
[data-brand="yardarm"] .profile-modal-header h3 { font-family: var(--font-cmd); font-size: 13px; }
[data-brand="yardarm"] .profile-row { border-color: var(--y-hair); }
[data-brand="yardarm"] .profile-label { font-family: var(--font-cmd); font-size: 11px; }
[data-brand="yardarm"] .toast { background: var(--y-ink); color: var(--y-bg); font-family: var(--font-cmd); border-radius: var(--radius-sm); }
[data-brand="yardarm"] .toast.success { background: var(--y-ok); }
[data-brand="yardarm"] .toast.error { background: var(--y-crit); }
[data-brand="yardarm"] .spinner { border-color: var(--y-hair); border-top-color: var(--y-focus); }

/* Auth — flat bordered panel, not a saturated fill */
[data-brand="yardarm"] .auth-aside { background: var(--y-surface); color: var(--y-ink); border-right: 1px solid var(--y-hair); }
[data-brand="yardarm"] .auth-logo { background: var(--y-focus); box-shadow: none; border-radius: var(--radius-sm); }
[data-brand="yardarm"] .auth-brand h1, [data-brand="yardarm"] .auth-card h3 { font-family: var(--font-cmd); font-weight: 600; color: var(--y-ink); }
[data-brand="yardarm"] .auth-brand span, [data-brand="yardarm"] .auth-foot { color: var(--y-ink-dim); }
[data-brand="yardarm"] .eyebrow { color: var(--y-focus); font-family: var(--font-cmd); }
[data-brand="yardarm"] .auth-pitch h2 { color: var(--y-ink); }
[data-brand="yardarm"] .auth-pitch h2 b { color: var(--y-focus); }
[data-brand="yardarm"] .auth-pitch p { color: var(--y-ink-dim); }
[data-brand="yardarm"] .auth-feats li { color: var(--y-ink); }
[data-brand="yardarm"] .tick { background: var(--y-focus); border-radius: var(--radius-sm); }
[data-brand="yardarm"] .auth-inputwrap { background: var(--y-surface); border-color: var(--y-hair); border-radius: var(--radius); }
[data-brand="yardarm"] .auth-input { font-family: var(--font-cmd); }
[data-brand="yardarm"] .auth-submit { background: var(--y-focus-tint); color: var(--y-focus); border: 1px solid var(--y-focus); border-radius: var(--radius); font-family: var(--font-cmd); }
[data-brand="yardarm"] .auth-submit:hover:not(:disabled) { opacity: .85; }
[data-brand="yardarm"] .auth-forgot, [data-brand="yardarm"] .auth-switch a, [data-brand="yardarm"] .auth-card a { color: var(--y-focus); }
[data-brand="yardarm"] .auth-hint { background: var(--y-kbd-bg); border-color: var(--y-kbd-border); }
[data-brand="yardarm"] .auth-hint code { font-family: var(--font-cmd); background: var(--y-surface); border: 1px solid var(--y-kbd-border); color: var(--y-focus); }
[data-brand="yardarm"] .otp-inputs input { background: var(--y-surface); border-color: var(--y-hair); font-family: var(--font-cmd); border-radius: var(--radius-sm); }
[data-brand="yardarm"] .otp-inputs input.filled { border-color: var(--y-focus); background: var(--y-focus-tint); }
[data-brand="yardarm"] .otp-resend { color: var(--y-focus); font-family: var(--font-cmd); }

/* Record detail / audit */
[data-brand="yardarm"] body.record-detail-body { background: var(--y-bg); }
[data-brand="yardarm"] .structurer-panel, [data-brand="yardarm"] .structurer-frame { background: var(--y-bg); }
[data-brand="yardarm"] .detail-title .job-id-label { font-family: var(--font-cmd); background: var(--y-kbd-bg); color: var(--y-ink); border: 1px solid var(--y-kbd-border); border-radius: 4px; }
[data-brand="yardarm"] .back-link { color: var(--y-focus); font-family: var(--font-cmd); font-size: 12px; }
[data-brand="yardarm"] .audit-table .mono, [data-brand="yardarm"] #auditTableBody .mono { font-family: var(--font-cmd); }

/* ============================================================================
   ATELIER THEME  —  data-brand="atelier"
   Studio craft, object-like UI: a two-tone canvas/object relationship (page
   bg visibly distinct from every panel), small precise radius (6-8px, never
   0, never fully round except the one pill-shaped dock/button), sharp 0-blur
   selection ring for focus instead of a blurred shadow, Manrope + Space Mono.

   Domain translation note: the source doc's own §5.4 says this is "the one
   theme in the set that most clearly benefits from a genuinely different DOM
   shape" (a canvas grid of individual candidate frames instead of a table)
   and admits table markup can't really deliver that read. Same resolution
   as Ledger/Cloister/Yardarm's table divergences: the real multi-column
   <table> stays (ATIC's spec requires every column visible), styled to read
   as one bordered "object" sitting on the canvas rather than rebuilt as
   floating per-row frames. The floating pill tool-dock is a real construction
   here too, but ATIC's actions are page-specific and functional (Upload,
   Search, Save) — routing them all into one fixed dock would either hide
   necessary controls or duplicate them, so buttons stay in place, restyled
   in the small-radius object language instead. Decorative color-tag dots
   (rotate per row, non-semantic per the doc's own §5.5) are applied to the
   Recent Jobs company avatars.
   ============================================================================ */

[data-brand="atelier"][data-theme="light"],
[data-brand="atelier"]:not([data-theme="dark"]) {
    --a-canvas: #EAEAEC;
    --a-object: #FFFFFF;
    --a-ink: #1B1B1F;
    --a-ink-dim: #87878F;
    --a-hair: #DBDBDE;
    --a-accent: #FF6B4A;
    --a-warn: #FFB648;
    --a-ok: #12A9C7;
    --a-tag-1: #6C5CE7; --a-tag-2: #12A9C7; --a-tag-3: #FFB648; --a-tag-4: #FF6B4A;
}
[data-brand="atelier"][data-theme="dark"] {
    --a-canvas: #1C1D21;
    --a-object: #26272C;
    --a-ink: #EDEDEF;
    --a-ink-dim: #8E8E96;
    --a-hair: #37383F;
    --a-accent: #FF8467;
    --a-warn: #FFC875;
    --a-ok: #4FC3DE;
    --a-tag-1: #8A7BFF; --a-tag-2: #4FC3DE; --a-tag-3: #FFC875; --a-tag-4: #FF8467;
}
[data-brand="atelier"] {
    --font-obj: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
    --font-dim: 'Space Mono', 'SFMono-Regular', Consolas, monospace;

    --background: var(--a-canvas); --card: var(--a-object); --text: var(--a-ink); --heading: var(--a-ink);
    --muted: var(--a-ink-dim); --border: var(--a-hair);

    --primary: var(--a-accent); --primary-dark: color-mix(in srgb, var(--a-accent) 85%, black);
    --primary-light: color-mix(in srgb, var(--a-accent) 12%, var(--a-object));

    --nav-bg: var(--a-object); --nav-bg-2: var(--a-accent);
    --nav-hover: var(--a-hair); --nav-active: var(--a-accent);
    --nav-text: var(--a-ink); --nav-text-dim: var(--a-ink-dim);

    --success: var(--a-ok); --success-bg: transparent; --success-text: var(--a-ok);
    --warning: var(--a-warn); --warning-bg: transparent;
    --danger: var(--a-accent); --danger-bg: transparent; --danger-text: var(--a-accent);
    --info-bg: transparent; --info-text: var(--a-accent);

    --blue: var(--a-tag-2);   --blue-bg: transparent;
    --teal: var(--a-ok);      --teal-bg: transparent;
    --green: var(--a-ok);     --green-bg: transparent;
    --orange: var(--a-warn);  --orange-bg: transparent;
    --pink: var(--a-tag-1);   --pink-bg: transparent;
    --purple: var(--a-tag-1); --purple-bg: transparent;
    --yellow: var(--a-warn);  --yellow-bg: transparent;
    --red: var(--a-accent);   --red-bg: transparent;
    --cyan: var(--a-tag-2);   --cyan-bg: transparent;

    --radius: 6px; --radius-sm: 6px; --radius-pill: 999px;
    --shadow: none; --shadow-md: none; --shadow-sm: none;
    --shadow-focus: 0 0 0 2px var(--a-accent);
}
[data-brand="atelier"] body { font-family: var(--font-obj); font-size: 14px; }
[data-brand="atelier"] * { box-shadow: none !important; }

[data-brand="atelier"] .topnav { background: var(--a-object); color: var(--a-ink); box-shadow: none; border-bottom: 1px solid var(--a-hair); }
[data-brand="atelier"] .brand-mark { color: var(--a-ink); font-weight: 700; }
[data-brand="atelier"] .logo-icon { background: var(--a-accent); box-shadow: none; border-radius: var(--radius); }
[data-brand="atelier"] .topnav-link { color: var(--a-ink-dim); border-radius: var(--radius); }
[data-brand="atelier"] .topnav-link:hover { background: var(--a-hair); color: var(--a-ink); }
[data-brand="atelier"] .topnav-link.active {
    background: var(--a-object); color: var(--a-ink); box-shadow: none;
    border: 1px solid var(--a-accent); outline: 2px solid color-mix(in srgb, var(--a-accent) 20%, transparent); outline-offset: -1px;
    font-weight: 600;
}
[data-brand="atelier"] .topnav-link .nav-icon { display: none; }
[data-brand="atelier"] .menu-toggle { color: var(--a-ink); border-color: var(--a-hair); }
[data-brand="atelier"] .topnav.open .topnav-links { background: var(--a-object); }
[data-brand="atelier"] .theme-btn, [data-brand="atelier"] .settings-btn {
    background: var(--a-object); border: 1px solid var(--a-hair); color: var(--a-ink); border-radius: var(--radius);
}
[data-brand="atelier"] .theme-btn:hover, [data-brand="atelier"] .settings-btn:hover,
[data-brand="atelier"] .settings-btn[aria-expanded="true"] { background: var(--a-hair); }
[data-brand="atelier"] .theme-popover { border: 1px solid var(--a-hair); border-radius: var(--radius); }
[data-brand="atelier"] .theme-swatch-row { font-family: var(--font-obj); }
[data-brand="atelier"] .theme-swatch-dot { border-radius: 50%; }
[data-brand="atelier"] .nav-avatar { background: var(--a-accent); border-radius: var(--radius); }
[data-brand="atelier"] .nav-logout { background: var(--a-object); border: 1px solid var(--a-hair); color: var(--a-ink); border-radius: var(--radius); }
[data-brand="atelier"] .nav-logout:hover { background: var(--a-hair); color: var(--a-ink); }
[data-brand="atelier"] .page-head h1, [data-brand="atelier"] .topbar h1 { font-weight: 700; color: var(--a-ink); }
[data-brand="atelier"] .topbar { background: var(--a-canvas); border-bottom: none; }

/* Buttons — small-radius bordered objects, sharp focus ring, one accent use */
[data-brand="atelier"] .btn { border-radius: var(--radius); font-weight: 600; transition: none; }
[data-brand="atelier"] .btn:active { transform: none; }
[data-brand="atelier"] .btn-primary { background: var(--a-ink); color: var(--a-object); box-shadow: none; }
[data-brand="atelier"] .btn-primary:hover { background: color-mix(in srgb, var(--a-ink) 85%, var(--a-accent)); box-shadow: none; transform: none; }
[data-brand="atelier"] .btn-secondary, [data-brand="atelier"] .btn-ghost, [data-brand="atelier"] .btn-outline {
    background: var(--a-object); border: 1px solid var(--a-hair); color: var(--a-ink);
}
[data-brand="atelier"] .btn-secondary:hover, [data-brand="atelier"] .btn-ghost:hover, [data-brand="atelier"] .btn-outline:hover {
    background: var(--a-object); border-color: var(--a-accent); color: var(--a-accent);
}
[data-brand="atelier"] .topnav .btn-primary:hover { background: color-mix(in srgb, var(--a-ink) 85%, var(--a-accent)); }
[data-brand="atelier"] .view-link { color: var(--a-accent); font-weight: 600; }

[data-brand="atelier"] input, [data-brand="atelier"] select, [data-brand="atelier"] textarea {
    font-family: var(--font-obj); background: var(--a-object); border-color: var(--a-hair); border-radius: var(--radius);
}
[data-brand="atelier"] input:focus, [data-brand="atelier"] select:focus, [data-brand="atelier"] textarea:focus,
[data-brand="atelier"] .search-input-wrap:focus-within { border-color: var(--a-accent); outline: 2px solid color-mix(in srgb, var(--a-accent) 20%, transparent); outline-offset: 0; }
[data-brand="atelier"] .search-input-wrap { background: var(--a-object); border-color: var(--a-hair); border-radius: var(--radius); }
[data-brand="atelier"] label { color: var(--a-ink-dim); font-weight: 500; }

/* Pipeline — connected node-chain, active node gets the selection ring */
[data-brand="atelier"] .stats-grid { display: flex; align-items: center; gap: 0; background: none; margin-bottom: 24px; }
[data-brand="atelier"] .stat-card {
    background: var(--a-object); border: 1px solid var(--a-hair); border-radius: var(--radius);
    padding: 10px 16px; text-align: center; display: block; box-shadow: none; flex: 0 0 auto; min-width: 110px;
}
[data-brand="atelier"] .stat-card:hover { transform: none; box-shadow: none; border-color: var(--a-accent); }
[data-brand="atelier"] .stat-card::before { content: none; }
[data-brand="atelier"] .stat-icon { display: none; }
[data-brand="atelier"] .stat-card { position: relative; margin-right: 18px; }
[data-brand="atelier"] .stats-grid .stat-card:not(:last-child)::after {
    content: ""; display: block; position: absolute; top: 50%; right: -18px; width: 18px; height: 1px; background: var(--a-hair);
}
[data-brand="atelier"] .stat-info { display: flex; flex-direction: column-reverse; align-items: center; }
[data-brand="atelier"] .stat-info span { font-size: 10px; color: var(--a-ink-dim); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 0; margin-top: 2px; }
[data-brand="atelier"] .stat-info strong { font-family: var(--font-dim); font-weight: 700; font-size: 18px; color: var(--a-ink); letter-spacing: 0; }
[data-brand="atelier"] .stat-info small { display: none; }
[data-brand="atelier"] .stat-card:nth-child(4n+4) {
    border: 2px solid var(--a-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-accent) 14%, transparent) !important;
}
[data-brand="atelier"] .stat-card:nth-child(4n+4) .stat-info strong { color: var(--a-accent); }

/* Cards → bordered objects on the canvas */
[data-brand="atelier"] .card { background: var(--a-object); border: 1px solid var(--a-hair); border-radius: var(--radius); box-shadow: none; }
[data-brand="atelier"] .card-header { background: none; border-bottom: 1px solid var(--a-hair); }
[data-brand="atelier"] .card-header h2 { font-size: 12px; font-weight: 600; color: var(--a-ink-dim); text-transform: uppercase; letter-spacing: .05em; }
[data-brand="atelier"] .card-header p { display: none; }
[data-brand="atelier"] .dashboard-grid { gap: 18px; }

[data-brand="atelier"] .quick-actions { gap: 12px; }
[data-brand="atelier"] .quick-action { background: var(--a-object); border: 1px solid var(--a-hair); border-radius: var(--radius); box-shadow: none; }
[data-brand="atelier"] .quick-action:hover { border-color: var(--a-accent); background: var(--a-object); box-shadow: none; }
[data-brand="atelier"] .quick-icon { border-radius: var(--radius); }
[data-brand="atelier"] .activity-item { border-color: var(--a-hair); }
[data-brand="atelier"] .company-avatar { background: var(--a-tag-1); border-radius: var(--radius); }
[data-brand="atelier"] .activity-item:nth-child(4n+1) .company-avatar { background: var(--a-tag-1); }
[data-brand="atelier"] .activity-item:nth-child(4n+2) .company-avatar { background: var(--a-tag-2); }
[data-brand="atelier"] .activity-item:nth-child(4n+3) .company-avatar { background: var(--a-tag-3); }
[data-brand="atelier"] .activity-item:nth-child(4n+4) .company-avatar { background: var(--a-tag-4); }

/* Tables — one bordered "object" on the canvas (see domain-translation note) */
[data-brand="atelier"] .table-wrapper { background: var(--a-object); border: 1px solid var(--a-hair); border-radius: var(--radius); overflow-x: auto; overflow-y: hidden; }
[data-brand="atelier"] table { border: none; }
[data-brand="atelier"] thead th { background: var(--a-object); color: var(--a-ink-dim); border-right: none; border-bottom: 1px solid var(--a-hair); font-weight: 600; }
[data-brand="atelier"] thead th.sticky-col { background: var(--a-object); }
[data-brand="atelier"] tbody td { border-right: none; border-bottom: 1px solid var(--a-hair); }
[data-brand="atelier"] tbody tr:hover td { background: var(--a-hair); }
[data-brand="atelier"] .sticky-col-id, [data-brand="atelier"] .sticky-col-name,
[data-brand="atelier"] .sticky-col-action, [data-brand="atelier"] .sticky-action-cell {
    background: var(--a-object); border: none; border-bottom: 1px solid var(--a-hair);
}
[data-brand="atelier"] tbody tr:hover .sticky-col, [data-brand="atelier"] tbody tr:hover .sticky-action-cell { background: var(--a-hair); }
[data-brand="atelier"] .job-id-link { font-family: var(--font-dim); font-weight: 600; }
[data-brand="atelier"] .action-workflow { border-radius: var(--radius); border-color: var(--a-hair); }
[data-brand="atelier"] .export-all-button { border-style: solid; border-color: var(--a-hair); border-radius: var(--radius); }
[data-brand="atelier"] .export-all-button:hover { background: var(--a-hair); border-color: var(--a-accent); color: var(--a-accent); }
[data-brand="atelier"] .empty-cell { background: color-mix(in srgb, var(--a-accent) 12%, transparent); }
[data-brand="atelier"] .pager-btn { border-radius: var(--radius); border-color: var(--a-hair); }
[data-brand="atelier"] .pager-btn.active { background: var(--a-ink); border-color: transparent; }

/* Status/Approval — color-tag dot (decorative) is reserved for candidate
   objects elsewhere in the source doc; ATIC's status column keeps plain
   signal-colored text (accent=critical, ok=positive), no pill */
[data-brand="atelier"] .status-badge { background: none; border: none; padding: 0; font-weight: 600; }
[data-brand="atelier"] .status-badge::before { display: none; }
[data-brand="atelier"] .status-approved-active, [data-brand="atelier"] .status-active,
[data-brand="atelier"] .status-green, [data-brand="atelier"] .badge-green { color: var(--a-ok); }
[data-brand="atelier"] .status-fresh-pending, [data-brand="atelier"] .status-pending,
[data-brand="atelier"] .status-new, [data-brand="atelier"] .status-amber, [data-brand="atelier"] .badge-amber { color: var(--a-warn); }
[data-brand="atelier"] .status-rejected-duplicate, [data-brand="atelier"] .status-rejected-data-issue,
[data-brand="atelier"] .status-rejected, [data-brand="atelier"] .status-red, [data-brand="atelier"] .badge-red { color: var(--a-accent); }
[data-brand="atelier"] .status-slate, [data-brand="atelier"] .badge-slate,
[data-brand="atelier"] .status-violet, [data-brand="atelier"] .badge-violet { color: var(--a-tag-1); }
[data-brand="atelier"] .count-chip { background: var(--a-hair); border: none; color: var(--a-ink-dim); border-radius: var(--radius-pill); }
[data-brand="atelier"] .rejected-chip { background: none; color: var(--a-accent); }

/* Modal / popover / toast — bordered object, sharp ring, no shadow */
[data-brand="atelier"] .profile-modal-overlay { background: color-mix(in srgb, var(--a-ink) 45%, transparent); }
[data-brand="atelier"] .profile-modal { border: 1px solid var(--a-hair); border-radius: var(--radius); box-shadow: none; }
[data-brand="atelier"] .profile-row { border-color: var(--a-hair); }
[data-brand="atelier"] .toast { background: var(--a-ink); color: var(--a-object); border-radius: var(--radius); box-shadow: none; }
[data-brand="atelier"] .toast.success { background: var(--a-ok); }
[data-brand="atelier"] .toast.error { background: var(--a-accent); }
[data-brand="atelier"] .spinner { border-color: var(--a-hair); border-top-color: var(--a-accent); }

/* Auth — object panel on canvas, not a saturated fill */
[data-brand="atelier"] .auth-aside { background: var(--a-object); color: var(--a-ink); border-right: 1px solid var(--a-hair); }
[data-brand="atelier"] .auth-logo { background: var(--a-accent); box-shadow: none; border-radius: var(--radius); }
[data-brand="atelier"] .auth-brand h1, [data-brand="atelier"] .auth-card h3 { color: var(--a-ink); font-weight: 700; }
[data-brand="atelier"] .auth-brand span, [data-brand="atelier"] .auth-foot { color: var(--a-ink-dim); }
[data-brand="atelier"] .eyebrow { color: var(--a-accent); }
[data-brand="atelier"] .auth-pitch h2 { color: var(--a-ink); }
[data-brand="atelier"] .auth-pitch h2 b { color: var(--a-accent); }
[data-brand="atelier"] .auth-pitch p { color: var(--a-ink-dim); }
[data-brand="atelier"] .auth-feats li { color: var(--a-ink); }
[data-brand="atelier"] .tick { background: var(--a-accent); border-radius: var(--radius); }
[data-brand="atelier"] .auth-inputwrap { background: var(--a-object); border-color: var(--a-hair); border-radius: var(--radius); }
[data-brand="atelier"] .auth-submit { background: var(--a-ink); color: var(--a-object); border-radius: var(--radius); }
[data-brand="atelier"] .auth-submit:hover:not(:disabled) { background: color-mix(in srgb, var(--a-ink) 85%, var(--a-accent)); }
[data-brand="atelier"] .auth-forgot, [data-brand="atelier"] .auth-switch a, [data-brand="atelier"] .auth-card a { color: var(--a-accent); }
[data-brand="atelier"] .auth-hint { background: var(--a-canvas); border-color: var(--a-hair); border-radius: var(--radius); }
[data-brand="atelier"] .auth-hint code { background: var(--a-object); color: var(--a-accent); border-radius: var(--radius); }
[data-brand="atelier"] .otp-inputs input { background: var(--a-object); border-color: var(--a-hair); border-radius: var(--radius); }
[data-brand="atelier"] .otp-inputs input.filled { border-color: var(--a-accent); background: var(--a-object); }
[data-brand="atelier"] .otp-resend { color: var(--a-accent); }

/* Record detail / audit */
[data-brand="atelier"] body.record-detail-body { background: var(--a-canvas); }
[data-brand="atelier"] .structurer-panel, [data-brand="atelier"] .structurer-frame { background: var(--a-canvas); }
[data-brand="atelier"] .detail-title .job-id-label { background: var(--a-hair); color: var(--a-ink); border-radius: var(--radius-pill); }
[data-brand="atelier"] .back-link { color: var(--a-accent); }

/* ============================================================================
   STENCIL THEME  —  data-brand="stencil"
   Sharp minimal, no decoration: full ruled grid (BOTH axes bordered, unlike
   every other theme's row-only hairlines), zero radius/shadow with zero
   exceptions, full-contrast black/white rules (no grey), Archivo + JetBrains
   Mono, and exactly ONE flat spot color reserved ONLY for a filled block on
   a live/critical signal — never as plain text color, never decoration.
   Dark mode is a genuine invert (bg/ink swap), not a dimmed palette.

   Precision note on the spot-color rule (doc rule 3: "don't use it as text
   color, gradient, or decoration"): this is why Stencil's status handling
   differs from every other theme built so far. Ledger/Cloister/Yardarm/
   Atelier all color status TEXT for a quick scan (accent-live red text,
   accent-ok text, etc). Stencil doesn't - only the true critical/rejected
   states get a small stamped block (filled --stamp bg, --stamp-ink text);
   every other state (New/Active/Pending/Approved) renders as plain ink mono
   text with no color at all, exactly matching the doc's "Signal (neutral):
   plain mono text, no block."

   Domain translation: the doc's own ruled-grid table treatment is, unusually,
   the CLOSEST fit yet to ATIC's actual existing "grid borders row+col"
   convention (closer than Ledger/Cloister/Yardarm's hairline divergence) -
   this one needed the least translation.
   ============================================================================ */

[data-brand="stencil"][data-theme="light"],
[data-brand="stencil"]:not([data-theme="dark"]) {
    --s-bg: #FFFFFF;
    --s-ink: #000000;
    --s-rule: #000000;
    --s-stamp: #E4002B;
    --s-stamp-ink: #FFFFFF;
}
[data-brand="stencil"][data-theme="dark"] {
    --s-bg: #000000;
    --s-ink: #FFFFFF;
    --s-rule: #FFFFFF;
    --s-stamp: #FF3B30;
    --s-stamp-ink: #000000;
}
[data-brand="stencil"] {
    --font-disp: 'Archivo', 'Arial Black', -apple-system, sans-serif;
    --font-dat: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

    --background: var(--s-bg); --card: var(--s-bg); --text: var(--s-ink); --heading: var(--s-ink);
    --muted: var(--s-ink); --border: var(--s-rule);

    --primary: var(--s-ink); --primary-dark: var(--s-ink); --primary-light: var(--s-bg);

    --nav-bg: var(--s-bg); --nav-bg-2: var(--s-ink);
    --nav-hover: var(--s-bg); --nav-active: var(--s-ink);
    --nav-text: var(--s-ink); --nav-text-dim: var(--s-ink);

    --success: var(--s-ink); --success-bg: transparent; --success-text: var(--s-ink);
    --warning: var(--s-ink); --warning-bg: transparent;
    --danger: var(--s-stamp); --danger-bg: transparent; --danger-text: var(--s-ink);
    --info-bg: transparent; --info-text: var(--s-ink);

    --blue: var(--s-ink);   --blue-bg: transparent;
    --teal: var(--s-ink);   --teal-bg: transparent;
    --green: var(--s-ink);  --green-bg: transparent;
    --orange: var(--s-ink); --orange-bg: transparent;
    --pink: var(--s-ink);   --pink-bg: transparent;
    --purple: var(--s-ink); --purple-bg: transparent;
    --yellow: var(--s-ink); --yellow-bg: transparent;
    --red: var(--s-ink);    --red-bg: transparent;
    --cyan: var(--s-ink);   --cyan-bg: transparent;

    --radius: 0; --radius-sm: 0; --radius-pill: 0;
    --shadow: none; --shadow-md: none; --shadow-sm: none;
    --shadow-focus: 0 0 0 2px var(--s-ink);
}
[data-brand="stencil"] body { font-family: var(--font-disp); line-height: 1.15; }
[data-brand="stencil"] * { border-radius: 0 !important; box-shadow: none !important; }
/* muted/grey text has no place here — every base rule above already
   collapses --muted to --s-ink; this catches any element styled directly
   with a literal grey instead of the token */
[data-brand="stencil"] .muted { color: var(--s-ink); opacity: 1; }

/* Masthead — hard 2px rule, stark type jump */
[data-brand="stencil"] .topnav { background: var(--s-bg); color: var(--s-ink); box-shadow: none; border-bottom: 2px solid var(--s-rule); }
[data-brand="stencil"] .brand-mark { color: var(--s-ink); font-weight: 900; font-size: 20px; letter-spacing: -.02em; }
[data-brand="stencil"] .logo-icon { background: var(--s-ink); color: var(--s-bg); box-shadow: none; }
[data-brand="stencil"] .topnav-link {
    color: var(--s-ink); font-family: var(--font-dat); font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
}
[data-brand="stencil"] .topnav-link:hover { background: var(--s-bg); color: var(--s-ink); text-decoration: underline; }
[data-brand="stencil"] .topnav-link.active { background: var(--s-ink); color: var(--s-bg); box-shadow: none; font-weight: 700; }
[data-brand="stencil"] .topnav-link .nav-icon { display: none; }
[data-brand="stencil"] .menu-toggle { color: var(--s-ink); border: 2px solid var(--s-rule); }
[data-brand="stencil"] .topnav.open .topnav-links { background: var(--s-bg); border-top: 2px solid var(--s-rule); }
[data-brand="stencil"] .theme-btn, [data-brand="stencil"] .settings-btn {
    background: var(--s-bg); border: 1px solid var(--s-rule); color: var(--s-ink);
}
[data-brand="stencil"] .theme-btn:hover, [data-brand="stencil"] .settings-btn:hover,
[data-brand="stencil"] .settings-btn[aria-expanded="true"] { background: var(--s-ink); color: var(--s-bg); }
[data-brand="stencil"] .theme-popover { border: 2px solid var(--s-rule); }
[data-brand="stencil"] .theme-swatch-row { font-family: var(--font-dat); font-size: 11px; }
[data-brand="stencil"] .theme-swatch-row:hover, [data-brand="stencil"] .theme-swatch-row.active { background: var(--s-ink); color: var(--s-bg); }
[data-brand="stencil"] .theme-swatch-dot { border: 1px solid var(--s-rule); }
[data-brand="stencil"] .nav-avatar { background: var(--s-ink); color: var(--s-bg); font-family: var(--font-dat); }
[data-brand="stencil"] .nav-username { font-family: var(--font-dat); font-size: 11px; }
[data-brand="stencil"] .nav-logout { background: var(--s-bg); border: 1px solid var(--s-rule); color: var(--s-ink); font-family: var(--font-dat); font-size: 10.5px; text-transform: uppercase; }
[data-brand="stencil"] .nav-logout:hover { background: var(--s-ink); color: var(--s-bg); }
[data-brand="stencil"] .page-head h1, [data-brand="stencil"] .topbar h1 { font-family: var(--font-disp); font-weight: 900; font-size: 28px; color: var(--s-ink); }
[data-brand="stencil"] .topbar { background: var(--s-bg); border-bottom: 2px solid var(--s-rule); }

/* Actions — stamped rectangles: filled ink or outline, zero radius, never
   the spot color (that stays reserved for live signals only) */
[data-brand="stencil"] .btn {
    font-family: var(--font-dat); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    transition: none;
}
[data-brand="stencil"] .btn:active { transform: none; }
[data-brand="stencil"] .btn-primary { background: var(--s-ink); color: var(--s-bg); border: 2px solid var(--s-ink); box-shadow: none; }
[data-brand="stencil"] .btn-primary:hover { background: var(--s-ink); opacity: .8; box-shadow: none; transform: none; }
[data-brand="stencil"] .btn-secondary, [data-brand="stencil"] .btn-ghost, [data-brand="stencil"] .btn-outline {
    background: var(--s-bg); border: 2px solid var(--s-ink); color: var(--s-ink);
}
[data-brand="stencil"] .btn-secondary:hover, [data-brand="stencil"] .btn-ghost:hover, [data-brand="stencil"] .btn-outline:hover {
    background: var(--s-ink); color: var(--s-bg);
}
[data-brand="stencil"] .topnav .btn-primary:hover { opacity: .8; }
[data-brand="stencil"] .view-link { font-family: var(--font-dat); font-size: 11px; color: var(--s-ink); text-decoration: underline; }

[data-brand="stencil"] input, [data-brand="stencil"] select, [data-brand="stencil"] textarea {
    font-family: var(--font-dat); background: var(--s-bg); border: 1px solid var(--s-rule); color: var(--s-ink);
}
[data-brand="stencil"] .search-input-wrap { background: var(--s-bg); border: 1px solid var(--s-rule); }
[data-brand="stencil"] label { color: var(--s-ink); font-family: var(--font-dat); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

/* Pipeline — hard grid cells, active stage is the ONLY stamped block */
[data-brand="stencil"] .stats-grid { display: flex; gap: 0; border: 2px solid var(--s-rule); border-left: 2px solid var(--s-rule); margin-bottom: 0; }
[data-brand="stencil"] .stat-card {
    flex: 1; display: block; background: var(--s-bg); border: none; border-right: 1px solid var(--s-rule);
    border-radius: 0; padding: 14px 16px; box-shadow: none;
}
[data-brand="stencil"] .stat-card:last-child { border-right: none; }
[data-brand="stencil"] .stat-card:hover { transform: none; box-shadow: none; }
[data-brand="stencil"] .stat-card::before { content: none; }
[data-brand="stencil"] .stat-icon { display: none; }
[data-brand="stencil"] .stat-info span { font-family: var(--font-dat); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--s-ink); margin-bottom: 4px; }
[data-brand="stencil"] .stat-info strong { font-family: var(--font-dat); font-weight: 700; font-size: 28px; color: var(--s-ink); letter-spacing: 0; }
[data-brand="stencil"] .stat-info small { display: none; }
[data-brand="stencil"] .stat-card:nth-child(4n+4) { background: var(--s-stamp); }
[data-brand="stencil"] .stat-card:nth-child(4n+4) .stat-info span,
[data-brand="stencil"] .stat-card:nth-child(4n+4) .stat-info strong { color: var(--s-stamp-ink); }

/* Cards — flat, ruled */
[data-brand="stencil"] .card { background: var(--s-bg); border: 1px solid var(--s-rule); box-shadow: none; }
[data-brand="stencil"] .card-header { background: none; border-bottom: 2px solid var(--s-rule); }
[data-brand="stencil"] .card-header h2 { font-family: var(--font-dat); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--s-ink); }
[data-brand="stencil"] .card-header p { display: none; }
[data-brand="stencil"] .dashboard-grid { gap: 0; }

[data-brand="stencil"] .quick-actions { gap: 0; padding: 0; }
[data-brand="stencil"] .quick-action { border: none; border-bottom: 1px solid var(--s-rule); background: var(--s-bg); }
[data-brand="stencil"] .quick-action:hover { background: var(--s-ink); }
[data-brand="stencil"] .quick-action:hover strong, [data-brand="stencil"] .quick-action:hover span { color: var(--s-bg); }
[data-brand="stencil"] .quick-icon { display: none; }
[data-brand="stencil"] .quick-action strong { font-weight: 700; }
[data-brand="stencil"] .quick-action span { font-family: var(--font-dat); font-size: 11px; }
[data-brand="stencil"] .activity-item { border-color: var(--s-rule); }
[data-brand="stencil"] .activity-item .a-count { font-family: var(--font-dat); }
[data-brand="stencil"] .company-avatar { background: var(--s-ink); color: var(--s-bg); }

/* Table — full ruled grid, both axes, unlike every other theme's row-only
   hairlines (this is the theme this rule set is FOR) */
[data-brand="stencil"] .table-wrapper { border: 2px solid var(--s-rule); }
[data-brand="stencil"] table { border: none; }
[data-brand="stencil"] thead th {
    background: var(--s-bg); color: var(--s-ink); font-family: var(--font-dat); font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; border-right: 1px solid var(--s-rule); border-bottom: 2px solid var(--s-rule);
}
[data-brand="stencil"] thead th.sticky-col { background: var(--s-bg); }
[data-brand="stencil"] tbody td { border-right: 1px solid var(--s-rule); border-bottom: 1px solid var(--s-rule); }
[data-brand="stencil"] tbody tr:hover td { background: var(--s-bg); text-decoration: underline; }
[data-brand="stencil"] .sticky-col-id, [data-brand="stencil"] .sticky-col-name,
[data-brand="stencil"] .sticky-col-action, [data-brand="stencil"] .sticky-action-cell {
    background: var(--s-bg); border: none; border-right: 1px solid var(--s-rule); border-bottom: 1px solid var(--s-rule);
}
[data-brand="stencil"] .job-id-link, [data-brand="stencil"] .col-file, [data-brand="stencil"] .record-count { font-family: var(--font-dat); color: var(--s-ink); }
[data-brand="stencil"] .action-workflow { background: var(--s-bg); border: 1px solid var(--s-rule); font-family: var(--font-dat); }
[data-brand="stencil"] .export-all-button { border: 1px solid var(--s-rule); font-family: var(--font-dat); }
[data-brand="stencil"] .export-all-button:hover { background: var(--s-ink); color: var(--s-bg); border-color: var(--s-ink); }
[data-brand="stencil"] .empty-cell { background: var(--s-bg); }
[data-brand="stencil"] .pager-btn { background: var(--s-bg); border: 1px solid var(--s-rule); font-family: var(--font-dat); }
[data-brand="stencil"] .pager-btn:hover:not(:disabled) { background: var(--s-ink); color: var(--s-bg); }
[data-brand="stencil"] .pager-btn.active { background: var(--s-ink); border-color: var(--s-ink); color: var(--s-bg); }

/* Status/Approval — the ONE spot-color use in the system: a small stamped
   block on true critical/rejected states only. Everything else is plain
   ink mono text, no color, no block (doc: "Signal (neutral): plain mono
   text, no block"). */
[data-brand="stencil"] .status-badge {
    background: none; border: none; padding: 0; font-family: var(--font-dat); font-size: 11px; color: var(--s-ink);
}
[data-brand="stencil"] .status-badge::before { display: none; }
[data-brand="stencil"] .status-approved-active, [data-brand="stencil"] .status-active,
[data-brand="stencil"] .status-fresh-pending, [data-brand="stencil"] .status-pending, [data-brand="stencil"] .status-new,
[data-brand="stencil"] .status-slate, [data-brand="stencil"] .status-violet,
[data-brand="stencil"] .badge-green, [data-brand="stencil"] .badge-amber, [data-brand="stencil"] .badge-slate, [data-brand="stencil"] .badge-violet {
    color: var(--s-ink);
}
[data-brand="stencil"] .status-rejected-duplicate, [data-brand="stencil"] .status-rejected-data-issue,
[data-brand="stencil"] .status-rejected, [data-brand="stencil"] .status-red, [data-brand="stencil"] .badge-red {
    display: inline-block; background: var(--s-stamp); color: var(--s-stamp-ink);
    padding: 1px 6px; text-transform: uppercase; font-weight: 700;
}
[data-brand="stencil"] .count-chip { background: var(--s-bg); border: 1px solid var(--s-rule); color: var(--s-ink); font-family: var(--font-dat); }
[data-brand="stencil"] .rejected-chip { background: var(--s-stamp); color: var(--s-stamp-ink); }

/* Modal / popover / toast */
[data-brand="stencil"] .profile-modal-overlay { background: color-mix(in srgb, var(--s-ink) 60%, transparent); }
[data-brand="stencil"] .profile-modal { border: 2px solid var(--s-rule); box-shadow: none; }
[data-brand="stencil"] .profile-modal-header h3 { font-family: var(--font-dat); font-size: 14px; text-transform: uppercase; }
[data-brand="stencil"] .profile-row { border-color: var(--s-rule); }
[data-brand="stencil"] .profile-label { font-family: var(--font-dat); font-size: 11px; }
[data-brand="stencil"] .toast { background: var(--s-ink); color: var(--s-bg); font-family: var(--font-dat); }
[data-brand="stencil"] .toast.success { background: var(--s-ink); }
[data-brand="stencil"] .toast.error { background: var(--s-stamp); color: var(--s-stamp-ink); }
[data-brand="stencil"] .spinner { border-color: var(--s-rule); border-top-color: var(--s-ink); }

/* Auth — flat, ruled panel, no saturated fill (the stamp stays reserved) */
[data-brand="stencil"] .auth-aside { background: var(--s-bg); color: var(--s-ink); border-right: 2px solid var(--s-rule); }
[data-brand="stencil"] .auth-logo { background: var(--s-ink); color: var(--s-bg); box-shadow: none; }
[data-brand="stencil"] .auth-brand h1 { font-family: var(--font-disp); font-weight: 900; color: var(--s-ink); }
[data-brand="stencil"] .auth-card h3 { font-family: var(--font-disp); font-weight: 900; font-size: 28px; color: var(--s-ink); }
[data-brand="stencil"] .auth-brand span, [data-brand="stencil"] .auth-foot { color: var(--s-ink); font-family: var(--font-dat); font-size: 11px; }
[data-brand="stencil"] .eyebrow { color: var(--s-ink); font-family: var(--font-dat); }
[data-brand="stencil"] .auth-pitch h2 { color: var(--s-ink); }
[data-brand="stencil"] .auth-pitch h2 b { color: var(--s-ink); text-decoration: underline; }
[data-brand="stencil"] .auth-pitch p { color: var(--s-ink); }
[data-brand="stencil"] .auth-feats li { color: var(--s-ink); }
[data-brand="stencil"] .tick { background: var(--s-ink); color: var(--s-bg); }
[data-brand="stencil"] .auth-inputwrap { background: var(--s-bg); border: 1px solid var(--s-rule); }
[data-brand="stencil"] .auth-input { font-family: var(--font-dat); }
[data-brand="stencil"] .auth-submit { background: var(--s-ink); color: var(--s-bg); border: 2px solid var(--s-ink); font-family: var(--font-dat); text-transform: uppercase; letter-spacing: .05em; }
[data-brand="stencil"] .auth-submit:hover:not(:disabled) { opacity: .8; }
[data-brand="stencil"] .auth-forgot, [data-brand="stencil"] .auth-switch a, [data-brand="stencil"] .auth-card a { color: var(--s-ink); text-decoration: underline; }
[data-brand="stencil"] .auth-hint { background: var(--s-bg); border: 1px solid var(--s-rule); }
[data-brand="stencil"] .auth-hint code { font-family: var(--font-dat); background: var(--s-bg); border: 1px solid var(--s-rule); color: var(--s-ink); }
[data-brand="stencil"] .otp-inputs input { background: var(--s-bg); border: 1px solid var(--s-rule); font-family: var(--font-dat); color: var(--s-ink); }
[data-brand="stencil"] .otp-inputs input.filled { border: 2px solid var(--s-ink); }
[data-brand="stencil"] .otp-resend { color: var(--s-ink); font-family: var(--font-dat); text-decoration: underline; }

/* Record detail / audit */
[data-brand="stencil"] body.record-detail-body { background: var(--s-bg); }
[data-brand="stencil"] .structurer-panel, [data-brand="stencil"] .structurer-frame { background: var(--s-bg); }
[data-brand="stencil"] .detail-title .job-id-label { font-family: var(--font-dat); background: var(--s-bg); color: var(--s-ink); border: 1px solid var(--s-rule); }
[data-brand="stencil"] .back-link { color: var(--s-ink); font-family: var(--font-dat); font-size: 12px; text-decoration: underline; }
[data-brand="stencil"] .audit-table .mono, [data-brand="stencil"] #auditTableBody .mono { font-family: var(--font-dat); }

/* ============================================================================
   KALAMKARI THEME  —  data-brand="kalamkari"
   Inscribed, rhythmic, ceremonial data — an OPTIONAL theme (the doc's own
   words: structural/palette borrowing only, no script imitation, no
   religious/deity references, no iconography — easiest of the ten to drop
   if it doesn't fit). Warm parchment/ochre in light, lamplit brown in dark
   (never cool/grey/blue). Cardo (serif) + Mukta (sans) — deliberately no
   third face and no mono anywhere, since a technical monospace would read
   as "terminal" and undercut the manuscript feel. Ruled horizontal
   "registers" replace cards/KPI grids; actions are underlined uppercase
   commands, never filled.

   Domain translation note: the doc's signature "candidate entries as
   continuous dot-separated running text, not table rows" and "roman-
   numeral verse shortlist" are candidate-pipeline constructs (same source
   domain as every theme in the set) with no literal ATIC equivalent (no
   shortlist concept). Same resolution as every prior table divergence: the
   real multi-column <table> stays (spec requires every column visible),
   restyled with the register's rule language (thin ochre entry rules, no
   vertical grid lines, warm palette) rather than exploded into running
   text. Roman numerals had nowhere honest to land, so they're not forced
   in anywhere.
   ============================================================================ */

[data-brand="kalamkari"][data-theme="light"],
[data-brand="kalamkari"]:not([data-theme="dark"]) {
    --k-bg: #F4EDE0;
    --k-ink: #3B2A1E;
    --k-ink-dim: #8A7256;
    --k-rule: #B5764A;
    --k-rule-strong: #8C5A34;
    --k-live: #A64B2A;
    --k-ok: #5C7A4E;
}
[data-brand="kalamkari"][data-theme="dark"] {
    --k-bg: #241A12;
    --k-ink: #EDE1CE;
    --k-ink-dim: #B09A7D;
    --k-rule: #C98F55;
    --k-rule-strong: #E0A868;
    --k-live: #E0714A;
    --k-ok: #8FAF7A;
}
[data-brand="kalamkari"] {
    --font-disp: 'Cardo', Georgia, 'Times New Roman', serif;
    --font-humanist: 'Mukta', -apple-system, 'Segoe UI', sans-serif;

    --background: var(--k-bg); --card: var(--k-bg); --text: var(--k-ink); --heading: var(--k-ink);
    --muted: var(--k-ink-dim); --border: var(--k-rule);

    --primary: var(--k-rule-strong); --primary-dark: var(--k-rule-strong);
    --primary-light: color-mix(in srgb, var(--k-rule) 14%, var(--k-bg));

    --nav-bg: var(--k-bg); --nav-bg-2: var(--k-rule-strong);
    --nav-hover: color-mix(in srgb, var(--k-rule) 14%, var(--k-bg)); --nav-active: var(--k-rule-strong);
    --nav-text: var(--k-ink); --nav-text-dim: var(--k-ink-dim);

    --success: var(--k-ok); --success-bg: transparent; --success-text: var(--k-ok);
    --warning: var(--k-live); --warning-bg: transparent;
    --danger: var(--k-live); --danger-bg: transparent; --danger-text: var(--k-live);
    --info-bg: transparent; --info-text: var(--k-rule-strong);

    --blue: var(--k-ink-dim);  --blue-bg: transparent;
    --teal: var(--k-ok);       --teal-bg: transparent;
    --green: var(--k-ok);      --green-bg: transparent;
    --orange: var(--k-live);   --orange-bg: transparent;
    --pink: var(--k-ink-dim);  --pink-bg: transparent;
    --purple: var(--k-ink-dim); --purple-bg: transparent;
    --yellow: var(--k-live);   --yellow-bg: transparent;
    --red: var(--k-live);      --red-bg: transparent;
    --cyan: var(--k-ink-dim);  --cyan-bg: transparent;

    --radius: 0; --radius-sm: 0; --radius-pill: 0;
    --shadow: none; --shadow-md: none; --shadow-sm: none;
    --shadow-focus: 0 0 0 2px color-mix(in srgb, var(--k-rule-strong) 40%, transparent);
}
[data-brand="kalamkari"] body { font-family: var(--font-humanist); line-height: 1.5; }
[data-brand="kalamkari"] * { border-radius: 0 !important; box-shadow: none !important; }

/* Masthead — inscribed title register */
[data-brand="kalamkari"] .topnav { background: var(--k-bg); color: var(--k-ink); box-shadow: none; border-bottom: 3px solid var(--k-rule-strong); }
[data-brand="kalamkari"] .brand-mark { font-family: var(--font-disp); font-weight: 700; letter-spacing: .04em; color: var(--k-ink); }
[data-brand="kalamkari"] .logo-icon { background: var(--k-rule-strong); color: var(--k-bg); box-shadow: none; }
[data-brand="kalamkari"] .topnav-link { color: var(--k-ink-dim); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
[data-brand="kalamkari"] .topnav-link:hover { background: none; color: var(--k-ink); text-decoration: underline; }
[data-brand="kalamkari"] .topnav-link.active { background: none; color: var(--k-ink); box-shadow: none; font-weight: 600; border-bottom: 2px solid var(--k-rule-strong); }
[data-brand="kalamkari"] .topnav-link .nav-icon { display: none; }
[data-brand="kalamkari"] .menu-toggle { color: var(--k-ink); border-color: var(--k-rule); }
[data-brand="kalamkari"] .topnav.open .topnav-links { background: var(--k-bg); border-top: 1px solid var(--k-rule); }
[data-brand="kalamkari"] .theme-btn, [data-brand="kalamkari"] .settings-btn {
    background: none; border: 1px solid var(--k-rule); color: var(--k-ink);
}
[data-brand="kalamkari"] .theme-btn:hover, [data-brand="kalamkari"] .settings-btn:hover,
[data-brand="kalamkari"] .settings-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--k-rule) 14%, var(--k-bg)); }
[data-brand="kalamkari"] .theme-popover { border: 1px solid var(--k-rule); }
[data-brand="kalamkari"] .theme-swatch-row { font-family: var(--font-humanist); }
[data-brand="kalamkari"] .theme-swatch-dot { border: 1px solid var(--k-rule); }
[data-brand="kalamkari"] .nav-avatar { background: var(--k-rule-strong); color: var(--k-bg); }
[data-brand="kalamkari"] .nav-logout { background: none; border: 1px solid var(--k-rule); color: var(--k-ink); }
[data-brand="kalamkari"] .nav-logout:hover { background: color-mix(in srgb, var(--k-rule) 14%, var(--k-bg)); color: var(--k-ink); }
[data-brand="kalamkari"] .page-head h1, [data-brand="kalamkari"] .topbar h1 { font-family: var(--font-disp); font-weight: 700; color: var(--k-ink); }
[data-brand="kalamkari"] .topbar { background: var(--k-bg); border-bottom: none; }

/* Actions — underlined uppercase commands only, never filled */
[data-brand="kalamkari"] .btn { font-family: var(--font-humanist); letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; transition: none; }
[data-brand="kalamkari"] .btn:active { transform: none; }
[data-brand="kalamkari"] .btn-primary, [data-brand="kalamkari"] .btn-secondary,
[data-brand="kalamkari"] .btn-ghost, [data-brand="kalamkari"] .btn-outline {
    background: none; border: none; border-bottom: 1px solid var(--k-rule-strong); color: var(--k-ink); box-shadow: none;
}
[data-brand="kalamkari"] .btn-primary:hover, [data-brand="kalamkari"] .btn-secondary:hover,
[data-brand="kalamkari"] .btn-ghost:hover, [data-brand="kalamkari"] .btn-outline:hover {
    background: none; color: var(--k-live); border-bottom-color: var(--k-live); transform: none; box-shadow: none;
}
[data-brand="kalamkari"] .topnav .btn-primary:hover { background: none; color: var(--k-live); }
[data-brand="kalamkari"] .view-link { color: var(--k-rule-strong); font-family: var(--font-humanist); }

[data-brand="kalamkari"] input, [data-brand="kalamkari"] select, [data-brand="kalamkari"] textarea {
    font-family: var(--font-humanist); background: var(--k-bg); border-color: var(--k-rule);
}
[data-brand="kalamkari"] .search-input-wrap { background: var(--k-bg); border-color: var(--k-rule); }
[data-brand="kalamkari"] label { color: var(--k-ink-dim); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* Pipeline — one continuous inscribed register line, not KPI cards */
[data-brand="kalamkari"] .stats-grid { display: block; border-top: 2px solid var(--k-rule-strong); margin-bottom: 22px; padding-top: 6px; }
[data-brand="kalamkari"] .stats-grid::before {
    content: "Pipeline"; display: block; font-size: 11px; color: var(--k-ink-dim); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px;
}
[data-brand="kalamkari"] .stat-card {
    display: inline-flex; align-items: baseline; background: none; border: none; border-radius: 0;
    padding: 4px 0; box-shadow: none; margin-right: 22px;
}
[data-brand="kalamkari"] .stat-card:hover { transform: none; box-shadow: none; }
[data-brand="kalamkari"] .stat-card::before { content: none; }
[data-brand="kalamkari"] .stat-card:not(:last-child)::after { content: "—"; color: var(--k-rule); margin-left: 22px; }
[data-brand="kalamkari"] .stat-icon { display: none; }
[data-brand="kalamkari"] .stat-info { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-disp); font-size: 15px; }
[data-brand="kalamkari"] .stat-info span { font-size: 15px; color: var(--k-ink); text-transform: none; letter-spacing: 0; margin-bottom: 0; font-weight: 400; }
[data-brand="kalamkari"] .stat-info strong { font-family: var(--font-disp); font-weight: 700; font-size: 15px; color: var(--k-ink); letter-spacing: 0; }
[data-brand="kalamkari"] .stat-info small { display: none; }
[data-brand="kalamkari"] .stat-card:nth-child(4n+4) .stat-info strong { color: var(--k-live); }

/* Cards → named registers, thick opening rule, no boxes */
[data-brand="kalamkari"] .card { background: none; border: none; box-shadow: none; }
[data-brand="kalamkari"] .card-header { background: none; border-bottom: none; border-top: 2px solid var(--k-rule-strong); padding-top: 6px; }
[data-brand="kalamkari"] .card-header h2 { font-size: 11px; font-weight: 500; color: var(--k-ink-dim); text-transform: uppercase; letter-spacing: .1em; }
[data-brand="kalamkari"] .card-header p { display: none; }
[data-brand="kalamkari"] .dashboard-grid { gap: 26px; }

[data-brand="kalamkari"] .quick-actions { display: flex; flex-direction: column; gap: 0; grid-template-columns: none; }
[data-brand="kalamkari"] .quick-action { border: none; border-bottom: 1px solid var(--k-rule); border-radius: 0; padding: 10px 0; background: none; }
[data-brand="kalamkari"] .quick-action:hover { border-color: var(--k-rule); background: none; box-shadow: none; }
[data-brand="kalamkari"] .quick-icon { display: none; }
[data-brand="kalamkari"] .quick-action strong { font-family: var(--font-disp); font-weight: 700; }
[data-brand="kalamkari"] .quick-action span { color: var(--k-ink-dim); }
[data-brand="kalamkari"] .activity-item { border-color: var(--k-rule); }
[data-brand="kalamkari"] .company-avatar { background: var(--k-rule-strong); color: var(--k-bg); }

/* Table — soft register rules, no vertical grid lines, warm ochre only */
[data-brand="kalamkari"] .table-wrapper { border-top: 2px solid var(--k-rule-strong); }
[data-brand="kalamkari"] table { border: none; }
[data-brand="kalamkari"] thead th {
    background: var(--k-bg); color: var(--k-ink-dim); border-right: none; border-bottom: 1px solid var(--k-rule);
    font-weight: 500; font-size: 11px; letter-spacing: .06em;
}
[data-brand="kalamkari"] thead th.sticky-col { background: var(--k-bg); }
[data-brand="kalamkari"] tbody td { border-right: none; border-bottom: 1px solid var(--k-rule); padding: 12px 16px; }
[data-brand="kalamkari"] tbody tr:hover td { background: color-mix(in srgb, var(--k-rule) 10%, var(--k-bg)); }
[data-brand="kalamkari"] .sticky-col-id, [data-brand="kalamkari"] .sticky-col-name,
[data-brand="kalamkari"] .sticky-col-action, [data-brand="kalamkari"] .sticky-action-cell {
    background: var(--k-bg); border: none; border-bottom: 1px solid var(--k-rule);
}
[data-brand="kalamkari"] tbody tr:hover .sticky-col, [data-brand="kalamkari"] tbody tr:hover .sticky-action-cell { background: color-mix(in srgb, var(--k-rule) 10%, var(--k-bg)); }
[data-brand="kalamkari"] .job-id-link { font-family: var(--font-disp); font-weight: 700; }
[data-brand="kalamkari"] .action-workflow { background: var(--k-bg); border-color: var(--k-rule); }
[data-brand="kalamkari"] .export-all-button { border-style: solid; border-color: var(--k-rule); }
[data-brand="kalamkari"] .export-all-button:hover { background: color-mix(in srgb, var(--k-rule) 10%, var(--k-bg)); border-color: var(--k-rule-strong); color: var(--k-rule-strong); }
[data-brand="kalamkari"] .empty-cell { background: color-mix(in srgb, var(--k-live) 12%, transparent); }
[data-brand="kalamkari"] .pager-btn { background: var(--k-bg); border-color: var(--k-rule); }
[data-brand="kalamkari"] .pager-btn.active { background: var(--k-rule-strong); border-color: transparent; color: var(--k-bg); }

/* Status/Approval — plain colored inline text, never a badge */
[data-brand="kalamkari"] .status-badge { background: none; border: none; padding: 0; font-weight: 500; }
[data-brand="kalamkari"] .status-badge::before { display: none; }
[data-brand="kalamkari"] .status-approved-active, [data-brand="kalamkari"] .status-active,
[data-brand="kalamkari"] .status-green, [data-brand="kalamkari"] .badge-green { color: var(--k-ok); }
[data-brand="kalamkari"] .status-fresh-pending, [data-brand="kalamkari"] .status-pending,
[data-brand="kalamkari"] .status-new, [data-brand="kalamkari"] .status-amber, [data-brand="kalamkari"] .badge-amber { color: var(--k-ink-dim); }
[data-brand="kalamkari"] .status-rejected-duplicate, [data-brand="kalamkari"] .status-rejected-data-issue,
[data-brand="kalamkari"] .status-rejected, [data-brand="kalamkari"] .status-red, [data-brand="kalamkari"] .badge-red { color: var(--k-live); }
[data-brand="kalamkari"] .status-slate, [data-brand="kalamkari"] .badge-slate,
[data-brand="kalamkari"] .status-violet, [data-brand="kalamkari"] .badge-violet { color: var(--k-ink-dim); }
[data-brand="kalamkari"] .count-chip { background: none; border: 1px solid var(--k-rule); color: var(--k-ink-dim); }
[data-brand="kalamkari"] .rejected-chip { background: none; color: var(--k-live); }

/* Modal / popover / toast */
[data-brand="kalamkari"] .profile-modal-overlay { background: color-mix(in srgb, var(--k-ink) 45%, transparent); }
[data-brand="kalamkari"] .profile-modal { border: 2px solid var(--k-rule-strong); box-shadow: none; }
[data-brand="kalamkari"] .profile-modal-header h3 { font-family: var(--font-disp); }
[data-brand="kalamkari"] .profile-row { border-color: var(--k-rule); }
[data-brand="kalamkari"] .toast { background: var(--k-rule-strong); color: var(--k-bg); }
[data-brand="kalamkari"] .toast.success { background: var(--k-ok); }
[data-brand="kalamkari"] .toast.error { background: var(--k-live); }
[data-brand="kalamkari"] .spinner { border-color: var(--k-rule); border-top-color: var(--k-rule-strong); }

/* Auth — flat register panel, warm palette */
[data-brand="kalamkari"] .auth-aside { background: var(--k-rule-strong); color: var(--k-bg); }
[data-brand="kalamkari"] .auth-logo { background: var(--k-bg); color: var(--k-rule-strong); box-shadow: none; }
[data-brand="kalamkari"] .auth-brand h1 { font-family: var(--font-disp); }
[data-brand="kalamkari"] .auth-card h3 { font-family: var(--font-disp); font-weight: 700; color: var(--k-ink); }
[data-brand="kalamkari"] .eyebrow { color: var(--k-bg); }
[data-brand="kalamkari"] .auth-pitch h2 b { color: var(--k-bg); text-decoration: underline; }
[data-brand="kalamkari"] .tick { background: var(--k-bg); color: var(--k-rule-strong); }
[data-brand="kalamkari"] .auth-inputwrap { background: var(--k-bg); border-color: var(--k-rule); }
[data-brand="kalamkari"] .auth-submit { background: none; border: 1px solid var(--k-rule-strong); color: var(--k-ink); }
[data-brand="kalamkari"] .auth-submit:hover:not(:disabled) { background: color-mix(in srgb, var(--k-rule) 10%, var(--k-bg)); }
[data-brand="kalamkari"] .auth-forgot, [data-brand="kalamkari"] .auth-switch a, [data-brand="kalamkari"] .auth-card a { color: var(--k-rule-strong); }
[data-brand="kalamkari"] .auth-hint { background: color-mix(in srgb, var(--k-rule) 8%, var(--k-bg)); border-color: var(--k-rule); }
[data-brand="kalamkari"] .auth-hint code { background: var(--k-bg); color: var(--k-rule-strong); }
[data-brand="kalamkari"] .otp-inputs input { background: var(--k-bg); border-color: var(--k-rule); }
[data-brand="kalamkari"] .otp-inputs input.filled { border-color: var(--k-rule-strong); }
[data-brand="kalamkari"] .otp-resend { color: var(--k-rule-strong); }

/* Record detail / audit */
[data-brand="kalamkari"] body.record-detail-body { background: var(--k-bg); }
[data-brand="kalamkari"] .structurer-panel, [data-brand="kalamkari"] .structurer-frame { background: var(--k-bg); }
[data-brand="kalamkari"] .detail-title .job-id-label { background: none; color: var(--k-rule-strong); border: 1px solid var(--k-rule); }
[data-brand="kalamkari"] .back-link { color: var(--k-rule-strong); }
[data-brand="kalamkari"] .audit-table .mono, [data-brand="kalamkari"] #auditTableBody .mono { font-family: var(--font-disp); }

/* ============================================================================
   SIGNAL YARD THEME  —  data-brand="signal-yard"
   Plot-first intelligence: flat 1px-bordered panels, 4px radius, Barlow +
   Roboto Mono, and color as ONE hue only (never a second brand/semantic
   color) — used here for links/focus/primary, matching the doc's "color is
   data, not brand" spirit as closely as a non-charting page can.

   Scope note, stated plainly rather than faked: the doc's actual signature
   construction is a full-width horizontal bar chart of per-candidate fit
   scores with a real gridlined 0-100 axis, opacity-encoded by magnitude -
   its own §5.5 says the opacity scale "needs one small script" reading a
   real score per row. ATIC has no per-record numeric score to chart, and
   building a proportional bar honestly needs live per-row data driving
   inline widths (real JS wired into whichever page owns that data), not
   something a CSS theme pass can fabricate without inventing numbers. Built
   instead: the theme's flat-panel/mono/single-hue VISUAL language applied
   throughout (nav, cards, tables, buttons), same as how Ledger's stat row
   or Cloister's dot got a faithful CSS-only treatment - but the literal
   chart-as-the-page construction is not present. If a real per-record
   score metric gets added to ATIC later, the bar-chart construction from
   the doc's own CSS block would be the natural next step for this theme.
   ============================================================================ */

[data-brand="signal-yard"][data-theme="light"],
[data-brand="signal-yard"]:not([data-theme="dark"]) {
    --sy-bg: #FAFBFC;
    --sy-panel: #FFFFFF;
    --sy-ink: #12151A;
    --sy-ink-dim: #6B7280;
    --sy-hair: #E2E5EA;
    --sy-axis: #D3D7DD;
    --sy-data: #2F6FED;
}
[data-brand="signal-yard"][data-theme="dark"] {
    --sy-bg: #0E1013;
    --sy-panel: #15181D;
    --sy-ink: #E7E9EC;
    --sy-ink-dim: #7A8290;
    --sy-hair: #262B33;
    --sy-axis: #2A2F38;
    --sy-data: #5B94FF;
}
[data-brand="signal-yard"] {
    --font-plot: 'Barlow', -apple-system, 'Segoe UI', sans-serif;
    --font-axis: 'Roboto Mono', 'SFMono-Regular', Consolas, monospace;

    --background: var(--sy-bg); --card: var(--sy-panel); --text: var(--sy-ink); --heading: var(--sy-ink);
    --muted: var(--sy-ink-dim); --border: var(--sy-hair);

    --primary: var(--sy-data); --primary-dark: color-mix(in srgb, var(--sy-data) 80%, black);
    --primary-light: color-mix(in srgb, var(--sy-data) 12%, var(--sy-panel));

    --nav-bg: var(--sy-panel); --nav-bg-2: var(--sy-data);
    --nav-hover: var(--sy-hair); --nav-active: var(--sy-data);
    --nav-text: var(--sy-ink); --nav-text-dim: var(--sy-ink-dim);

    /* one hue only, per the doc's rule 2 — status semantics collapse to
       ink-dim / the one data hue rather than introducing a categorical
       palette that would compete with "color is data, not brand" */
    --success: var(--sy-data); --success-bg: transparent; --success-text: var(--sy-ink);
    --warning: var(--sy-ink-dim); --warning-bg: transparent;
    --danger: var(--sy-ink); --danger-bg: transparent; --danger-text: var(--sy-ink);
    --info-bg: transparent; --info-text: var(--sy-data);

    --blue: var(--sy-data);   --blue-bg: transparent;
    --teal: var(--sy-ink-dim); --teal-bg: transparent;
    --green: var(--sy-ink-dim); --green-bg: transparent;
    --orange: var(--sy-ink-dim); --orange-bg: transparent;
    --pink: var(--sy-ink-dim); --pink-bg: transparent;
    --purple: var(--sy-ink-dim); --purple-bg: transparent;
    --yellow: var(--sy-ink-dim); --yellow-bg: transparent;
    --red: var(--sy-ink);     --red-bg: transparent;
    --cyan: var(--sy-data);   --cyan-bg: transparent;

    --radius: 4px; --radius-sm: 4px; --radius-pill: 4px;
    --shadow: none; --shadow-md: none; --shadow-sm: none;
    --shadow-focus: 0 0 0 2px color-mix(in srgb, var(--sy-data) 25%, transparent);
}
[data-brand="signal-yard"] body { font-family: var(--font-plot); }
[data-brand="signal-yard"] * { box-shadow: none !important; }

[data-brand="signal-yard"] .topnav { background: var(--sy-panel); color: var(--sy-ink); box-shadow: none; border-bottom: 1px solid var(--sy-hair); }
[data-brand="signal-yard"] .brand-mark { color: var(--sy-ink); font-weight: 700; }
[data-brand="signal-yard"] .logo-icon { background: var(--sy-data); box-shadow: none; border-radius: var(--radius); }
[data-brand="signal-yard"] .topnav-link { color: var(--sy-ink-dim); font-size: 12.5px; }
[data-brand="signal-yard"] .topnav-link:hover { background: var(--sy-hair); color: var(--sy-ink); }
[data-brand="signal-yard"] .topnav-link.active { background: color-mix(in srgb, var(--sy-data) 12%, var(--sy-panel)); color: var(--sy-data); box-shadow: none; font-weight: 600; }
[data-brand="signal-yard"] .topnav-link .nav-icon { display: none; }
[data-brand="signal-yard"] .menu-toggle { color: var(--sy-ink); border-color: var(--sy-hair); }
[data-brand="signal-yard"] .topnav.open .topnav-links { background: var(--sy-panel); }
[data-brand="signal-yard"] .theme-btn, [data-brand="signal-yard"] .settings-btn {
    background: var(--sy-panel); border: 1px solid var(--sy-hair); color: var(--sy-ink); border-radius: var(--radius);
}
[data-brand="signal-yard"] .theme-btn:hover, [data-brand="signal-yard"] .settings-btn:hover,
[data-brand="signal-yard"] .settings-btn[aria-expanded="true"] { background: var(--sy-hair); }
[data-brand="signal-yard"] .theme-popover { border: 1px solid var(--sy-hair); border-radius: var(--radius); }
[data-brand="signal-yard"] .theme-swatch-row { font-family: var(--font-axis); font-size: 11px; }
[data-brand="signal-yard"] .nav-avatar { background: var(--sy-data); border-radius: var(--radius); }
[data-brand="signal-yard"] .nav-username { font-family: var(--font-axis); font-size: 12px; }
[data-brand="signal-yard"] .nav-logout { background: var(--sy-panel); border: 1px solid var(--sy-hair); color: var(--sy-ink); border-radius: var(--radius); }
[data-brand="signal-yard"] .nav-logout:hover { background: var(--sy-hair); color: var(--sy-ink); }
[data-brand="signal-yard"] .page-head h1, [data-brand="signal-yard"] .topbar h1 { font-size: 17px; font-weight: 600; color: var(--sy-ink); }
[data-brand="signal-yard"] .topbar { background: var(--sy-bg); border-bottom: 1px solid var(--sy-hair); }

[data-brand="signal-yard"] .btn { border-radius: var(--radius); font-weight: 600; transition: none; }
[data-brand="signal-yard"] .btn:active { transform: none; }
[data-brand="signal-yard"] .btn-primary { background: var(--sy-data); color: #fff; box-shadow: none; }
[data-brand="signal-yard"] .btn-primary:hover { background: color-mix(in srgb, var(--sy-data) 85%, black); box-shadow: none; transform: none; }
[data-brand="signal-yard"] .btn-secondary, [data-brand="signal-yard"] .btn-ghost, [data-brand="signal-yard"] .btn-outline {
    background: var(--sy-panel); border: 1px solid var(--sy-hair); color: var(--sy-ink);
}
[data-brand="signal-yard"] .btn-secondary:hover, [data-brand="signal-yard"] .btn-ghost:hover, [data-brand="signal-yard"] .btn-outline:hover {
    background: var(--sy-hair); border-color: var(--sy-data); color: var(--sy-data);
}
[data-brand="signal-yard"] .topnav .btn-primary:hover { background: color-mix(in srgb, var(--sy-data) 85%, black); }
[data-brand="signal-yard"] .view-link { font-family: var(--font-axis); font-size: 11px; color: var(--sy-data); }

[data-brand="signal-yard"] input, [data-brand="signal-yard"] select, [data-brand="signal-yard"] textarea {
    font-family: var(--font-plot); background: var(--sy-panel); border-color: var(--sy-hair); border-radius: var(--radius);
}
[data-brand="signal-yard"] .search-input-wrap { background: var(--sy-panel); border-color: var(--sy-hair); border-radius: var(--radius); }
[data-brand="signal-yard"] label { color: var(--sy-ink-dim); font-family: var(--font-axis); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; }

/* Pipeline — row of small bordered panels (Grafana-style), no icons */
[data-brand="signal-yard"] .stats-grid { display: flex; gap: 12px; margin-bottom: 22px; }
[data-brand="signal-yard"] .stat-card {
    flex: 1; background: var(--sy-panel); border: 1px solid var(--sy-hair); border-radius: var(--radius);
    padding: 10px 12px; display: block; box-shadow: none;
}
[data-brand="signal-yard"] .stat-card:hover { transform: none; box-shadow: none; border-color: var(--sy-data); }
[data-brand="signal-yard"] .stat-card::before { content: none; }
[data-brand="signal-yard"] .stat-icon { display: none; }
[data-brand="signal-yard"] .stat-info { display: flex; flex-direction: column-reverse; }
[data-brand="signal-yard"] .stat-info span { font-size: 10px; color: var(--sy-ink-dim); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 0; margin-top: 6px; }
[data-brand="signal-yard"] .stat-info strong { font-family: var(--font-axis); font-weight: 600; font-size: 17px; color: var(--sy-ink); letter-spacing: 0; }
[data-brand="signal-yard"] .stat-info small { display: none; }
[data-brand="signal-yard"] .stat-card:nth-child(4n+4) { border-color: var(--sy-data); }
[data-brand="signal-yard"] .stat-card:nth-child(4n+4) .stat-info strong { color: var(--sy-data); }

/* Cards — flat panels; "legend" weight (tighter, dimmer) for secondary lists */
[data-brand="signal-yard"] .card { background: var(--sy-panel); border: 1px solid var(--sy-hair); border-radius: var(--radius); box-shadow: none; }
[data-brand="signal-yard"] .card-header { background: none; border-bottom: 1px solid var(--sy-hair); padding: 10px 14px; }
[data-brand="signal-yard"] .card-header h2 { font-size: 12.5px; font-weight: 600; color: var(--sy-ink); }
[data-brand="signal-yard"] .card-header p { display: none; }
[data-brand="signal-yard"] .dashboard-grid { gap: 12px; }
[data-brand="signal-yard"] .activity-item { border-color: var(--sy-hair); padding: 7px 14px; font-family: var(--font-axis); font-size: 11px; }
[data-brand="signal-yard"] .activity-item .a-name { font-family: var(--font-plot); color: var(--sy-ink); }
[data-brand="signal-yard"] .activity-item .a-count { font-family: var(--font-axis); }
[data-brand="signal-yard"] .company-avatar { background: var(--sy-data); border-radius: var(--radius); }

[data-brand="signal-yard"] .quick-actions { gap: 10px; }
[data-brand="signal-yard"] .quick-action { background: var(--sy-panel); border: 1px solid var(--sy-hair); border-radius: var(--radius); box-shadow: none; }
[data-brand="signal-yard"] .quick-action:hover { border-color: var(--sy-data); background: var(--sy-panel); box-shadow: none; }
[data-brand="signal-yard"] .quick-icon { border-radius: var(--radius); }

/* Tables — flat bordered panel, mono figures, legend-weight density */
[data-brand="signal-yard"] .table-wrapper { border: 1px solid var(--sy-hair); border-radius: var(--radius); overflow-x: auto; overflow-y: hidden; }
[data-brand="signal-yard"] table { border: none; }
[data-brand="signal-yard"] thead th { background: var(--sy-panel); color: var(--sy-ink-dim); font-family: var(--font-axis); font-size: 9.5px; border-right: none; border-bottom: 1px solid var(--sy-hair); }
[data-brand="signal-yard"] thead th.sticky-col { background: var(--sy-panel); }
[data-brand="signal-yard"] tbody td { border-right: none; border-bottom: 1px solid var(--sy-hair); padding: 7px 14px; }
[data-brand="signal-yard"] tbody tr:hover td { background: color-mix(in srgb, var(--sy-data) 6%, var(--sy-panel)); }
[data-brand="signal-yard"] .sticky-col-id, [data-brand="signal-yard"] .sticky-col-name,
[data-brand="signal-yard"] .sticky-col-action, [data-brand="signal-yard"] .sticky-action-cell {
    background: var(--sy-panel); border: none; border-bottom: 1px solid var(--sy-hair);
}
[data-brand="signal-yard"] tbody tr:hover .sticky-col, [data-brand="signal-yard"] tbody tr:hover .sticky-action-cell { background: color-mix(in srgb, var(--sy-data) 6%, var(--sy-panel)); }
[data-brand="signal-yard"] .job-id-link, [data-brand="signal-yard"] .col-file, [data-brand="signal-yard"] .record-count { font-family: var(--font-axis); }
[data-brand="signal-yard"] .action-workflow { background: var(--sy-panel); border-color: var(--sy-hair); border-radius: var(--radius); font-family: var(--font-plot); }
[data-brand="signal-yard"] .export-all-button { border-color: var(--sy-hair); border-radius: var(--radius); font-family: var(--font-axis); }
[data-brand="signal-yard"] .export-all-button:hover { background: var(--sy-hair); border-color: var(--sy-data); color: var(--sy-data); }
[data-brand="signal-yard"] .empty-cell { background: color-mix(in srgb, var(--sy-ink) 8%, transparent); }
[data-brand="signal-yard"] .pager-btn { background: var(--sy-panel); border-color: var(--sy-hair); border-radius: var(--radius); font-family: var(--font-axis); }
[data-brand="signal-yard"] .pager-btn.active { background: var(--sy-data); border-color: transparent; }

/* Status/Approval — one hue only; everything else is plain ink text */
[data-brand="signal-yard"] .status-badge { background: none; border: none; padding: 0; font-family: var(--font-axis); font-size: 11px; }
[data-brand="signal-yard"] .status-badge::before { display: none; }
[data-brand="signal-yard"] .status-approved-active, [data-brand="signal-yard"] .status-active,
[data-brand="signal-yard"] .status-green, [data-brand="signal-yard"] .badge-green { color: var(--sy-data); }
[data-brand="signal-yard"] .status-fresh-pending, [data-brand="signal-yard"] .status-pending, [data-brand="signal-yard"] .status-new,
[data-brand="signal-yard"] .status-amber, [data-brand="signal-yard"] .badge-amber,
[data-brand="signal-yard"] .status-rejected-duplicate, [data-brand="signal-yard"] .status-rejected-data-issue,
[data-brand="signal-yard"] .status-rejected, [data-brand="signal-yard"] .status-red, [data-brand="signal-yard"] .badge-red,
[data-brand="signal-yard"] .status-slate, [data-brand="signal-yard"] .badge-slate,
[data-brand="signal-yard"] .status-violet, [data-brand="signal-yard"] .badge-violet { color: var(--sy-ink-dim); }
[data-brand="signal-yard"] .count-chip { background: var(--sy-hair); border: none; color: var(--sy-ink-dim); font-family: var(--font-axis); border-radius: var(--radius); }
[data-brand="signal-yard"] .rejected-chip { background: none; color: var(--sy-ink); }

/* Modal / popover / toast */
[data-brand="signal-yard"] .profile-modal-overlay { background: color-mix(in srgb, var(--sy-ink) 50%, transparent); }
[data-brand="signal-yard"] .profile-modal { border: 1px solid var(--sy-hair); border-radius: var(--radius); box-shadow: none; }
[data-brand="signal-yard"] .profile-modal-header h3 { font-family: var(--font-plot); font-size: 14px; }
[data-brand="signal-yard"] .profile-row { border-color: var(--sy-hair); }
[data-brand="signal-yard"] .profile-label { font-family: var(--font-axis); font-size: 10.5px; }
[data-brand="signal-yard"] .toast { background: var(--sy-ink); color: var(--sy-bg); border-radius: var(--radius); }
[data-brand="signal-yard"] .toast.success { background: var(--sy-data); }
[data-brand="signal-yard"] .spinner { border-color: var(--sy-hair); border-top-color: var(--sy-data); }

/* Auth */
[data-brand="signal-yard"] .auth-aside { background: var(--sy-panel); color: var(--sy-ink); border-right: 1px solid var(--sy-hair); }
[data-brand="signal-yard"] .auth-logo { background: var(--sy-data); box-shadow: none; border-radius: var(--radius); }
[data-brand="signal-yard"] .auth-brand h1, [data-brand="signal-yard"] .auth-card h3 { color: var(--sy-ink); font-weight: 700; }
[data-brand="signal-yard"] .auth-brand span, [data-brand="signal-yard"] .auth-foot { color: var(--sy-ink-dim); }
[data-brand="signal-yard"] .eyebrow { color: var(--sy-data); }
[data-brand="signal-yard"] .auth-pitch h2 { color: var(--sy-ink); }
[data-brand="signal-yard"] .auth-pitch h2 b { color: var(--sy-data); }
[data-brand="signal-yard"] .auth-pitch p { color: var(--sy-ink-dim); }
[data-brand="signal-yard"] .auth-feats li { color: var(--sy-ink); }
[data-brand="signal-yard"] .tick { background: var(--sy-data); border-radius: var(--radius); }
[data-brand="signal-yard"] .auth-inputwrap { background: var(--sy-panel); border-color: var(--sy-hair); border-radius: var(--radius); }
[data-brand="signal-yard"] .auth-submit { background: var(--sy-data); color: #fff; border-radius: var(--radius); }
[data-brand="signal-yard"] .auth-submit:hover:not(:disabled) { background: color-mix(in srgb, var(--sy-data) 85%, black); }
[data-brand="signal-yard"] .auth-forgot, [data-brand="signal-yard"] .auth-switch a, [data-brand="signal-yard"] .auth-card a { color: var(--sy-data); }
[data-brand="signal-yard"] .auth-hint { background: var(--sy-panel); border-color: var(--sy-hair); border-radius: var(--radius); }
[data-brand="signal-yard"] .auth-hint code { font-family: var(--font-axis); background: var(--sy-bg); color: var(--sy-data); }
[data-brand="signal-yard"] .otp-inputs input { background: var(--sy-panel); border-color: var(--sy-hair); font-family: var(--font-axis); border-radius: var(--radius); }
[data-brand="signal-yard"] .otp-inputs input.filled { border-color: var(--sy-data); }
[data-brand="signal-yard"] .otp-resend { color: var(--sy-data); }

/* Record detail / audit */
[data-brand="signal-yard"] body.record-detail-body { background: var(--sy-bg); }
[data-brand="signal-yard"] .structurer-panel, [data-brand="signal-yard"] .structurer-frame { background: var(--sy-bg); }
[data-brand="signal-yard"] .detail-title .job-id-label { font-family: var(--font-axis); background: var(--sy-hair); color: var(--sy-ink); border-radius: var(--radius); }
[data-brand="signal-yard"] .back-link { color: var(--sy-data); font-family: var(--font-axis); font-size: 12px; }
[data-brand="signal-yard"] .audit-table .mono, [data-brand="signal-yard"] #auditTableBody .mono { font-family: var(--font-axis); }

/* ============================================================================
   FOUNDRY THEME  —  data-brand="foundry"
   Instrument-panel intelligence bench: Public Sans + Fira Code, zero radius,
   1px hairline borders throughout, and — the identity-defining piece —
   selection/elevation as an INSET well (recessed background + inset accent
   rule) instead of a shadow anywhere, plus status shown as a small SQUARE
   (not a dot, not a pill) with plain text alongside it, never a colored
   background on the text itself.

   Scope note, stated plainly: the doc's actual signature construction is a
   fixed three-pane bench (rail / list / inspector) replacing the page's
   entire shell, with all three panes independently scrollable inside one
   fixed viewport - its own §5.4 names this as one of only two themes in the
   set (with Atelier) that assumes a genuinely different page shell, and
   even offers a fallback (slide-over instead of the fixed grid). ATIC's
   existing shell - one scrolling column under a shared top nav, reused by
   nine separate pages and the routing between them - isn't something a
   single-brand CSS pass should restructure; rebuilding it as a fixed grid
   would need a dedicated layout wrapper and to redo how every page
   navigates, well beyond a theme swap. What's built instead is the actual
   VISUAL identity of the language wherever it already has a home in ATIC's
   real UI: the inset-well elevation model for hover/active/selected rows
   and buttons (replacing every shadow-based lift), the plain-square status
   treatment (replacing every dot/pill), and the pipeline strip's inset
   accent rule for its live cell. The rail/list/inspector master-detail
   split itself is not present.
   ============================================================================ */

[data-brand="foundry"][data-theme="light"],
[data-brand="foundry"]:not([data-theme="dark"]) {
    --f-bg: #F4F5F7;
    --f-panel: #FFFFFF;
    --f-ink: #14171C;
    --f-ink-dim: #5B6472;
    --f-hair: #D7DBE0;
    --f-well: #E9ECF1;
    --f-accent: #3A6EA5;
    --f-ok: #2F8F5B;
    --f-warn: #B9770E;
    --f-crit: #B33A3A;
    --f-row-hover: #FAFAFB;
    --f-inset-soft: rgba(0,0,0,.05);
    --f-inset-strong: rgba(0,0,0,.15);
}
[data-brand="foundry"][data-theme="dark"] {
    --f-bg: #0F1216;
    --f-panel: #171B21;
    --f-ink: #E4E7EB;
    --f-ink-dim: #7C8592;
    --f-hair: #2B313A;
    --f-well: #1D232B;
    --f-accent: #6FA8DC;
    --f-ok: #4CAF7D;
    --f-warn: #D99A3A;
    --f-crit: #D9635F;
    --f-row-hover: #1B1F25;
    --f-inset-soft: rgba(0,0,0,.3);
    --f-inset-strong: rgba(0,0,0,.35);
}
[data-brand="foundry"] {
    --font-inst: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
    --font-bench: 'Fira Code', 'SFMono-Regular', Consolas, monospace;

    --background: var(--f-bg); --card: var(--f-panel); --text: var(--f-ink); --heading: var(--f-ink);
    --muted: var(--f-ink-dim); --border: var(--f-hair);

    --primary: var(--f-accent); --primary-dark: var(--f-accent); --primary-light: var(--f-well);

    --nav-bg: var(--f-panel); --nav-bg-2: var(--f-accent);
    --nav-hover: var(--f-well); --nav-active: var(--f-accent);
    --nav-text: var(--f-ink); --nav-text-dim: var(--f-ink-dim);

    --success: var(--f-ok); --success-bg: transparent; --success-text: var(--f-ok);
    --warning: var(--f-warn); --warning-bg: transparent;
    --danger: var(--f-crit); --danger-bg: transparent; --danger-text: var(--f-crit);
    --info-bg: transparent; --info-text: var(--f-accent);

    --blue: var(--f-accent);  --blue-bg: transparent;
    --teal: var(--f-ok);      --teal-bg: transparent;
    --green: var(--f-ok);     --green-bg: transparent;
    --orange: var(--f-warn);  --orange-bg: transparent;
    --pink: var(--f-ink-dim); --pink-bg: transparent;
    --purple: var(--f-ink-dim); --purple-bg: transparent;
    --yellow: var(--f-warn);  --yellow-bg: transparent;
    --red: var(--f-crit);     --red-bg: transparent;
    --cyan: var(--f-accent);  --cyan-bg: transparent;

    --radius: 0; --radius-sm: 0; --radius-pill: 0;
    --shadow: none; --shadow-md: none; --shadow-sm: none;
    --shadow-focus: inset 2px 0 0 var(--f-accent);
}
[data-brand="foundry"] body { font-family: var(--font-inst); font-size: 13px; line-height: 1.4; }
[data-brand="foundry"] * { border-radius: 0 !important; }
/* box-shadow isn't blanket-!important-cleared here, unlike every other
   structural theme - Foundry's whole identity is an INSET shadow used
   deliberately for selection/wells/primary buttons, so only DROP shadows
   need suppressing; each rule below sets its own inset (or none) instead
   of relying on a global override to remove it. */

[data-brand="foundry"] .topnav { background: var(--f-panel); color: var(--f-ink); box-shadow: none; border-bottom: 1px solid var(--f-hair); }
[data-brand="foundry"] .brand-mark { color: var(--f-ink); font-weight: 600; }
[data-brand="foundry"] .logo-icon { background: var(--f-accent); box-shadow: none; }
[data-brand="foundry"] .topnav-link { color: var(--f-ink-dim); font-size: 12px; }
[data-brand="foundry"] .topnav-link:hover { background: var(--f-well); color: var(--f-ink); box-shadow: none; }
[data-brand="foundry"] .topnav-link.active { background: var(--f-well); color: var(--f-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--f-accent); }
[data-brand="foundry"] .topnav-link .nav-icon { display: none; }
[data-brand="foundry"] .menu-toggle { color: var(--f-ink); border-color: var(--f-hair); box-shadow: none; }
[data-brand="foundry"] .topnav.open .topnav-links { background: var(--f-panel); }
[data-brand="foundry"] .theme-btn, [data-brand="foundry"] .settings-btn {
    background: var(--f-panel); border: 1px solid var(--f-hair); color: var(--f-ink); box-shadow: none;
}
[data-brand="foundry"] .theme-btn:hover, [data-brand="foundry"] .settings-btn:hover { background: var(--f-well); box-shadow: none; }
[data-brand="foundry"] .settings-btn[aria-expanded="true"] { background: var(--f-well); box-shadow: inset 2px 0 0 var(--f-accent); }
[data-brand="foundry"] .theme-popover { border: 1px solid var(--f-hair); box-shadow: none; }
[data-brand="foundry"] .theme-swatch-row { font-family: var(--font-inst); font-size: 12px; box-shadow: none; }
[data-brand="foundry"] .theme-swatch-row:hover, [data-brand="foundry"] .theme-swatch-row.active { background: var(--f-well); box-shadow: inset 2px 0 0 var(--f-accent); }
[data-brand="foundry"] .nav-avatar { background: var(--f-accent); }
[data-brand="foundry"] .nav-logout { background: var(--f-panel); border: 1px solid var(--f-hair); color: var(--f-ink); box-shadow: none; }
[data-brand="foundry"] .nav-logout:hover { background: var(--f-well); color: var(--f-ink); box-shadow: none; }
[data-brand="foundry"] .page-head h1, [data-brand="foundry"] .topbar h1 { font-weight: 600; color: var(--f-ink); }
[data-brand="foundry"] .topbar { background: var(--f-bg); border-bottom: 1px solid var(--f-hair); }

/* Actions — inset-well rectangles; primary fills with accent + inset shadow,
   never a drop shadow / raised look */
[data-brand="foundry"] .btn { font-weight: 500; font-size: 12px; transition: none; }
[data-brand="foundry"] .btn:active { transform: none; }
[data-brand="foundry"] .btn-primary {
    background: var(--f-accent); color: #fff; border: 1px solid var(--f-accent);
    box-shadow: inset 0 -1px 0 var(--f-inset-strong);
}
[data-brand="foundry"] .btn-primary:hover { background: var(--f-accent); opacity: .9; box-shadow: inset 0 -1px 0 var(--f-inset-strong); transform: none; }
[data-brand="foundry"] .btn-secondary, [data-brand="foundry"] .btn-ghost, [data-brand="foundry"] .btn-outline {
    background: var(--f-well); border: 1px solid var(--f-hair); color: var(--f-ink);
    box-shadow: inset 0 1px 2px var(--f-inset-soft);
}
[data-brand="foundry"] .btn-secondary:hover, [data-brand="foundry"] .btn-ghost:hover, [data-brand="foundry"] .btn-outline:hover {
    background: var(--f-well); border-color: var(--f-accent); color: var(--f-accent);
    box-shadow: inset 0 1px 2px var(--f-inset-soft);
}
[data-brand="foundry"] .topnav .btn-primary:hover { background: var(--f-accent); opacity: .9; }
[data-brand="foundry"] .view-link { font-family: var(--font-bench); font-size: 11px; color: var(--f-accent); }

[data-brand="foundry"] input, [data-brand="foundry"] select, [data-brand="foundry"] textarea {
    font-family: var(--font-inst); background: var(--f-panel); border-color: var(--f-hair); box-shadow: none;
}
[data-brand="foundry"] .search-input-wrap { background: var(--f-panel); border-color: var(--f-hair); box-shadow: none; }
[data-brand="foundry"] input:focus, [data-brand="foundry"] select:focus, [data-brand="foundry"] textarea:focus,
[data-brand="foundry"] .search-input-wrap:focus-within { border-color: var(--f-accent); box-shadow: inset 2px 0 0 var(--f-accent); }
[data-brand="foundry"] label { color: var(--f-ink-dim); font-family: var(--font-bench); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }

/* Pipeline — bordered cell strip, active/live cell marked with an inset
   accent rule, not a fill or a card */
[data-brand="foundry"] .stats-grid {
    display: flex; gap: 0; background: var(--f-panel); border: 1px solid var(--f-hair); margin-bottom: 20px; box-shadow: none;
}
[data-brand="foundry"] .stat-card {
    flex: 1; display: block; background: none; border: none; border-right: 1px solid var(--f-hair);
    border-radius: 0; padding: 10px 16px; box-shadow: none;
}
[data-brand="foundry"] .stat-card:last-child { border-right: none; }
[data-brand="foundry"] .stat-card:hover { transform: none; box-shadow: none; }
[data-brand="foundry"] .stat-card::before { content: none; }
[data-brand="foundry"] .stat-icon { display: none; }
[data-brand="foundry"] .stat-info span { font-size: 10px; color: var(--f-ink-dim); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
[data-brand="foundry"] .stat-info strong { font-family: var(--font-bench); font-weight: 600; font-size: 17px; color: var(--f-ink); letter-spacing: 0; }
[data-brand="foundry"] .stat-info small { display: none; }
[data-brand="foundry"] .stat-card:nth-child(4n+4) { background: var(--f-well); box-shadow: inset 0 -2px 0 var(--f-accent); }
[data-brand="foundry"] .stat-card:nth-child(4n+4) .stat-info strong { color: var(--f-crit); }

/* Cards — flat panel, hairline only */
[data-brand="foundry"] .card { background: var(--f-panel); border: 1px solid var(--f-hair); box-shadow: none; }
[data-brand="foundry"] .card-header { background: none; border-bottom: 1px solid var(--f-hair); padding: 10px 14px; }
[data-brand="foundry"] .card-header h2 { font-family: var(--font-bench); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--f-ink-dim); }
[data-brand="foundry"] .card-header p { display: none; }
[data-brand="foundry"] .dashboard-grid { gap: 0; }
[data-brand="foundry"] .quick-actions { gap: 0; padding: 0; }
[data-brand="foundry"] .quick-action { border: none; border-bottom: 1px solid var(--f-hair); background: none; box-shadow: none; }
[data-brand="foundry"] .quick-action:hover { background: var(--f-well); box-shadow: inset 2px 0 0 var(--f-accent); border-color: var(--f-hair); }
[data-brand="foundry"] .quick-icon { display: none; }
[data-brand="foundry"] .quick-action strong { font-weight: 600; }
[data-brand="foundry"] .quick-action span { font-family: var(--font-bench); font-size: 11px; color: var(--f-ink-dim); }
[data-brand="foundry"] .activity-item { border-color: var(--f-hair); }
[data-brand="foundry"] .activity-item .a-count { font-family: var(--font-bench); }
[data-brand="foundry"] .company-avatar { background: var(--f-accent); }

/* List rows / table — hover and "selected" state are an inset well, never
   a lifted/shadowed row */
[data-brand="foundry"] .table-wrapper { border: 1px solid var(--f-hair); }
[data-brand="foundry"] table { border: none; }
[data-brand="foundry"] thead th { background: var(--f-panel); color: var(--f-ink-dim); font-family: var(--font-bench); font-size: 10px; border-right: none; border-bottom: 1px solid var(--f-hair); }
[data-brand="foundry"] thead th.sticky-col { background: var(--f-panel); }
[data-brand="foundry"] tbody td { border-right: none; border-bottom: 1px solid var(--f-hair); padding: 9px 16px; }
[data-brand="foundry"] tbody tr:hover td { background: var(--f-row-hover); }
[data-brand="foundry"] .sticky-col-id, [data-brand="foundry"] .sticky-col-name,
[data-brand="foundry"] .sticky-col-action, [data-brand="foundry"] .sticky-action-cell {
    background: var(--f-panel); border: none; border-bottom: 1px solid var(--f-hair);
}
[data-brand="foundry"] tbody tr:hover .sticky-col, [data-brand="foundry"] tbody tr:hover .sticky-action-cell { background: var(--f-row-hover); box-shadow: inset 2px 0 0 var(--f-accent); }
[data-brand="foundry"] .job-id-link, [data-brand="foundry"] .col-file, [data-brand="foundry"] .record-count { font-family: var(--font-bench); }
[data-brand="foundry"] .action-workflow { background: var(--f-panel); border-color: var(--f-hair); box-shadow: none; }
[data-brand="foundry"] .export-all-button { border-color: var(--f-hair); box-shadow: inset 0 1px 2px var(--f-inset-soft); }
[data-brand="foundry"] .export-all-button:hover { background: var(--f-well); border-color: var(--f-accent); color: var(--f-accent); }
[data-brand="foundry"] .empty-cell { background: var(--f-well); }
[data-brand="foundry"] .pager-btn { background: var(--f-well); border-color: var(--f-hair); box-shadow: inset 0 1px 2px var(--f-inset-soft); }
[data-brand="foundry"] .pager-btn:hover:not(:disabled) { background: var(--f-well); border-color: var(--f-accent); color: var(--f-accent); }
[data-brand="foundry"] .pager-btn.active { background: var(--f-accent); border-color: transparent; box-shadow: inset 0 -1px 0 var(--f-inset-strong); }

/* Status — a small SQUARE (not dot, not pill), plain text alongside, no
   colored background on the text */
[data-brand="foundry"] .status-badge { background: none; border: none; padding: 0 0 0 12px; position: relative; font-weight: 500; }
[data-brand="foundry"] .status-badge::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 0; opacity: 1; background: var(--f-hair);
}
[data-brand="foundry"] .status-approved-active::before, [data-brand="foundry"] .status-active::before,
[data-brand="foundry"] .status-green::before, [data-brand="foundry"] .badge-green::before { background: var(--f-ok); }
[data-brand="foundry"] .status-approved-active, [data-brand="foundry"] .status-active,
[data-brand="foundry"] .status-green, [data-brand="foundry"] .badge-green { color: var(--f-ink); }
[data-brand="foundry"] .status-fresh-pending::before, [data-brand="foundry"] .status-pending::before,
[data-brand="foundry"] .status-new::before, [data-brand="foundry"] .status-amber::before, [data-brand="foundry"] .badge-amber::before { background: var(--f-warn); }
[data-brand="foundry"] .status-rejected-duplicate::before, [data-brand="foundry"] .status-rejected-data-issue::before,
[data-brand="foundry"] .status-rejected::before, [data-brand="foundry"] .status-red::before, [data-brand="foundry"] .badge-red::before { background: var(--f-crit); }
[data-brand="foundry"] .status-rejected-duplicate, [data-brand="foundry"] .status-rejected-data-issue,
[data-brand="foundry"] .status-rejected, [data-brand="foundry"] .status-red, [data-brand="foundry"] .badge-red { color: var(--f-ink); }
[data-brand="foundry"] .count-chip { background: var(--f-well); border: none; color: var(--f-ink-dim); font-family: var(--font-bench); }
[data-brand="foundry"] .rejected-chip { background: none; color: var(--f-crit); }

/* Modal / popover / toast */
[data-brand="foundry"] .profile-modal-overlay { background: color-mix(in srgb, var(--f-ink) 45%, transparent); }
[data-brand="foundry"] .profile-modal { border: 1px solid var(--f-hair); box-shadow: none; }
[data-brand="foundry"] .profile-modal-header h3 { font-weight: 600; }
[data-brand="foundry"] .profile-row { border-color: var(--f-hair); }
[data-brand="foundry"] .toast { background: var(--f-ink); color: var(--f-bg); box-shadow: none; }
[data-brand="foundry"] .toast.success { background: var(--f-ok); }
[data-brand="foundry"] .toast.error { background: var(--f-crit); }
[data-brand="foundry"] .spinner { border-color: var(--f-hair); border-top-color: var(--f-accent); }

/* Auth — flat panel, inset-well inputs/buttons */
[data-brand="foundry"] .auth-aside { background: var(--f-panel); color: var(--f-ink); border-right: 1px solid var(--f-hair); }
[data-brand="foundry"] .auth-logo { background: var(--f-accent); box-shadow: none; }
[data-brand="foundry"] .auth-brand h1, [data-brand="foundry"] .auth-card h3 { color: var(--f-ink); font-weight: 600; }
[data-brand="foundry"] .auth-brand span, [data-brand="foundry"] .auth-foot { color: var(--f-ink-dim); }
[data-brand="foundry"] .eyebrow { color: var(--f-accent); }
[data-brand="foundry"] .auth-pitch h2 { color: var(--f-ink); }
[data-brand="foundry"] .auth-pitch h2 b { color: var(--f-accent); }
[data-brand="foundry"] .auth-pitch p { color: var(--f-ink-dim); }
[data-brand="foundry"] .auth-feats li { color: var(--f-ink); }
[data-brand="foundry"] .tick { background: var(--f-accent); }
[data-brand="foundry"] .auth-inputwrap { background: var(--f-well); border-color: var(--f-hair); box-shadow: inset 0 1px 2px var(--f-inset-soft); }
[data-brand="foundry"] .auth-submit { background: var(--f-accent); color: #fff; box-shadow: inset 0 -1px 0 var(--f-inset-strong); }
[data-brand="foundry"] .auth-submit:hover:not(:disabled) { background: var(--f-accent); opacity: .9; }
[data-brand="foundry"] .auth-forgot, [data-brand="foundry"] .auth-switch a, [data-brand="foundry"] .auth-card a { color: var(--f-accent); }
[data-brand="foundry"] .auth-hint { background: var(--f-well); border-color: var(--f-hair); box-shadow: none; }
[data-brand="foundry"] .auth-hint code { font-family: var(--font-bench); background: var(--f-panel); color: var(--f-accent); }
[data-brand="foundry"] .otp-inputs input { background: var(--f-well); border-color: var(--f-hair); font-family: var(--font-bench); box-shadow: inset 0 1px 2px var(--f-inset-soft); }
[data-brand="foundry"] .otp-inputs input.filled { border-color: var(--f-accent); }
[data-brand="foundry"] .otp-resend { color: var(--f-accent); }

/* Record detail / audit */
[data-brand="foundry"] body.record-detail-body { background: var(--f-bg); }
[data-brand="foundry"] .structurer-panel, [data-brand="foundry"] .structurer-frame { background: var(--f-bg); }
[data-brand="foundry"] .detail-title .job-id-label { font-family: var(--font-bench); background: var(--f-well); color: var(--f-ink); }
[data-brand="foundry"] .back-link { color: var(--f-accent); font-family: var(--font-bench); font-size: 12px; }
[data-brand="foundry"] .audit-table .mono, [data-brand="foundry"] #auditTableBody .mono { font-family: var(--font-bench); }
/* ============================================================
   SKILL GRAPH page — view switcher (heading dropdown) + Skill List.
   Table styling follows the Proof Configurator reference, built on ATIC's
   theme variables so every brand/dark theme applies. See setView() and
   renderList() in js/sg-skill-graph.js.
   ============================================================ */
.sg-view-switch { position: relative; min-width: 0; }
.sg-view-heading { margin: 0; }
/* The three view tabs use the left panel's .sg-tab look (same border, type and active fill). */
.sg-view-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.sg-view-tabs .sg-view-tab { flex: none; padding: 5px 14px; font-size: 11px; letter-spacing: .04em; line-height: 1.3; }
.sg-view-tabs .sg-view-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* Proof Dashboard view: only the dashboard container shows — no table, no list toolbar. */
.sg-list-view.sg-view-dash .sg-list-table-wrap, .sg-list-view.sg-view-dash .sg-list-toolbar { display: none; }
.sgh-panel[hidden] { display: none; }
.sg-list-view[hidden], .sg-graph-body[hidden] { display: none !important; }

/* Skill List / Role Data / Skill Data all keep the same Search panel on the
   left as Skill Graph; only the graph-specific Detail panel and zoom/
   fullscreen controls are hidden for them. */
.sg-workspace.sg-view-list #sgDetailResizeHandle,
.sg-workspace.sg-view-list .sg-detail-panel-static,
.sg-workspace.sg-view-list .sg-graph-header-actions,
.sg-workspace.sg-view-roledata #sgDetailResizeHandle,
.sg-workspace.sg-view-roledata .sg-detail-panel-static,
.sg-workspace.sg-view-roledata .sg-graph-header-actions,
.sg-workspace.sg-view-skilldata #sgDetailResizeHandle,
.sg-workspace.sg-view-skilldata .sg-detail-panel-static,
.sg-workspace.sg-view-skilldata .sg-graph-header-actions { display: none !important; }

.sg-list-view, .sgpl-overlay {
    --sgl-head: color-mix(in srgb, var(--muted) 9%, var(--card));
    --sgpl-github: #2B2F3A; --sgpl-pdf: #C1443D; --sgpl-url: #2764C8;
    --sgpl-patent: #7A4BC9; --sgpl-supervisor: #1D8A6F; --sgpl-participation: #B5791A;
}
.sg-list-view { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
[data-theme="dark"] .sg-list-view, [data-theme="dark"] .sgpl-overlay {
    --sgpl-github: #C7CAD6; --sgpl-pdf: #E58C86; --sgpl-url: #7FA8EE;
    --sgpl-patent: #B79AEA; --sgpl-supervisor: #6BCBAE; --sgpl-participation: #E0B25C;
}
.sg-list-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.sg-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 22px 0; }
.sg-list-count { margin: 0; font-size: 12px; }
.sg-list-table-wrap { flex: 1; min-height: 240px; margin: 10px 22px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: auto; }
.sg-list-table { width: 100%; min-width: 1400px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; }
.sg-list-table thead th {
    position: sticky; top: 0; z-index: 2; text-align: left; padding: 9px 12px; background: var(--sgl-head); color: var(--muted);
    text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; font-weight: 700; border-bottom: 1px solid var(--border);
}
.sg-list-table td { padding: 7px 12px; vertical-align: top; overflow-wrap: break-word; color: var(--text); border-bottom: 1px solid var(--border); }
.sg-list-table tbody tr:last-child td { border-bottom: none; }

.sgl-c0 { --sgl-hue: var(--teal); }
.sgl-c1 { --sgl-hue: var(--orange); }
.sgl-c2 { --sgl-hue: var(--purple); }
.sgl-c3 { --sgl-hue: var(--blue); }
.sgl-c4 { --sgl-hue: var(--green); }
.sgl-c5 { --sgl-hue: var(--pink); }
.sg-list-table td.sgl-skill { font-weight: 600; color: var(--heading); border-right: 1px solid var(--border); background: color-mix(in srgb, var(--sgl-hue, var(--muted)) 26%, var(--card)); }
.sg-list-table td.sgl-subskill { font-weight: 500; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--sgl-hue, var(--muted)) 11%, var(--card)); }
.sgl-subskill-label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.sgl-count-badge {
    display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 100px; background: var(--card); border: 1px solid var(--border); color: var(--muted);
    font: 700 10.5px/1 "IBM Plex Mono", monospace;
}
.sgl-count-badge.zero { opacity: .7; }

.sgl-proof-tag { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.sgl-proof-tag:last-child { margin-bottom: 0; }
.sgl-pt-badge { flex: none; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.sgl-proof-tag strong { font-size: 12.5px; font-weight: 600; }
.sgl-empty { color: var(--muted); }
.sgl-placeholder { font-size: 12.5px; font-style: italic; }

.sgl-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; background: none; border: 0; font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--muted); cursor: default; }
.sgl-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.sgl-status.incomplete { color: var(--danger-text); }
.sgl-status.incomplete .sgl-status-dot { background: var(--danger); }

.sg-list-table td.sgl-actions { text-align: center; }
.sgl-icon-btn { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.sgl-icon-btn:hover { background: var(--primary-light); color: var(--primary); }
.sgl-icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.sg-list-table tr.sgl-divider-row td { padding: 8px 12px 6px; background: var(--sgl-head); }
.sgl-divider { display: inline-flex; align-items: baseline; gap: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--heading); }
.sgl-divider-meta { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.sg-list-table tr.sgl-empty-row td { padding: 0; }

/* ---- Proof Library (right panel of the Skill List view) — see
   renderProofLibrary() in js/sg-skill-graph.js. ---- */
/* Proof Library modal: a standard centered dialog over a dimmed backdrop (same
   pattern as .profile-modal-overlay). While a method is being dragged out of it
   the overlay goes transparent and click-through so the table underneath can
   receive the drop (see setLibraryOpen() / renderProofLibrary()). */
.sgpl-overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(63,45,80,0.45); }
.sgpl-overlay.is-open { display: flex; }
.sgpl-overlay.is-dragging { opacity: 0; pointer-events: none; }
body.sgpl-modal-open { overflow: hidden; }
.sg-proof-library {
    display: flex; flex-direction: column; overflow: hidden; outline: none; width: min(460px, 100%); max-height: min(680px, 100%);
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.sgpl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px 10px 16px; border-bottom: 1px solid var(--border); }
.sgpl-close { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.sgpl-close:hover { background: var(--primary-light); color: var(--primary); }
.sgpl-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sgpl-eyebrow { margin: 0 0 2px; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.sg-proof-library h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--heading); }
.sgpl-desc { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.sgpl-body { flex: 1; min-height: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.sgpl-card { flex: none; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); transition: box-shadow .15s, border-color .15s; }
.sgpl-card:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--border)); box-shadow: var(--shadow-sm); }
.sgpl-card-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.sgpl-badge {
    flex: none; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 700; letter-spacing: .02em; color: var(--pt); background: color-mix(in srgb, var(--pt) 14%, var(--card));
}
.sgpl-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--heading); }
.sgpl-chev {
    flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; cursor: pointer;
    transition: transform .15s, background .15s, color .15s;
}
.sgpl-chev:hover { background: var(--primary-light); color: var(--primary); }
.sgpl-chev:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sgpl-card.open .sgpl-chev { transform: rotate(180deg); }
.sgpl-raw { display: none; flex-wrap: wrap; gap: 5px; padding: 0 10px 10px 42px; }
.sgpl-card.open .sgpl-raw { display: flex; }
.sgpl-chip { font-size: 11px; padding: 3px 8px; border-radius: 100px; white-space: nowrap; color: var(--muted); background: var(--sgl-head); border: 1px solid var(--border); }

@media (max-width: 1180px) {
    .sg-workspace.sg-view-list .sg-graph-panel .card,
    .sg-workspace.sg-view-roledata .sg-graph-panel .card,
    .sg-workspace.sg-view-skilldata .sg-graph-panel .card { height: auto; }
    .sg-list-table-wrap { flex: none; max-height: 70vh; }
}

/* ---- Skill List: Proof Library toggle, proof records, drop zones ---- */

.sgl-status.clickable { cursor: pointer; }
.sgl-status.clickable:hover { color: var(--text); }
.sgl-status:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 4px; }
.sgl-status.active { color: var(--success-text); }
.sgl-status.active .sgl-status-dot { background: var(--success); }
.sgl-status.draft .sgl-status-dot { background: var(--muted); }

.sgl-pt-badge { color: var(--pt, var(--muted)); background: color-mix(in srgb, var(--pt, var(--muted)) 14%, var(--card)); }
.sg-list-table td.sgl-proof { white-space: nowrap; }

.sgl-interp-input {
    width: 100%; min-width: 190px; min-height: 38px; max-height: 120px; box-sizing: border-box; resize: vertical;
    padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--text);
    font: inherit; font-size: 12.5px; line-height: 1.4;
}
.sgl-interp-input::placeholder { color: var(--muted); font-style: italic; }
.sgl-field-error { margin-top: 4px; font-size: 11px; color: var(--danger-text); }

.sgl-ev, .sgl-ev-field { display: flex; flex-direction: column; gap: 3px; }
.sgl-ev { gap: 6px; }
.sgl-ev-field label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sgl-ev-field input[type="text"], .sgl-ev-field input[type="url"] {
    width: 100%; box-sizing: border-box; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--card); color: var(--text); font: inherit; font-size: 12px;
}
.sgl-ev-field input::placeholder { color: var(--muted); font-style: italic; }
.sgl-ev-upload {
    display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border: 1.5px dashed var(--border); border-radius: 6px;
    background: var(--sgl-head); color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 600; text-align: left; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.sgl-ev-upload:hover { border-color: var(--primary); color: var(--primary); }
.sgl-ev-chip {
    display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 7px; border-radius: 6px;
    background: color-mix(in srgb, var(--success) 14%, var(--card)); color: var(--success-text); font-size: 11.5px; font-weight: 600;
}
.sgl-ev-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgl-ev-remove { flex: none; padding: 0 2px; border: 0; background: transparent; color: inherit; opacity: .7; font-size: 13px; line-height: 1; cursor: pointer; }
.sgl-ev-remove:hover { opacity: 1; }

.sgl-row-actions { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.sgl-icon-btn.sgl-remove:hover { background: color-mix(in srgb, var(--danger) 14%, var(--card)); color: var(--danger-text); }

.sg-list-table td.sgl-add-cell { padding: 0; }
.sgl-dropzone {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 34px; margin: 4px 8px; padding: 6px 10px;
    border: 1.5px dashed var(--border); border-radius: 7px; background: var(--sgl-head);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.sgl-dropzone.drag-over {
    border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--card));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent);
}
.sgl-dz-placeholder { font-size: 12px; color: var(--muted); }
.sgl-dropzone.drag-over .sgl-dz-placeholder { color: var(--success-text); font-weight: 600; }
.sgl-dz-suggest { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.sgl-suggest-chip { padding: 2px 8px; border: 1px solid var(--border); border-radius: 100px; background: var(--card); font-size: 11px; white-space: nowrap; }

.sgpl-card { cursor: grab; user-select: none; -webkit-user-select: none; }
.sgpl-card.dragging { opacity: .5; }
.sgpl-drag { flex: none; padding-right: 2px; color: var(--muted); font-size: 13px; line-height: 1; cursor: grab; }

/* ---- Skill Graph page: the workspace covers the whole page below the top nav —
   no outer padding or margin, panels flush to the window edges, and (with
   fitWorkspaceHeight() in js/sg-skill-graph.js) all the way down to the bottom. ---- */
.page-content.sg-page-content { padding: 0; }
.sg-workspace { margin-top: 0; }
.sg-left-panel .card, .sg-graph-panel .card, .sg-detail-panel-static .card { border-radius: 0; }
/* The workspace sizes itself to the window (fitWorkspaceHeight), so the generic
   min-height:100vh on .main-content would only add a page scroll below it. */
body[data-page="sg-skill-graph"] .main-content { min-height: 0; }

/* Skill List: Save / unsaved-changes indicator in the toolbar (no autosave). */
.sg-list-toolbar-actions { display: flex; align-items: center; gap: 10px; }
.sg-list-dirty { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sg-list-dirty[hidden] { display: none; }
.sg-list-dirty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warning, var(--orange)); }
.sg-list-toolbar .btn:disabled { opacity: .5; cursor: default; pointer-events: none; }

/* Skill List: proofs belong to a Task — per-task drop hint, suggested chips under the
   Subskill, and the row tint while a method is dragged over a Task. */
.sgl-hint { display: inline-block; padding: 3px 8px; border: 1.5px dashed var(--border); border-radius: 6px; background: var(--sgl-head); color: var(--muted); font-size: 11.5px; font-style: italic; white-space: nowrap; }
.sgl-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; font-weight: 400; color: var(--muted); }
.sg-list-table tr.sgl-drop-hot > td:not(.sgl-skill):not(.sgl-subskill) { background: color-mix(in srgb, var(--success) 12%, var(--card)); }
.sg-list-table tr.sgl-drop-hot .sgl-hint { border-color: var(--success); color: var(--success-text); font-style: normal; font-weight: 600; }

/* While a Save is in flight the table is locked so edits can't slip in between the request and the reply. */
.sg-list-view.is-saving { pointer-events: none; opacity: .75; }

/* Full screen: the Details panel is moved inside the graph panel (see
   dockDetailPanel() in js/sg-skill-graph.js) and sits to the right of the graph,
   opening on node click exactly as in the normal layout. */
.sg-graph-panel:fullscreen { gap: 16px; }
.sg-graph-panel:-webkit-full-screen { gap: 16px; }

/* ---- Skill List: Proof Dashboard (heat map of proofs per Skill / Subskill / Task) ---- */
.sg-list-toolbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* ---- Proof Dashboard: ONE compact container, ~26px rows, shades of the theme's primary ---- */
.sgh-panel {
    position: relative; display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; margin: 8px 16px 12px; overflow: hidden;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.sgh-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--sgl-head); }
.sgh-levels { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.sgh-level {
    height: 26px; padding: 0 12px; border: 0; border-right: 1px solid var(--border); background: var(--card); color: var(--muted);
    font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
    transition: background .15s, color .15s;
}
.sgh-level:last-child { border-right: 0; }
.sgh-level:hover { background: var(--primary-light); color: var(--primary); }
.sgh-level[aria-pressed="true"] { background: var(--primary); color: #fff; }
.sgh-level:focus-visible { outline: none; box-shadow: inset var(--shadow-focus); }
.sgh-slot { display: inline-flex; min-width: 0; }
.sgh-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-left: auto; font-size: 11px; color: var(--muted); }
.sgh-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); }
.sgh-swatch:not(:first-child) { margin-left: 8px; }
.sgpt-inline { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sgpt-inline span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sgpt-inline select {
    height: 26px; min-width: 0; max-width: 220px; padding: 0 8px; font: inherit; font-size: 12px; color: var(--text);
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.sgpt-inline select:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sgh-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; min-height: 25px; border-bottom: 1px solid var(--border); }
.sgh-summary { margin: 0; font-size: 11.5px; line-height: 25px; }
.sgh-rows { font-size: 11.5px; white-space: nowrap; }
.sgh-grid {
    flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 10px;
    /* Up to 25 boxes per line: each track is 1/25 of the width (less the 24 gaps) but never narrower than 46px,
       so narrower screens automatically fit fewer per line. */
    display: grid; grid-template-columns: repeat(auto-fill, minmax(max(46px, calc((100% - 97px) / 25)), 1fr)); gap: 4px; align-content: start;
}
.sgh-grid .empty-state { grid-column: 1 / -1; }
.sgh-cell {
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 26px; padding: 2px 3px;
    border: 1px solid var(--sgh-bd); border-radius: 4px; font: inherit; line-height: 1.2; cursor: pointer; overflow: hidden; white-space: nowrap;
    transition: box-shadow .1s, border-color .1s;
}
.sgh-cell:hover, .sgh-cell:focus-visible { border-color: var(--primary); box-shadow: var(--shadow-focus); outline: none; }
.sgh-n { font-size: 12px; font-weight: 700; }
.sgh-sub { font-size: 10px; opacity: .8; white-space: nowrap; }
/* 0 / 1–3 / 4+ Proof Evidence — three soft pastels: lavender blue, peach, mint green. */
.sgh-l0 { --sgh-bg: #E8EAF6; --sgh-bd: #C5CAE9; }
.sgh-l1 { --sgh-bg: #FCE8E6; --sgh-bd: #F4C7C1; }
.sgh-l2 { --sgh-bg: #E3F1E8; --sgh-bd: #B7DCC2; }
/* Dark: the same three hues as light (lavender ~231°, peach ~5°, mint ~141°), just darker and
   less saturated (~18–25% saturation, ~20% lightness) — muted, never bright. */
[data-theme="dark"] .sgh-l0 { --sgh-bg: #282C42; --sgh-bd: #3B4160; }
[data-theme="dark"] .sgh-l1 { --sgh-bg: #43302F; --sgh-bd: #5C413F; }
[data-theme="dark"] .sgh-l2 { --sgh-bg: #24392D; --sgh-bd: #37533F; }
.sgh-l0, .sgh-l1, .sgh-l2 { background: var(--sgh-bg); border-color: var(--sgh-bd); color: var(--text); }
.sgh-tip {
    position: fixed; z-index: 120; max-width: 320px; padding: 9px 11px; border-radius: 8px; pointer-events: none;
    background: var(--heading); color: var(--card); font-size: 12px; line-height: 1.5; box-shadow: var(--shadow-md);
}
.sgh-tip[hidden] { display: none; }
.sgh-tip span { margin-right: 6px; font-weight: 700; opacity: .7; }