/* Fonts are declared ONCE, in workbench/workbench.css, which App.razor loads before this file
   and preloads the three faces from. Nothing here declares an @font-face — app.css used to
   carry its own MBCorpo copies over a second set of woff2 in wwwroot/fonts/, so every family
   existed twice, both copies were fetched, and the later one repainted text that had already
   painted. If you need a face, add it to the bridge.

   Two families that used to live here are gone on purpose:
   - IBM Plex (Sans + Mono), pulled from fonts.googleapis.com by an @import here AND a <link>
     in App.razor. It sat behind MBCorpo Text in every stack, so it never actually rendered
     anything — but the request was render-blocking and third-party, and on a network that
     blocks Google it blocked first paint for nothing. --mono now names the platform mono
     stack directly.
   - CorpoS, the pre-MBCorpo corporate face, declared local()-only. MBCorpo Text precedes it
     in --font-sans and always loads, so it could never be reached; it only ever resolved to
     a font-face in `error` state. */

:root {
    /* Mercedes-Benz Workbench palette (see workbench/workbench.css, loaded before this file).
       MB dark is NEUTRAL — the old navy-tinted values (#101010 bg, #353535 border) are gone on
       purpose: the blue cast was the single biggest tell that this wasn't a Workbench app. */
    --bg: var(--wb-grey-95, #0e0e0e);
    --fg: var(--wb-white-soft, #f4f4f4);
    --muted: var(--wb-grey-40, #9f9f9f);
    /* --brand-color (Aeon.Web/Components/Shared/BrandTheme.razor, from the active Market's Brand)
       sits ABOVE the workbench tokens — a Brand is the product identity; --wb-brand is this
       theme's own baseline when no Brand overrides it. */
    --accent: var(--brand-color, var(--wb-brand, #0078d6));
    --accent-2: var(--wb-brand-tint, #3395e0);
    --border: var(--wb-grey-80, #333);
    --radius: 6px;
    /* elevation + motion scale (Material-inspired) used to give generated sites depth & feel */
    --elev-1: 0 1px 2px rgba(20, 18, 40, 0.06), 0 1px 3px rgba(20, 18, 40, 0.09);
    --elev-2: 0 2px 6px rgba(20, 18, 40, 0.08), 0 6px 16px rgba(20, 18, 40, 0.07);
    --elev-3: 0 10px 24px rgba(20, 18, 40, 0.12), 0 20px 48px rgba(20, 18, 40, 0.10);
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 200ms;
    /* MBCorpo S Text for body, MBCorpo S Title for headings — the Workbench pairing.
       --font-display was 'MBCorpo Title', which is MBCorpo *A* Title Cond: the Mercedes
       ANTIQUA, a serif campaign face. It rendered every h1/h2 in the app in a condensed
       serif, which is the single thing that made the themed UI read as wrong. */
    --font-sans: 'MBCorpo Text', system-ui, -apple-system, "Segoe UI", sans-serif;
    /* --brand-font overrides the wordmark/heading face only (not body text) when the active
       Brand sets one — see BrandTheme.razor. */
    --font-display: var(--brand-font, 'MBCorpo S Title', 'MBCorpo Text', system-ui, sans-serif);
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Form controls do NOT inherit font-family from their parent — the UA sheet gives <button>,
   <input>, <select> and <textarea> the system font, so every control that didn't individually
   opt in rendered in Arial while the text around it was MB Corpo. On /applications that was 66
   inputs and 9 buttons: at a given px the two faces sit at visibly different apparent sizes and
   weights, which is what "the font sizes are a bit out" was.

   Only the FAMILY is inherited here, deliberately. `font: inherit` — which many individual rules
   further down already use — also resets size, weight and line-height, and the controls that
   don't say so rely on the UA's smaller default size. Taking just the family fixes the mismatch
   without resizing anything. */
button, input, select, textarea { font-family: inherit; }

/* Links default to the themed accent (never the browser's purple). Components with their own
   colour (.toplink, .brand, .back, .tile, .navlink, buttons…) override via higher specificity. */
a { color: var(--accent); text-decoration: none; }
/* Scoped to UNCLASSED anchors on purpose. `a:visited` is (0,1,1), which outranks any single-class
   component rule — so a link styled as a solid button (.portal-btn) had its white text repainted
   accent-blue the moment the user had visited its target, i.e. blue text on a blue button. Both
   rules set the same colour anyway; this one exists only to defeat the browser's default purple,
   which is a plain-link concern. */
a:not([class]):visited { color: var(--accent); }
a:hover { text-decoration: underline; }

/* Black base on the root element too — otherwise the browser's default white shows through
   the overscroll/rubber-band gap above the fixed body gradient (the "white rebound" on scroll). */
html { font-size: 15px; background: var(--bg); }

/* Headings take the MB display face (MBCorpo S Title), like mercedes-benz.de.
   h1 stays at 400 — at 30px the face carries on its own and 700 would shout. h2 lands at
   17px, where 400 is the same weight as body text one size up: with the old serif display
   face the family alone separated it, so nothing here had to. S Title ships a real 700
   (A Title Cond was 400-only, which is why this rule used to force 400 on both), so h2
   takes it and gets its hierarchy back without a synthesized bold. */
h1 {
    font-family: var(--font-display);
    font-weight: 400;
}

h2 {
    font-family: var(--font-display);
    font-weight: 700;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    /* Flat background — depth comes from hairline borders, not glows. */
    background-color: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    /* Sticky-footer frame for the chrome-less pages (store, e-sign, /docs, error, login…), which
       render <SiteFooter /> as a loose top-level element: on a short page the footer floated at
       the content's end, mid-viewport. MainLayout pages already get this from .app-shell's own
       100dvh frame; the fixed-position overlays (reconnect modal, AI orb) don't participate. */
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
}
body > footer.app-footer { margin-top: auto; }

/* sticky-footer app frame */
.app-shell {
    height: 100vh; height: 100dvh; display: flex; flex-direction: column;
    /* Total height of any fixed header banner(s) stacked above the topbar. 0 by default;
       each banner class below adds its height. Fixed-position chrome that must clear the
       topbar (the AI orb) reads this so it never collides with the topbar buttons when a
       banner pushes everything down. Add future banners (e.g. announcements) to the sum. */
    --banner-offset: 0rem;
    /* Height of the pinned "not production" bar (0 in production) — the impersonation bar reads
       this to stack BELOW it instead of on top of it. */
    --envbar-h: 0rem;
    /* Height of the sticky app topbar — fixed chrome that should sit BELOW the header (the docked
       side panel) adds this so the page header stays visible above it. MUST match the topbar's
       real rendered height: .topbar derives its min-height from this var, so the two can't drift
       (they did once — 3rem here vs 52px on .topbar left every below-the-bar panel 4px under it). */
    --topbar-h: 52px;
    /* Left sidenav widths: icon rail vs expanded (labels + quick links). Toggled by
       .app-shell--nav-open (cookie `aeon-nav`, flipped by window.aeon.navToggle()). */
    --sidenav-rail: 3.4rem;
    --sidenav-open: 15rem;
}
.app-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 1.25rem; border-top: 1px solid var(--border);
    color: var(--muted); font-size: 0.78rem; background: #121212;
}
/* Both footers are the same <SiteFooter /> — the portal just wears different chrome, so the
   environment styling has to reach it too rather than being scoped to the app shell. */
.app-footer .ver, .portal-foot .ver { font-family: ui-monospace, monospace; opacity: 0.8; display: inline-flex; align-items: center; gap: 0.5rem; }
.portal-foot .ver { margin-left: auto; }   /* no .spacer element: push the version right */
.app-footer .env-chip, .portal-foot .env-chip {
    font-family: inherit; background: var(--env-accent, #f0b352); color: #222222; padding: 0.08rem 0.55rem;
    border-radius: 4px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
}
/* The "not production" statement, moved here from the pinned top bar. Centre slot of the footer,
   tinted by stage so UAT and DEV don't look alike at a glance. */
.app-footer-env { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.app-footer-env strong { color: var(--env-accent, #f0b352); font-weight: 700; }
.app-footer-env-msg { opacity: 0.62; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-foot .env-chip { font-family: inherit; background: var(--env-accent, #f0b352); color: #222222;
    padding: 0.08rem 0.55rem; border-radius: 4px; font-size: 0.68rem; font-weight: 800;
    letter-spacing: 0.3px; text-transform: uppercase; }
footer.env--uat   { --env-accent: #f0b352; }
footer.env--int   { --env-accent: #c7a6f5; }
footer.env--dev   { --env-accent: #b3d9f2; }
footer.env--local { --env-accent: #9ee3b8; }
footer.env--cp      { --env-accent: #ff7a59; }
footer.env--cell    { --env-accent: #4fc6e0; }

/* The config-write lock, announced at the top of every authoring surface (ConfigLockBanner) —
   on a market cell or a registry-locked stage the editors are read-only, and the page says so
   before anyone starts editing instead of only when the save is refused. */
.config-lock-banner {
    display: flex; align-items: baseline; gap: 0.55rem;
    margin: 0.75rem 0 0.9rem; padding: 0.7rem 0.95rem;
    border: 1px solid #4fc6e0; border-left-width: 4px; border-radius: 8px;
    background: rgba(79, 198, 224, 0.07); color: #aab1bd;
    font-size: 0.92rem; line-height: 1.45; max-width: 72rem;
}
.config-lock-banner strong { color: #d5dae2; }
.config-lock-banner-icon { flex: none; }

/* /admin/fleet — the freshness panel: who is on the current bundle + build, and the forms grid. */
.fleet-fresh-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.fleet-fresh-table th { text-align: left; color: #8b93a1; font-weight: 600; padding: 0.45rem 0.9rem 0.45rem 0; border-bottom: 1px solid #2a2e35; }
.fleet-fresh-table td { padding: 0.5rem 0.9rem 0.5rem 0; border-bottom: 1px solid #1c2027; vertical-align: top; }
.fleet-fresh-ok { color: #7fd3a8; font-weight: 700; }
.fleet-fresh-behind { color: #e8b34b; font-weight: 600; }
.fleet-fresh-never { color: #8b93a1; }
.fleet-fresh-warn { color: #e8b34b; margin-left: 0.5rem; font-size: 0.85em; }
.fleet-forms-h { margin: 1.1rem 0 0.2rem; }
.fleet-forms-scroll { overflow-x: auto; }
.fleet-chain-note { margin-top: 0.8rem; }
footer.env--unknown { --env-accent: #ff5cc8; }
/* Production never renders a stage chip (every call site gates on IsProduction) — defined so that
   if one ever stops gating it reads as itself instead of inheriting the default amber = UAT. */
footer.env--prod    { --env-accent: #7fd3a8; }
@media (max-width: 720px) {
    .app-footer-env-msg { display: none; }
}

/* smooth, restrained motion */
button, .tile, .navlink, .big-button, a.toplink, .hero-card { transition: all 160ms ease; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* FocusOnNavigate focuses the <h1> (tabindex=-1) after load — keep the a11y behaviour
   but hide the focus rectangle it draws. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.conjure-shell, .shell {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* No bottom padding: a page's own .page padding gives the bottom breathing room, and zeroing
       it here lets a sticky .page-actionbar lock flush to the scroll-area bottom (sticky offsets
       are measured from the scrollport's content box — a bottom padding would leave a gap under
       the bar and let page content show through beneath it). */
    padding: 2rem 2rem 0;
}

/* ---- top bar — mercedes-benz.de style: pure black, slim, quiet ---- */
.topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 1.1rem;
    padding: 0 1.25rem; min-height: var(--topbar-h, 52px);
    background: #000; border-bottom: 1px solid #1f1f1f;
}
/* The MB wordmark is set in the Title face — Aeon's brand follows, with the three-pointed
   star (the official asset mercedes-benz.de serves, white fill) beside it. */
.topbar .brand {
    display: inline-flex; align-items: center; gap: 0.55rem;
    color: #fff; text-decoration: none;
    font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: 0.01em;
}
.brand-star { width: 22px; height: 22px; flex: 0 0 auto; }
.topbar .spacer { flex: 1; }
.topbar .topuser { font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.topbar .topuser:hover { color: #fff; text-decoration: underline; }
.topbar .toplink {
    color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.85rem;
    background: none; border: 0; cursor: pointer; font-family: inherit;
}
.topbar .toplink:hover { color: #fff; }
/* Native selects (market / language) sit on the black bar like the MB account controls. */
.topbar select {
    background: #000; color: rgba(255, 255, 255, 0.85);
    border: 1px solid #333; border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.82rem;
}
.topbar select:hover { border-color: #555; color: #fff; }
/* (The AI trigger left the topbar — it's the .ai-edge-tab on the right viewport edge now.) */
.logout-form { margin: 0; display: inline; }

/* ---- Contract servicing (shared: CM console + contract detail page) ----
   The case rows, action picker and early-settlement stepper are rendered by both the
   Contract Management console and ContractCasesPanel on /contracts/{id}. */
.cm-search { margin-left:auto; min-width:17rem; padding:.45rem .75rem; border-radius: 3px;
    border:1px solid var(--border); background:transparent; color:var(--fg); font-size:.88rem; }
.cm-search::placeholder { color:var(--muted); }
.cm-search:focus { outline:none; border-color:var(--accent); }
.cm-case { display:flex; align-items:center; gap:.7rem; padding:.35rem 0; flex-wrap:wrap; }
.cm-case + .cm-case { border-top:1px solid var(--border); }
.cm-case-kind { font-size:.68rem; font-weight:700; text-transform:uppercase; color:var(--muted);
    background:rgba(148,163,184,0.14); padding:.05rem .45rem; border-radius: 2px; }
.cm-case-title { font-size:.86rem; }
.cm-case-actions { margin-left:auto; display:flex; gap:.35rem; }
.cm-action-list { display:flex; flex-direction:column; gap:.4rem; }
.cm-action-btn { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
    padding:.55rem .7rem; border-radius: 4px; border:1px solid var(--border); background:transparent;
    color:var(--fg); font-size:.9rem; cursor:pointer; }
.cm-action-btn:hover:not(:disabled) { background:rgba(140,150,170,0.08); border-color:var(--accent); }
.cm-action-btn:disabled { opacity:.5; cursor:default; }
.cm-action-ico { width:1.4rem; text-align:center; color:var(--accent); }
.cm-action-urgent { margin-left:auto; font-size:.66rem; font-weight:700; text-transform:uppercase;
    color:#fca5a5; background:rgba(248,113,113,0.14); padding:.05rem .45rem; border-radius:4px; }
.cm-steps { display:inline-flex; align-items:center; gap:.3rem; }
.cm-step { font-size:.68rem; color:var(--muted); padding:.05rem .5rem; border:1px solid var(--border);
    border-radius:4px; }
.cm-step.done { color:#7ee2a8; border-color:#2f5b48; }
.cm-step.on { color:#fff; background:var(--accent); border-color:var(--accent); font-weight:600; }
.cm-settle-amt { font-weight:700; font-size:.9rem; }
.cm-settle-amt::before { content:"€"; opacity:.6; margin-right:.1rem; font-weight:400; }
.ccp-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.4rem; }

/* Contract extension guided intake (ContractCasesPanel). */
.cm-ext-intake { display:flex; flex-direction:column; gap:.7rem; }
.cm-ext-field { display:flex; flex-direction:column; gap:.3rem; }
.cm-ext-reasons { margin:.2rem 0 .4rem 1.1rem; padding:0; color:#fca5a5; font-size:.85rem; }
.cm-ext-quote { display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem .8rem; padding:.6rem .7rem;
    border:1px solid var(--border); border-radius: 3px; background:rgba(140,150,170,0.06); }
.cm-ext-quote > div { display:flex; flex-direction:column; gap:.1rem; font-size:.85rem; }
.cm-ext-uploaded { color:#7ee2a8; font-size:.85rem; }

/* ContractBillingPanel's per-invoice-line editor row. */
.cbp-lines { display:flex; flex-direction:column; gap:.4rem; margin:.6rem 0; }
.cbp-line { display:grid; grid-template-columns:2fr .7fr .9fr .8fr 1.3fr auto; gap:.35rem; align-items:center; }
.cbp-cm-line { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:.35rem; align-items:center; }
.cbp-line input, .cbp-line select, .cbp-cm-line input { min-width:0; }
.cbp-actions { display:flex; gap:.35rem; flex-wrap:wrap; }
.cbp-apply-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.2rem 0; }
.cbp-apply-row input { width:8rem; }

/* Danger zone (clear transactional data) on /admin/data-transfer. */
.danger-panel { border-color: rgba(248, 113, 113, 0.35); }
.danger-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.lp-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.lp-btn.danger:hover:not(:disabled) { filter: brightness(1.1); }
/* Explicit disabled look — overrides the generic `button:disabled { opacity: 0.4 }`, which just dims the
   white-on-red into a washed-out red-on-red that reads as "greyed text even when I've typed the name".
   Disabled = clearly muted grey; enabled = vivid red with bright white text, unmistakably clickable. */
.lp-btn.danger:disabled { background: #3f3436; color: #8b7d80; border-color: #4a3c3f; opacity: 1; cursor: not-allowed; }

/* Overdue instalments + accrued late charges on the CM console — warning semantics. */
.cm-overdue { margin-top: 0.25rem; font-size: 0.78rem; color: #f0b65a; font-weight: 600; }

/* Queue age — how long a proposal/query has been waiting (PM queue, CM queries column).
   -old = past the queue's SLA warn threshold (amber); -breach = out of SLA (red). */
.queue-age { font-size: 0.82rem; color: var(--fg); white-space: nowrap; }
.queue-age-old { color: #f0b65a; font-weight: 600; }
.queue-age-breach { color: #e5484d; font-weight: 700; }
.pms-timer.breach { color: #e5484d; font-weight: 700; }

/* PMS refer hand-off strip (under the proposal header). */
.pms-refer-panel { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pms-refer-panel select { min-width: 16rem; }

/* Verification stream — the rejected chip carries warning colour; pending/verified inherit. */
.pms-verify-rejected { color: #e5484d; }

/* PMS dwell strip — the proposal's per-status history in business hours. */
.pms-dwell { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); margin: 0.5rem 0 0.2rem; }
.pms-dwell-step { border: 1px solid var(--border); border-radius: 0.9rem; padding: 0.12rem 0.6rem; white-space: nowrap; }
.pms-dwell-step.now { color: var(--fg); font-weight: 600; border-color: var(--accent-2); }
.pms-dwell-step.dealer { border-style: dashed; }
.pms-dwell-arrow { opacity: 0.6; }

/* Specialist picker inside the admin queue grid. */
.pma-specialists summary { cursor: pointer; font-size: 0.82rem; white-space: nowrap; }
.pma-specialist-list { display: flex; flex-direction: column; gap: 0.2rem; max-height: 12rem; overflow-y: auto; padding: 0.4rem 0.2rem; }

/* PMS ops dashboard — per-queue pressure gauges + workload + dead-time split. */
.pms-ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.8rem; }
.pms-gauge { border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.pms-gauge-band { font-weight: 700; font-size: 0.9rem; }
.pms-gauge-easy .pms-gauge-band { color: #3fb27f; }
.pms-gauge-busy .pms-gauge-band { color: #b3d9f2; }
.pms-gauge-pressure .pms-gauge-band { color: #f0b65a; }
.pms-gauge-out .pms-gauge-band { color: #e5484d; }
.pms-gauge-severe .pms-gauge-band { color: #e5484d; text-decoration: underline; }
.pms-gauge-meta { font-size: 0.8rem; color: var(--muted); display: flex; gap: 0.7rem; flex-wrap: wrap; }
.pms-deadtime-bar { display: flex; height: 0.65rem; border-radius: 0.35rem; overflow: hidden; margin-top: 0.3rem; }
.pms-dt-system { background: #b3d9f2; }
.pms-dt-wait { background: #f0b65a; }
.pms-dt-work { background: #3fb27f; }

/* Closed/declined/cancelled application — quiet end-state panel on the form page. */
.app-ended-panel { display: flex; gap: 0.8rem; align-items: flex-start; }
.app-ended-panel .app-ended-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%; flex: 0 0 auto;
    border: 1px solid var(--border); color: var(--accent-2); font-size: 0.95rem;
}
.app-ended-panel p.sm { margin: 0.3rem 0 0; font-size: 0.85rem; }

/* ---- /profile (self-service user page) ---- */
.pf-role-chip {
    display: inline-block; margin-left: 0.45rem; padding: 0.08rem 0.5rem;
    border: 1px solid var(--border); border-radius: 4px;
    font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.pf-usage-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.pf-usage-tile {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.7rem 1rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: #161616; min-width: 180px;
}
.pf-usage-label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pf-usage-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- left sidenav (hamburger rail) --------------------------------------------------------
   .app-body is the row below the topbar: sidenav + main.shell. The nav is in normal flow on
   desktop (rail ↔ expanded via flex-basis, cookie-persisted); on narrow screens it leaves the
   flow and the open state is a fixed overlay above a scrim. The scrim is a SIBLING of the nav,
   not a child — the nav animates with transform, and position:fixed inside a transformed
   element resolves against that element, not the viewport. */
.app-body { flex: 1; min-height: 0; display: flex; }

.nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; margin: 0 -0.25rem 0 -0.35rem;
    background: none; border: 1px solid transparent; border-radius: 3px;
    color: var(--fg); opacity: 0.85; cursor: pointer;
}
.nav-burger:hover { opacity: 1; background: rgba(127, 127, 127, 0.14); }

.sidenav {
    flex: 0 0 var(--sidenav-rail); width: var(--sidenav-rail); min-height: 0;
    background: #141414; border-right: 1px solid #303030;
    overflow: hidden; transition: flex-basis 200ms ease, width 200ms ease;
}
.app-shell--nav-open .sidenav { flex-basis: var(--sidenav-open); width: var(--sidenav-open); }
.sidenav-inner {
    height: 100%; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; gap: 0.15rem; padding: 0.65rem 0.45rem;
}
.app-shell--nav-open .sidenav-inner { padding: 0.75rem 0.65rem; }

.sidenav-item-form { margin: 0; display: block; }
.sidenav-item {
    position: relative; display: flex; align-items: center; gap: 0.65rem; width: 100%;
    padding: 0.52rem 0.6rem; border: 0; border-radius: 4px;
    background: none; color: var(--fg); opacity: 0.78; cursor: pointer;
    font: inherit; font-size: 0.87rem; text-align: left; text-decoration: none; white-space: nowrap;
}
.sidenav-item:hover { opacity: 1; background: rgba(127, 127, 127, 0.12); }
.sidenav-item.on { opacity: 1; background: rgba(51, 149, 224, 0.14); }
.sidenav-item.on::before {
    content: ""; position: absolute; left: -0.45rem; top: 22%; bottom: 22%;
    width: 3px; border-radius: 2px; background: var(--accent-2, #3395e0);
}
.sidenav-ico { display: inline-flex; justify-content: center; flex: 0 0 auto; width: 1.5rem; font-size: 1.3rem; line-height: 1; }
.sidenav-label { display: none; overflow: hidden; text-overflow: ellipsis; }
.app-shell--nav-open .sidenav-label { display: block; }

.sidenav-divider { flex: 0 0 1px; height: 1px; background: #303030; margin: 0.5rem 0.3rem; }
.sidenav-group-label { display: none; }
.app-shell--nav-open .sidenav-group-label {
    display: block; padding: 0.4rem 0.6rem 0.15rem; color: var(--muted);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}

/* The control-plane's "no workspaces" note (SideNav.razor) — expanded only, same rule as the
   group label it replaces: collapsed mode is icon-only, and there is no icon for "nothing here". */
.sidenav-cp-note { display: none; }
.app-shell--nav-open .sidenav-cp-note {
    display: block; padding: 0.2rem 0.7rem 0.6rem; color: var(--muted);
    font-size: 0.76rem; line-height: 1.4;
}

/* Quick links — expanded only, hung off a faint tree line under their section header. */
.sidenav-sub { display: none; }
.app-shell--nav-open .sidenav-sub {
    display: flex; flex-direction: column; gap: 1px;
    margin: 0.1rem 0 0.35rem 1.35rem; padding-left: 0.7rem; border-left: 1px solid #303030;
}
.sidenav-sublink-form { margin: 0; display: block; }
.sidenav-sublink {
    display: block; width: 100%; box-sizing: border-box;
    color: var(--fg); opacity: 0.6; text-decoration: none; font: inherit; font-size: 0.8rem;
    padding: 0.28rem 0.5rem; border: 0; border-radius: 7px;
    background: none; text-align: left; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidenav-sublink:hover { opacity: 1; background: rgba(127, 127, 127, 0.1); }
.sidenav-sublink.on { opacity: 1; color: var(--accent-2, #b3d9f2); background: rgba(51, 149, 224, 0.1); }

.sidenav-scrim { display: none; }

/* Peek mode — viewing an earlier journey step; locked once the deal is submitted/decided. */
.peek-banner {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    margin: 0.5rem 0 0.75rem; padding: 0.6rem 0.8rem;
    border: 1px solid rgba(51, 149, 224, 0.35); border-radius: 4px;
    background: rgba(51, 149, 224, 0.08); font-size: 0.88rem;
}
.peek-banner-locked { border-color: rgba(255, 184, 77, 0.45); background: rgba(255, 184, 77, 0.08); }
.peek-ico { font-size: 1.15rem; }
.peek-text { flex: 1 1 340px; }
.peek-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.peek-fieldset:disabled { opacity: 0.78; }

/* Re-quote confirmation modal + arrival banner — loud on purpose. */
.requote-modal { max-width: 620px; }
.requote-body ul { margin: 0.5rem 0 0.75rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.requote-banner { border-color: rgba(255, 184, 77, 0.5); background: rgba(255, 184, 77, 0.09); }
.lp-btn.warn {
    background: rgba(255, 184, 77, 0.16); border: 1px solid rgba(255, 184, 77, 0.55); color: #ffd166;
}
.lp-btn.warn:hover { background: rgba(255, 184, 77, 0.26); }

/* Advance-in-progress pill in the Move-forward strip — narrates each stage of the transition. */
.phase-working {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.8rem; border-radius: 4px; font-size: 0.86rem;
    background: rgba(51, 149, 224, 0.12); color: var(--accent-2, #b3d9f2);
    border: 1px solid rgba(51, 149, 224, 0.35);
}
/* "Awaiting signature" notice next to the locked Activate button — amber, not an error. */
.phase-await-sign {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.35rem 0.8rem; border-radius: 4px; font-size: 0.84rem;
    background: rgba(240, 190, 90, 0.10); color: #e8c884;
    border: 1px solid rgba(240, 190, 90, 0.35);
}
.phase-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(51, 149, 224, 0.3); border-top-color: var(--accent-2, #b3d9f2);
    animation: phase-spin 0.8s linear infinite;
}
@keyframes phase-spin { to { transform: rotate(360deg); } }

/* /admin/translations — gap chips, category chips, English reference, AI review panel */
.tr-missing-chip {
    display: inline-block; margin-left: 0.45rem; padding: 0.05rem 0.5rem; border-radius: 4px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
    background: rgba(255, 184, 77, 0.15); color: #f0b65a; border: 1px solid rgba(255, 184, 77, 0.4);
}
.tr-data-chip {
    display: inline-block; margin-left: 0.45rem; padding: 0.05rem 0.5rem; border-radius: 4px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
    background: rgba(255, 110, 110, 0.13); color: #ff9b86; border: 1px solid rgba(255, 110, 110, 0.4);
}
.tr-cat-chip {
    display: inline-block; padding: 0.05rem 0.55rem; border-radius: 4px; font-size: 0.72rem;
    background: rgba(51, 149, 224, 0.1); color: var(--accent-2, #b3d9f2); border: 1px solid rgba(51, 149, 224, 0.25);
    white-space: nowrap;
}
.tr-en-ref {
    margin: 0.6rem 0 0; padding: 0.45rem 0.6rem; border-left: 3px solid var(--accent-2, #3395e0);
    background: rgba(51, 149, 224, 0.07); border-radius: 0 8px 8px 0; font-size: 0.88rem;
}
.tr-ai-review { margin-bottom: 1rem; }
.tr-ai-review table { width: 100%; }

/* Prompt transparency + per-batch flight recorder (AI translate). Monospace blocks that scroll
   inside their own box so a long reply never widens the page. */
.tr-prompt-preview, .tr-diag { margin: 0.75rem 0 1rem; }
.tr-diag-lbl {
    display: block; margin: 0.7rem 0 0.25rem; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.tr-diag-pre {
    margin: 0; padding: 0.55rem 0.7rem; max-height: 22rem; overflow: auto;
    background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 3px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8rem;
    line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--text, #e8ecf1);
}
.tr-diag-batch {
    margin: 0.6rem 0; padding: 0.6rem 0.75rem; border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.02);
}
.tr-diag-batch.bad { border-color: rgba(255, 120, 100, 0.45); background: rgba(255, 90, 70, 0.06); }
.tr-diag-batch.ok { border-color: rgba(90, 200, 140, 0.35); }
.tr-diag-head { font-size: 0.86rem; margin-bottom: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.4rem 0.65rem; align-items: baseline; }
.tr-diag-err { color: #ff9b86; font-weight: 600; }
.tr-diag-good { color: #6ddc9f; font-weight: 600; }
.tr-diag-batch details { margin-top: 0.35rem; }
.tr-diag-batch summary { cursor: pointer; }

/* Site-wide breadcrumb strip — slim, muted, sits between the topbar and the page.
   Class is nav-crumbs, NOT site-crumbs: `.site-crumbs` already belongs to the light-themed
   journey-preview mockup (its later rule painted these near-white). Grep before naming CSS. */
.nav-crumbs {
    align-self: stretch; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
    margin: -1.1rem 0 0.35rem; font-size: 0.88rem; color: var(--muted);
}
.nav-crumbs a { color: var(--muted); text-decoration: none; }
.nav-crumbs a:hover { color: var(--fg); text-decoration: underline; }
.nav-crumbs-sep { opacity: 0.55; }
.nav-crumbs-here { color: var(--fg); opacity: 0.85; }

/* Resumed-draft banner — quote-start reused an existing empty draft; say so + offer a fresh start. */
.resume-banner {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    margin: 0.35rem 0 0.75rem; padding: 0.6rem 0.8rem;
    border: 1px solid rgba(51, 149, 224, 0.35); border-radius: 4px;
    background: rgba(51, 149, 224, 0.08); font-size: 0.86rem;
}
.resume-banner-ico { font-size: 1.15rem; color: var(--accent-2, #b3d9f2); }
.resume-banner-text { flex: 1 1 320px; }

/* Lead Source chip next to the application title — Walk In vs an inbound interface origin. */
.lead-source-chip {
    display: inline-block; vertical-align: middle; margin-left: 0.6rem;
    padding: 0.14rem 0.6rem; border: 1px solid rgba(51, 149, 224, 0.35); border-radius: 4px;
    background: rgba(51, 149, 224, 0.1); color: var(--accent-2, #b3d9f2);
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
}

/* The application number — the stable, quotable id shown prominently on the app header + work-list. */
.app-number-badge {
    display: inline-block; margin-bottom: 0.35rem;
    padding: 0.2rem 0.7rem; border: 1px solid var(--border); border-radius: 3px;
    background: #1c1c1c; color: var(--accent-2, #b3d9f2);
    font-family: var(--mono); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em;
}
/* Application № + Contract № shown side by side once a contract exists. */
.deal-id-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.contract-number-badge { color: var(--ok, #5dd39e); }
.app-number-link { font-family: var(--mono); font-weight: 600; letter-spacing: 0.02em; }
.app-ref-sub { font-size: 0.74rem; color: var(--muted); margin-top: 0.1rem; }
.copy-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.3rem; height: 1.3rem; margin-left: -0.25rem;
    border: none; background: transparent; color: var(--muted);
    cursor: pointer; border-radius: 4px; font-size: 0.68rem; line-height: 1;
    opacity: 0.45;
}
.copy-icon-btn:hover { background: var(--border); color: var(--fg); opacity: 1; }

/* Narrow screens: no rail — the open state slides in as an overlay over a scrim. */
@media (max-width: 900px) {
    .sidenav {
        position: fixed; z-index: 60; left: 0; bottom: 0;
        top: calc(var(--banner-offset) + var(--topbar-h));
        width: min(80vw, 17rem); flex: 0 0 auto;
        transform: translateX(-100%); transition: transform 200ms ease;
        box-shadow: 12px 0 34px rgba(0, 0, 0, 0.45);
    }
    .app-shell--nav-open .sidenav { transform: translateX(0); width: min(80vw, 17rem); }
    /* Overlay always renders the expanded content (labels, groups, links). */
    .sidenav .sidenav-label, .sidenav .sidenav-group-label { display: block; }
    .sidenav .sidenav-sub { display: flex; flex-direction: column; gap: 1px;
        margin: 0.1rem 0 0.35rem 1.35rem; padding-left: 0.7rem; border-left: 1px solid #303030; }
    .sidenav .sidenav-inner { padding: 0.75rem 0.65rem; }
    .app-shell--nav-open .sidenav-scrim {
        display: block; position: fixed; inset: 0; z-index: 55; background: rgba(4, 6, 12, 0.5);
    }
}

/* Topbar market switcher — only visible to Host-scope users. */
.market-switcher-form { display: inline-flex; align-items: center; gap: 0.35rem; }
.market-switcher-label { opacity: 0.65; font-size: 0.95rem; }
.market-switcher-select {
    font: inherit; font-size: 0.82rem; padding: 0.18rem 0.5rem; line-height: 1.2;
    background: #242424; color: var(--fg); border: 1px solid #3a3a3a; border-radius: 2px;
    cursor: pointer;
}
.market-switcher-select:hover { border-color: #3d4456; }
.market-switcher-select option { background: #242424; color: var(--fg); }

/* ---- landing ---- */
.landing { width: min(820px, 100%); margin: 0 auto; padding: 2rem 1.5rem; text-align: center; }
.landing-hero h1 { font-size: 3.5rem; margin: 0; }
.landing .tagline { font-size: 1.4rem; opacity: 0.9; margin: 0.25rem 0 1rem; }
.landing .blurb { opacity: 0.8; max-width: 600px; margin: 0 auto 1.75rem; line-height: 1.6; }
.cta { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.big-button.ghost, .big-button.google {
    background: transparent; border: 1px solid var(--accent); color: var(--fg); text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.landing-steps { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }
.step { background: #1f1f1f; border: 1px solid #373737; border-radius: 6px; padding: 1.25rem; width: 200px; }
.step h3 { margin: 0.5rem 0 0.25rem; }
.step p { opacity: 0.7; margin: 0; font-size: 0.9rem; }

/* ---- auth pages ---- */
.auth { width: min(380px, 100%); margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 0.5rem; }
.auth .brand { color: var(--fg); text-decoration: none; font-weight: 800; font-size: 2.4rem; letter-spacing: -0.5px; margin-bottom: 1rem; display: block; }

/* modern split sign-in / register: marketing pitch beside a form card */
.auth-split { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; max-width: 940px; margin: 2.5rem auto; min-height: 56vh; }
.auth-pitch { text-align: left; }
/* Weight 400 on purpose — the wordmark's contrast IS the tinted "ai" pair (.brand-ai). */
.auth-pitch .brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--fg); text-decoration: none; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin-bottom: 1.6rem; }
.auth-sigil { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(51, 149, 224, 0.5); border-radius: 50%; color: var(--accent-2); font-size: 0.9rem; }
.auth-pitch h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1rem; font-weight: 700; }
.auth-pitch h2 em { font-style: normal; color: var(--accent-2); }
.auth-pitch > p { color: var(--muted); font-size: 1.05rem; max-width: 42ch; margin: 0 0 1.7rem; line-height: 1.6; }
.auth-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.auth-points li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--fg); font-size: 0.95rem; }
.auth-points li span { color: #f2b88a; }
.auth-split .auth { width: 100%; max-width: 400px; margin: 0; text-align: left; background: #181818; border: 1px solid var(--border); border-radius: 18px; padding: 2rem; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85); gap: 0.6rem; }
.auth-split .auth h1 { margin: 0; font-size: 1.6rem; }
.auth-sub { color: var(--muted); margin: 0 0 0.6rem; font-size: 0.92rem; }
@media (max-width: 820px) {
    .auth-split { grid-template-columns: 1fr; gap: 2rem; max-width: 440px; min-height: 0; }
    .auth-pitch { text-align: center; }
    .auth-pitch .brand { font-size: 1.6rem; }
    .auth-pitch > p { margin-inline: auto; }
    .auth-points { max-width: 340px; margin: 0 auto; }
    .auth-split .auth { margin: 0 auto; }
}
.auth h1 { margin: 0 0 0.5rem; }
.auth label { text-align: left; font-size: 0.85rem; opacity: 0.8; margin-top: 0.5rem; }
/* label on the left, field on the right */
.auth-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 0.7rem; margin-top: 0.5rem; }
.auth-row label { margin: 0; }
.auth-input {
    width: 100%; padding: 0.6rem 0.7rem; border-radius: 4px; border: 1px solid #373737;
    background: #1f1f1f; color: var(--fg); font: inherit; box-sizing: border-box;
}
.auth .big-button { width: 100%; margin-top: 0.75rem; justify-content: center; }
.auth .google { margin-top: 0.5rem; }

/* ---- admin ---- */
.admin-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
@media (max-width: 760px) { .admin-cards { grid-template-columns: 1fr; } }
.admin .panel { text-align: left; }
/* admin dashboard tiles */
/* The admin hub uses a wider container so more tiles fit per row on a big screen.
   Needs `.page.admin-hub` to outrank `.page`'s own width (defined later in the file).
   Full-width like `.page.wide` — the hub reads like the rest of the site's work pages. */
.page.admin-hub { width: 100%; max-width: 100%; box-sizing: border-box; text-align: left; }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.admin-filter { max-width: 420px; margin-top: 1rem; }
/* Platform + per-workspace tab strip on the hub — single line, scrolls sideways rather than wraps */
.admin-tabs {
    display: flex; gap: 0.15rem; margin-top: 1.2rem; border-bottom: 1px solid var(--border);
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
}
.admin-tab {
    background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
    color: var(--muted); font: inherit; font-size: 0.88rem; padding: 0.5rem 0.8rem 0.55rem;
    border-radius: 3px 8px 0 0; display: inline-flex; align-items: center; gap: 0.4rem;
    margin-bottom: -1px; white-space: nowrap; flex: none;
}
.admin-tab:hover { color: var(--fg); background: rgba(140,150,170,0.08); }
.admin-tab.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.admin-tab-ico { display: inline-flex; align-items: center; font-size: 1.05em; }
.admin-ws-open {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-top: 1.4rem; padding: 0.65rem 1rem; border-radius: 4px; font-size: 0.9rem;
    border: 1px solid rgba(0,120,214,0.35); background: rgba(0,120,214,0.07);
}
.admin-ws-open a { font-weight: 600; }
/* recently-used: a slim always-visible strip under the tabs (every tab, not just Platform) */
.admin-recent-strip { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.8rem; }
.admin-recent-label {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
    border: 1px dashed var(--border); border-radius: 4px; padding: 0.14rem 0.6rem;
}
.admin-recent-chip {
    font-size: 0.76rem; color: var(--fg); text-decoration: none; background: var(--panel-2, #1e1e1e);
    border: 1px solid var(--border); border-radius: 4px; padding: 0.18rem 0.7rem; white-space: nowrap;
}
.admin-recent-chip:hover { border-color: var(--accent); text-decoration: none; }
.admin-group { margin-top: 2.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(140,150,170,0.12); }
.admin-group:first-of-type { margin-top: 1.5rem; border-top: none; padding-top: 0; }
.admin-recently-used { margin-top: 1.5rem; }
.admin-group-desc { margin: 0.15rem 0 0; font-size: 0.86rem; color: var(--muted); }
.admin-group-h {
    margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted, #929292);
    padding-bottom: 0.5rem; border-bottom: 1px solid rgba(140, 150, 170, 0.18);
}
.admin-group .admin-tiles { margin-top: 0.9rem; }
.admin-tile {
    display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; text-align: left;
    background: #1f1f1f; border: 1px solid #373737; border-radius: 6px; padding: 1.3rem; color: var(--fg);
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.admin-tile:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32); }
.at-ico { display: inline-flex; align-items: center; width: 30px; height: 30px; color: var(--accent); }
.at-ico svg { width: 28px; height: 28px; }
.at-title { font-weight: 700; font-size: 1.05rem; }
.at-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.version-line { margin-top: 1.5rem; font-size: 0.8rem; }

/* usage & cost report */
.cost-filters {
    display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: end; margin-bottom: 1.2rem;
    padding: 0.9rem 1rem; background: #181818; border: 1px solid var(--border); border-radius: 5px;
}
.cost-filters .fld { gap: 0.3rem; }
.cost-filters input[type=date] {
    background: #fff; color: #181818; border: 1px solid #d8d3e8; border-radius: 7px;
    padding: 0.35rem 0.5rem; font: inherit; font-size: 0.85rem;
}
.cost-filter-actions { display: flex; gap: 0.4rem; }
.cost-display { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.cost-display .fld.inline { flex-direction: row; align-items: center; gap: 0.55rem; }
.cost-display .fld.inline > span { margin: 0; }
.cost-totals { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.cost-tot { background: #181818; border: 1px solid var(--border); border-radius: 5px; padding: 0.9rem 1.2rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 150px; }
.cost-tot span { font-size: 0.78rem; color: var(--muted); }
.cost-tot strong { font-size: 1.35rem; }
.cost-tot.profit strong { color: #4ade80; }
.cost-tot.rating strong { color: #f5b301; }
.cost-rating-line { margin: -0.6rem 0 1.3rem; font-size: 0.9rem; }
.cost-sub td { background: rgba(255, 255, 255, 0.02); color: var(--muted); font-size: 0.9rem; }

/* wide admin pages (SQL console, domain model) use the full content width */
.page.wide { width: 100%; max-width: 100%; text-align: left; box-sizing: border-box; }

/* SQL console results — a database-style grid that scrolls inside its own panel
   (never widening the page itself) */
/* .panel.sql-results (not just .sql-results): the .panel padding rule is defined later in this
   file and would win otherwise — its top padding becomes a band the rows scroll through ABOVE
   the sticky header. The results grid must sit flush against the panel edges. */
.panel.sql-results, .sql-results { overflow: auto; max-width: 100%; max-height: 62vh; padding: 0; margin-top: 0.7rem; }
/* The legacy .records margin-top would leave a 1.5rem gap above the table INSIDE the scroll
   panel — rows peeked through it while the sticky header pinned below. Flush the table to the
   panel top, and give the pinned header its own edge lines (collapsed borders scroll away). */
.sql-results .records { margin: 0; }
/* This table scrolls INSIDE .sql-results (overflow:auto), not the page — so its sticky header pins
   to that local scrollport (top:0), not the topbar. Reset the -2rem page-scroller offset. */
.sql-results .datagrid th { top: 0; box-shadow: inset 0 1px 0 var(--border), inset 0 -1px 0 var(--border); border-top: none; border-bottom: none; }
.datagrid { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.78rem; }
.datagrid th, .datagrid td {
    color: var(--fg);
    border: 1px solid var(--border); padding: 0.34rem 0.7rem; white-space: nowrap;
    max-width: 460px; overflow: hidden; text-overflow: ellipsis;
}
/* top:-2rem, NOT 0. These tables scroll with the PAGE (.shell), which carries 2rem top padding;
   sticky pins to the scrollport's padding edge, so top:0 locks the header 2rem BELOW the topbar
   with rows sliding through the gap above it. -2rem cancels that padding so the header locks flush
   under the topbar (same recipe as .dbv-pinbar / .page-actionbar). Tables that scroll in their OWN
   overflow container reset this back to 0 — see .sql-results .datagrid th. */
.datagrid th { background: #222222; color: var(--fg); position: sticky; top: -2rem; z-index: 1; text-align: left; font-weight: 600; }
.datagrid tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.022); }
.datagrid tbody tr:hover td { background: rgba(120, 150, 255, 0.07); }
/* The legacy .records styles further down in this file set color: #222222 (a Conjure
   light-theme leftover). When a table is `class="records datagrid"` source-order makes
   that win, painting cells in near-invisible dark purple on the dark theme. Bump the
   specificity here to make the dark-friendly color stick. */
.records.datagrid th, .records.datagrid td { color: var(--fg); }
.records.datagrid td.muted, .records.datagrid td .muted, .records.datagrid .muted { color: var(--muted); }
/* User-facing list pages (Customers / Applications / Cases / Contracts / Assets / Reports
   / search results) read better with the system font + a slightly larger size; the .datagrid
   default keeps JetBrains Mono 0.78rem for the SQL console + Domain viewer where it makes
   sense. */
.records.datagrid {
    font-family: var(--font-sans);
    font-size: 0.88rem;
}
.records.datagrid th, .records.datagrid td {
    padding: 0.5rem 0.8rem;
    white-space: normal;
    /* Kill the Conjure light-theme leftover: the legacy `.records th,td` sets a near-white #ece8f5
       bottom border, which only got overridden to a dark line on `.admin` pages. On a plain content
       page (e.g. Contract Management → All contracts) it painted a bright line under the header that
       looked nothing like the same datagrid on admin / Vehicle Sales. Pin every border to the theme
       colour so the table looks identical everywhere. */
    border-color: var(--border);
}
.records.datagrid code {
    background: rgba(255,255,255,0.05);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.82rem;
}
.datagrid td.cell-null { color: #5a5470; font-style: italic; }
.datagrid .rownum { color: var(--muted); text-align: right; width: 1%; white-space: nowrap; user-select: none; position: sticky; left: 0; background: #181818; }
.datagrid th.rownum { z-index: 2; background: #222222; }
.admin .code-area { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 0.82rem; padding: 0.65rem 0.8rem; line-height: 1.5; }

/* SQL console v2 — docked schema | editor+results | history/saved rail */
/* History/Saved moved into a right SidePanel — the grid keeps every pixel for the editor + data. */
.sql-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; margin-top: 0.6rem; }
/* `auto` (not a fixed track) so the schema column takes its width from the aside itself — which is
   natively resizable below. Drag the grip in its bottom-right corner to widen/narrow the tree. */
.sql-shell-schema { grid-template-columns: auto minmax(0, 1fr); }
.sql-main { min-width: 0; }
/* PROPERLY docked: sticky against the viewport below the FIXED topbar, sized to the space between
   topbar and the app's bottom status bar (~1.6rem) with a little breathing room each side — so the
   whole tree is reachable without the page scrolled, and it never slides under the chrome. Width
   comes from --sql-schema-w (the .sql-schema-resize handle + aeon.initPanelResize), the same
   restore/persist pattern as every other docked panel in the app — not the browser's native
   resize:horizontal corner grip, which forgot the width on every reload. */
.sql-schema { padding: 0.7rem;
  position: sticky; top: calc(var(--topbar-h, 3rem) + 0.75rem); align-self: start;
  height: calc(100vh - var(--topbar-h, 3rem) - 4.4rem); max-height: none; overflow: auto;
  width: var(--sql-schema-w, 340px); min-width: 210px; max-width: 640px; }
.sql-schema-search { width: 100%; margin: 0.4rem 0 0.5rem; }
/* Drag handle for the explorer's width — vertical bar, col-resize, same grip language as the
   editor's .sqlide-resize (row-resize) and the shared .side-panel-resize/.ai-asst-resize. */
.sql-schema-resize {
    width: 10px; cursor: col-resize; flex: 0 0 auto; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    border-right: 1px solid var(--border);
}
.sql-schema-resize::before { content: ""; width: 4px; height: 34px; border-radius: 3px; background: var(--border); }
.sql-schema-resize:hover { background: rgba(51, 149, 224, 0.12); }
.sql-schema-resize:hover::before, .sql-schema-resize:active::before { background: var(--accent); }
.sql-savebar { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.4rem; }
.sql-savebar input { max-width: 280px; }
.sql-ai { padding: 0.7rem 0.9rem; margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.45rem; }
.sql-ai-row { display: flex; gap: 0.5rem; align-items: flex-start; }
.sql-ai-prompt { flex: 1; resize: vertical; }
/* Threads the results grid(s) visually back to the editor they came from — otherwise the panel
   below reads as an unrelated block rather than "this is what that statement produced". */
.sql-connector { width: 2px; height: 0.9rem; margin: 0 auto; background: linear-gradient(to bottom, #4ade80, color-mix(in srgb, #4ade80 15%, transparent)); }
.sql-results-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 0.7rem; gap: 0.6rem; }
.sql-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sql-th:hover { text-decoration: underline; }
.sql-cell { cursor: copy; }

/* Inline row editing: Edit → (Save → Commit | Rollback) | Cancel — see AdminSql.razor. */
.sql-row-actions-h, .sql-row-actions { width: 1%; white-space: nowrap; padding-right: 0.4rem; }
.sql-row-btn {
    background: none; border: 1px solid var(--border); border-radius: 2px; color: var(--muted);
    cursor: pointer; font-size: 0.76rem; padding: 0.1rem 0.4rem; margin-right: 0.2rem;
}
.sql-row-btn:hover { color: var(--fg); border-color: var(--muted); }
.sql-row-btn.ok { color: #4ade80; border-color: color-mix(in srgb, #4ade80 45%, var(--border)); }
.sql-row-btn.ok:hover { background: color-mix(in srgb, #4ade80 14%, transparent); }
.sql-row-editing { background: color-mix(in srgb, #4ade80 6%, transparent); }
.sql-cell-edit { padding: 0.2rem 0.35rem; }
.sql-edit-input {
    width: 100%; min-width: 6rem; background: #131313; color: var(--fg);
    border: 1px solid color-mix(in srgb, #4ade80 45%, var(--border)); border-radius: 2px;
    padding: 0.15rem 0.4rem; font-family: var(--mono); font-size: 0.82rem;
}
.sql-edit-input:focus { outline: none; border-color: #4ade80; }
.sql-cell-modified { background: color-mix(in srgb, #4ade80 12%, transparent); font-weight: 600; }
.sql-cell-locked { color: var(--muted); cursor: not-allowed; }
.sql-row-error { padding: 0.35rem 0.6rem !important; text-align: left; background: rgba(248,113,113,0.08); }
.sql-rail-tabs { display: flex; gap: 0.3rem; margin-bottom: 0.5rem; }
.sql-rail-tab { background: none; border: 1px solid var(--border); border-radius: 3px; padding: 0.25rem 0.7rem; color: var(--muted); cursor: pointer; font-size: 0.8rem; }
.sql-rail-tab.on { color: var(--fg); border-color: var(--accent, #3395e0); }
.sql-saved-row { display: flex; align-items: flex-start; gap: 0.2rem; }
.sql-saved-row .sql-history-item { flex: 1; }
.sql-saved-del { flex: 0 0 auto; opacity: 0.6; }
.sql-saved-del:hover { opacity: 1; color: #ff8f8f; }
/* Was scoped under the now-removed .sql-actions wrapper — the toolbar moved to .sqlide-toolbar
   .msg since, which left this unreachable and the "Auto-limited to N rows" text unstyled. */
.auto-limit { font-size: 0.78rem; color: #f0b352; }

/* schema reference panel (slides in from the right; click to copy names) */
.schema-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 88vw; z-index: 50;
    background: #181818; border-left: 1px solid var(--border); box-shadow: -12px 0 30px rgba(0, 0, 0, 0.4);
    padding: 1rem; overflow-y: auto; animation: schemaIn 0.18s ease both;
}
@keyframes schemaIn { from { transform: translateX(100%); } to { transform: none; } }
.schema-head { display: flex; justify-content: space-between; align-items: center; }
.schema-hint { font-size: 0.75rem; margin: 0.2rem 0 0.8rem; }
.schema-list { display: flex; flex-direction: column; gap: 0.1rem; }
.schema-trow { display: flex; align-items: center; gap: 0.35rem; }
.schema-exp { border: 0; background: none; color: var(--muted); cursor: pointer; width: 1.1rem; padding: 0; }
.schema-tname {
    border: 0; background: none; color: var(--fg); cursor: pointer; font-family: var(--mono);
    font-size: 0.82rem; padding: 0.25rem 0.3rem; border-radius: 2px; text-align: left; flex: 1;
}
.schema-tname:hover { background: rgba(255, 255, 255, 0.06); color: var(--accent-2); }
.copied-tag { font-size: 0.68rem; color: #4ade80; }
.schema-cols { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.2rem 0 0.5rem 1.4rem; }
.schema-col {
    border: 1px solid var(--border); background: #1f1f1f; color: var(--muted); cursor: pointer;
    font-family: var(--mono); font-size: 0.72rem; padding: 0.12rem 0.45rem; border-radius: 2px;
}
.schema-col:hover { color: var(--fg); border-color: var(--accent); }
/* Type glyph in front of a column name — the "image depicting the property type". */
.schema-col-glyph { margin-right: 0.3rem; opacity: 0.85; }

/* ===== SQL console — server-explorer tree (the ApexSQL look) ===== */
.sqlx-title { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); }
.sqlx-tree { display: flex; flex-direction: column; font-family: var(--mono); font-size: 0.9rem; }
.sqlx-node { display: flex; align-items: center; gap: 0.35rem; padding: 0.16rem 0.35rem; border-radius: 4px;
  color: var(--fg); background: none; border: 0; text-align: left; white-space: nowrap; }
.sqlx-node:hover { background: rgba(255, 255, 255, 0.06); }
.sqlx-root { font-weight: 700; cursor: default; }
.sqlx-root:hover { background: none; }
.sqlx-schema { cursor: pointer; padding-left: 1rem; color: #d8c98a; }
.sqlx-table { cursor: pointer; padding-left: 2rem; }
.sqlx-col { cursor: pointer; padding-left: 3.3rem; font-size: 0.84rem; color: var(--muted); width: 100%; }
.sqlx-col:hover { color: var(--fg); }
.sqlx-exp { width: 0.8rem; color: var(--muted); flex: 0 0 auto; }
.sqlx-ico { flex: 0 0 auto; opacity: 0.9; }
.sqlx-glyph { flex: 0 0 auto; }
.sqlx-colname { overflow: hidden; text-overflow: ellipsis; }
.sqlx-coltype { margin-left: auto; font-size: 0.74rem; padding-left: 0.6rem; }
.sqlx-count { margin-left: auto; font-size: 0.74rem; }
.sqlx-selected { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.sqlx-selected:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.sqlx-ctx { outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }

/* ===== SQL console — IDE editor (tab strip · toolbar · gutter · highlight overlay) ===== */
.sqlide { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: #131313; }
/* Scrolls rather than squeezing every tab into nothing once there are more than fit. */
.sqlide-tabs { display: flex; background: #0f0f0f; border-bottom: 1px solid var(--border); padding: 0.3rem 0.5rem 0;
  overflow-x: auto; }
.sqlide-tab { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-family: var(--mono);
  background: #0f0f0f; border: 1px solid var(--border); border-bottom: 0; border-radius: 2px 6px 0 0;
  padding: 0.3rem 0.7rem; color: var(--muted); max-width: 24rem; min-width: 7rem; overflow: hidden; white-space: nowrap;
  cursor: pointer; margin-right: 0.25rem; }
/* The TITLE truncates, not the tab. `text-overflow` belongs on the text element: on the flex
   container it clipped the trailing children instead — a long statement pushed the ✕ out of the
   tab entirely and there was no way to close it. min-width:0 is what lets a flex item shrink
   below its content width at all. */
.sqlide-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sqlide-dot, .sqlide-tab-close { flex: 0 0 auto; }
.sqlide-tab-on { background: #131313; color: var(--fg); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.sqlide-tab-close { margin-left: 0.15rem; padding: 0 0.2rem; border-radius: 4px; color: var(--muted); }
.sqlide-tab-close:hover { background: rgba(255,255,255,0.1); color: var(--fg); }
.sqlide-tab-add { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.95rem;
  padding: 0.15rem 0.5rem; border-radius: 2px 6px 0 0; }
.sqlide-tab-add:hover { color: var(--fg); background: rgba(255,255,255,0.06); }
.sqlide-dot { color: var(--accent-2); font-size: 0.6rem; }

/* ---- SQL console audit trail (History panel → Audit tab) ---- */
.sql-audit-filter { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--muted);
  margin: 0 0 0.5rem; cursor: pointer; }
.sql-audit-row { border-bottom: 1px solid var(--border); padding: 0.45rem 0 0.55rem; }
.sql-audit-row.failed { border-left: 2px solid rgba(248,113,113,0.55); padding-left: 0.5rem; }
.sql-audit-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.72rem; }
.sql-audit-tag { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-2);
  border-radius: 3px; padding: 0 0.3rem; }
.sql-audit-tag.err { border-color: rgba(248,113,113,0.5); color: #f87171; }

/* ---- "Explain with AI" table analysis panel — plain document flow, NOT the .ai-md chat bubble
   (this reads best full-width in the side panel, not clipped to a bubble's max-width). ---- */
.sql-explain-md { font-size: 1.02rem; line-height: 1.6; }
.sql-explain-md > :first-child { margin-top: 0; }
.sql-explain-md > :last-child { margin-bottom: 0; }
.sql-explain-md h1, .sql-explain-md h2, .sql-explain-md h3, .sql-explain-md h4 {
  margin: 1.1rem 0 0.45rem; font-size: 1.2rem; }
.sql-explain-md h1:first-child, .sql-explain-md h2:first-child { margin-top: 0; }
.sql-explain-md p { margin: 0 0 0.65rem; }
.sql-explain-md ul, .sql-explain-md ol { margin: 0 0 0.65rem 0; padding-left: 1.3rem; }
.sql-explain-md li { margin: 0.2rem 0; }
.sql-explain-md code { background: color-mix(in srgb, var(--fg) 8%, transparent); border-radius: 4px;
  padding: 0.05rem 0.4rem; font-size: 0.88em; font-family: var(--mono); }
.sql-explain-md pre { background: color-mix(in srgb, var(--fg) 5%, transparent); border: 1px solid var(--border);
  border-radius: 3px; padding: 0.65rem 0.8rem; overflow-x: auto; margin: 0.55rem 0; }
.sql-explain-md pre code { background: transparent; padding: 0; }
.sql-explain-md table { border-collapse: collapse; margin: 0.55rem 0; font-size: 0.96rem; }
.sql-explain-md th, .sql-explain-md td { border: 1px solid var(--border); padding: 0.28rem 0.5rem; }
.sql-explain-md strong { color: var(--fg); }

/* ---- Relationships tab: the foreign-key picture for one table (right-click → Show relationships) ---- */
.sqlrel { padding: 0.9rem 1rem 1.1rem; overflow: auto; }
.sqlrel-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.sqlrel-head .spacer { flex: 1; }
.sqlrel-head strong { font-family: var(--mono); font-size: 0.95rem; }
.sqlrel-h { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  margin: 1.1rem 0 0.4rem; font-weight: 600; }
.sqlrel-grid code { font-size: 0.78rem; }
.sqlrel-arrow { color: var(--muted); text-align: center; width: 1.5rem; }
/* Renders as a link but is a button — it re-targets the view rather than navigating. */
.sqlrel-link { background: none; border: 0; padding: 0; font: inherit; font-family: var(--mono);
  color: var(--accent-2); cursor: pointer; text-decoration: none; border-bottom: 1px solid transparent; }
.sqlrel-link:hover { border-bottom-color: currentColor; }
.sqlide-toolbar { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border); background: #151515; }
.sqlide-toolbar .msg { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sqlide-exec { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-weight: 600;
  font-size: 0.85rem; padding: 0.4rem 0.9rem; border-radius: 2px; color: #86efac;
  background: color-mix(in srgb, #22c55e 14%, transparent); border: 1px solid color-mix(in srgb, #22c55e 45%, transparent); }
.sqlide-exec:hover:not(:disabled) { background: color-mix(in srgb, #22c55e 22%, transparent); }
.sqlide-exec:disabled { opacity: 0.55; cursor: default; }
.sqlide-exec-ico { color: #4ade80; }
.sqlide-body { display: flex; height: var(--sqlide-body-h, 300px); background: #131313; }
/* Drag handle for the editor pane's height — same "always-visible grip" language as
   .side-panel-resize/.ai-asst-resize, just horizontal (row-resize) instead of vertical. */
.sqlide-resize {
    height: 10px; cursor: row-resize; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-top: 1px solid var(--border); background: #101010;
}
.sqlide-resize::before { content: ""; width: 34px; height: 4px; border-radius: 3px; background: var(--border); }
.sqlide-resize:hover { background: rgba(51, 149, 224, 0.12); }
.sqlide-resize:hover::before, .sqlide-resize:active::before { background: var(--accent); }
.sqlide-gutter { flex: 0 0 3rem; overflow: hidden; border-right: 1px solid var(--border); background: #101010;
  padding: 0.6rem 0 0.6rem 0; }
.sqlide-gutter-inner { display: flex; flex-direction: column; will-change: transform; }
.sqlide-gutter-inner span { display: block; text-align: right; padding-right: 0.6rem; color: #545454;
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.5; }
.sqlide-code { position: relative; flex: 1; overflow: hidden; }
.sqlide-hl, .sqlide-input {
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.5; tab-size: 4; white-space: pre;
  padding: 0.6rem 0.8rem; margin: 0; border: 0;
}
.sqlide-hl { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; color: #d4d4d4;
  pointer-events: none; will-change: transform; z-index: 1; }
.sqlide-input { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; outline: none;
  background: transparent; color: transparent; caret-color: #e8eaf0; overflow: auto; z-index: 2; }
.sqlide-input::placeholder { color: #535353; }
.sqlide-input::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
/* Syntax colours — the familiar dark-IDE palette. */
.sq-kw  { color: #3395e0; }
.sq-str { color: #ce9178; }
.sq-num { color: #b5cea8; }
.sq-cmt { color: #6a9955; font-style: italic; }
.sq-id  { color: #b3d9f2; }
.sq-ph  { color: #e8946a; font-weight: 600; }   /* <placeholder> tokens from scripted statements */
/* Highlight the row whose context menu is open, so the menu's target is unambiguous. */
.schema-trow-ctx { background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 2px; }
.ctx-menu-head { padding: 0.3rem 0.6rem 0.4rem; font-family: var(--mono); font-size: 0.72rem; color: var(--muted);
  border-bottom: 1px solid var(--border); margin-bottom: 0.25rem; }
.ctx-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--fg);
  cursor: pointer; font-size: 0.82rem; padding: 0.35rem 0.6rem; border-radius: 2px; }
.ctx-item:hover { background: rgba(255,255,255,0.07); color: var(--accent-2); }
.ctx-sep { height: 1px; background: var(--border); margin: 0.25rem 0; }
/* Run-shortcut badge — makes the keyboard shortcut discoverable on the button itself. */
.sql-kbd { margin-left: 0.4rem; font-family: var(--mono); font-size: 0.68rem; opacity: 0.85;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 4px; padding: 0.02rem 0.28rem; }
.sql-result-no { color: var(--accent-2); }
/* Database health panel */
.dbh-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.7rem; }
.dbh-tile { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.7rem; border-radius: 3px;
  background: #181818; border: 1px solid var(--border); }
.dbh-tile strong { font-size: 1.05rem; }
.dbh-unused td { color: #e0a86b; }
.dbh-maint { flex-wrap: wrap; }

.dbh-elev { margin: 0.6rem 0; border: 1px solid var(--border); border-radius: 3px; padding: 0.45rem 0.7rem; }
.dbh-elev summary { cursor: pointer; font-size: 0.85rem; }
.dbh-elev-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.4rem; }
.dbh-elev-row .auth-input { max-width: 14rem; }
.dbh-rowactions { white-space: nowrap; }
.dbh-rowactions .toplink { padding: 0 0.25rem; }
.dbh-rowactions .toplink:disabled { opacity: 0.4; cursor: default; }
.dbh-q { font-family: var(--mono); font-size: 0.72rem; max-width: 22rem; }
.sql-history { background: #181818; border: 1px solid var(--border); border-radius: 5px; padding: 0.7rem; max-height: 520px; overflow-y: auto; }
.sql-history h3 { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--muted); }
.sql-history-item {
    display: block; width: 100%; text-align: left; border: 0; background: #1f1f1f; color: var(--fg);
    border-radius: 3px; padding: 0.45rem 0.55rem; margin-bottom: 0.4rem; cursor: pointer;
    font-family: var(--mono); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sql-history-item:hover { background: #292929; }
.sql-history .empty { font-size: 0.78rem; color: var(--muted); }
@media (max-width: 900px) { .sql-layout { grid-template-columns: 1fr; } }

/* domain-model tabs + ER diagram */
.dm-tabs { display: inline-flex; gap: 0.4rem; margin-bottom: 1rem; }
.dm-tabs button { padding: 0.4rem 0.9rem; border-radius: 4px; border: 1px solid var(--border); background: #1f1f1f; color: var(--muted); cursor: pointer; }
.dm-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.dm-tabs .dm-board-link { align-self: center; margin-left: 0.5rem; }
.er-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.er-zoom { display: inline-flex; gap: 0.35rem; }
.er-zoom .lp-btn { min-width: 2.4rem; }
.er-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); cursor: pointer; user-select: none; }
.er-toggle input { accent-color: var(--accent); }
.dm-tools { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; }
/* The /admin/domain accordion PANEL (a div wrapping a .records table). Scoped to .panel because
   /admin/data-model reuses the .dm-table class on the <table> itself — overflow:hidden there CLIPPED
   the squeezed row-action buttons right out of view. */
.panel.dm-table { padding: 0; overflow: hidden; }
/* SDM nested tree view */
.dm-viewtoggle { display: flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0.8rem; flex-wrap: wrap; }
.dm-tree { list-style: none; margin: 0 0 1.2rem; padding: 0 0 0 0.4rem; }
.dm-tree-field { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; }
.dm-tree-field code { background: color-mix(in srgb, var(--accent) 8%, #181818); padding: 0.05rem 0.35rem; border-radius: 2px; }
.dm-tree-label { font-weight: 600; }
.dm-tree-ref { margin: 0.35rem 0; padding: 0.4rem 0 0.2rem; border-top: 1px dashed color-mix(in srgb, var(--accent) 25%, var(--border)); }
.dm-tree-refhead { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.dm-tree-refarrow { color: var(--accent); }
.dm-tree-refhead code { background: color-mix(in srgb, var(--accent) 14%, #181818); padding: 0.05rem 0.35rem; border-radius: 2px; }
.dm-tree-reflabel { font-weight: 700; }
.dm-tree-refto { color: var(--accent); font-size: 0.8rem; font-weight: 600; }
.dm-tree-nested { margin: 0.35rem 0 0.35rem 0; padding-left: 1.4rem; border-left: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.dm-tree-more { padding: 0.2rem 0; }
.dm-head {
    width: 100%; text-align: left; border: 0; background: transparent; color: var(--fg);
    cursor: pointer; font: inherit; padding: 0.85rem 1.1rem; display: flex; align-items: center; gap: 0.6rem;
}
.dm-head:hover { background: rgba(255, 255, 255, 0.03); }
.dm-head strong { font-size: 1rem; }
.dm-caret { color: var(--muted); width: 1rem; }
.dm-table .records { margin: 0; border-top: 1px solid var(--border); }
.er-diagram {
    background: #141414; border: 1px solid var(--border); border-radius: 5px;
    height: 75vh; overflow: hidden; position: relative; touch-action: none; user-select: none;
}
.er-pan { position: absolute; top: 1rem; left: 1rem; transform-origin: 0 0; }
.er-pan svg { max-width: none !important; height: auto; display: block; }

/* Diagram tab: table-picker sidebar + diagram. */
.dm-diagram-layout { display: flex; gap: 1rem; align-items: stretch; }
.dm-diagram-layout .er-diagram { flex: 1; min-width: 0; }
/* Wider by default (schema-qualified names are long) + drag the right edge to resize against the
   diagram (which is flex:1, so it gives/takes the freed space). */
.dm-table-picker { width: 360px; flex: none; height: 75vh; display: flex; flex-direction: column; padding: 0.85rem 1rem;
    overflow: hidden; resize: horizontal; min-width: 240px; max-width: 70vw; }
.dm-picker-head { display: flex; align-items: baseline; justify-content: space-between; }
.dm-picker-hint { font-size: 0.75rem; margin: 0.35rem 0 0.5rem; }
.dm-picker-actions { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.dm-picker-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.dm-picker-item { display: flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0; font-size: 0.85rem; cursor: pointer; }
.dm-picker-item input { flex: none; }
.dm-picker-li { position: relative; }
/* The table name is a button (so a click navigates to the SQL console without toggling the checkbox). */
.dm-tname { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0.1rem 0.2rem; margin: 0;
    font: inherit; font-size: 0.85rem; color: var(--link, #0078d6); cursor: pointer; border-radius: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-tname:hover { background: rgba(0, 0, 0, 0.06); text-decoration: underline; }
/* Per-table preview toggle — fixed-width so the buttons line up in a column down the list. */
.dm-peek {
    flex: none; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 1px solid var(--border); border-radius: 2px; background: rgba(140, 150, 170, 0.08);
    color: var(--fg); cursor: pointer; font-size: 0.85rem; line-height: 1;
}
.dm-peek:hover { border-color: rgba(51, 149, 224, 0.6); }
.dm-peek.on { border-color: rgba(51, 149, 224, 0.9); background: rgba(51, 149, 224, 0.16); color: #b3d9f2; }
.dm-peek-key { font-family: ui-monospace, monospace; }
/* Hover preview renders inline (in the scrolling list flow) so it's never clipped, and moving the
   cursor from the name down into it stays within the <li> — only leaving the row dismisses it. */
.dm-preview { margin: 0.15rem 0 0.45rem; padding: 0.5rem 0.55rem; }
.dm-preview-msg { margin: 0; font-size: 0.72rem; }
.dm-preview-head { font-weight: 600; font-size: 0.72rem; margin-bottom: 0.35rem; }
.dm-preview-scroll { overflow-x: auto; max-width: 100%; }
.dm-preview-scroll table.records { font-size: 0.68rem; margin: 0; }
.dm-preview-scroll th, .dm-preview-scroll td { white-space: nowrap; max-width: 9rem; overflow: hidden;
    text-overflow: ellipsis; padding: 0.15rem 0.3rem; }
.dm-preview-foot { margin-top: 0.4rem; font-size: 0.68rem; color: var(--muted, #777); }
@media (max-width: 760px) { .dm-diagram-layout { flex-direction: column; } .dm-table-picker { width: auto; height: auto; max-height: 40vh; } }

/* editor Theme panel */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 0.8rem; }
.theme-drawer .fld.inline { flex-direction: row; align-items: center; gap: 0.6rem; }
.theme-drawer input[type=color] { width: 48px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: none; cursor: pointer; }
.theme-drawer input[type=range] { accent-color: var(--accent); }
.theme-bg-img { margin-bottom: 0.8rem; }
.theme-bg-img .ip-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); max-height: 220px; }
.theme-bg-img .ip-item.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme-headerlinks { margin-bottom: 0.9rem; }
.theme-headerlinks .fld-label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.5rem; }
.hl-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hl-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; background: #1f1f1f; border: 1px solid var(--border); border-radius: 3px; padding: 0.35rem 0.65rem; cursor: pointer; }

/* direct block / section editor */
.blocks-drawer .block-edit { border: 1px solid var(--border); border-radius: 4px; padding: 0.8rem; margin-bottom: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; background: #181818; }
.block-edit-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.block-edit-top select { flex: 1; min-width: 0; max-width: 230px; }
/* block-editor controls: full-width, no overflow, accent focus (not the default blue outline) */
.block-edit .auth-input, .block-edit select, .block-edit textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.block-edit .auth-input:focus, .block-edit select:focus, .block-edit textarea:focus,
.panel-body .auth-input:focus, .panel-body .code-area:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
.block-actions { margin-left: auto; display: inline-flex; gap: 0.3rem; }
.block-actions .lp-btn { min-width: 2rem; }
.block-img { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.block-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 3px; border: 1px solid var(--border); }
.blocks-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.blocks-drawer textarea.code-area { min-height: auto; height: auto; }
@media (max-width: 760px) { .admin-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .admin-tiles { grid-template-columns: 1fr; } }
/* selected-model info panel (admin → AI models) */
.model-info { margin-top: 0.8rem; padding: 0.7rem 0.9rem; background: #181818; border: 1px solid var(--border); border-radius: 4px; }
.mi-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mi-price, .mi-ctx { font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 4px; font-weight: 600; }
.mi-price { background: rgba(0, 120, 214, 0.16); color: var(--accent-2); }
.mi-ctx { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.mi-desc { margin: 0.55rem 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.kv { list-style: none; padding: 0; margin: 0; }
.kv li { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #303030; }
.kv span { opacity: 0.7; }
.admin .records th, .admin .records td,
.usage .records th, .usage .records td,
.profile .records th, .profile .records td { color: var(--fg); border-bottom: 1px solid #303030; }
.admin .records th, .usage .records th, .profile .records th { color: #b7aee0; }

/* profile page */
.profile-head { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0 1.4rem; }
.profile-avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), #7c3aed); flex-shrink: 0; }
.profile-head h2 { margin: 0; }
.prof-tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border); margin-bottom: 1.2rem; flex-wrap: wrap; }
.prof-tabs button { background: none; border: 0; color: var(--muted); padding: 0.55rem 0.9rem; cursor: pointer; font: inherit; font-size: 0.9rem; border-bottom: 2px solid transparent; }
.prof-tabs button:hover { color: var(--fg); }
.prof-tabs button.active { color: var(--fg); border-bottom-color: var(--accent); }
.prof-props th { text-align: left; width: 180px; color: var(--muted) !important; font-weight: 500; }
/* profile → API keys tab */
.apikey-create { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin: 0.4rem 0 1rem; }
.apikey-create input { min-width: 22rem; }
.apikey-fresh { background: #262626; border: 1px solid var(--accent); border-radius: 5px; padding: 0.9rem 1rem; margin-bottom: 1rem; }
.apikey-fresh p { margin: 0 0 0.4rem; }
.apikey-value { display: block; padding: 0.6rem 0.8rem; background: #151515; border: 1px solid var(--border); border-radius: 3px; font-family: var(--mono); font-size: 0.85rem; word-break: break-all; margin-bottom: 0.5rem; }
.panel.narrow { max-width: 420px; }
.panel.narrow .fld.stack { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.8rem; }
.panel.narrow .fld.stack > span { font-size: 0.82rem; color: var(--muted); }

/* admin configuration page */
.cfg-note { background: rgba(255, 196, 84, 0.08); border: 1px solid rgba(255, 196, 84, 0.3); border-radius: 5px; padding: 0.9rem 1.1rem; margin: 0.4rem 0 1.2rem; line-height: 1.55; font-size: 0.9rem; }
.cfg-table td.cfg-src { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.cfg-table td.cfg-unset { color: var(--muted); font-style: italic; }
.cfg-table td:nth-child(2) { font-family: var(--mono); font-size: 0.82rem; }

/* admin chat & error log */
.chk { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; white-space: nowrap; }
.admin .chatlog td { vertical-align: top; font-size: 0.85rem; }
.admin .chatlog .nowrap { white-space: nowrap; opacity: 0.75; }
.admin .chatlog .chat-text { max-width: 640px; white-space: normal; overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.admin .chatlog .chat-err td { background: rgba(220, 38, 38, 0.08); }
.admin .chatlog details { margin-top: 0.3rem; }
.admin .chatlog summary { cursor: pointer; color: #ff9aa6; font-size: 0.78rem; }
.admin .chatlog pre {
    white-space: pre-wrap; word-break: break-word; font-size: 0.76rem; margin: 0.3rem 0 0;
    background: #161616; border: 1px solid #303030; border-radius: 2px; padding: 0.5rem;
    max-height: 240px; overflow: auto; color: #d3d3d3;
}
.role-badge {
    font-size: 0.7rem; padding: 0.12rem 0.45rem; border-radius: 2px; text-transform: capitalize;
    background: #363636; color: #b7aee0;
}
.role-badge.error { background: #3a1d22; color: #ff9aa6; }
.role-badge.user { background: #2e2e2e; color: #b3d9f2; }
.role-badge.assistant { background: #1f2e26; color: #8fe0b6; }
.fb-tag { margin-top: 0.3rem; font-size: 0.76rem; color: #ff9aa6; }

.hero { width: min(640px, 100%); text-align: center; }

.hero h1 {
    font-size: 3rem;
    margin: 0;
    color: var(--fg);
}

.tagline { opacity: 0.8; margin-top: 0.25rem; }

.prompt-box {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

textarea {
    width: 100%;
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid #373737;
    background: #1f1f1f;
    color: var(--fg);
    resize: vertical;
    font: inherit;
}

button {
    align-self: center;
    padding: 0.75rem 1.75rem;
    border: 0;
    border-radius: 4px;
    background: var(--accent);
    color: white;
    font-size: 1rem;
    cursor: pointer;
}

button:disabled { opacity: 0.4; cursor: not-allowed; }

/* close/✕ link-buttons: reset the default pill/accent background (they only set colour) */
.toplink {
    align-self: auto; background: none; border: 0; padding: 0.15rem 0.4rem; border-radius: 2px;
    color: inherit; font: inherit; font-size: 0.95rem; cursor: pointer;
}
.toplink:hover { background: rgba(127, 127, 127, 0.14); }

/* "recording config into a feature set" chip in the topbar */
.rec-chip {
    display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
    font-size: 0.82rem; font-weight: 600;
    background: rgba(224, 83, 58, 0.16); color: #ffb3a3;
    border: 1px solid rgba(224, 83, 58, 0.45); border-radius: 4px; padding: 0.12rem 0.6rem;
}
.rec-chip:hover { background: rgba(224, 83, 58, 0.26); }
.rec-dot {
    width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #e0533a;
    box-shadow: 0 0 0 0 rgba(224, 83, 58, 0.7); animation: rec-pulse 1.6s ease-out infinite;
}
@keyframes rec-pulse {
    0% { box-shadow: 0 0 0 0 rgba(224, 83, 58, 0.6); }
    70% { box-shadow: 0 0 0 0.4rem rgba(224, 83, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(224, 83, 58, 0); }
}

.echo { margin-top: 1.5rem; opacity: 0.75; }

/* ---- management UI (workspaces + websites) ---- */
.page {
    width: min(900px, 100%);
    margin: 0 auto;
    /* Sticky topbar already breathes; collapsing the page's own top padding stops a
       second wasted gap appearing above the back-button on every list/detail page. */
    padding: 1rem 1.5rem 2rem;
    text-align: center;
}

.lead { opacity: 0.8; margin-top: -0.25rem; font-size: 1.1rem; }

.back {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: var(--fg);
    opacity: 0.7;
    text-decoration: none;
}
.back:hover { opacity: 1; }

/* Page H1 sits right under the back button — collapse the default UA top margin so
   the title isn't pushed an extra ~0.7em down. */
.page > h1 { margin-top: 0.25rem; margin-bottom: 0.4rem; }

.card-grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
}

/* /app landing: section headers + "what's new" release tiles */
.land-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 2.4rem; }
.land-head + .card-grid { margin-top: 1rem; }
.land-head h2 { margin: 0; font-size: 1.1rem; color: var(--fg); }
/* the "What's new" footnote: deliberately low-key so workspaces stay the focus */
.land-head.quiet { margin-top: 3.2rem; }
.land-head.quiet h2 { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.land-head.quiet .toplink { font-size: 0.8rem; }
.rel-tiles { margin-top: 0.7rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.7rem; opacity: 0.75; }
.rel-tile {
    background: transparent; border: 1px solid var(--border); border-radius: 4px;
    padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.3rem;
}
.rel-tile-head { display: flex; align-items: center; gap: 0.6rem; }
.rel-tile-head .rel-date { margin-left: auto; font-size: 0.72rem; }
.rel-tile-head .rel-ver { font-size: 0.68rem; }
.rel-tile-title { font-size: 0.84rem; line-height: 1.35; color: var(--fg); }
.rel-tile-sum { margin: 0; color: var(--muted); font-size: 0.76rem; line-height: 1.45; }

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    border-radius: 18px;
    border: 1px solid #373737;
    background: #1f1f1f;
    color: var(--fg);
    cursor: pointer;
    font: inherit;
    min-height: 140px;
    justify-content: center;
    transition: transform 0.08s ease, border-color 0.08s ease;
}
.tile:hover { transform: translateY(-3px); border-color: var(--accent); }
.site-tile { position: relative; }
.tile-del {
    position: absolute; top: 0.5rem; right: 0.5rem; border: 0; background: transparent;
    color: var(--fg); cursor: pointer; opacity: 0; font-size: 0.95rem; line-height: 1;
    padding: 0.25rem; border-radius: 2px; transition: opacity 0.1s ease, background 0.1s ease;
}
.site-tile:hover .tile-del { opacity: 0.65; }
.tile-del:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.del-list { margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; color: var(--muted); font-size: 0.9rem; }
.del-list li { margin: 0.15rem 0; }

.tile-emoji { font-size: 2.5rem; }
.tile-name { font-size: 1.2rem; font-weight: 600; }
.tile-sub { opacity: 0.6; font-size: 0.9rem; }

.tile-new { cursor: default; background: #191919; border-style: dashed; }
.tile-new:hover { transform: none; }
.tile-new input {
    width: 100%;
    padding: 0.6rem;
    border-radius: 4px;
    border: 1px solid #373737;
    background: #151515;
    color: var(--fg);
    font: inherit;
    text-align: center;
}

.big-button {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 4px;
    background: var(--accent);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
}
.big-button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- website page: contents + AI chat ---- */
.site { width: min(1100px, 100%); margin: 0 auto; padding: 2rem 1.5rem; }
.site h1 { margin: 0.25rem 0 1.25rem; }
.site-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 760px) { .site-grid { grid-template-columns: 1fr; } }

.panel {
    background: #1f1f1f;
    border: 1px solid #373737;
    border-radius: 6px;
    padding: 1.25rem;
    text-align: left;
}
.panel h2 { margin-top: 0; font-size: 1.15rem; }
.muted { opacity: 0.6; }

.entity { margin-bottom: 1rem; }
.entity-name { font-weight: 600; margin-bottom: 0.35rem; }
.fields { list-style: none; margin: 0; padding: 0 0 0 1.25rem; }
.fields li { display: flex; justify-content: space-between; padding: 0.15rem 0; opacity: 0.9; }
.f-type { opacity: 0.55; font-size: 0.85rem; }

.chat { display: flex; flex-direction: column; font-size: 0.85rem; }
.chat h2 { font-size: 1rem; margin-bottom: 0.5rem; }
.messages {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    padding-right: 0.25rem;
}
.msg { padding: 0.45rem 0.65rem; border-radius: 4px; max-width: 88%; white-space: pre-wrap; line-height: 1.35; }
.msg.user { align-self: flex-end; background: var(--accent); color: white; }
.msg.assistant { align-self: flex-start; background: #272727; }
.msg-usage { align-self: flex-start; font-size: 0.68rem; color: var(--muted); margin: 0.1rem 0 0.3rem 0.2rem; opacity: 0.85; }
/* per-reply star rating */
.rate-row { display: flex; align-items: center; gap: 0.5rem; align-self: flex-start; margin: 0 0 0.5rem 0.2rem; flex-wrap: wrap; }
.rate-stars { display: inline-flex; }
.rate-star { background: none; border: 0; cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0 1px; color: #4a4a4a; transition: color 0.1s; }
.rate-star:hover, .rate-star.on { color: #f5b301; }
.rate-val { font-size: 0.72rem; color: var(--muted); }
.rate-hint { font-size: 0.66rem; color: var(--muted); opacity: 0.5; }
.rate-row:hover .rate-hint { opacity: 1; }
.rate-comment { flex-basis: 100%; display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.25rem; }
.rate-comment textarea { width: 100%; box-sizing: border-box; background: #1f1f1f; color: var(--fg); border: 1px solid var(--border); border-radius: 3px; padding: 0.4rem 0.5rem; font: inherit; font-size: 0.82rem; resize: vertical; }
.rate-comment-actions { display: flex; gap: 0.4rem; }
.rate-avg { color: #f5b301; font-weight: 600; }
.cj-css-holder { display: none; }   /* holds the keyed custom-CSS <style>; no layout */

/* admin releases / changelog */
.rel-form { display: flex; flex-direction: column; gap: 0.7rem; max-width: 640px; }
.rel-form .code-area { min-height: 90px; }
.rel-item { border-bottom: 1px solid var(--border); padding: 0.9rem 0; }
.rel-item:last-child { border-bottom: 0; }
.rel-item-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.rel-ver { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); background: rgba(124, 92, 255, 0.12); padding: 0.1rem 0.5rem; border-radius: 2px; }
.rel-date { font-size: 0.8rem; color: var(--muted); }
.rel-item-head .lp-btn { margin-left: auto; }
.rel-notes { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--fg); }
.rel-notes li { margin: 0.2rem 0; }
.rel-model { font-family: var(--mono); font-size: 0.72rem; color: #7fd8d4; background: rgba(127, 216, 212, 0.1); padding: 0.1rem 0.45rem; border-radius: 2px; }
.rel-request { margin: 0.5rem 0 0; color: var(--muted); font-style: italic; font-size: 0.88rem; }
/* Status words on /admin/environments — "configured" / "not set", "reachable" / "unreachable".
   They carry the answer, so they inherit weight, not just colour; colour alone is never the only
   signal because the words already differ. */
.rel-ok { color: var(--ok, #5dd39e); font-weight: 600; }
.rel-error-text { color: var(--danger, #f87171); font-weight: 600; }
.rel-summary { margin: 0.5rem 0; color: var(--fg); font-size: 0.95rem; line-height: 1.55; }
.reg-disabled { background: rgba(255, 196, 84, 0.08); border: 1px solid rgba(255, 196, 84, 0.3); border-radius: 4px; padding: 0.7rem 0.9rem; font-size: 0.88rem; line-height: 1.5; margin: 0.3rem 0 0.6rem; }

/* feedback triage */
.fb-item { margin-bottom: 0.9rem; }
.fb-item.done { opacity: 0.6; }
.fb-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.fb-stars { color: #f5b301; letter-spacing: 1px; }
.fb-done-tag { color: #4ade80; font-size: 0.8rem; margin-left: auto; }
.fb-reply { margin: 0.2rem 0; color: var(--fg); }
.fb-comment { margin: 0.3rem 0; color: #ffb4a8; font-style: italic; }
.fb-action { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.6rem; }
.fb-action .auth-input.slim { flex: 1; min-width: 160px; max-width: 380px; }
.fb-action .fb-ver { flex: 0 0 160px; min-width: 120px; }
.fb-models { margin-top: 0.9rem; }
.fb-models .fld-label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.45rem; }
.fb-recs { margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.fb-rec { border: 1px solid var(--border); border-radius: 4px; padding: 0.7rem 0.9rem; background: #181818; }
.fb-rec-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.fb-rec-text { white-space: pre-wrap; color: var(--fg); font-size: 0.9rem; line-height: 1.5; }
.fb-rec-usage { font-size: 0.72rem; color: var(--muted); margin-left: auto; }
.fb-rec-tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin: 0.5rem 0 0; }
.fb-rectab { background: #1f1f1f; border: 1px solid var(--border); border-bottom: none; color: var(--muted); padding: 0.35rem 0.7rem; border-radius: 3px 8px 0 0; cursor: pointer; font: inherit; font-size: 0.78rem; }
.fb-rectab.active { color: var(--fg); background: #181818; border-color: var(--accent); }
.fb-recs .fb-rec, .fb-rec { margin-top: 0; }
.fb-prompt { margin-top: 0.6rem; }
.fb-prompt summary { cursor: pointer; color: var(--muted); font-size: 0.8rem; }
.fb-prompt pre { white-space: pre-wrap; word-break: break-word; background: #151515; border: 1px solid var(--border); border-radius: 3px; padding: 0.7rem; font-size: 0.74rem; max-height: 320px; overflow: auto; color: #d5d5d5; }
.fb-howitworks { margin-top: 0.8rem; }
.fb-howitworks summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
/* action row: button + wide "what you did" + small version + aligned mark button */
.fb-action { align-items: center; }
.fb-action .fb-res { flex: 1 1 240px; min-width: 200px; max-width: none; }
.fb-action .fb-ver { flex: 0 0 96px; min-width: 80px; max-width: 96px; }
.fb-action .fb-mark { margin-left: auto; }

/* "Advise Me" */
.adv-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.adv-head h2 { margin: 0; }
.adv-sep { border: none; border-top: 1px solid var(--border); margin: 1.1rem 0 0.9rem; }
.adv-text { width: 100%; box-sizing: border-box; margin-bottom: 0.6rem; }
textarea.adv-text { resize: vertical; min-height: 4.5rem; }
.adv-row { display: flex; gap: 0.6rem; align-items: center; }
/* Advise Me page: extra breathing room between tiles (profile / leaderboard / new-entry / models / each journal entry) */
.adv-page > .panel + .panel { margin-top: 1.6rem; }

/* Stacked content panels in the main column touch by default (border + border), which reads as one
   merged block. Give consecutive full-width panels a small gap so each reads as its own card. Scoped
   to DIRECT children of .page so side-by-side panel layouts (which live inside their own flex/grid
   wrappers) are unaffected. Applies across every workspace/dashboard that stacks panels. */
.page > .panel + .panel { margin-top: 0.75rem; }
/* Improve-with-AI action row that sits below each profile textarea */
.adv-improve { flex-wrap: wrap; margin-top: -0.3rem; margin-bottom: 1.1rem; }
.adv-improve .adv-model { width: auto; min-width: 14rem; max-width: 22rem; padding: 0.35rem 0.6rem; }
.adv-improve .adv-improve-note { font-size: 0.78rem; flex-basis: 100%; margin-top: 0.1rem; }
.adv-err { color: #f0b352; font-size: 0.82rem; }
.adv-content { white-space: pre-wrap; color: var(--fg); line-height: 1.5; margin: 0.2rem 0 0.4rem; }
.adv-of { font-size: 0.75rem; color: var(--muted); font-weight: 400; }
.adv-best-btn { margin-left: auto; }
.adv-del { margin-left: auto; }

/* admin users */
.user-add { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.user-add .auth-input.slim { flex: 1; min-width: 150px; }
.user-off td { opacity: 0.5; }
.user-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.danger-btn { color: #f87171; }
.danger-btn:hover { background: rgba(248, 113, 113, 0.12); }
.usage-cell { font-size: 0.72rem; color: var(--muted); line-height: 1.45; white-space: nowrap; }
.msg.error {
    align-self: stretch; max-width: 100%;
    background: #2a1418; border: 1px solid #6b2330; color: #ffb4b4;
}
.msg-err-head { font-weight: 700; margin-bottom: 0.2rem; color: #ff9aa6; }
.msg.error details { margin-top: 0.4rem; }
.msg.error summary { cursor: pointer; font-size: 0.85rem; }
.msg.error pre {
    margin: 0.5rem 0 0; white-space: pre-wrap; word-break: break-word;
    font-size: 0.78rem; max-height: 220px; overflow: auto;
}
.composer {
    display: flex; gap: 0.4rem; align-items: flex-end;
    background: #151515; border: 1px solid var(--border); border-radius: 6px;
    padding: 0.35rem 0.4rem 0.35rem 0.75rem;
}
.composer:focus-within { border-color: var(--accent); }
.composer textarea {
    flex: 1; border: 0; background: transparent; color: var(--fg); resize: none;
    font: inherit; font-size: 0.9rem; line-height: 1.45; padding: 0.45rem 0;
    min-height: 3.2rem; max-height: 200px; outline: none;
}
.send-btn {
    flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.send-btn:hover:not(:disabled) { filter: brightness(1.1); }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.send-btn svg { width: 17px; height: 17px; }
.composer-hint { font-size: 0.72rem; margin: 0.35rem 0 0; text-align: center; }

.row-del {
    border: 0; background: transparent; color: #b06; cursor: pointer;
    font-size: 0.85rem; opacity: 0.6;
}
.row-del:hover { opacity: 1; color: #e0426a; }
.row-edit {
    border: 0; background: transparent; color: #6b6385; cursor: pointer;
    font-size: 0.9rem; opacity: 0.6; margin-right: 0.4rem;
}
.row-edit:hover { opacity: 1; color: var(--site-accent, var(--accent)); }
.form-actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 1.2rem; }
.form-actions .add-parent { margin-top: 0; }

/* ---- editor: AI (left) + website (right, fills the side) ---- */
.editor-page { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; text-align: left; }
.editor-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.editor-top h1 { margin: 0; font-size: 1.4rem; flex: 1; }
.editor-top .back { margin: 0; }
.preview-btn { width: auto; padding: 0.5rem 1.1rem; text-decoration: none; }

.editor { flex: 1; min-height: 0; display: flex; gap: 1rem; }
.editor .chat { width: 380px; flex: 0 0 380px; height: 100%; margin: 0; }
.editor .site-side { flex: 1; min-width: 0; height: 100%; display: flex; }

/* browser-frame preview */
.browser {
    flex: 1; display: flex; flex-direction: column; min-height: 0;
    border: 1px solid #373737; border-radius: 6px; overflow: hidden;
    background: #ffffff; color: #222222;
}
/* simple browser frame: traffic-light dots + an address pill */
.browser-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.85rem; background: #ece9f5; border-bottom: 1px solid #d9d4ea; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #c9c4dd; }
.dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
.bz-dots { display: inline-flex; gap: 8px; }
.browser-bar .url {
    font-size: 0.78rem; color: #4d4d4d; background: #fff; border-radius: 4px;
    padding: 0.3rem 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0;
}
.bz-urltext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-ic { display: inline-flex; align-items: center; color: #5f6368; }
.bz-lock svg { width: 12px; height: 12px; }

/* smooth page transition on navigation. Opacity ONLY — a transform here would create a
   containing block that traps fixed popups rendered inside (e.g. related-list dialogs in an
   expanded row) and let the site header paint over them. */
.site-view { animation: viewFade 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes viewFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .site-view { animation: none; } }

/* nested pages (one level) in the sidebar */
.navlink-row.nested { margin-left: 0.5rem; }
.navlink-row.nested .navlink { font-size: 0.92em; opacity: 0.9; border-left: 2px solid #e2dcf0; border-radius: 0 8px 8px 0; }
.navlink-row.nested .navlink.active { opacity: 1; }
/* "nest under" control on a page (editor) */
.page-editbar { margin: 0.1rem 0 0.4rem; font-size: 0.8rem; color: #6b6385; }
.page-editbar label { display: inline-flex; align-items: center; gap: 0.4rem; }
.page-editbar select {
    font: inherit; font-size: 0.82rem; padding: 0.25rem 0.45rem; border: 1px solid #d8d3e8;
    border-radius: 7px; background: #fff; color: #222222;
}

/* rename a page (editor) */
.page-rename-btn { border: 0; background: none; cursor: pointer; color: #8b80b0; font-size: 0.85rem; margin-left: 0.4rem; }
.page-rename-btn:hover { color: var(--site-accent, var(--accent)); }
.page-rename { display: flex; align-items: center; gap: 0.4rem; flex: 1; }
.page-rename input {
    font-size: 1.1rem; font-weight: 600; padding: 0.3rem 0.5rem; border: 1px solid #d8d3e8;
    border-radius: 3px; color: #222222; background: #fff; min-width: 0; flex: 1; max-width: 340px;
}
.site-nav {
    display: flex; gap: 0.25rem; flex-wrap: wrap;
    padding: 0.5rem 0.85rem; background: #f6f4fc; border-bottom: 1px solid #e6e2f2;
}
.navlink {
    border: 0; background: transparent; color: #4a4360; cursor: pointer;
    padding: 0.4rem 0.8rem; border-radius: 3px; font: inherit; font-weight: 500;
}
.navlink:hover { background: #ece8f7; }
.navlink.active { background: var(--site-accent, var(--accent)); color: #fff; }
.site-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.75rem; }
/* generated-site home: landing-style hero + image + feature cards */
.gen-home {
    --gen-accent: var(--site-accent, var(--accent));
    max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 3rem; padding: 0.5rem 0 1.5rem;
}

/* ---- hero: text + theme-aware app mock on a soft accent backdrop ---- */
.gen-hero {
    position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.4rem;
    align-items: center; padding: 2.4rem; border-radius: 24px; overflow: hidden;
    background: color-mix(in srgb, var(--gen-accent) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--gen-accent) 16%, #eee);
}
.gen-hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(38% 60% at 88% 8%, color-mix(in srgb, var(--gen-accent) 26%, transparent), transparent 70%),
        radial-gradient(40% 60% at 8% 100%, color-mix(in srgb, var(--gen-accent) 16%, transparent), transparent 70%);
}
.gen-hero-text, .gen-hero-media { position: relative; z-index: 1; }
.gen-hero-text { text-align: left; }
.gen-eyebrow {
    display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.02em; text-transform: uppercase; color: var(--gen-accent);
    background: #fff; border: 1px solid color-mix(in srgb, var(--gen-accent) 22%, #fff);
    padding: 0.32rem 0.7rem; border-radius: 4px; margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.gen-eyebrow .nav-ico { display: inline-flex; width: 14px; height: 14px; }
.gen-hero-text h1 { font-size: 2.6rem; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.8rem; color: #181818; }
.gen-lead { font-size: 1.06rem; line-height: 1.65; color: #4a4360; margin: 0 0 1.6rem; max-width: 42ch; }
.gen-hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.gen-cta {
    display: inline-flex; align-items: center; gap: 0.5rem; border: 0; cursor: pointer; font: inherit;
    font-weight: 600; font-size: 0.95rem; padding: 0.72rem 1.25rem; border-radius: 11px;
    background: var(--gen-accent); color: #fff;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--gen-accent) 35%, transparent);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.gen-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.gen-cta-arr { transition: transform 0.12s ease; }
.gen-cta:hover .gen-cta-arr { transform: translateX(3px); }
.gen-cta.ghost {
    background: #fff; color: #181818; box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--gen-accent) 28%, #ddd);
}
.gen-cta.ghost:hover { border-color: var(--gen-accent); }

/* the app mock (shows the site's real pages) */
.gen-window {
    background: #fff; border-radius: 6px; overflow: hidden;
    border: 1px solid #ece8f5; box-shadow: 0 24px 60px rgba(20, 18, 40, 0.16);
    transform: rotate(0.6deg);
}
.gen-window-bar { display: flex; gap: 6px; padding: 0.6rem 0.8rem; background: #f6f4fc; border-bottom: 1px solid #eee; }
.gen-window-bar span { width: 9px; height: 9px; border-radius: 50%; background: #d9d4e6; }
.gen-window-bar span:first-child { background: #f9b8bf; }
.gen-window-bar span:nth-child(2) { background: #ffe0a3; }
.gen-window-body { display: grid; grid-template-columns: auto 1fr; }
.gen-window-head {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.85rem;
    color: #fff; background: var(--gen-accent); padding: 0.6rem 0.8rem;
}
.gen-window-head .gw-logo { display: inline-flex; width: 15px; height: 15px; }
.gen-window-nav { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.5rem; background: #faf9ff; min-width: 116px; }
.gen-window-item {
    display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; color: #6b6385;
    padding: 0.34rem 0.5rem; border-radius: 7px; white-space: nowrap;
}
.gen-window-item i { display: inline-flex; width: 13px; height: 13px; }
.gen-window-item.on { background: color-mix(in srgb, var(--gen-accent) 14%, #fff); color: var(--gen-accent); font-weight: 600; }
.gen-window-main { padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.gen-window-main .gw-line { height: 9px; border-radius: 2px; background: #eceaf4; }
.gw-line.w60 { width: 60%; } .gw-line.w75 { width: 75%; } .gw-line.w90 { width: 90%; }
.gen-window-main .gw-pill { margin-top: 0.4rem; width: 84px; height: 26px; border-radius: 3px; background: color-mix(in srgb, var(--gen-accent) 22%, #fff); }

/* ---- feature cards ---- */
.gen-sec-title { font-size: 1.15rem; margin: 0 0 1rem; color: #181818; }
.gen-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.gen-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; text-align: left;
    background: #fff; border: 1px solid #ece8f5; border-radius: 6px; padding: 1.3rem; cursor: pointer;
    font: inherit; transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.gen-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gen-accent) 40%, #eee); box-shadow: 0 16px 36px rgba(20, 18, 40, 0.1); }
.gen-card-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    border-radius: 13px; color: var(--gen-accent);
    background: color-mix(in srgb, var(--gen-accent) 13%, #fff);
}
.gen-card-ico svg { width: 23px; height: 23px; }
.gen-card h3 { margin: 0; font-size: 1.02rem; color: #181818; }
.gen-card p { margin: 0; font-size: 0.86rem; color: #6b6385; line-height: 1.5; flex: 1; }
.gen-card-link { font-size: 0.82rem; font-weight: 600; color: var(--gen-accent); margin-top: 0.2rem; }

@media (max-width: 680px) {
    .gen-hero { grid-template-columns: 1fr; padding: 1.6rem; }
    .gen-hero-media { display: none; }
    .gen-hero-text h1 { font-size: 2.1rem; }
}

/* ---- AI-designed home (real hero photo + tailored content sections) ---- */
.gen-home.designed { gap: 3rem; }
.dh-hero {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center;
    padding: 2.4rem; border-radius: 24px; overflow: hidden;
    background: color-mix(in srgb, var(--gen-accent) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--gen-accent) 16%, #eee);
}
.dh-hero.no-img { grid-template-columns: 1fr; }
.dh-hero-text { text-align: left; }
.dh-hero-text h1 { font-size: 2.6rem; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.8rem; color: #181818; }
.dh-hero-img img {
    width: 100%; height: 100%; max-height: 380px; object-fit: cover; border-radius: 6px;
    box-shadow: 0 22px 50px rgba(20, 18, 40, 0.2); display: block;
}
.dh-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
.dh-card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid #ece8f5;
    border-radius: 6px; overflow: hidden; box-shadow: 0 6px 22px rgba(20, 18, 40, 0.05);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dh-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(20, 18, 40, 0.1); }
.dh-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: #f4f2fa; }
.dh-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-card-ico.dh-card-ico { width: 46px; height: 46px; margin: 1.2rem 1.2rem 0; }
.dh-card-body { padding: 1rem 1.2rem 1.3rem; }
.dh-card-body h3 { margin: 0 0 0.35rem; font-size: 1.05rem; color: #181818; }
.dh-card-body p { margin: 0; font-size: 0.88rem; color: #6b6385; line-height: 1.5; }
@media (max-width: 680px) { .dh-hero { grid-template-columns: 1fr; padding: 1.6rem; } .dh-hero-img { display: none; } }

/* ---- richer landing section kinds (steps / features / quotes / cta) ---- */
.gen-home.designed > section { margin-top: 2.4rem; }

/* numbered "how it works" steps band */
.dh-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: #ece8f5; border: 1px solid #ece8f5; border-radius: 18px; overflow: hidden; }
.dh-step { background: #fff; padding: 2rem 1.6rem; transition: background 0.2s; }
.dh-step:hover { background: #faf9ff; }
.dh-step-num { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--site-accent, var(--accent)); display: block; margin-bottom: 1rem; }
.dh-step h3 { margin: 0 0 0.5rem; font-size: 1.1rem; color: #181818; }
.dh-step p { margin: 0; color: #5a5470; font-size: 0.95rem; line-height: 1.55; }

/* feature cards (icon + benefit) */
.dh-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.dh-feature { border: 1px solid #ece8f5; border-radius: 18px; padding: 1.8rem; background: linear-gradient(160deg, #faf9ff, #ffffff); transition: transform 0.2s, border-color 0.2s; }
.dh-feature:hover { transform: translateY(-3px); border-color: var(--site-accent, var(--accent)); }
.dh-feature-ico { display: inline-flex; align-items: center; width: 30px; height: 30px; color: var(--site-accent, var(--accent)); margin-bottom: 1rem; }
.dh-feature-ico svg { width: 28px; height: 28px; }
.dh-feature h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: #181818; }
.dh-feature p { margin: 0; color: #5a5470; font-size: 0.93rem; line-height: 1.55; }

/* example / testimonial cards */
.dh-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.dh-quote { border: 1px solid #ece8f5; border-radius: 6px; padding: 1.5rem; background: #faf9ff; transition: border-color 0.2s; }
.dh-quote:hover { border-color: var(--site-accent, var(--accent)); }
.dh-quote-text { margin: 0; color: #343434; line-height: 1.6; }
.dh-quote-text::before { content: "❝ "; color: var(--site-accent, var(--accent)); font-weight: 700; }
.dh-quote-by { display: block; margin-top: 0.9rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--site-accent, var(--accent)); }

/* centred call-to-action band */
.dh-cta { text-align: center; padding: 3.5rem 1.5rem; border-radius: 22px; border: 1px solid #ece8f5;
    background: linear-gradient(135deg, color-mix(in srgb, var(--site-accent, var(--accent)) 14%, #fff), #faf9ff); }
.dh-cta h2 { font-size: 1.9rem; margin: 0 auto 0.7rem; max-width: 20ch; color: #181818; }
.dh-cta p { color: #5a5470; margin: 0 auto 1.4rem; max-width: 46ch; }

.site-hero { text-align: center; padding: 1.5rem 0; }
.site-hero h1 { font-size: 2.4rem; margin: 0 0 0.25rem; color: #222222; -webkit-text-fill-color: initial; background: none; }
.site-hero .muted { color: #6b6385; }
.hero-cards { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.hero-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    background: #f4f1fb; border: 1px solid #e0dbf0; border-radius: 6px;
    padding: 1.25rem 1.75rem; cursor: pointer; font: inherit; font-weight: 600; color: #222222;
}
.hero-card:hover { border-color: var(--accent); }
.site-page { max-width: 820px; margin: 0 auto; }
.site-page h2 { color: #222222; }
.new-related { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.2rem; max-width: 680px; }
.big-button.add-parent { margin-top: 1.2rem; }
.preview-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 460px; }
.preview-form label { font-weight: 600; font-size: 0.9rem; color: #4a4360; }
.preview-form input {
    padding: 0.55rem 0.7rem; border: 1px solid #d4cee6; border-radius: 3px;
    background: #fff; color: #222222; font: inherit;
}
.preview-form select {
    padding: 0.55rem 0.7rem; border: 1px solid #d4cee6; border-radius: 3px;
    background: #fff; color: #222222; font: inherit;
}
.preview-form .big-button { align-self: flex-start; margin-top: 0.75rem; }
.form-error { color: #c0392b; font-size: 0.9rem; margin: 0.25rem 0 0; }

.records { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: 0.9rem; }
.records th, .records td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid #ece8f5; color: #222222; }
.records th { color: #6b6385; font-weight: 600; }
.records td .cell-img, td > .cell-img { width: 46px; height: 46px; object-fit: cover; border-radius: 3px; border: 1px solid #ece8f5; display: block; }

.rel-hint { font-size: 0.82rem; margin: 1.2rem 0 0; }

/* expandable parent rows -> inline child records (master-detail) */
.records tr.expandable { cursor: pointer; }
.records tr.expandable:hover td { background: #faf8ff; }
.rec-actions { white-space: nowrap; text-align: right; }
.rec-chevron {
    display: inline-block; margin-right: 0.4rem; color: #8b80b0; font-size: 1.05rem;
    transition: transform 140ms ease;
}
.rec-chevron.open { transform: rotate(90deg); }
.rec-detail-row > td { padding: 0; background: #f8f6ff; border-bottom: 1px solid #ece8f5; }
.rec-detail { display: flex; flex-direction: column; gap: 1rem; padding: 0.9rem 1rem 1.1rem; }

.related-list {
    background: #fff; border: 1px solid #e9e4f5; border-radius: 5px; padding: 0.9rem 1rem;
}
.related-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.related-head h4 {
    margin: 0; display: flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; color: #222222;
}
.related-head h4 .page-ico { display: inline-flex; width: 18px; height: 18px; color: #6b6385; }
.rel-add {
    border: 1px solid var(--site-accent, var(--accent)); background: transparent;
    color: var(--site-accent, var(--accent)); cursor: pointer; font: inherit; font-size: 0.82rem;
    font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 3px; white-space: nowrap;
}
.rel-add:hover { background: var(--site-accent, var(--accent)); color: #fff; }

/* neat added-items table */
.related-records { margin: 0; width: 100%; border-collapse: collapse; border: 1px solid #ece8f5; border-radius: 4px; overflow: hidden; }
.related-records th {
    background: #f6f4fc; color: #6b6385; font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.related-records th, .related-records td { padding: 0.5rem 0.7rem; border-bottom: 1px solid #f0ecf8; text-align: left; }
.related-records tbody tr:last-child td { border-bottom: 0; }
.related-records tbody tr:hover td { background: #faf8ff; }
.rel-rowact { text-align: right; width: 1%; white-space: nowrap; }
.related-scroll { overflow-x: auto; }
.related-records td { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* sortable column headers (both the main records table and related lists) */
.records th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.records th.sortable:hover { color: var(--site-accent, var(--accent)); }
.sort-ind { font-size: 0.7em; opacity: 0.8; }

/* entity page: title + add button on top, records first, form in a popup */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.big-button.page-add { width: auto; }
.page-empty { margin-top: 1.5rem; }
.modal.entry-modal { width: min(620px, calc(100vw - 2rem)); }

/* admin: the approve-models picker */
.modal.model-picker { width: min(880px, calc(100vw - 2rem)); }
.mp-tools { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.mp-tools .auth-input.slim { flex: 1; min-width: 220px; }
.mp-scroll { overflow-y: auto; max-height: min(56vh, 560px); border: 1px solid var(--border); border-radius: 4px; }
.mp-table { width: 100%; margin: 0; }
/* the modal lives outside .admin, so restate the dark-theme table colours */
.mp-table th, .mp-table td { color: var(--fg); border-bottom: 1px solid #303030; }
.mp-table thead th { position: sticky; top: 0; background: #1c1c1c; z-index: 1; color: #b7aee0; }
.mp-table tbody tr { cursor: pointer; }
.mp-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.mp-table tbody tr.mp-on td { background: rgba(124, 92, 255, 0.1); }
.mp-table td, .mp-table th { white-space: nowrap; }
.mp-table td:nth-child(2), .mp-table th:nth-child(2) { white-space: normal; width: 100%; }
.mp-free { font-size: 0.68rem; color: #4ade80; background: rgba(74, 222, 128, 0.12); border-radius: 2px; padding: 0.08rem 0.4rem; margin-left: 0.35rem; }
.mp-new { font-size: 0.68rem; color: #b3d9f2; background: rgba(179, 217, 242, 0.12); border-radius: 2px; padding: 0.08rem 0.4rem; margin-left: 0.35rem; }
.mp-sel { max-width: 190px; }
.mp-drift { font-size: 0.72rem; color: #f5b301; }
.gw-chip { font-family: var(--mono); font-size: 0.72rem; color: #c9a8ff; background: rgba(124, 92, 255, 0.12); padding: 0.1rem 0.45rem; border-radius: 2px; white-space: nowrap; }
.gw-add { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.9rem; }
.gw-add .gw-url { flex: 1; min-width: 220px; }

/* delete-page ✕ on nav items (editor only) */
.navlink-row { display: flex; align-items: center; }
.navlink-row .navlink { flex: 1; min-width: 0; }
/* drag-to-reorder pages */
.navlink-row.draggable { cursor: grab; }
.navlink-row.draggable:active { cursor: grabbing; }
.nav-grip { color: #b8b0d0; font-size: 0.7rem; letter-spacing: -2px; padding: 0 0.15rem 0 0.1rem; opacity: 0; transition: opacity 0.12s; user-select: none; }
.navlink-row.draggable:hover .nav-grip { opacity: 0.7; }
.navlink-row.drag-over { box-shadow: inset 0 2px 0 0 var(--site-accent, var(--accent)); border-radius: 2px; }
.topnav-item { display: inline-flex; align-items: center; }
.nav-del {
    border: 0; background: none; cursor: pointer; color: #c0392b; opacity: 0;
    font-size: 0.78rem; padding: 0.2rem 0.4rem; border-radius: 2px; transition: opacity 0.1s ease;
}
.navlink-row:hover .nav-del, .topnav-item:hover .nav-del { opacity: 0.7; }
.nav-del:hover { opacity: 1; background: rgba(220, 38, 38, 0.14); }
.topnav-del { color: rgba(255, 255, 255, 0.8); }
.topnav-del:hover { background: rgba(255, 255, 255, 0.2); }
.related-empty {
    font-size: 0.85rem; margin: 0; padding: 0.7rem; text-align: center;
    background: #faf9ff; border: 1px dashed #e6e2f2; border-radius: 4px;
}
/* the add-child popup shows a (light) website form, so the card itself is light.
   Use .modal.related-modal so it beats the dark base .modal regardless of source order. */
.modal.related-modal { background: #fff; color: #222222; }
.related-modal .modal-head h2 { color: #222222; }
.related-modal .toplink { color: var(--site-accent, var(--accent)); }
.related-modal label { color: #222222; }
.related-modal .related-form { margin: 0; }
.related-modal .pf-field input, .related-modal .pf-field select, .related-modal .pf-field textarea {
    background: #fff; color: #222222; border: 1px solid #d8d3e8;
}
.related-modal .big-button.ghost {
    background: transparent; color: var(--site-accent, var(--accent)); border-color: var(--site-accent, var(--accent));
}

/* full-screen preview route */
.preview-page { width: min(1000px, 100%); margin: 0 auto; padding: 1.5rem; height: calc(100vh - 3rem); display: flex; flex-direction: column; gap: 0.75rem; }
.preview-page .browser { flex: 1; }

/* full-page preview: the real browser tab IS the window, so drop the mock frame */
.browser.no-chrome { border: 0; border-radius: 0; }
.preview-page.fullpage { position: fixed; inset: 0; z-index: 60; width: 100%; max-width: none; height: 100vh; margin: 0; padding: 0; gap: 0; }
.preview-page.fullpage .browser { flex: 1; height: 100vh; border-radius: 0; }
.preview-back {
    position: fixed; top: 0.7rem; left: 0.7rem; z-index: 100; background: rgba(15, 15, 25, 0.55);
    color: #fff; padding: 0.35rem 0.75rem; border-radius: 4px; text-decoration: none; font-size: 0.8rem;
    backdrop-filter: blur(5px); opacity: 0.45; transition: opacity 0.15s;
}
.preview-back:hover { opacity: 1; }

/* ---- generated website preview: header + collapsible left nav + sticky footer ---- */
.browser .site {
    display: flex; flex-direction: column; flex: 1; min-height: 0; width: auto; margin: 0; padding: 0;
    font-family: var(--site-font, system-ui, sans-serif);
}
.site-header {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 1rem; color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, var(--site-accent, var(--accent)),
        color-mix(in srgb, var(--site-accent, var(--accent)) 78%, #232323));
}
.hamburger {
    border: 0; background: transparent; color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; padding: 0.3rem; border-radius: 3px;
}
.hamburger:hover { background: rgba(255, 255, 255, 0.18); }
.site-title {
    color: #fff; border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 700; padding: 0;
}
.site-title:hover { opacity: 0.8; }
.site-topnav { display: flex; flex-wrap: wrap; gap: 0.15rem; margin-left: 0.7rem; }
.site-header-links { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-left: auto; }
@media (max-width: 640px) { .site-header-links { display: none; } }
.topnavlink {
    border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85); padding: 0.3rem 0.6rem; border-radius: 7px;
}
.topnavlink:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.topnavlink.active { background: rgba(255, 255, 255, 0.25); color: #fff; }
.site-main { flex: 1; min-height: 0; display: flex; position: relative; }
/* on small screens the expanded sidebar overlays the content instead of squashing it */
@media (max-width: 820px) {
    .site .site-sidenav { position: absolute; top: 0; bottom: 0; left: 0; z-index: 6; box-shadow: 2px 0 14px rgba(0, 0, 0, 0.14); }
}
.site-sidenav {
    width: 0; overflow: hidden; background: #f6f4fc; border-right: 1px solid #e6e2f2;
    display: flex; flex-direction: column; gap: 0.2rem; transition: width 160ms ease;
}
.site.nav-open .site-sidenav { width: 200px; padding: 0.6rem; }
.site-sidenav .navlink { display: block; width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.site-content { flex: 1; min-height: 0; overflow-y: auto; padding: 0.9rem 1.75rem 1.75rem; background: var(--site-bg, #fff); background-attachment: local; }
.site-page > .page-head:first-child { margin-top: 0; }
.site-page .page-head h2 { margin: 0; }

/* when a background image/gradient is set, float the page content on a frosted translucent
   panel so tables and text stay readable over it */
.cj-preview.has-bg .site-page,
.cj-preview.has-bg .gen-home {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(20, 18, 40, 0.12);
}
.cj-preview.has-bg .site-crumbs { backdrop-filter: blur(4px); }

/* AI-designed page intro (above an entity page's records) */
.page-intro { margin-bottom: 1.6rem; }
.page-intro-hero img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 6px; display: block; }
.page-intro-text { margin: 0.9rem 0; }
.page-intro-text h2 { margin: 0 0 0.3rem; font-size: 1.5rem; }
.page-intro-text p { margin: 0; color: #5a5470; }
.page-intro-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.85rem; }
.pi-card { background: #fff; border: 1px solid #ece8f5; border-radius: 5px; overflow: hidden; box-shadow: var(--elev-1); }
.pi-card img { width: 100%; height: 110px; object-fit: cover; display: block; }
.pi-card-text { padding: 0.7rem 0.85rem; display: flex; flex-direction: column; gap: 0.25rem; }
.pi-card-text strong { font-size: 0.95rem; }
.pi-card-text span { font-size: 0.82rem; color: #6b6385; }
.site-footer {
    padding: 0.5rem 0.9rem; background: #f0eef8; border-top: 1px solid #e6e2f2;
    color: #6b6385; font-size: 0.8rem; text-align: center;
}

/* ===== landing page (.lp) ===== */
/* Full width like the app itself (was capped at 1060px — the landing read narrower than every
   page behind it). The hero copy stays centered via its own max-widths; the grids stretch. */
.lp { width: 100%; max-width: none; margin: 0 auto; padding: 0 2rem 0; text-align: center; }
/* No max-width caps: the grids stretch edge-to-edge exactly like every app page behind the
   login (the 1500px cap made the pre-login page read narrower than the site). The auto-fit
   grid columns keep card widths sane on ultra-wide screens. */
.lp-quickstart, .lp-recent, .lp-features { margin-left: auto; margin-right: auto; }
/* Release-notes note on the landing page: a constrained, left-aligned, quiet column at the very
   bottom (the landing centres its text, so pull it back to a readable left-aligned block). */

/* Footer flows at the end of content. The landing page has a lot of content
   (hero + 6 features + steps + bottom CTA) so a natural-flow footer always
   lands at the actual bottom. Earlier flex-stickyfooter setup was conflicting
   with the body's gradient background and pushing the footer mid-page. */
.lp-foot {
    margin-top: 3rem;
    padding: 1.5rem 0;
    display: flex; align-items: center; justify-content: space-between;
    color: var(--muted); font-size: 0.85rem;
    border-top: 1px solid var(--border);
}
.lp-foot-meta { opacity: 0.8; }

.lp-nav { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0; }
.lp-logo {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: 0.01em;
}
.lp-logo .brand-star { width: 24px; height: 24px; }
.auth-star { width: 28px; height: 28px; vertical-align: -6px; margin-right: 0.35rem; }

/* ── The mosaic brand mark (BrandMark.razor) ─────────────────────────────
   The sparkle inherits currentColor for its companion star; the wordmark keeps the
   surrounding .brand/.lp-logo display font, with the "ai" pair tinted the same brand blue as
   the sparkle rather than capitalised — a second-look signature, not a shout. */
.brand-spark { width: 22px; height: 22px; flex: 0 0 auto; color: var(--wb-brand-tint, #3395e0); }
.lp-logo .brand-spark { width: 24px; height: 24px; }
.auth-brand .brand-spark { width: 26px; height: 26px; }
.brand-ai { color: var(--wb-brand-tint, #3395e0); font-weight: 600; }
.lp-navlinks { display: flex; align-items: center; gap: 1rem; }
.lp-navlinks a { color: var(--fg); opacity: 0.85; text-decoration: none; font-size: 0.9rem; }
.lp-navlinks a:hover { opacity: 1; }

.lp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.7rem 1.4rem; border-radius: 4px; font-weight: 600; font-size: 0.95rem;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.lp-btn.sm { padding: 0.45rem 0.95rem; font-size: 0.85rem; }
.lp-btn.primary { background: var(--accent); color: #fff; box-shadow: 0 8px 24px -10px var(--accent); }
.lp-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lp-btn.ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.lp-btn.ghost:hover { border-color: var(--accent); }

.lp-hero { position: relative; padding: 3.5rem 0 1rem; }
.lp-badge {
    display: inline-block; padding: 0.35rem 0.9rem; border-radius: 4px;
    border: 1px solid var(--border); background: #1c1c1c; color: var(--muted);
    font-size: 0.78rem; letter-spacing: 0.02em;
}
.lp-hero h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 1.05; margin: 1.1rem 0 0.75rem; letter-spacing: -0.02em; }
.lp-hero h1 .grad { color: var(--accent-2); }
.lp-sub { color: var(--muted); font-size: 1.1rem; max-width: 600px; margin: 0 auto; line-height: 1.6; }
.lp-cta { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; flex-wrap: wrap; }

/* hero product mockup */
.lp-mock { margin-top: 3rem; perspective: 1400px; }
.mock-window {
    max-width: 860px; margin: 0 auto; border-radius: 6px; overflow: hidden;
    background: #171717; border: 1px solid var(--border);
    box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.02);
}
.mock-bar { display: flex; gap: 0.4rem; padding: 0.7rem 0.9rem; background: #131313; border-bottom: 1px solid var(--border); }
.mock-bar span { width: 11px; height: 11px; border-radius: 50%; background: #373737; }
.mock-bar span:nth-child(1) { background: #ef5f56; } .mock-bar span:nth-child(2) { background: #f5bd4f; } .mock-bar span:nth-child(3) { background: #5fc454; }
.mock-body { display: flex; gap: 0; min-height: 260px; text-align: left; }
.mock-chat { flex: 1; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; border-right: 1px solid var(--border); }
.mock-msg { padding: 0.55rem 0.8rem; border-radius: 5px; font-size: 0.85rem; max-width: 92%; }
.mock-msg.user { align-self: flex-end; background: var(--accent); color: #fff; }
.mock-msg.bot { align-self: flex-start; background: #272727; color: var(--fg); }
.mock-input { margin-top: auto; padding: 0.6rem 0.8rem; border-radius: 4px; background: #151515; border: 1px solid var(--border); color: var(--muted); font-size: 0.82rem; }
.mock-site { flex: 1; background: #fff; color: #282828; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.mock-site-head { font-weight: 700; font-size: 1.05rem; }
.mock-field { height: 12px; border-radius: 2px; background: #e7eaf1; }
.mock-field.short { width: 55%; }
.mock-cta { margin-top: auto; align-self: flex-start; background: var(--accent); color: #fff; padding: 0.45rem 1rem; border-radius: 3px; font-size: 0.85rem; font-weight: 600; }
@media (max-width: 680px) { .mock-body { flex-direction: column; } .mock-chat { border-right: 0; border-bottom: 1px solid var(--border); } }

/* feature cards */
.lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 4rem; }
.lp-card { background: #1c1c1c; border: 1px solid var(--border); border-radius: 6px; padding: 1.5rem 1.25rem; text-align: left; }
.lp-card:hover { border-color: #38415a; transform: translateY(-3px); }
.lp-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 4px; background: rgba(0,120,214,0.12); color: var(--accent-2); margin-bottom: 0.8rem; }
.lp-ico svg { width: 22px; height: 22px; }
.lp-card h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.lp-card p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

/* steps */
.lp-steps { margin-top: 4.5rem; }
.lp-steps h2 { font-size: 1.8rem; margin-bottom: 1.75rem; letter-spacing: -0.01em; }
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.lp-step { background: #171717; border: 1px solid var(--border); border-radius: 6px; padding: 1.5rem; }
.lp-step .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; }
.lp-step h4 { margin: 0.75rem 0 0.35rem; font-size: 1.1rem; }
.lp-step p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* bottom CTA */
.lp-bottom { margin-top: 4.5rem; padding: 3rem 1.5rem; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(180deg, #1c1c1c, #151515); }
.lp-bottom h2 { font-size: 2rem; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.lp-bottom .lp-btn { margin-top: 1.25rem; }

/* visual aids in the generated site */
.site-sidenav .navlink { display: flex; align-items: flex-start; gap: 0.55rem; }
.site-sidenav .navlink .nav-ico { margin-top: 1px; flex-shrink: 0; }
.nav-ico { font-size: 1.05rem; line-height: 1; }
.site-page h2 { display: flex; align-items: center; gap: 0.5rem; }
.page-ico { font-size: 1.4rem; }
.hero-badge {
    width: 64px; height: 64px; margin: 0 auto 0.75rem; display: grid; place-items: center;
    font-size: 2rem; border-radius: 18px; background: #eef2fb; border: 1px solid #e6e6e6;
}

/* svg sizing for the generated-site visual aids */
.nav-ico { display: inline-flex; align-items: center; }
.nav-ico svg { width: 16px; height: 16px; }
.page-ico { display: inline-flex; align-items: center; }
.page-ico svg { width: 22px; height: 22px; }
.hero-card .tile-emoji svg { width: 30px; height: 30px; }
.hero-badge svg { width: 30px; height: 30px; color: var(--site-accent, var(--accent)); }

/* generated-site accent: primary buttons + page icons follow the site's chosen colour.
   Ghost/danger keep their own look (outline / red) — only fill true primaries. */
.cj-preview .big-button:not(.ghost):not(.danger) { background: var(--site-accent, var(--accent)); }
.cj-preview .big-button.ghost { background: transparent; border-color: var(--site-accent, var(--accent)); }
.cj-preview .lp-btn.primary { background: var(--site-accent, var(--accent)); box-shadow: 0 8px 24px -10px var(--site-accent, var(--accent)); }
.cj-preview .page-ico svg { color: var(--site-accent, var(--accent)); }

/* code/styles drawer */
.code-drawer {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 92vw); z-index: 30;
    background: #171717; border-left: 1px solid var(--border); box-shadow: -20px 0 60px -30px rgba(0,0,0,0.8);
    padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; overflow: hidden;
}
.code-head { display: flex; align-items: center; justify-content: space-between; }
.code-tabs { display: flex; gap: 0.4rem; }
.code-tabs button { background: #1f1f1f; border: 1px solid var(--border); color: var(--fg); padding: 0.35rem 0.8rem; border-radius: 3px; cursor: pointer; font-size: 0.85rem; }
.code-tabs button.active { background: var(--accent); border-color: var(--accent); }
.code-area {
    flex: 1; min-height: 0; width: 100%; box-sizing: border-box; resize: none; font-family: ui-monospace, monospace; font-size: 0.8rem;
    background: #151515; color: #d5d5d5; border: 1px solid var(--border); border-radius: 4px; padding: 0.7rem; overflow: auto;
}
.code-area.readonly { white-space: pre-wrap; word-break: break-word; }
.code-area { text-align: left; }   /* JSON should read left-aligned even inside centered modals */
.editor-page { position: relative; } /* anchor the drawer */
.saved { color: #5fc454; font-size: 0.8rem; margin-left: 0.5rem; }

/* admin inline edit */
.inline-edit { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.inline-edit .auth-input { max-width: 320px; }
.auth-input.slim { padding: 0.35rem 0.5rem; max-width: 240px; }
/* AI-models page: model dropdowns carry long labels (name + pricing + context) — give them room */
.admin .inline-edit select.auth-input { max-width: 720px; width: 100%; }
.admin .records select.auth-input.slim { max-width: none; width: 100%; min-width: 280px; }

/* ---- rich form controls in the preview ---- */
.preview-form textarea {
    padding: 0.55rem 0.7rem; border: 1px solid #d4cee6; border-radius: 3px;
    background: #fff; color: #222222; font: inherit; resize: vertical;
}
.pf-slider { display: flex; align-items: center; gap: 0.75rem; }
.pf-slider input[type=range] { flex: 1; accent-color: var(--accent); }
.pf-num { min-width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; color: #4a4360; }
.pf-toggle { position: relative; display: inline-flex; width: 44px; height: 24px; }
.pf-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pf-track { width: 44px; height: 24px; border-radius: 999px; background: #d4cee6; transition: background 160ms; position: relative; }
.pf-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 160ms; }
.pf-toggle input:checked + .pf-track { background: var(--accent); }
.pf-toggle input:checked + .pf-track::after { transform: translateX(20px); }
.pf-radios { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pf-radio { display: inline-flex; align-items: center; gap: 0.35rem; color: #222222; }
.pf-radio input { accent-color: var(--accent); }
.pf-color { width: 48px; height: 34px; padding: 2px; border: 1px solid #d4cee6; border-radius: 3px; background: #fff; cursor: pointer; }
.pf-image { display: flex; flex-direction: column; gap: 0.5rem; }
.pf-image-row { display: flex; gap: 0.4rem; align-items: stretch; }
.pf-image-row input { flex: 1; min-width: 0; }
.pf-imgsearch {
    white-space: nowrap; border: 1px solid var(--site-accent, var(--accent)); background: transparent;
    color: var(--site-accent, var(--accent)); cursor: pointer; font: inherit; font-size: 0.82rem;
    padding: 0.3rem 0.6rem; border-radius: 3px;
}
.pf-imgsearch:hover { background: var(--site-accent, var(--accent)); color: #fff; }
.pf-image-prev { max-width: 100%; max-height: 160px; border-radius: 3px; border: 1px solid #e6e2f2; object-fit: cover; }

/* image-search picker (a built-in field helper) */
.modal.img-picker { width: min(640px, calc(100vw - 2rem)); background: #fff; color: #181818; z-index: 60; }
.img-picker .modal-head h2 { color: #181818; }
.img-picker .toplink { color: #6b6385; }
.ip-search { display: flex; gap: 0.5rem; }
.ip-search input {
    flex: 1; padding: 0.5rem 0.65rem; border: 1px solid #d8d3e8; border-radius: 4px; font: inherit; color: #181818; background: #fff;
}
.ip-search input:focus { outline: none; border-color: var(--site-accent, var(--accent)); }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; max-height: 46vh; overflow-y: auto; }
.ip-item { border: 1px solid #ece8f5; border-radius: 4px; overflow: hidden; cursor: pointer; padding: 0; background: #f4f2fa; aspect-ratio: 1; }
.ip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-item:hover { border-color: var(--site-accent, var(--accent)); box-shadow: var(--elev-2); }
.ip-note { font-size: 0.74rem; margin: 0; }

/* inline (non-popup) forms — avoid stacking modals during nested data entry */
.img-picker-inline {
    border: 1px solid #ece8f5; border-radius: 4px; padding: 0.6rem; background: #faf9ff;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.img-picker-inline .ip-grid { max-height: 240px; }
.pf-imgsearch.on { background: var(--site-accent, var(--accent)); color: #fff; }
.related-addform {
    border-top: 1px dashed #e0dbf0; margin-top: 0.7rem; padding-top: 0.8rem;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.related-addform-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.88rem; color: #181818; font-weight: 600; }
.related-addform .form-actions { margin-top: 0.2rem; }
.pf-rating { display: flex; gap: 0.2rem; }
.pf-star { border: 0; background: none; cursor: pointer; font-size: 1.5rem; line-height: 1; color: #d4cee6; padding: 0; }
.pf-star.on { color: #f5b301; }

/* ---- guidance chips ---- */
.chips { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0 0 0.5rem; }
.chip {
    flex: 0 0 auto; padding: 0.35rem 0.7rem; border-radius: 4px; border: 1px solid var(--border);
    background: #1c1c1c; color: var(--muted); font-size: 0.78rem; cursor: pointer; white-space: nowrap;
}
.chip:hover:not(:disabled) { border-color: var(--accent); color: var(--fg); }
.chip:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== editor: website stage + slide-in AI panel ===== */
.editor-body { position: relative; flex: 1; min-height: 0; display: flex; }
.stage { flex: 1; min-height: 0; display: flex; transition: margin-right 220ms ease; }
.stage .browser { flex: 1; }
.ai-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.25); z-index: 24; }
.editor-page { --panel-w: 500px; }   /* wider default; drag the left edge to resize */
.ai-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--panel-w), 96vw); z-index: 25;
    background: #171717; border-left: 1px solid var(--border);
    box-shadow: -24px 0 60px -30px rgba(0,0,0,0.85);
    display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem;
    transform: translateX(106%); transition: transform 220ms ease; font-size: 0.85rem;
}
.ai-panel.open { transform: translateX(0); }
/* drag handle on the panel's left edge */
.panel-resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 26; }
.panel-resize::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: transparent; transition: background 0.12s; }
.panel-resize:hover::after, .panel-resize.dragging::after { background: var(--accent); }
/* pinned: the panel docks to the side and the preview shrinks to fit on the left */
.editor-page.pinned .stage { margin-right: min(var(--panel-w), 96vw); }
.editor-page.pinned .ai-panel { transform: none; box-shadow: -8px 0 26px -20px rgba(0, 0, 0, 0.6); }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
/* tabbed editor panel (AI / Pages / Blocks / Theme / Code) */
.panel-tabs { display: flex; justify-content: space-between; gap: 0.25rem; margin: 0 -0.9rem; padding: 0 0.9rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ptab { background: none; border: 0; color: var(--muted); padding: 0.55rem 0.75rem; cursor: pointer; font: inherit; font-size: 0.82rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.ptab:hover { color: var(--fg); }
.ptab.active { color: var(--fg); border-bottom-color: var(--accent); }
.preview-btn.ghost.on { border-color: var(--accent); color: var(--fg); }
/* Code / config modal */
.code-modal { width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.code-modal .code-area { min-height: 320px; }
.code-modal .code-area.readonly { max-height: 52vh; }
.panel-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.panel-body:not(.ai) { overflow-y: auto; overflow-x: hidden; padding: 0.7rem 0.4rem 0 0; scrollbar-gutter: stable; }
.panel-section { display: flex; flex-direction: column; gap: 0.55rem; padding-bottom: 1rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.panel-section:last-child { border-bottom: 0; }
.panel-section h3 { margin: 0; font-size: 0.95rem; color: var(--fg); }
.panel-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* right-click context menu on the preview */
.ctx-backdrop { position: fixed; inset: 0; z-index: 70; }
/* outline:none — deliberately focused (tabindex="-1") on open so Escape works regardless of
   prior focus; the menu's own border/shadow already reads as "the active thing", a focus ring
   round the whole box would not. */
.ctx-menu { position: fixed; z-index: 71; min-width: 224px; background: #1d1d1d; border: 1px solid var(--border); border-radius: 4px; padding: 0.3rem; box-shadow: 0 18px 50px -16px rgba(0, 0, 0, 0.7); outline: none; }
.ctx-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--fg); padding: 0.5rem 0.6rem; border-radius: 7px; cursor: pointer; font-size: 0.88rem; }
.ctx-item:hover { background: var(--accent); color: #fff; }
.panel-section .fld.stack { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; }
.panel-section .fld.stack > span { font-size: 0.8rem; color: var(--muted); }
.panel-section .auth-input { width: 100%; box-sizing: border-box; }
.muted.xs { font-size: 0.74rem; line-height: 1.45; }
.ai-head-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.ai-head-actions .toplink { white-space: nowrap; }
.ai-pin { display: inline-flex; align-items: center; padding: 0.15rem; border-radius: 2px; }
.ai-pin svg { width: 15px; height: 15px; display: block; }
.ai-pin.on { color: var(--accent); }
.ai-pin:hover { background: rgba(255, 255, 255, 0.08); }

/* two-column form */
.preview-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1.25rem; max-width: 680px; }
.pf-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.pf-field input, .pf-field select, .pf-field textarea { width: 100%; }
.pf-field input[type=checkbox], .pf-color { width: auto; }
.preview-form > .form-error { grid-column: 1 / -1; }
.preview-form > .big-button { grid-column: 1 / -1; width: auto; justify-self: start; }
@media (max-width: 600px) { .preview-form { grid-template-columns: 1fr; } }

/* chips: wrap instead of a broken horizontal scroll */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; overflow: visible; padding: 0 0 0.25rem; }

/* ---- grill-me clarifying questions ---- */
.grill { display: flex; flex-direction: column; gap: 0.6rem; padding: 0 0 0.4rem; }
.grill-q { background: #1c1c1c; border: 1px solid var(--border); border-radius: 5px; padding: 0.6rem 0.7rem; }
.grill-text { font-size: 0.82rem; margin-bottom: 0.45rem; color: var(--fg); }
.grill-why { font-size: 0.72rem; color: var(--muted); margin: -0.2rem 0 0.45rem; }
.grill-opts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.grill-opts .chip { background: #282828; border-color: #33405e; color: var(--fg); }
.grill-opts .chip:hover { border-color: var(--accent); background: #303030; }
.grill-opts .chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.grill-opts .chip.selected:hover { background: var(--accent); }
.grill-other {
    width: 100%; margin-top: 0.45rem; padding: 0.4rem 0.55rem; font: inherit; font-size: 0.8rem;
    background: #161616; border: 1px solid #3b3b3b; border-radius: 3px; color: var(--fg);
}
.grill-other:focus { outline: none; border-color: var(--accent); }
.grill-send { align-self: flex-start; }

/* admin response feedback (judge / retry-with-note / save fix) */
.admin-fb { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.5rem 0 0.2rem; border-top: 1px dashed var(--border); }
.fb-flag {
    align-self: flex-start; background: none; border: 1px solid var(--border); color: var(--muted);
    cursor: pointer; font: inherit; font-size: 0.78rem; padding: 0.25rem 0.65rem; border-radius: 7px;
}
.fb-flag:hover { color: #ff9aa6; border-color: #6b2330; }
.fb-comment {
    background: #161616; border: 1px solid var(--border); border-radius: 3px; color: var(--fg);
    font: inherit; font-size: 0.85rem; padding: 0.45rem 0.55rem; resize: vertical;
}
.fb-comment:focus { outline: none; border-color: var(--accent); }
.fb-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fb-hint { font-size: 0.72rem; margin: 0; }
.fb-saved { font-size: 0.8rem; color: #8fe0b6; }
.chip-x { opacity: 0.6; }

/* ---- breadcrumbs in the generated site ---- */
.site-crumbs {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.9rem; background: #fbfaff; border-bottom: 1px solid #eee8f6;
    font-size: 0.82rem; color: #6b6385;
}
.site-crumbs .crumb { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.site-crumbs .crumb.current { color: #4a4360; cursor: default; }
.site-crumbs .crumb-sep { color: #b7b0c9; }

/* ---- new-website creation wizard (modal) ---- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(4, 6, 12, 0.6); z-index: 40; }
.modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 41;
    width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto;
    background: #1c1c1c; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.2rem 1.3rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    display: flex; flex-direction: column; gap: 1rem; color: var(--fg);
    /* Some callers give the box itself tabindex="-1" and focus it on open (so Escape works
       regardless of prior focus) — suppress the resulting focus ring on the whole card; the
       backdrop + shadow already read as "the active thing". */
    outline: none;
}
.modal-head h2 { color: var(--fg); }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { margin: 0; font-size: 1.15rem; }
.fld { display: flex; flex-direction: column; gap: 0.4rem; }
.fld > span { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.panel .fld { margin-bottom: 0.9rem; }
.panel .fld textarea.code-area { width: 100%; box-sizing: border-box; }
.modal input[type=text], .modal .fld input:not([type]), .modal textarea {
    background: #161616; border: 1px solid var(--border); border-radius: 4px;
    color: var(--fg); font: inherit; padding: 0.5rem 0.65rem; width: 100%;
}
.modal textarea { resize: vertical; }
.modal input:focus, .modal textarea:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.2rem; }
.modal .fld code { background: #161616; border: 1px solid var(--border); border-radius: 2px; padding: 0.05rem 0.35rem; }
.modal pre.code-area { max-height: 45vh; margin: 0; }
.big-button.danger { background: #dc2626; }
.big-button.danger:hover { background: #b91c1c; }
.big-button.ghost.danger { background: transparent; color: #f87171; border-color: #5a2a2a; }
.big-button.ghost.danger:hover { border-color: #dc2626; color: #fca5a5; }

/* layout wireframe picker */
.wf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.wf-card {
    display: flex; flex-direction: column; gap: 0.3rem; cursor: pointer; text-align: left;
    background: #161616; border: 1px solid var(--border); border-radius: 11px; padding: 0.6rem;
}
.wf-card:hover { border-color: #494949; }
.wf-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wf { display: flex; flex-direction: column; gap: 3px; height: 64px; }
.wf-header { height: 12px; background: var(--accent); border-radius: 3px; opacity: 0.85; }
.wf-body { flex: 1; display: flex; gap: 3px; }
.wf-side { width: 22px; background: #3b3b3b; border-radius: 3px; }
.wf-content { flex: 1; background: #303030; border-radius: 3px; }
.wf-footer { height: 7px; background: #3b3b3b; border-radius: 3px; }
.wf-name { font-size: 0.82rem; font-weight: 600; color: var(--fg); }
.wf-desc { font-size: 0.72rem; color: var(--muted); }

/* accent swatches + colour picker */
.swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.swatch.selected { border-color: var(--fg); box-shadow: 0 0 0 2px #1c1c1c, 0 0 0 3px var(--fg); }
.swatch-pick { width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 3px; background: none; cursor: pointer; }

/* font chips */
.font-opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.font-chip {
    background: #161616; border: 1px solid var(--border); border-radius: 3px;
    color: var(--fg); padding: 0.35rem 0.7rem; cursor: pointer; font-size: 0.9rem;
}
.font-chip:hover { border-color: var(--accent); }
.font-chip.selected { border-color: var(--accent); background: #282828; }

/* design wizard (step 2): proposal preview */
.modal.create-site.designing { width: min(680px, calc(100vw - 2rem)); }
.dp-busy { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.2rem 1rem; text-align: center; }
.dp-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: dp-spin 0.8s linear infinite; }
@keyframes dp-spin { to { transform: rotate(360deg); } }
.dp-reply { margin: 0 0 0.2rem; }
.dp { background: #fff; color: #181818; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.dp-hero { width: 100%; height: 175px; object-fit: cover; display: block; }
.dp-headline { margin: 0.9rem 1rem 0.3rem; font-size: 1.3rem; color: #181818; }
.dp-sub { margin: 0 1rem 0.7rem; font-size: 0.9rem; color: #4a4360; line-height: 1.5; }
.dp-meta { display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem 0.8rem; font-size: 0.76rem; color: #6b6385; flex-wrap: wrap; }
.dp-swatch { width: 18px; height: 18px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.12); }
.dp-cta-pill { color: #fff; padding: 0.2rem 0.65rem; border-radius: 4px; font-size: 0.74rem; margin-left: auto; }
.dp-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 0 1rem 1rem; }
.dp-sec { display: flex; gap: 0.55rem; align-items: flex-start; background: #f8f6ff; border: 1px solid #ece8f5; border-radius: 4px; padding: 0.5rem; }
.dp-sec img { width: 46px; height: 46px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.dp-sec-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dp-sec-text strong { font-size: 0.82rem; color: #181818; }
.dp-sec-text span { font-size: 0.74rem; color: #6b6385; line-height: 1.35; }
@media (max-width: 560px) { .dp-sections { grid-template-columns: 1fr; } }

/* ===== generated-site polish: elevation, motion & interaction state layers =====
   (Material-inspired principles applied to the built sites, without a uniform MD skin —
   each site keeps its own accent, font and personality.) */
.cj-preview .gen-card, .cj-preview .related-list,
.cj-preview .dh-card, .cj-preview .hero-card {
    transition: box-shadow var(--dur) var(--ease-standard), transform var(--dur) var(--ease-standard);
}
.cj-preview .gen-card, .cj-preview .related-list { box-shadow: var(--elev-1); }
.cj-preview .gen-card:hover, .cj-preview .dh-card:hover, .cj-preview .hero-card:hover { box-shadow: var(--elev-3); }
.cj-preview .gen-card:active, .cj-preview .hero-card:active { transform: translateY(-1px) scale(0.995); }

/* primary actions: depth + smooth press feedback */
.cj-preview .big-button, .cj-preview .gen-cta, .cj-preview .rel-add, .cj-preview .page-add {
    transition: transform var(--dur) var(--ease-standard), box-shadow var(--dur) var(--ease-standard), filter var(--dur) var(--ease-standard);
}
.cj-preview .big-button { box-shadow: var(--elev-1); }
.cj-preview .big-button:hover:not(:disabled), .cj-preview .gen-cta:hover { box-shadow: var(--elev-2); }
.cj-preview .big-button:active:not(:disabled), .cj-preview .gen-cta:active,
.cj-preview .page-add:active, .cj-preview .rel-add:active { transform: translateY(1px) scale(0.99); }

/* inputs/selects: a focus state layer in the site accent */
.cj-preview input:focus, .cj-preview select:focus, .cj-preview textarea:focus {
    outline: none; border-color: var(--site-accent, var(--accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-accent, var(--accent)) 20%, transparent);
}

/* table rows: hover state layer + smooth */
.cj-preview .records tbody tr td { transition: background var(--dur) var(--ease-standard); }
.cj-preview .records tbody tr:not(.rec-detail-row):hover td {
    background: color-mix(in srgb, var(--site-accent, var(--accent)) 6%, #fff);
}

/* nav + crumbs: smooth state transitions */
.cj-preview .navlink, .cj-preview .topnavlink, .cj-preview .crumb, .cj-preview .gen-card-link {
    transition: background var(--dur) var(--ease-standard), color var(--dur) var(--ease-standard), opacity var(--dur) var(--ease-standard);
}

/* popups in the site get the top elevation */
.cj-preview .modal { box-shadow: var(--elev-3); }

/* =============================================================================
   Aeon overrides — colour-rich landing page on top of Conjure's dark base
   ========================================================================== */

/* Faint flag wash — black (top-left) fading DIAGONALLY through up to THREE whispered flag hints
   (bottom-right). The stops default to the German black/red/gold (the host look) and are
   overridden per-market via --mkt-tint-1/2/3, set on :root by MarketBrand from the active
   Market's country / configured theme (Admin → Markets). Tricolour flags use their real third
   colour; two-colour flags weave A→B→A. Deliberately very low-chroma so content sits on what
   still reads as a dark neutral. Pinned to the viewport so it never tiles on tall pages. */
:root { --mkt-tint-1: #0d0d0d; --mkt-tint-2: #1e0d12; --mkt-tint-3: #2c2409; }
body {
    background:
        linear-gradient(135deg,
            var(--bg) 0%,
            var(--bg) 42%,
            var(--mkt-tint-1) 66%,
            var(--mkt-tint-2) 84%,
            var(--mkt-tint-3) 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ---- arc hero ---------------------------------------------------------- */
.lp-arc-wrap {
    margin: 2.5rem auto 0;
    max-width: 1180px;
    padding: 1rem;
    border-radius: var(--radius);
    background:
        radial-gradient(60% 80% at 50% 50%, rgba(255, 255, 255, 0.025), transparent 70%);
}
.lp-arc { display: block; width: 100%; height: auto; }
.lp-arc-rail {
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
    filter: drop-shadow(0 0 8px rgba(51, 149, 224, 0.25));
}

.lp-arc-node .halo {
    fill: var(--n, var(--accent));
    opacity: 0.18;
    transform-origin: center;
    animation: arcHalo 3s ease-in-out infinite;
}
.lp-arc-node .dot {
    fill: var(--n, var(--accent));
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--n, var(--accent)) 60%, transparent));
}
.lp-arc-node .label {
    fill: var(--fg);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    text-anchor: middle;
    letter-spacing: 0.01em;
}
.lp-arc-node .sub {
    fill: var(--muted);
    font-family: var(--font-sans);
    font-size: 11px;
    text-anchor: middle;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
@keyframes arcHalo {
    0%, 100% { opacity: 0.18; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(1.18); }
}

/* Stagger the halo pulses around the arc so they don't all flash in lockstep. The
   defs / rail / orb path / orb circle come first, so the eight node groups land at
   nth-child(5)..(12). 0.35s steps spread across most of the 3s pulse cycle. */
.lp-arc-node:nth-child(5)  .halo { animation-delay: 0.00s; }   /* Customer       */
.lp-arc-node:nth-child(6)  .halo { animation-delay: 0.35s; }   /* Quote          */
.lp-arc-node:nth-child(7)  .halo { animation-delay: 0.70s; }   /* Application    */
.lp-arc-node:nth-child(8)  .halo { animation-delay: 1.05s; }   /* Approval       */
.lp-arc-node:nth-child(9)  .halo { animation-delay: 1.40s; }   /* Contract       */
.lp-arc-node:nth-child(10) .halo { animation-delay: 1.75s; }   /* Handover       */
.lp-arc-node:nth-child(11) .halo { animation-delay: 2.10s; }   /* Contract Admin */
.lp-arc-node:nth-child(12) .halo { animation-delay: 2.45s; }   /* Retention      */

@media (prefers-reduced-motion: reduce) {
    .lp-arc-node .halo { animation: none; opacity: 0.22; }
    .lp-arc circle[fill="url(#pulseGlow)"] { display: none; }
}

/* ---- colour-coded feature cards --------------------------------------- */
/* Conjure's base .lp-card stays; we add a coloured top-border and a tinted icon. */
.lp-card {
    border-top: 3px solid var(--accent-card, var(--accent));
    transition: transform var(--dur, 200ms), box-shadow var(--dur, 200ms);
}
.lp-card:hover {
    transform: translateY(-3px);
    box-shadow:
        var(--elev-2),
        0 0 0 1px color-mix(in srgb, var(--accent-card, var(--accent)) 40%, transparent);
}
.lp-card .lp-ico {
    color: var(--accent-card, var(--accent));
    background: color-mix(in srgb, var(--accent-card, var(--accent)) 14%, transparent);
}

/* ---- colour-coded step numbers ---------------------------------------- */
.lp-step .num {
    background: linear-gradient(135deg,
        var(--step-c, var(--accent)) 0%,
        color-mix(in srgb, var(--step-c, var(--accent)) 60%, #ffffff20) 100%);
    color: #101010;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* hero h1 highlight word: solid accent — no gradient text */
.lp-hero h1 .grad { color: var(--accent-2); }


/* =============================================================================
   Dashboard (authenticated home)
   ========================================================================== */

.dashboard h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.01em; }
.dashboard .lead { color: var(--muted); margin: 0.4rem 0 0; font-size: 0.95rem; }

/* "What's new" dashboard card — published customer release notes (Admin → Releases). */
/* Deliberately subtle — a quiet footer note at the very bottom of the dashboard, not a card. No
   panel background/border; a thin top rule separates it, and everything is muted + small so it
   never competes with the KPIs / journey above it. */
/* ---- Release notes, card layout (dashboard What's-new + Admin → Releases) -------------- */
.rn-preamble { font-size: 0.82rem; line-height: 1.55; color: var(--muted); margin-bottom: 0.8rem; }
.rn-preamble p { margin: 0.2rem 0; }
.rn-preamble strong { color: color-mix(in srgb, var(--fg) 82%, transparent); }
.rn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.7rem; align-items: start; }
.rn-card {
    background: color-mix(in srgb, var(--fg) 3%, transparent);
    border: 1px solid var(--border); border-radius: 4px; padding: 0.7rem 0.9rem;
    font-size: 0.8rem; line-height: 1.5; color: var(--muted); min-width: 0;
}
.rn-card-h {
    display: flex; align-items: center; gap: 0.45rem;
    font-family: var(--font-sans, inherit); font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: color-mix(in srgb, var(--fg) 80%, transparent);
    margin-bottom: 0.45rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
.rn-card-ico { font-size: 0.95rem; }
.rn-card-body p { margin: 0.3rem 0; }
.rn-card-body ul, .rn-card-body ol { margin: 0.25rem 0 0.4rem; padding-left: 1.15rem; }
.rn-card-body li { margin: 0.22rem 0; }
.rn-card-body li::marker { color: color-mix(in srgb, var(--accent, #3395e0) 60%, transparent); }
.rn-card-body strong { color: color-mix(in srgb, var(--fg) 85%, transparent); }
.rn-card-body code {
    font-family: var(--mono); font-size: 0.72rem;
    background: color-mix(in srgb, var(--fg) 7%, transparent);
    border-radius: 4px; padding: 0.05rem 0.3rem; overflow-wrap: anywhere;
}
/* Sub-headings INSIDE a card (h4+ in the source, or #### under a split section) — small caps rows. */
.rn-card-body h1, .rn-card-body h2, .rn-card-body h3, .rn-card-body h4, .rn-card-body h5 {
    font-family: var(--font-sans, inherit); font-size: 0.74rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; margin: 0.6rem 0 0.2rem;
    color: color-mix(in srgb, var(--fg) 65%, transparent);
}
.rn-card-body blockquote { margin: 0.4rem 0; padding: 0.3rem 0.6rem; border-left: 2px solid var(--border); }
.rel-notes-body { max-width: none; }

/* What's-new: a quiet button (right of a section header) that opens the release-notes SidePanel;
   inside the panel the section cards stack one under another. */
.lp-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.whatsnew-btn { white-space: nowrap; }
.whatsnew-btn-v { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); margin-left: 0.25rem; }
.rn-stacked .rn-cards { grid-template-columns: 1fr; }
.rn-stacked { padding-bottom: 1rem; }

.dash-banner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    padding: 2rem 2rem 1.75rem;
    margin-bottom: 2rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #1c1c1c, #151515);
}
.dash-eyebrow {
    display: inline-block;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 0.5rem;
}
.dash-banner-arc { display: flex; align-items: center; }
.dash-banner-arc svg { width: 220px; height: 80px; display: block; }
@media (max-width: 720px) {
    .dash-banner { grid-template-columns: 1fr; }
    .dash-banner-arc { display: none; }
}

/* KPI grid */
.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 3rem;
}
.dash-kpi {
    background: #1c1c1c;
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent-card, var(--accent));
    border-radius: 6px;
    padding: 1.25rem;
    display: flex; flex-direction: column;
    gap: 0.25rem;
    transition: transform var(--dur, 200ms), box-shadow var(--dur, 200ms);
}
.dash-kpi-link, .dash-kpi-link:hover { text-decoration: none; color: inherit; cursor: pointer; }
.dash-kpi-link:hover { border-color: color-mix(in srgb, var(--accent-card, var(--accent)) 45%, var(--border)); }
/* Stop the global `a:hover` underline from leaking through to text inside the tiles. */
.admin-tile, .admin-tile:hover, .admin-tile *,
.dash-kpi-link, .dash-kpi-link:hover, .dash-kpi-link *,
.dash-quick-tile, .dash-quick-tile:hover, .dash-quick-tile *,
.dash-phase-link, .dash-phase-link:hover, .dash-phase-link * { text-decoration: none; }
.dash-phase-link { color: inherit; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.dash-phase-link:hover { border-color: color-mix(in srgb, var(--accent-card, var(--accent)) 45%, var(--border)); transform: translateY(-1px); }
.dash-kpi:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--elev-1),
        0 0 0 1px color-mix(in srgb, var(--accent-card, var(--accent)) 50%, transparent);
}
.dash-kpi-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.dash-kpi-value {
    color: var(--fg);
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.dash-kpi-sub { color: var(--muted); font-size: 0.82rem; }

.dash-section-h {
    font-size: 1.05rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
}

/* Quick action tiles */
.dash-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.dash-quick-tile {
    background: #1c1c1c;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.25rem;
    display: flex; flex-direction: column;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--fg);
    transition: transform var(--dur, 200ms), border-color var(--dur, 200ms), box-shadow var(--dur, 200ms);
}
.dash-quick-tile:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent-card, var(--accent)) 60%, var(--border));
    box-shadow: var(--elev-2);
    text-decoration: none;
}
.dq-ico {
    width: 2.4rem; height: 2.4rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-card, var(--accent));
    background: color-mix(in srgb, var(--accent-card, var(--accent)) 14%, transparent);
    border-radius: 4px;
    font-size: 1.15rem;
    margin-bottom: 0.3rem;
}
.dq-title { font-weight: 700; font-size: 1rem; }
.dq-desc { color: var(--muted); font-size: 0.88rem; }

.dash-foot { margin-top: 2rem; font-size: 0.85rem; }
.dash-foot code { background: #222222; padding: 0 0.4rem; border-radius: 3px; color: var(--fg); }

/* =============================================================================
   Aeon journey: dimmed arc nodes + dashboard phase progress strip
   ========================================================================== */

/* Dimmed (downstream) arc nodes — visually separate from Aeon-owned phases. */
.lp-arc-node.dim .halo { opacity: 0; animation: none; }
.lp-arc-node.dim .dot { fill: var(--muted); filter: none; opacity: 0.55; }
.lp-arc-node.dim .label,
.lp-arc-node.dim .sub { fill: var(--muted); opacity: 0.75; }

.lp-arc-caption {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.4;
}
.lp-arc-caption .dim-dot {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--muted);
    opacity: 0.55;
    margin: 0 0.25rem;
    vertical-align: middle;
}

/* Dashboard journey strip — four phase cards in a row with progress bars. */
.dash-journey-lead { margin: 0 0 1rem; font-size: 0.9rem; }
.dash-journey {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.dash-phase {
    background: #1c1c1c;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.1rem 1.1rem;
    display: flex; flex-direction: column;
    gap: 0.25rem;
    position: relative;
    overflow: hidden;
}
.dash-phase::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent-card, var(--accent)) 10%, transparent) 0%,
        transparent 60%);
}
.dp-head { display: flex; align-items: center; gap: 0.5rem; position: relative; }
.dp-num {
    width: 1.4rem; height: 1.4rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-card, var(--accent));
    color: #101010;
    font-weight: 700;
    font-size: 0.78rem;
}
.dp-title { font-weight: 700; font-size: 1rem; }
.dp-sub { color: var(--muted); font-size: 0.8rem; position: relative; }
.dp-count {
    font-size: 1.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-top: 0.4rem;
    position: relative;
}
.dp-bar {
    margin-top: 0.4rem;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.dp-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 600ms var(--ease-emphasized, ease);
}

/* =============================================================================
   Logged-in home: quickstart + recent activity (sits below the hero arc)
   ========================================================================== */

.lp-sec-h {
    font-size: 1.05rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin: 3rem 0 1rem;
}

/* Quick-start action tiles */
.lp-quickstart { margin-bottom: 1rem; }
.lp-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.lp-action {
    background: #1c1c1c;
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent-card, var(--accent));
    border-radius: 6px;
    padding: 1.25rem;
    text-decoration: none;
    color: var(--fg);
    display: flex; flex-direction: column;
    gap: 0.35rem;
    text-align: left;
    transition: transform var(--dur, 200ms), border-color var(--dur, 200ms), box-shadow var(--dur, 200ms);
}
.lp-action:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--elev-2),
        0 0 0 1px color-mix(in srgb, var(--accent-card, var(--accent)) 50%, transparent);
    text-decoration: none;
}
.lp-action-ico {
    width: 2.4rem; height: 2.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent-card, var(--accent));
    background: color-mix(in srgb, var(--accent-card, var(--accent)) 14%, transparent);
    border-radius: 4px;
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
}
.lp-action h3 { margin: 0; font-size: 1.05rem; }
.lp-action p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* Recent activity columns */
.lp-recent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0 1rem;
}
.lp-recent-col {
    background: #1c1c1c;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.25rem;
}
.lp-recent-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem;
}
.lp-recent-head h3 { margin: 0; font-size: 1rem; }
.lp-link { color: var(--accent-2); font-size: 0.85rem; }
.lp-empty { margin: 0.5rem 0; font-size: 0.9rem; }

.lp-feed {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.lp-feed-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 3px;
    text-decoration: none;
    color: var(--fg);
    transition: background var(--dur, 200ms);
}
.lp-feed-row:hover { background: rgba(255, 255, 255, 0.04); text-decoration: none; }
.lp-feed-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-feed-meta { font-size: 0.78rem; white-space: nowrap; }

/* Status pills — sized for inline use in feed rows */
.lp-status {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.07);
    color: var(--fg);
    white-space: nowrap;
}
.lp-status-draft       { background: color-mix(in srgb, #3395e0 22%, transparent); color: #b3d9f2; }
.lp-status-inprogress  { background: color-mix(in srgb, #57c4f5 22%, transparent); color: #b3e5fc; }
.lp-status-awaitingcredit,
.lp-status-open        { background: color-mix(in srgb, #c79bff 22%, transparent); color: #e4ccff; }
.lp-status-approved    { background: color-mix(in srgb, #5dd39e 22%, transparent); color: #b6ecd1; }
.lp-status-contracted  { background: color-mix(in srgb, #ff8a4c 22%, transparent); color: #ffd1b3; }
.lp-status-active      { background: color-mix(in srgb, #7fd8d4 22%, transparent); color: #c2efee; }
.lp-status-closed      { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.lp-status-declined,
.lp-status-cancelled   { background: color-mix(in srgb, #f87171 22%, transparent); color: #ffc1c1; }
.lp-status-resolved    { background: color-mix(in srgb, #5dd39e 22%, transparent); color: #b6ecd1; }
.lp-status-waiting     { background: color-mix(in srgb, #ffd166 22%, transparent); color: #ffe9a8; }

/* =============================================================================
   Admin: Market edit page (identity / flags / finance limits / journey)
   ========================================================================== */

.mkt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.mkt-panel { padding: 1.25rem; }
.mkt-panel.mkt-full { grid-column: 1 / -1; }
/* Market edit page only (.mkt-edit — the other .mkt-grid pages keep the stock grid): the page is
   .wide for its big editors, but unbounded that put five 320px tracks beside one lone card and
   stretched panel prose past 200 characters. 84rem still holds the widest editors (dated rates,
   affordability, environments) while every tab reads as one aligned column of cards. */
.mkt-grid.mkt-edit {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 84rem;
    align-items: start;
}
.mkt-edit + .mkt-actions { max-width: 84rem; }
/* The active tab rides on the grid (mkt-tab-<tab>) so track count can match its card count:
   the full-width panels span every track, which stops auto-fit collapsing empty ones — Contract's
   three cards would otherwise sit beside a permanently empty fourth track. */
.mkt-edit.mkt-tab-contract { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); }
/* A tab's lone small panel (Brand policy, Application chat) spans the row instead of sitting
   stranded in one track; the form inside stays a readable column, not the full 84rem. */
.mkt-panel.mkt-solo { grid-column: 1 / -1; }
.mkt-edit :is(.mkt-full, .mkt-solo) > .mkt-form > label { max-width: 42rem; }
.mkt-edit .mkt-used, .mkt-edit .mkt-sub { max-width: 78ch; }

/* The Journey tab carries eight full-width journey strips — the 84rem column squashes a 6-stage
   strip on a wide screen, so this tab alone relaxes the cap and lets the strips breathe. Prose
   stays readable via the 78ch rules above. */
.mkt-grid.mkt-edit.mkt-tab-journey { max-width: none; }
.mkt-ws-h {
    margin: 1.4rem 0 0.35rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--muted);
}
.mkt-ws-h a { text-transform: none; letter-spacing: normal; }
.mkt-ws-journey { margin-top: 0.25rem; }
/* Customer matching (identity resolution) card */
.mkt-match-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin: 0.5rem 0 1rem; }
.mkt-match-rule { border: 1px solid var(--border); border-radius: 4px; padding: 0.6rem; margin-bottom: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.mkt-match-fields { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.mkt-check.sm { font-size: 0.78rem; }
.mkt-match-enforce { display: flex; flex-direction: column; gap: 0.3rem; max-width: 34rem; }

/* Environments (deployment topology) card */
.mkt-env-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.mkt-env-flow {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
    margin: 0.9rem 0; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 4px;
    background: #181818;
}
.mkt-env-node {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.22rem 0.6rem; border-radius: 4px; font-size: 0.82rem; font-weight: 600;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--fg);
}
.mkt-env-node.prod { background: color-mix(in srgb, #34d399 16%, transparent); border-color: color-mix(in srgb, #34d399 50%, transparent); }
.mkt-env-prodtag { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.03em; color: #34d399; font-weight: 700; }
.mkt-env-arrow { color: var(--muted); font-size: 1rem; }
.mkt-env-rows { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.4rem; }
.mkt-env-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.6rem; }
.mkt-env-row .fld { display: flex; flex-direction: column; gap: 0.2rem; }
.mkt-env-url { flex: 1 1 16rem; min-width: 12rem; }
.mkt-env-seq {
    flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; margin-bottom: 0.3rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--border); color: var(--fg); font-size: 0.75rem; font-weight: 700;
}
.mkt-env-prodcheck { margin-bottom: 0.35rem; white-space: nowrap; }
.mkt-env-ops { display: flex; gap: 0.25rem; margin-bottom: 0.25rem; }
.mkt-env-pull { margin: 0 0 0.2rem 2rem; }
.mkt-env-pull code { font-size: 0.72rem; }

/* Button + status-message rows (Save registry, releases, doc profiles): breathing room between
   the action and its result text instead of the two touching. */
.rel-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* Fragment builder (/admin/form-fragments/{id}): section cards with field rows — the same
   shaping vocabulary as the form editor, scaled down to one fragment. */
.frag-section { border: 1px solid var(--border); border-radius: 3px; padding: 0.6rem 0.75rem; margin-top: 0.6rem; }
.frag-section-head { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; }
.frag-section-head input:first-child { flex: 1 1 14rem; font-weight: 600; }
.frag-tab { flex: 0 1 9rem; }
.frag-field { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.3rem 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.frag-field > input:first-child { flex: 1 1 11rem; }
.frag-kind { flex: 0 1 8.5rem; }
.frag-sdm { flex: 1 1 14rem; min-width: 12rem; }

/* Contract-action availability rules (/admin/contract-actions): one bordered block per rule,
   condition inputs flowing in a wrapped row; min–max pairs share a compact strip. */
.cap-rule { border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.75rem; margin-top: 0.5rem; }
.cap-rule-row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: flex-end; }
.cap-rule-row .fld { display: flex; flex-direction: column; gap: 0.15rem; }
.cap-minmax { display: inline-flex; align-items: center; gap: 0.25rem; }
.cap-minmax input { width: 4.2rem; }

/* "Your sandbox image is behind UAT" — the copy-paste update banner in the app shell. Amber like
   a notice, not red like a fault: an older build is a fact, not an emergency. */
.sbx-update-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
    padding: 0.4rem 1rem; font-size: 0.85rem;
    background: color-mix(in srgb, #f59e0b 14%, transparent);
    border-bottom: 1px solid color-mix(in srgb, #f59e0b 45%, transparent);
}
.sbx-update-bar code {
    padding: 0.15rem 0.5rem; border-radius: 4px; user-select: all;
    background: color-mix(in srgb, #000 25%, transparent); font-size: 0.8rem;
}

/* The register-a-sandbox row: its own flex layout (NOT .mkt-env-row — that grid is shaped for
   stage rows) so the two fields share the width and the mint button bottom-aligns with them. */
.sbx-add { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-top: 1rem; }
.sbx-add .fld { flex: 1 1 18rem; min-width: 14rem; display: flex; flex-direction: column; gap: 0.2rem; }
.sbx-add .fld input { width: 100%; }
.sbx-add .lp-btn { margin-bottom: 0.15rem; white-space: nowrap; }

.mkt-h {
    font-size: 0.85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin: 0 0 0.5rem;
}
.mkt-sub { margin: 0 0 1rem; font-size: 0.85rem; }
.mkt-form { display: flex; flex-direction: column; gap: 0.75rem; }
/* User-admin scope panel: shown in place of the org links when the level doesn't use them. */
.scope-hint { font-size: 0.8rem; margin: 0; }
.mkt-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.mkt-form label > span { color: var(--muted); }
.mkt-form .auth-input { width: 100%; }
.mkt-form .mkt-check {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.mkt-form .mkt-check input[type="checkbox"] { width: 1.05rem; height: 1.05rem; cursor: pointer; }
.mkt-form .mkt-check span { color: var(--fg); }

/* Data retention rules editor (AdminMarketEdit). */
.mkt-retention-rules { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.mkt-retention-rule {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.6fr 0.9fr auto;
    gap: 0.6rem;
    align-items: end;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 3px;
}
.mkt-retention-rule label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; }
.mkt-retention-rule label > span { color: var(--muted); }
.mkt-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.mkt-flags {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem 1rem;
}
.mkt-actions {
    display: flex; justify-content: flex-end; gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Markets → Workspaces: one CARD per desk (icon + name + what it does) instead of a bare
   checkbox row — the tagline was hover-only before and nobody found the panel. Same visual
   vocabulary as the /workspaces chooser cards, sized down for an admin form. */
.mkt-ws-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.65rem;
    margin-top: 0.85rem;
}
.mkt-ws-card {
    display: flex; align-items: flex-start; gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border, #393939);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, opacity 120ms ease;
}
.mkt-ws-card:hover { border-color: var(--accent, #3395e0); }
.mkt-ws-card input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; }
.mkt-ws-card .mkt-ws-ico { font-size: 1.35rem; line-height: 1; margin-top: 0.05rem; color: var(--accent, #3395e0); }
.mkt-ws-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.mkt-ws-body strong { font-size: 0.92rem; }
.mkt-ws-tag { font-size: 0.78rem; color: var(--muted, #a2a2a2); line-height: 1.35; }
.mkt-ws-state {
    margin-left: auto; flex-shrink: 0;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.15rem 0.5rem; border-radius: 999px;
    background: color-mix(in srgb, var(--accent, #3395e0) 18%, transparent);
    color: var(--accent, #3395e0);
}
.mkt-ws-card.off { opacity: 0.55; }
.mkt-ws-card.off .mkt-ws-ico { color: var(--muted, #a2a2a2); }
.mkt-ws-card.off .mkt-ws-state { background: color-mix(in srgb, var(--muted, #a2a2a2) 18%, transparent); color: var(--muted, #a2a2a2); }

/* =============================================================================
   Admin: Journey page (per-phase consolidated config)
   ========================================================================== */

.aj-phases { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.aj-phase {
    padding: 1.1rem 1.25rem 1.25rem;
    border-left: 4px solid var(--aj-c, var(--accent));
}
.aj-phase-head {
    display: flex; align-items: center; gap: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.aj-num {
    flex: 0 0 auto;
    width: 1.85rem; height: 1.85rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--aj-c, var(--accent)) 22%, transparent);
    color: var(--aj-c, var(--accent));
    font-weight: 700;
}
.aj-phase-title { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.aj-phase-title h2 { margin: 0; font-size: 1.05rem; }
.aj-phase-title h2 .muted { font-weight: 400; font-size: 0.92em; margin-left: 0.35em; }
.aj-phase-key { font-size: 0.72rem; }
.aj-enable {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.82rem; color: var(--muted); cursor: pointer;
}
.aj-enable input[type="checkbox"] { width: 1.05rem; height: 1.05rem; cursor: pointer; }

.aj-naming {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    gap: 0.65rem 1.25rem;
    padding-bottom: 1rem; margin-bottom: 1rem;
    border-bottom: 1px dashed var(--border);
}
.aj-naming .fld { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; }
.aj-naming-hint { font-size: 0.78rem; max-width: 36rem; align-self: center; }

.aj-sm { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 0.6rem; }
.aj-sm-row { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.aj-sm-from { flex: 0 0 8.5rem; font-size: 0.8rem; white-space: nowrap; }
.aj-sm-row .jm-chips { flex: 1; }
.aj-add-step { margin-top: 1rem; }

/* The embedded state-machine / stage-flow panels on the Journeys page — an aj-phase card
   hosting the dbv board plus the per-status chip rows. */
.jsm-panel { margin-top: 1.5rem; }
.jsm-panel .dbv-host { margin: 0.75rem 0 1rem; }
.jsm-rows { display: flex; flex-direction: column; gap: 0.6rem; }
.jsm-group-h { margin-top: 0.6rem; }

.jm-table .jm-group td {
    padding-top: 0.9rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
    border-bottom: none;
}

/* A market-authored journey step on the runtime stepper — same shapes, dashed outline. */
.js-step.js-market { border: 1px dashed var(--border); }

.aj-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}
.aj-col { display: flex; flex-direction: column; gap: 0.45rem; }
.aj-col-h {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
}
.aj-col-sub { margin: 0; font-size: 0.8rem; }
.aj-empty { margin: 0.35rem 0; font-style: italic; font-size: 0.82rem; }

.aj-form-list { margin: 0; padding-left: 1.05rem; font-size: 0.85rem; }
.aj-form-link { color: var(--fg); text-decoration: none; }
.aj-form-link:hover { text-decoration: underline; }

.aj-kind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.35rem 0.85rem;
    font-size: 0.85rem;
}
.aj-kind-grid .mkt-check { flex-direction: row; align-items: center; gap: 0.45rem; }
.aj-kind-grid .mkt-check input[type="checkbox"] { width: 1rem; height: 1rem; cursor: pointer; }

.aj-auto-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.aj-auto-row {
    display: flex; gap: 0.6rem; align-items: flex-end;
    padding: 0.6rem; border: 1px solid var(--border); border-radius: 3px;
    background: #1c1c1c;
}
.aj-auto-fields {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.45rem;
}
.aj-auto-fields label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; }
.aj-auto-fields .auth-input.sm { padding: 0.3rem 0.5rem; font-size: 0.82rem; }
.aj-auto-fields .mkt-check { flex-direction: row; align-items: center; gap: 0.4rem; }

.aj-raw { margin-top: 1.25rem; }
.aj-raw summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }

.aj-mode-note { margin: 0.25rem 0 1rem; font-size: 0.9rem; }
.aj-mode-note strong { color: var(--fg); }

.aj-readonly { opacity: 0.92; }
.aj-overridden { border-left-width: 4px; }
.aj-overridden::before {
    /* a faint left-edge highlight so overridden phases are scannable in the list */
    content: '';
    position: absolute;
    inset-block: 0; left: 0;
    width: 3px;
    background: var(--aj-c, var(--accent));
    opacity: 0.6;
}
.aj-overridden { position: relative; }

.aj-badge {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.aj-badge-default {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.03);
}
.aj-badge-overridden {
    color: #ffb868;
    background: rgba(255, 184, 104, 0.12);
    border-color: rgba(255, 184, 104, 0.4);
}
.aj-badge-conditional {
    color: #b3d9f2;
    background: rgba(179, 217, 242, 0.1);
    border-color: rgba(179, 217, 242, 0.35);
}
/* The doc & data check step isn't part of the fixed 5-phase template — it's injected between
   Application and Approval only when a market's DocCheck setting enables it there. Dashed border
   + no step number signal "conditional insertion", not a missing/broken phase card. */
.aj-phase-conditional { border-style: dashed; }

.aj-reset { padding: 0.2rem 0.6rem; font-size: 0.75rem; }
.aj-disable { padding: 0.2rem 0.6rem; font-size: 0.75rem; }
.aj-default-note { margin: 0.25rem 0 0; font-size: 0.82rem; }

.aj-market-pick { margin: 1rem 0 1.25rem; }
.aj-market-pick-row {
    display: flex; align-items: center; gap: 0.6rem;
    flex-wrap: wrap;
}
.aj-market-pick-row > span { font-size: 0.82rem; }
.aj-market-pick-row .auth-input { max-width: 360px; }
.aj-locked-note { font-size: 0.78rem; }

.aj-section-h {
    margin: 1.4rem 0 0.5rem;
    font-size: 0.95rem;
    color: var(--fg);
}
.aj-section-h .muted { font-weight: 400; }
.aj-section-disabled { margin-top: 2rem; opacity: 0.85; }

.aj-disabled-list .aj-phase { opacity: 0.65; }
.aj-disabled .aj-phase-head { padding-bottom: 0; border-bottom: none; margin-bottom: 0; }

.aj-order-btns {
    display: flex; flex-direction: column;
    gap: 0.15rem;
    margin-right: 0.4rem;
}
.aj-order-btn {
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.1;
    min-width: auto;
}
.aj-order-btn[disabled] { opacity: 0.3; cursor: not-allowed; }

.aj-badge-inline { vertical-align: middle; margin-left: 0.25rem; }

/* Compact journey strip on /admin/markets/{id} ----------------------------- */
.mkt-journey-strip {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.35rem 0.55rem;
    margin: 0.5rem 0 0.5rem;
}
.mkt-journey-step {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--js-c, var(--accent));
    border-radius: 3px;
    background: #1c1c1c;
    font-size: 0.85rem;
}
.mkt-journey-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.3rem; height: 1.3rem; border-radius: 50%;
    background: color-mix(in srgb, var(--js-c, var(--accent)) 22%, transparent);
    color: var(--js-c, var(--accent));
    font-weight: 700;
    font-size: 0.75rem;
}
.mkt-journey-title { font-weight: 500; }
.mkt-journey-sub { font-size: 0.78rem; }
.mkt-journey-arrow { color: var(--muted); font-size: 0.9rem; }
.mkt-journey-meta { margin: 0.35rem 0 0.6rem; font-size: 0.82rem; }

/* Expand/collapse on phase + form cards ----------------------------------- */
.aj-phase-title-click { cursor: pointer; }
.aj-expand-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    line-height: 1;
}
.aj-expand-btn:hover { color: var(--fg); }
.aj-expanded .aj-phase-head { border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.aj-phase:not(.aj-expanded):not(.aj-readonly):not(.aj-disabled) .aj-phase-head {
    border-bottom: none; margin-bottom: 0; padding-bottom: 0;
}

/* Inline form cards (each ApplicationFormConfig that pins to this phase) -- */
.aj-col-forms .aj-empty { margin-bottom: 0.5rem; }
.aj-form-card {
    border: 1px solid var(--border);
    border-radius: 3px;
    background: #1c1c1c;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.aj-form-card.aj-form-inherited {
    border-style: dashed;
    background: #191919;
}
.aj-phase-forms {
    padding: 0.5rem 0.85rem 0.85rem;
}
.aj-form-card-head {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
}
.aj-form-card-head:hover { background: rgba(255, 255, 255, 0.02); }
.aj-form-card-head .spacer { flex: 1; }
.aj-form-card-expanded .aj-form-card-head { border-bottom: 1px solid var(--border); }
.aj-form-card-body { padding: 0.85rem 0.75rem; }
.aj-form-expand { font-size: 0.75rem; }
.aj-form-actions { margin-top: 0.5rem; }

/* Inline form editor body (InlineFormEditor.razor) ------------------------ */
.ife-editor { display: flex; flex-direction: column; gap: 1rem; }
.ife-status { margin: 0.25rem 0; font-size: 0.82rem; }
.ife-empty { margin: 0.35rem 0; font-style: italic; }
.ife-section {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.02);
}
.ife-section-head {
    display: flex; align-items: center; gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.ife-section-head code {
    font-size: 0.72rem; padding: 0.1rem 0.4rem;
    border-radius: 4px; background: rgba(255, 255, 255, 0.04);
}
.ife-section-title { flex: 1; max-width: 360px; }
.ife-section-desc { margin: 0 0 0.5rem; font-size: 0.78rem; }
.ife-fields { width: 100%; font-size: 0.82rem; border-collapse: collapse; }
.ife-fields th {
    text-align: left;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--border);
}
.ife-fields td {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}
.ife-fields { table-layout: fixed; }
.ife-fields th, .ife-fields td { word-break: break-word; }
.ife-fields code { font-size: 0.72rem; }
.ife-fields .auth-input,
.ife-fields .auth-input.sm {
    /* Pinned min-width was causing the inputs to push the table wider than the
       containing panel, and on narrow containers (the new-form modal, the
       Market admin journey column) the rightmost columns overflowed. Let the
       column drive the input width — box-sizing keeps the padding inside. */
    padding: 0.25rem 0.45rem;
    font-size: 0.82rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.ife-rules-note { margin: 0; font-size: 0.82rem; }
.ife-actions { display: flex; gap: 0.5rem; align-items: center; }

.ife-remove { padding: 0.1rem 0.45rem; font-size: 0.72rem; color: #ff8a8a; }
.ife-remove:hover { color: #ff5a5a; border-color: rgba(255, 100, 100, 0.4); }
.ife-add-section-row { display: flex; justify-content: flex-start; margin-top: 0.3rem; }

/* Rules sub-section — visually distinct from the sections+fields block above
   so the cross-payload concept reads as a different layer. */
.ife-rules {
    margin-top: 1rem; padding-top: 0.8rem;
    border-top: 1px dashed var(--border);
    display: flex; flex-direction: column; gap: 0.6rem;
}
.ife-rules-h { margin: 0; font-size: 0.95rem; }
.ife-rules-help { margin: 0; font-size: 0.8rem; line-height: 1.5; }
.ife-rules-help code { font-size: 0.78rem; padding: 0.05rem 0.3rem; background: rgba(255,255,255,0.04); border-radius: 4px; }
.ife-rule {
    border: 1px solid var(--border); border-radius: 3px;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    display: flex; flex-direction: column; gap: 0.45rem;
}
.ife-rule-head { display: flex; gap: 0.4rem; align-items: center; }
.ife-rule-name { flex: 1; font-weight: 500; }
.ife-rule-sev { flex: 0 0 200px; }
.ife-rule-row { display: flex; flex-direction: column; gap: 0.18rem; font-size: 0.82rem; }
.ife-rule-row > span { color: var(--muted); font-size: 0.74rem; }

/* Read-only viewer in the Market admin journey panel — editing happens on the
   full editor. Keeps the inline space compact + scannable. */
.ife-readonly { display: flex; flex-direction: column; gap: 0.7rem; }
.ife-ro-section {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.02);
    display: flex; flex-direction: column; gap: 0.3rem;
}
.ife-ro-section-head { display: flex; gap: 0.5rem; align-items: baseline; }
.ife-ro-section-head code { font-size: 0.72rem; padding: 0.05rem 0.4rem; background: rgba(255,255,255,0.04); border-radius: 4px; }
.ife-ro-desc { margin: 0; font-size: 0.78rem; font-style: italic; }
.ife-ro-fields {
    margin: 0; padding-left: 1rem;
    font-size: 0.82rem; display: flex; flex-direction: column; gap: 0.18rem;
}
.ife-ro-fields li { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.ife-ro-fields code { font-size: 0.72rem; padding: 0.05rem 0.35rem; background: rgba(255,255,255,0.04); border-radius: 3px; }
.ife-ro-label { color: var(--fg); }
.ife-ro-kind { font-size: 0.72rem; text-transform: lowercase; }
.ife-ro-req {
    font-size: 0.7rem;
    color: #ff8a8a;
    border: 1px solid rgba(255, 100, 100, 0.35);
    padding: 0.02rem 0.4rem; border-radius: 4px;
}
.ife-ro-rules { padding-top: 0.4rem; border-top: 1px dashed var(--border); }
.ife-ro-rules-list { margin: 0.25rem 0 0; padding-left: 1rem; font-size: 0.82rem; display: flex; flex-direction: column; gap: 0.45rem; }
.ife-ro-rules-list code { font-size: 0.72rem; padding: 0.05rem 0.35rem; background: rgba(255,255,255,0.04); border-radius: 3px; }
.ife-ro-sev {
    margin-left: 0.4rem;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0.05rem 0.45rem; border-radius: 4px;
    background: rgba(255, 184, 104, 0.1); color: #ffb868;
    border: 1px solid rgba(255, 184, 104, 0.3);
}

/* Rules editor on AdminFormEdit (full editor) — same shape as the InlineForm
   editor's rule rows but renders inside the full-width single-column layout. */
.form-edit-rules { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.4rem; }
.form-edit-rule {
    border: 1px solid var(--border); border-radius: 0.55rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.02);
    display: flex; flex-direction: column; gap: 0.45rem;
}
.form-edit-rule-head { display: flex; gap: 0.4rem; align-items: center; }
.form-edit-rule-sev { flex: 0 0 230px; }

/* Phase rules block — visually separated so admins know it's shared state. */
.form-edit-phase-rules {
    padding: 0.85rem 1rem;
    border: 1px dashed rgba(199, 155, 255, 0.4);
    border-radius: 0.55rem;
    background: rgba(199, 155, 255, 0.04);
    display: flex; flex-direction: column; gap: 0.5rem;
    margin-top: 0.4rem;
}
.qc-sub-h { margin: 0.4rem 0 0.2rem; font-size: 0.85rem; color: var(--fg); }

/* Wider modal variant for the new-form flow (step 2 hosts the inline editor). */
.modal-wide { width: min(960px, calc(100vw - 2rem)); }
.modal-sub { font-size: 0.78rem; font-weight: 400; margin-left: 0.4rem; }

/* Small trash-can button on each form card header. Inline so it sits next to
   the expand caret without disrupting the row flow. */
.aj-form-delete {
    background: transparent;
    border: none;
    color: #ff8a8a;
    cursor: pointer;
    padding: 0.1rem 0.4rem;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 120ms ease, background 120ms ease;
}
.aj-form-delete:hover {
    opacity: 1;
    background: rgba(255, 100, 100, 0.12);
    border-radius: 4px;
}

/* Delete-form confirmation modal — sizing + emphatic confirm button */
.aj-delete-modal { width: min(560px, calc(100vw - 2rem)); }
.aj-delete-lead { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.aj-delete-warning {
    margin: 0;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 100, 100, 0.08);
    border: 1px solid rgba(255, 100, 100, 0.3);
    border-radius: 3px;
    font-size: 0.85rem;
    line-height: 1.5;
}
.aj-delete-confirm {
    background: #dc2626; color: #fff;
    border-color: #dc2626;
}
.aj-delete-confirm:hover { background: #b91c1c; border-color: #b91c1c; }
.aj-delete-confirm:disabled { opacity: 0.6; cursor: wait; }

/* Market-jump list on /admin/journey -------------------------------------- */
.aj-market-jump-list {
    list-style: none; padding: 0; margin: 0.5rem 0 0;
    display: flex; flex-wrap: wrap; gap: 0.4rem;
}

/* Phase-header content count chips (forms, auto-create rules, blocking kinds) */
.aj-form-count {
    flex: 0 0 auto;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    border: 1px solid var(--border);
}
.aj-auto-count {
    background: rgba(255, 184, 104, 0.08);
    color: #ffb868;
    border-color: rgba(255, 184, 104, 0.25);
}
.aj-block-count {
    background: rgba(255, 100, 100, 0.08);
    color: #ff8a8a;
    border-color: rgba(255, 100, 100, 0.25);
}

/* Default forms section (above the in-journey list) ---------------------- */
.aj-default-forms { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }

/* =============================================================================
   Impersonation: topbar banner + admin picker page
   ========================================================================== */

.impersonation-bar {
    /* Pinned to the viewport — the admin always sees who they're operating-as. We need
       `fixed` not `sticky` because the parent .app-shell is height: 100dvh with no internal
       scroll; the scrolling actually happens inside `.shell`, which sticky can't reach
       (sticky binds to its nearest scrollable ancestor — there isn't one for the bar).
       .app-shell--impersonating below pushes the rest of the chrome down by the bar's height. */
    position: fixed;
    /* Below the non-production banner when there is one (--envbar-h), flush to the top otherwise —
       the two bars stack rather than overlap. */
    top: var(--envbar-h, 0); left: 0; right: 0;
    z-index: 100;
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.55rem 1.25rem;
    background: linear-gradient(90deg, #f0b352 0%, #e69148 100%);
    color: #222222;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 4px 14px -8px rgba(0,0,0,0.45);
}
/* Make room for the fixed bar without reflowing every page's content, and publish the
   bar's height so the AI orb (and any other top-anchored fixed chrome) drops below it.
   A future announcement bar should add its own height here (e.g. via a combined class)
   so the offset stays the sum of all stacked banners. */
.app-shell--impersonating { padding-top: 2.55rem; --banner-offset: 2.55rem; }

/* =============================================================================
   "NOT PRODUCTION" banner — every page of every non-production stage
   ========================================================================== */

/* Height is FIXED (min-height + border-box) rather than left to the content, because the shell's
   padding-top and --banner-offset below hard-code the same number. Same lesson as --topbar-h:
   let the two drift and every top-anchored fixed panel sits a few pixels under the bar. */
.env-banner {
    box-sizing: border-box;
    min-height: 1.5rem;
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.08rem 1.25rem;
    font-size: 0.72rem; line-height: 1.3;
    /* Deliberately quiet: a tinted strip in the stage's colour with a hairline under it, not a
       hazard flag. It has to be noticed once and then live above every screen all day — loud
       enough to catch the eye on arrival, calm enough not to compete with the page. */
    color: color-mix(in srgb, var(--env-accent) 72%, #ffffff);
    background: color-mix(in srgb, var(--env-accent) 11%, #0f0f0f);
    border-bottom: 1px solid color-mix(in srgb, var(--env-accent) 38%, transparent);
    --env-accent: #f0b352;
}
/* MainLayout flavour: pinned to the viewport so it survives every scroll. EmptyLayout uses the
   in-flow default (those pages scroll with the document). */
.env-banner.fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 101; }

.env-banner-tag {
    font-family: ui-monospace, monospace; font-weight: 600; font-size: 0.66rem;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--env-accent);
    border: 1px solid color-mix(in srgb, var(--env-accent) 42%, transparent);
    border-radius: 3px; padding: 0 0.35rem;
}
.env-banner-head { font-weight: 600; }
.env-banner-msg { opacity: 0.62; }
.env-banner-link {
    margin-left: auto; white-space: nowrap;
    color: var(--env-accent); text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--env-accent) 40%, transparent);
}
.env-banner-link:hover { border-bottom-color: var(--env-accent); }
/* Narrow screens: drop the explanation before the bar is allowed to wrap onto a second line —
   wrapping would make it taller than the 1.75rem the layout offsets assume. */
@media (max-width: 1000px) {
    .env-banner-msg { display: none; }
}

/* Per-stage hues — the fastest way to tell two open tabs apart. UAT keeps amber (it looks and
   behaves most like production, so it's the one worth catching the eye); the rest are calmer.
   Two hotter than amber, on purpose: the control plane, because a change made there is published
   into every other stage, and the unclassified case, because it is a config mistake somebody has
   to come and fix rather than a stage anyone meant to be on. */
.env-banner.env--uat     { --env-accent: #f0b352; }
.env-banner.env--int     { --env-accent: #c7a6f5; }
.env-banner.env--dev     { --env-accent: #b3d9f2; }
.env-banner.env--local   { --env-accent: #9ee3b8; }
.env-banner.env--cp      { --env-accent: #ff7a59; }
.env-banner.env--cell    { --env-accent: #4fc6e0; }
.env-banner.env--unknown { --env-accent: #ff5cc8; }
.env-banner.env--prod    { --env-accent: #7fd3a8; }   /* gated off today; see footer.env--prod */

/* Reserve the pinned bar's space, and publish it in --banner-offset so the AI orb, the docked
   side panels and any other top-anchored fixed chrome drop below it — same contract the
   impersonation bar uses. --envbar-h pushes the impersonation bar itself down when both show. */
.app-shell--nonprod { padding-top: 1.5rem; --banner-offset: 1.5rem; --envbar-h: 1.5rem; }
/* Both bars stacked — the offsets are the SUM, not whichever rule happened to win. */
.app-shell--nonprod.app-shell--impersonating { padding-top: 4.05rem; --banner-offset: 4.05rem; }

/* =============================================================================
   Announcement banner (global or per-market, dismissed per user for good)
   Sits directly under the .topbar, full width over the sidenav. Scrolling happens
   inside .shell, so it stays visible until dismissed.
   ========================================================================== */

.annc-stack { flex: 0 0 auto; }
.annc-bar {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(0,0,0,0.15);
}
.annc-bar .spacer { flex: 1; }
.annc-bar .annc-tag {
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.annc-bar .annc-detail { margin-left: 0.4rem; }
/* Market code on a targeted banner — "this is local, not platform-wide". */
.annc-bar .annc-scope {
    flex: 0 0 auto;
    padding: 0.1rem 0.45rem;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 3px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
}
.annc-bar .annc-dismiss {
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 0.35rem 0.9rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.annc-bar .annc-dismiss:hover { background: #000; }

.annc-info {
    background: linear-gradient(90deg, #3395e0 0%, #3395e0 100%);
    color: #1a1a1a;
}
.annc-info .annc-tag    { background: rgba(0,0,0,0.18); color: #1a1a1a; }
.annc-warning {
    background: linear-gradient(90deg, #f0b352 0%, #e69148 100%);
    color: #222222;
}
.annc-warning .annc-tag { background: rgba(0,0,0,0.18); color: #222222; }
.annc-critical {
    background: linear-gradient(90deg, #f87171 0%, #ef4444 100%);
    color: #1a0a0a;
}
.annc-critical .annc-tag { background: rgba(0,0,0,0.18); color: #1a0a0a; }

/* Per-severity pill on the admin list */
.annc-sev {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.annc-sev-info     { background: color-mix(in srgb, #3395e0 18%, transparent); color: #b3d9f2; }
.annc-sev-warning  { background: color-mix(in srgb, #ffd166 18%, transparent); color: #ffe6b0; }
.annc-sev-critical { background: color-mix(in srgb, #f87171 22%, transparent); color: #fbbcbc; }
.annc-row-body { font-size: 0.82rem; margin-top: 0.25rem; }
/* Audience pill in the admin grid. */
.annc-aud {
    display: inline-block;
    padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 700;
    background: rgba(255,255,255,0.06); color: var(--text-2, #c1c1c1);
    border: 1px solid rgba(255,255,255,0.1);
}
.annc-aud-global { background: color-mix(in srgb, #3395e0 16%, transparent); color: #b3d9f2; }

/* =============================================================================
   <DataGrid> — unified list-page table with search, sort + pagination.
   Replaces the per-page .records.datagrid usage with a consistent component.
   ========================================================================== */

.dg { display: flex; flex-direction: column; gap: 0.85rem; }

.dg-toolbar {
    display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center;
    padding: 0.65rem 0.85rem;
    background: #1c1c1c;
    border: 1px solid var(--border);
    border-radius: 5px;
}
.dg-toolbar .spacer { flex: 1; min-width: 0; }
.dg-search-wrap {
    display: flex; align-items: center; gap: 0.45rem;
    flex: 1; min-width: 200px; max-width: 460px;
    position: relative;
}
.dg-search-icon {
    position: absolute; left: 0.7rem;
    color: var(--muted);
    font-size: 0.95rem;
    pointer-events: none;
}
.dg-search { width: 100%; padding-left: 2rem; }
.dg-count { font-size: 0.82rem; white-space: nowrap; }

.dg-scroll {
    border: 1px solid var(--border);
    border-radius: 5px;
    /* `clip` (not `hidden`) still clips to the rounded corners but does NOT create a scroll
       container — so a sticky <thead> inside binds to the real scroller (.shell) and actually
       sticks (below the topbar) as you scroll the page, instead of being trapped here. */
    overflow: clip;
    background: #1c1c1c;
}

.dg-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-sans);
    font-size: 0.9rem;
}
.dg-table thead th {
    background: #222222;
    color: var(--fg);
    font-weight: 600;
    text-align: left;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
    /* top:-2rem cancels .shell's 2rem top padding so the header locks flush under the topbar, not
       2rem below it (.dg-scroll is overflow:clip — NOT a scroll container — so this sticky binds to
       the page scroller .shell). See the .datagrid th comment for the full rationale. */
    position: sticky; top: -2rem; z-index: 1;
    white-space: nowrap;
}
.dg-table thead th.dg-sortable {
    cursor: pointer;
    user-select: none;
}
.dg-table thead th.dg-sortable:hover { background: #292929; }
.dg-th-content { display: inline-flex; align-items: center; gap: 0.4rem; }
.dg-sort { color: var(--muted); font-size: 0.78rem; opacity: 0.7; }
.dg-sortable:hover .dg-sort { opacity: 1; color: var(--fg); }

.dg-table tbody td {
    padding: 0.65rem 0.85rem;
    color: var(--fg);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    vertical-align: middle;
}
.dg-table tbody tr:last-child td { border-bottom: 0; }
.dg-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.018); }
.dg-table tbody tr:hover td { background: rgba(120, 150, 255, 0.06); }
.dg-table tbody td .muted { color: var(--muted); }
.dg-table tbody td code {
    background: rgba(255,255,255,0.05);
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--fg) 85%, transparent);
}

.dg-empty {
    text-align: center !important;
    color: var(--muted);
    padding: 2.5rem 1rem !important;
    font-size: 0.92rem;
}

.dg-pager {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    justify-content: center;
    padding: 0.4rem 0;
}
.dg-pager-info { font-size: 0.85rem; margin: 0 0.5rem; }

.dg-cap-note { font-size: 0.8rem; text-align: center; margin: 0; }

.impersonation-bar .imp-pill {
    background: rgba(34, 34, 34, 0.18);
    color: #222222;
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.impersonation-bar .muted { color: rgba(34, 34, 34, 0.7); }
/* Dealer / Outlet name: a bordered chip so it reads clearly against the orange
   instead of fading into it as muted text did. */
.impersonation-bar .imp-loc {
    background: rgba(34, 34, 34, 0.12);
    color: #222222;
    font-weight: 600;
    padding: 0.1rem 0.55rem;
    border-radius: 2px;
    border: 1px solid rgba(34, 34, 34, 0.3);
}
.impersonation-bar .spacer { flex: 1; }
.imp-stop-btn {
    background: #222222;
    color: #f0b352;
    border: 0;
    border-radius: 4px;
    padding: 0.4rem 1rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: transform 120ms, background 120ms;
}
.imp-stop-btn:hover { background: #000; transform: translateY(-1px); }
.imp-stop-btn::before { content: "✕  "; }

.imp-current {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    background: color-mix(in srgb, #f0b352 14%, transparent);
    border: 1px solid color-mix(in srgb, #f0b352 35%, var(--border));
    border-radius: 4px;
}
.imp-current .imp-stop { margin-left: auto; }

.imp-form {
    display: flex; flex-direction: column; gap: 1rem;
    max-width: 460px;
    margin-top: 1rem;
}
.imp-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.imp-form label > span { color: var(--muted); }
.imp-form select.auth-input { width: 100%; appearance: auto; }

/* Section heading — small uppercase label. Originally introduced for the (now removed)
   standalone quote calculator; retained because <h3 class="qc-h"> is the shared section-heading
   idiom across the app (customer/asset capture, admin pages, application form panels). */
.qc-h {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 700;
    margin: 0 0 0.4rem;
}

.app-quote-actions {
    display: flex; align-items: center; gap: 0.6rem;
    margin: 0.3rem 0 1rem;
    font-size: 0.85rem;
}

/* ----- Quote history (versions + deltas) ----- */
.quote-history { margin: 0 0 1.25rem; padding: 1rem 1.25rem; }
.quote-history h3.qc-h { margin: 0 0 0.65rem; }
.qhist-grid td { vertical-align: middle; }
.qhist-grid tr.qhist-active td {
    background: color-mix(in srgb, #5dd39e 8%, transparent);
}
.qhist-delta {
    margin-left: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.qhist-delta.up   { color: #f87171; }   /* increase = more cost / longer term (usually unfavourable) */
.qhist-delta.down { color: #5dd39e; }   /* decrease = lower payment / shorter term (usually favourable) */
.qhist-foot { font-size: 0.78rem; margin: 0.5rem 0 0; }

/* Inline link from a data-grid cell — kept subtle so the table still reads as a list,
   not a wall of links. Used for customer names that should pivot to the detail page. */
.row-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 120ms, color 120ms;
}
.row-link:hover {
    color: var(--accent-2);
    border-bottom-color: var(--accent-2);
}

/* =============================================================================
   Custom error page (/error and /error/{code})
   ========================================================================== */

.err-page { min-height: 100dvh; display: flex; flex-direction: column; }
.err-hero { padding-top: 3rem; padding-bottom: 3rem; text-align: center; }
.err-badge {
    background: color-mix(in srgb, #f87171 18%, transparent);
    border: 1px solid color-mix(in srgb, #f87171 40%, var(--border));
    color: #fbbcbc;
}
.err-diag {
    margin: 2.5rem auto 0;
    max-width: 920px;
    text-align: left;
    background: #1c1c1c;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1.25rem 1.5rem;
}
.err-diag h3 { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: baseline; gap: 0.5rem; }
.err-diag-reason { text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
.err-diag-path { font-size: 0.85rem; margin: 0 0 0.85rem; }
.err-diag-row { margin: 0.1rem 0; font-size: 0.85rem; }
.err-diag-row > span.muted { margin-right: 0.35rem; }
.err-diag details { margin-top: 0.7rem; }
.err-diag summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; padding: 0.2rem 0; }
.err-trace { margin: 1rem auto 0; font-size: 0.82rem; max-width: 640px; }
.err-trace code { background: #222222; padding: 0 0.4rem; border-radius: 3px; color: var(--fg); }
.err-diag-message {
    background: rgba(0,0,0,0.35);
    border-radius: 2px;
    padding: 0.85rem 1rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.5;
    overflow-x: auto;
    color: #fbbcbc;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* =============================================================================
   Application form (/applications/{id}/form) — driven by ApplicationFormConfig.
   ========================================================================== */

/* Full width like every other page (the old 920px cap made the deal cockpit the one narrow
   page in the app). The one-screen layout comes from .cockpit below. */
.form-page { max-width: none; }

/* ===== Deal cockpit — customer → signature on ONE SCREEN =====================================
   ONE column now. The at-a-glance cards moved to a strip across the top (.app-summary-strip) when
   the capture area gained its own party rail: a rail on the left and a summary column on the right
   left the form itself pinched in the middle. .cockpit-rail is kept for any page still docking
   something here; with no rail present, main simply takes the full width. */
.cockpit { display: flex; gap: 1.25rem; align-items: flex-start; }
.cockpit-main { flex: 1 1 auto; min-width: 0; order: 1; }
.cockpit-rail {
    flex: 0 0 340px; order: 2;
    position: sticky; top: 0.5rem;
    max-height: calc(100vh - 7rem); overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.cockpit-rail .app-summary { margin: 0.5rem 0 0.6rem; }
.cockpit-rail .docs-panel { margin-top: 0; }
@media (max-width: 1279px) {
    .cockpit { flex-direction: column; }
    .cockpit-rail { position: static; order: 0; width: 100%; flex: none; max-height: none; overflow: visible; }
    .cockpit-main { order: 1; width: 100%; }
}

.form-warn { color: #ffd166; margin-left: 0.4rem; }
.form-panel { padding: 1.5rem 1.75rem; }

.form-renderer { display: flex; flex-direction: column; gap: 1.75rem; }
.form-section { display: flex; flex-direction: column; gap: 0.75rem; }
.form-section-title {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--muted); font-weight: 700; margin: 0;
    display: flex; align-items: center; gap: 0.45rem;
}
/* An accent colour tints the heading and adds a short leading rule, so a long form's sections
   read as distinct blocks. --section-accent is set inline from FormSection.Accent. */
.form-section-title.has-accent { color: var(--section-accent); }
.form-section-title.has-accent::before {
    content: ""; width: 0.5rem; height: 0.9rem; border-radius: 2px;
    background: var(--section-accent); flex: none;
}
.form-section-icon { font-size: 1.1rem; line-height: 1; }
/* Collapsible heading — a button that toggles the section's fields. */
.form-section-toggle {
    appearance: none; background: none; border: none; cursor: pointer; text-align: left;
    padding: 0.1rem 0; width: fit-content; font: inherit;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--muted); font-weight: 700;
}
.form-section-toggle:hover { color: var(--fg); }
.form-section-chevron { font-size: 0.7rem; opacity: 0.8; }
.form-section-fields { display: flex; flex-direction: column; gap: 0.85rem; }
.form-section-fields-hidden { display: none; }
.form-section-desc { font-size: 0.85rem; margin: 0; }
.form-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.85rem; }

/* "Cards" presentation — a read-only, SDM-bound form rendered as a polished detail view (Contract, and
   opt-in for any workspace page). Sections become titled cards; read-only fields show as clean
   label→value rows (.form-value) instead of greyed-out disabled inputs (.form-field-readonly). */
.presentation-cards .form-renderer-body { display: flex; flex-direction: column; gap: 1rem; }
.presentation-cards .form-renderer-body > .form-section + .form-section { margin-top: 0; }
.presentation-cards .form-section {
    background: #1f1f1f; border: 1px solid var(--border); border-radius: 6px; padding: 1.05rem 1.25rem 1.15rem;
}
.presentation-cards .form-fields { gap: 1rem 1.4rem; }
.form-field-display { gap: 0.2rem; }
.form-field-display .form-label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600;
}
.form-value {
    font-size: 0.95rem; font-weight: 500; color: var(--fg); padding: 0.05rem 0; min-height: 1.4em;
    overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}

/* Deterministic width grid — used when any field in the section declares a width hint
   (FormField.Width: full/half/third). 6 columns so halves and thirds mix on one row. */
.form-fields.form-fields-cols { grid-template-columns: repeat(6, 1fr); }
.form-fields-cols .form-field { grid-column: span 6; }
.form-fields-cols .form-field.fw-half { grid-column: span 3; }
.form-fields-cols .form-field.fw-third { grid-column: span 2; }
@media (max-width: 720px) {
    .form-fields-cols .form-field,
    .form-fields-cols .form-field.fw-half,
    .form-fields-cols .form-field.fw-third { grid-column: span 6; }
}

.form-field {
    display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem;
}
.form-field.has-error .auth-input { border-color: #f87171; }
.form-field-readonly .auth-input, .form-field-readonly .form-range { opacity: 0.6; cursor: not-allowed; }

/* Blueprint glue map (/admin/blueprint) */
.bp-intro { font-size: 0.88rem; max-width: 72rem; }
.bp-counts { margin: 0 0 0.6rem; }
/* Same containment recipe as .mj-diagram-host / .er-diagram: the .er-pan wrapper is absolutely
   positioned, so the host must be position:relative + overflow:hidden or the map spills out. */
.bp-diagram {
    height: 70vh; overflow: hidden; position: relative; touch-action: none;
    background: #181818;
}
.bp-diagram svg { cursor: grab; }

/* Mapping drift banner (/admin/data-model/mappings) */
.sdmmap-drift {
    margin: 0.5rem 0; padding: 0.5rem 0.7rem; border: 1px solid rgba(248, 113, 113, 0.45);
    border-radius: 3px; background: rgba(248, 113, 113, 0.08); font-size: 0.83rem;
}
.sdmmap-drift-path { margin-left: 0.4rem; }
.sdmmap-orphan-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.45rem; }
.sdmmap-when { margin-left: 0.6rem; }

/* Radio group / MultiSelect checkbox list (FieldKind.Radio / .MultiSelect) */
.form-choice-group { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; padding: 0.2rem 0; }
.form-choice-option {
    display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.85rem;
}
.form-choice-option input { cursor: pointer; }
.form-field-readonly .form-choice-option, .form-field-readonly .form-choice-option input { cursor: not-allowed; opacity: 0.75; }
.form-label { color: var(--muted); }
.form-req { color: #f87171; margin-left: 0.2rem; }
.form-help { font-size: 0.78rem; }
.form-error { color: #f87171; font-size: 0.8rem; }
.form-textarea { resize: vertical; min-height: 3.5rem; }
/* image field (FieldKind.Image) */
.form-image { display: flex; flex-direction: column; gap: 0.4rem; }
.form-image-preview { max-width: 220px; max-height: 160px; border-radius: 3px; border: 1px solid var(--border); object-fit: contain; background: rgba(255,255,255,0.03); }
.form-image-controls { display: flex; flex-direction: column; gap: 0.3rem; }
.form-image-url { font-size: 0.82rem; }

.form-field input[type="checkbox"].form-check {
    width: 1.05rem; height: 1.05rem; align-self: flex-start; margin-top: 0.2rem;
}
/* A Checkbox field lays out INLINE — [✓] Label on one row — instead of the label-above-input stack
   used for text inputs (which left the tick sitting under its own label). Help / error wrap below. */
.form-field-check {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.55rem;
    /* Don't stretch to the grid row's height (a taller sibling would spread the tick and label to
       opposite ends of a tall cell) — size to content so the pair sits on one tidy row. */
    align-self: start;
    /* A sibling text field is [label ↑ / input ↓]; without this the tick+label would sit at the
       cell TOP, level with the siblings' LABELS instead of their inputs. Drop it by one label row
       (label height + the .form-field 0.3rem gap) so the control lines up with the input boxes. */
    margin-top: 1.55rem;
}
/* …but a checkbox in a repeater cell has no label-above sibling to line up with — keep it at the top. */
.form-repeater-cell.form-field-check { margin-top: 0; }
.form-field-check > .form-check { order: -1; margin-top: 0; align-self: center; flex: none; }
/* flex-basis 0 keeps the label on the checkbox's line (its preferred size is 0, so the pair never
   overflows and wraps) — it then grows to fill the row and wraps its own TEXT if long, instead of
   the whole label dropping to a new line below the tick in a narrow column. */
.form-field-check > .form-label { flex: 1 1 0; min-width: 0; }
.form-field-check > .form-help, .form-field-check > .form-error { flex-basis: 100%; }

/* Slider (FieldKind.Slider): the value sits on the LABEL row (right-aligned) with the range full-
   width below, so the value is unambiguously tied to its own field rather than floating toward the
   next slider in the grid. Layout via a 2-row grid on the field; .form-slider holds only the range. */
.form-field-slider {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label value" "slider slider";
    align-items: baseline;
    column-gap: 0.5rem;
}
.form-field-slider > .form-label { grid-area: label; }
.form-field-slider > .form-slider-readout { grid-area: value; }
.form-field-slider > .form-slider { grid-area: slider; }
.form-slider { display: flex; align-items: center; }
.form-range { flex: 1; min-width: 0; accent-color: var(--accent); }
.form-slider-readout {
    text-align: right; font-variant-numeric: tabular-nums;
    font-weight: 600; color: var(--text);
}

/* Output panel (FieldKind.OutputPanel): a read-only computed readout, not an input. */
.form-output-panel {
    padding: 0.5rem 0.7rem; border-radius: 2px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text);
}
/* URL-valued output (e.g. an integration deeplink) renders as a link; keep long paths on one line. */
.form-output-link {
    display: inline-block; max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
    color: var(--accent);
}
/* Table field (FieldKind.Table) — read-only rows from a mapped array response. */
/* Repeater — editable 0..n collection rows (SDM collection capture) */
.form-repeater { display: flex; flex-direction: column; gap: 0.5rem; }
.form-repeater-row {
    display: flex; align-items: flex-end; gap: 0.6rem;
    padding: 0.6rem; border: 1px solid var(--border); border-radius: 3px; background: rgba(255,255,255,0.02);
}
.form-repeater-cells {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.6rem; flex: 1;
}
.form-repeater-cell { margin: 0; }
.form-repeater-remove { flex: 0 0 auto; align-self: center; }
.form-repeater-empty { margin: 0.1rem 0; font-size: 0.85rem; }
.form-repeater-add { align-self: flex-start; }

.form-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 3px; }
.form-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.form-table thead th {
    text-align: left; font-weight: 600; color: var(--muted); white-space: nowrap;
    padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.03);
}
.form-table tbody td { padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.05); font-variant-numeric: tabular-nums; }
.form-table tbody tr:last-child td { border-bottom: 0; }
.form-table-empty { color: var(--muted); text-align: center; padding: 0.8rem; }
/* Table field: search / sortable headers / pager */
.form-table-search { max-width: 280px; margin: 0.45rem 0.5rem; font-size: 0.85rem; }
.form-table-th { cursor: pointer; user-select: none; }
.form-table-th:hover { color: var(--fg, #e6e9f0); }
.form-table-pager { display: flex; align-items: center; justify-content: center; gap: 0.7rem;
    padding: 0.4rem; border-top: 1px solid var(--border); font-size: 0.82rem; }

/* Button spinner + section busy overlay ("spinner over the component" while its call runs) */
.form-spinner { display: inline-block; width: 0.85em; height: 0.85em; margin-right: 0.45em; vertical-align: -0.1em;
    border: 2px solid rgba(179,217,242,0.35); border-top-color: #b3d9f2; border-radius: 50%;
    animation: form-spin 0.7s linear infinite; }
.form-spinner-lg { width: 1.8rem; height: 1.8rem; border-width: 3px; margin: 0; }
@keyframes form-spin { to { transform: rotate(360deg); } }
.form-section-busy { position: relative; }
.form-section-busy-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center;
    justify-content: center; background: rgba(15, 15, 15, 0.45); border-radius: 4px; backdrop-filter: blur(1px); }

/* Lookup field: closed control + search modal */
.form-lookup { display: flex; align-items: center; gap: 0.35rem; position: relative; }
.form-lookup-display { flex: 1; cursor: pointer; }
.form-lookup-open { flex: none; }
.form-lookup-clear { position: absolute; right: 3.2rem; border: none; background: none; color: var(--muted);
    cursor: pointer; font-size: 0.85rem; padding: 0.2rem; }
.form-lookup-clear:hover { color: #fca5a5; }
.form-lookup-scrim { position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center; padding: 4vh 2vw; }
.form-lookup-modal { width: min(760px, 96vw); max-height: 86vh; display: flex; flex-direction: column;
    background: #181818; border: 1px solid rgba(51,149,224,0.5); border-radius: 5px; padding: 0.8rem 0.9rem;
    box-shadow: 0 18px 50px rgba(0,0,0,0.6); }
.form-lookup-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.form-lookup-search { width: 100%; margin-bottom: 0.5rem; }
/* Faceted filter row in the lookup popup */
.lk-facets { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; align-items: flex-end; margin-bottom: 0.5rem; }
.lk-facet { display: flex; flex-direction: column; gap: 0.15rem; }
.lk-facet select { min-width: 8rem; }
.lk-clear { align-self: flex-end; }
.form-lookup-pager { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-top: 0.5rem; }
/* Button that opens the vehicle lookup (looks like the select it replaced) */
.vs-lookup-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    cursor: pointer; text-align: left; width: 100%; }
.vs-lookup-btn .vs-lookup-ico { opacity: 0.6; }
.form-lookup-list { overflow: auto; border: 1px solid var(--border); border-radius: 3px; }
.form-lookup-row { cursor: pointer; }
.form-lookup-row:hover td { background: rgba(51,149,224,0.10); }
.form-lookup-row.sel td { background: rgba(51,149,224,0.22); }
.form-lookup-info { width: 2rem; }
.form-lookup-infobtn { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; }
.form-lookup-infobtn:hover { color: #b3d9f2; }
.form-lookup-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.8rem;
    margin: 0.3rem 0.2rem; font-size: 0.8rem; }
.form-lookup-detail dt { color: var(--muted); }
.form-lookup-detail dd { margin: 0; overflow-wrap: anywhere; }

/* Quote history table — clean form-style table (not the monospace admin grid), with the active
   version highlighted and coloured up/down deltas. */
.quote-history { margin: 0.5rem 0 1.5rem; }
.qhist-grid { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 0.5rem; }
.qhist-grid thead th {
    text-align: left; font-weight: 600; color: var(--muted); white-space: nowrap;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border);
}
.qhist-grid tbody td { padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; }
.qhist-grid tbody tr:last-child td { border-bottom: 0; }
.qhist-grid tbody tr:hover td { background: rgba(255,255,255,0.025); }
.qhist-grid .apps-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.qhist-active td { background: rgba(51,149,224,0.10); }
.qhist-active td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.qhist-delta { font-size: 0.72rem; margin-left: 0.3rem; white-space: nowrap; }
.qhist-delta.down { color: #9fe09f; }   /* a lower figure (cheaper) reads green */
.qhist-delta.up   { color: #ffb3a8; }   /* a higher figure reads warm */
.qhist-foot { font-size: 0.75rem; margin: 0.5rem 0 0; }
/* APIs panel: an array-container response row (maps to a Table field). */
.fc-api-row.arr .fc-api-fname { font-weight: 600; }
.fc-api-row.arr .fc-api-type { color: #b59cff; }

/* Section tabs (FormSection.Tab): a tab bar above the tabbed sections. */
.form-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 1px solid var(--border);
    margin-bottom: 0.9rem; padding-bottom: 0; }
/* In the docked-panel layout the body's sections aren't separated by the .form-renderer flex gap (that
   gap is between the body + the panel), so they'd sit flush — give consecutive sections breathing room. */
.form-renderer-body > .form-section + .form-section { margin-top: 1.5rem; }
.form-tab {
    appearance: none; background: none; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 1.05rem; font-size: 0.92rem; color: var(--muted);
    border-bottom: 3px solid transparent; margin-bottom: -1px;
    border-radius: 3px 8px 0 0;
}
.form-tab:hover { color: var(--text); background: rgba(51,149,224,0.07); }
.form-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700;
    background: rgba(51,149,224,0.10); }
.form-tab-count { font-size: 0.68rem; font-weight: 600; color: var(--muted); padding: 0.05rem 0.4rem;
    border-radius: 4px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); }
.form-tab.active .form-tab-count { color: var(--accent); border-color: rgba(51,149,224,0.5); }

/* Editor: an advanced-grid cell that spans the full width (e.g. OutputPanel expression). */
.form-edit-advanced-wide { grid-column: 1 / -1; }

/* Standard Data Model panel — derived shape table + merge picker + export. */
.form-datamodel-merge { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.5rem 0 0.75rem; }
.form-datamodel-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.form-datamodel-table th, .form-datamodel-table td {
    text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top;
}
.form-datamodel-table th { color: var(--muted); font-weight: 600; }
.form-datamodel-table tr.dm-conflict td { background: color-mix(in srgb, #f87171 12%, transparent); }
.dm-conflict-tag { color: #c0392b; font-size: 0.78rem; margin-left: 0.4rem; }

/* Editor: the add-section row + the insert-from-library picker beside it. */
.form-edit-section-add { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.form-edit-insert { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.form-edit-insert .auth-input.slim { min-width: 200px; }

.form-actions {
    display: flex; gap: 0.5rem; margin-top: 1.25rem;
    border-top: 1px solid var(--border); padding-top: 1.25rem;
}
.form-banner {
    margin-top: 1rem; padding: 0.55rem 0.8rem; border-radius: 2px;
    font-size: 0.88rem;
}
.form-banner-ok    { background: color-mix(in srgb, #5dd39e 18%, transparent); color: #b3edcb; }
.form-banner-error { background: color-mix(in srgb, #f87171 18%, transparent); color: #fbbcbc; }
.form-banner-info  { background: rgba(255,255,255,0.05); color: var(--muted); }
/* Amber, matching .form-edit-scope-pending — "this did not take effect" is not an error and must
   not read as one, but "info" grey reads as a receipt, which is the failure mode this kind exists
   to avoid. Only the -inline / -actionbar variants used to define warn, so a `form-banner-warn`
   banner rendered with no background at all. */
.form-banner-warn  { background: color-mix(in srgb, #e2a03f 18%, transparent); color: #ffd8a0;
                     border-inline-start: 3px solid #e2a03f; }

/* ----- Rule output panels (cross-field + conditional rules) ----- */
.form-rules {
    margin: 1rem 0 0;
    padding: 0.7rem 1rem;
    border-radius: 3px;
    border: 1px solid transparent;
    font-size: 0.88rem;
}
.form-rules ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.form-rules li { margin: 0.15rem 0; }
.form-rules li code {
    background: rgba(0,0,0,0.25);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    font-size: 0.78rem;
}
.form-rules-error {
    background: color-mix(in srgb, #f87171 14%, transparent);
    border-color: color-mix(in srgb, #f87171 45%, var(--border));
    color: #fbbcbc;
}
.form-rules-error strong { color: #fdc6c6; }
.form-rules-warning {
    background: color-mix(in srgb, #ffd166 12%, transparent);
    border-color: color-mix(in srgb, #ffd166 38%, var(--border));
    color: #ffe6b0;
}
.form-rules-warning strong { color: #fff0c2; }

.form-prefill-banner {
    margin: 0 0 1rem;
    padding: 0.55rem 0.8rem;
    border-radius: 2px;
    background: color-mix(in srgb, #3395e0 14%, transparent);
    border: 1px solid color-mix(in srgb, #3395e0 35%, var(--border));
    color: #b3d9f2;
    font-size: 0.85rem;
}
.form-prefill-banner code {
    background: rgba(0,0,0,0.3);
    padding: 0 0.3rem;
    border-radius: 3px;
    font-size: 0.78rem;
}

/* =============================================================================
   Cases queue (/cases)
   ========================================================================== */

.cases-filters {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin: 1rem 0 1.25rem;
}
.cases-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: #1c1c1c;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 120ms, color 120ms;
}
.cases-chip:hover { border-color: var(--accent-2); color: var(--fg); }
.cases-chip.active {
    background: color-mix(in srgb, #c79bff 18%, #1c1c1c);
    border-color: color-mix(in srgb, #c79bff 55%, var(--border));
    color: #fff;
}
.cases-chip-count {
    background: rgba(255,255,255,0.08);
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
    font-size: 0.72rem;
}

.cases-kind, .cases-status, .cases-prio {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cases-kind                  { background: rgba(255,255,255,0.06); color: var(--muted); }
.cases-kind-application      { background: color-mix(in srgb, #3395e0 18%, transparent); color: #b3d9f2; }
.cases-kind-credit           { background: color-mix(in srgb, #c79bff 20%, transparent); color: #ddc6ff; }
.cases-kind-collections      { background: color-mix(in srgb, #f87171 18%, transparent); color: #fbbcbc; }
.cases-kind-retention        { background: color-mix(in srgb, #ffd166 18%, transparent); color: #ffe6b0; }
.cases-kind-inquiry          { background: color-mix(in srgb, #7fd8d4 18%, transparent); color: #b6f0ec; }
.cases-kind-exception        { background: color-mix(in srgb, #ff8a4c 20%, transparent); color: #ffc6a4; }
.cases-kind-document         { background: color-mix(in srgb, #5dd39e 18%, transparent); color: #b3edcb; }

.cases-status-open           { background: color-mix(in srgb, #3395e0 18%, transparent); color: #b3d9f2; }
.cases-status-inprogress     { background: color-mix(in srgb, #ffd166 18%, transparent); color: #ffe6b0; }
.cases-status-waiting        { background: rgba(255,255,255,0.05); }
.cases-status-resolved       { background: color-mix(in srgb, #5dd39e 18%, transparent); color: #b3edcb; }
.cases-status-cancelled      { background: rgba(248,113,113,0.12); color: var(--muted); }

.cases-prio-low              { background: rgba(255,255,255,0.05); color: var(--muted); }
.cases-prio-normal           { background: rgba(255,255,255,0.05); color: var(--muted); }
.cases-prio-high             { background: color-mix(in srgb, #ff8a4c 18%, transparent); color: #ffc6a4; }
.cases-prio-urgent           { background: color-mix(in srgb, #f87171 22%, transparent); color: #fbbcbc; }

.contracts-status {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.contracts-status-drafted   { background: rgba(255,255,255,0.06); color: var(--muted); }
.contracts-status-sent      { background: color-mix(in srgb, #3395e0 18%, transparent); color: #b3d9f2; }
.contracts-status-signed    { background: color-mix(in srgb, #ffd166 18%, transparent); color: #ffe6b0; }
.contracts-status-active    { background: color-mix(in srgb, #5dd39e 20%, transparent); color: #b3edcb; }
.contracts-status-cancelled { background: rgba(248,113,113,0.12); color: var(--muted); }

/* =============================================================================
   Search (/search)
   ========================================================================== */

.search-bar { margin: 1rem 0 1.5rem; }
.search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
}
.search-hint { padding: 1rem 0; font-size: 0.9rem; }
.search-section-h {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 700;
}

/* Used by both /customers and /assets inline create forms. */
.customer-create-form .customer-create-check {
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
}
.customer-create-form .customer-create-check input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }

/* =============================================================================
   Documents panel (/applications/{id}/form)
   ========================================================================== */

.docs-panel { margin-top: 1.5rem; padding: 1.25rem 1.5rem; }
.docs-panel h3.qc-h { margin: 0 0 0.85rem; }

/* Full-width document manager (application page). The rail keeps only a count + jump link;
   the manager panel is the growing home for document functionality. */
.docs-rail-link { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 1.5rem; }
.docs-rail-link h3.qc-h { margin: 0; }
.docs-count {
    display: inline-block; min-width: 1.5em; text-align: center; margin-left: 0.35rem;
    font-size: 0.72rem; font-weight: 700; padding: 0.08rem 0.45rem; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.docs-manager { margin-top: 1.5rem; padding: 1.25rem 1.5rem; }
.docs-mgr-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.9rem; margin-bottom: 0.9rem; }
.docs-mgr-head h3.qc-h { margin: 0; }
/* The two explicit intake routes — upload yourself vs ask the customer. Side-by-side cards so the
   choice reads as a choice, not a cramped toolbar; stacks on narrow screens. */
.docs-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.8rem; }
.docs-choice { border: 1px solid var(--border); border-radius: 4px; padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.02); display: flex; flex-direction: column; gap: 0.5rem;
    align-items: flex-start; }
.docs-choice-head { font-size: 0.95rem; }
.docs-choice p { margin: 0; }
.docs-choices-note { margin: 0.5rem 0 1rem; }
.docs-mgr-search { width: min(20rem, 100%); }
.docs-mgr-spacer { flex: 1; }
/* Request-from-customer panel inside the document manager */
.docs-request { border: 1px solid rgba(255,255,255,.12); border-radius: 3px; padding: .8rem 1rem;
                margin: 0 0 .9rem; display: flex; flex-direction: column; gap: .6rem; }
.docs-req-items { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.docs-req-item { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
/* The request picker as a table — mandatory / formats / identity per document, at a glance. */
.docs-req-table { margin: 0 0 0.8rem; }
.docs-req-table .docs-req-pick { width: 2rem; text-align: center; }
.docs-req-table input[type="checkbox"] { width: 1rem; height: 1rem; cursor: pointer; }
.docs-req-row-done { opacity: 0.6; }
.docs-req-badge { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 4px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; }
.docs-req-mandatory { background: color-mix(in srgb, #f2cd82 20%, transparent); color: #f2cd82; }
.docs-req-channel { display: flex; align-items: center; gap: 0.6rem 0.9rem; flex-wrap: wrap; margin: 0.6rem 0; }
.docs-req-ekyc { background: color-mix(in srgb, #b3d9f2 16%, transparent); color: #b3d9f2; }
.docs-req-collected { color: #8fd6a3; white-space: nowrap; }
/* Customer self-completion: blank field that already holds a server-side value. */
.form-onfile { color: #8fd6a3; font-size: 0.78rem; }
.phase-actions-spacer { flex: 1; }
/* Dealer-page banner when the customer's self-completion save lands. */
.cust-update-banner { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    border: 1px solid rgba(179, 217, 242, 0.4); border-left-width: 3px; border-radius: 3px;
    background: rgba(179, 217, 242, 0.08); padding: 0.6rem 0.9rem; margin: 0.6rem 0; }
.cust-update-banner.cust-update-applied { border-color: rgba(120, 220, 150, 0.4);
    background: rgba(120, 220, 150, 0.07); }
.docs-req-fields { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.docs-req-fields .auth-input { width: min(22rem, 100%); }
.docs-req-link { user-select: all; word-break: break-all; }
.docs-req-created { margin: 0; }
.docs-mgr-upload { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.docs-name-link {
    font: inherit; color: var(--fg); font-weight: 600; background: none; border: none; padding: 0;
    cursor: pointer; text-align: left;
}
.docs-name-link:hover { color: var(--accent-2, #b3d9f2); text-decoration: underline; }
.docs-row-acts { display: flex; gap: 0.35rem; white-space: nowrap; }
.docs-grid td { vertical-align: middle; }
.docs-kind {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(255,255,255,0.06);
    color: var(--muted);
}

.docs-upload {
    display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}
.docs-upload-row {
    display: flex; flex-direction: column; gap: 0.25rem;
    font-size: 0.85rem;
    min-width: 200px;
}
.docs-upload-row > span { color: var(--muted); }
.docs-file {
    font-size: 0.85rem;
    color: var(--fg);
}
.docs-file::file-selector-button {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--fg);
    padding: 0.4rem 0.85rem;
    border-radius: 2px;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    margin-right: 0.6rem;
}
.docs-file::file-selector-button:hover {
    border-color: var(--accent-2);
}

/* =============================================================================
   Activity timeline (/applications/{id}/form)
   ========================================================================== */

.timeline-panel { margin-top: 1.5rem; padding: 1.25rem 1.5rem; }
.timeline-panel h3.qc-h { margin: 0 0 1rem; }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
    content: "";
    position: absolute;
    left: 0.85rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.timeline-item {
    position: relative;
    padding: 0.5rem 0 0.5rem 2.5rem;
    display: flex;
    flex-direction: column;
}
.timeline-icon {
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--ti-c, var(--accent));
    color: #141414;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 0 0 3px #1c1c1c;       /* matches the panel bg so it punches through the rail */
}
.timeline-body { display: flex; flex-direction: column; gap: 0.15rem; }
.timeline-head {
    display: flex; align-items: baseline; gap: 0.75rem;
    flex-wrap: wrap;
}
.timeline-head strong { font-size: 0.92rem; }
.timeline-when { font-size: 0.78rem; }
.timeline-detail { font-size: 0.84rem; margin: 0; }

/* ---- Horizontal "Integration procedures" strip ---- */
.tl-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 0.75rem; }
.tl-head h3.qc-h { margin: 0; }
.tl-hint { font-size: 0.78rem; }
.tl-scroll { overflow-x: auto; padding: 0.5rem 0.1rem 1rem; }
.tl-track { display: flex; align-items: flex-start; position: relative; min-width: max-content; }
.tl-track::before { content: ""; position: absolute; top: 0.85rem; left: 0.6rem; right: 0.6rem; height: 2px; background: var(--border); }
.tl-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.tl-chip { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.85rem; background: #272727; color: inherit; border: 1px solid var(--border);
    box-shadow: 0 0 0 3px #1c1c1c; }
.tl-chip.iface { color: #3395e0; }
.tl-chip.iface.ok { color: #5dd39e; border-color: #2f5b48; }
.tl-chip.iface.bad { color: #f87171; border-color: #6b2f33; }
.tl-chip.pending { color: #929292; }
.tl-gap { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-start; min-width: 3.6rem; padding-top: 0.35rem; }
.tl-gp { font-size: 0.66rem; color: #929292; background: #1c1c1c; border: 1px solid var(--border); border-radius: 4px; padding: 0.05rem 0.45rem; white-space: nowrap; }
.tl-gp.big { color: #cecece; }
.tl-evt { width: 6.5rem; text-align: center; display: flex; flex-direction: column; gap: 0.1rem; }
.tl-evt .tl-t { font-size: 0.78rem; line-height: 1.25; }
.tl-d { font-size: 0.72rem; }
.tl-when { font-size: 0.68rem; }
.tl-card { width: 11.5rem; background: #272727; border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 0.6rem;
    text-align: left; display: flex; flex-direction: column; gap: 0.15rem; }
.tl-card.err { border-color: #6b2f33; }
.tl-tag { font-size: 0.66rem; color: #3395e0; background: rgba(51, 149, 224, 0.12); padding: 0.02rem 0.4rem; border-radius: 2px; align-self: flex-start; }
.tl-tag.err { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.tl-name { font-size: 0.82rem; font-weight: 600; }
.tl-route { font-size: 0.68rem; display: flex; gap: 0.25rem; }
.tl-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-top: 0.15rem; }
.tl-pill { font-size: 0.66rem; padding: 0.05rem 0.4rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; }
.tl-pill.ok { color: #5dd39e; background: rgba(93, 211, 158, 0.12); }
.tl-pill.bad { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.tl-pill.pending { color: #929292; background: rgba(146, 146, 146, 0.12); }
.tl-cluster { width: 12.5rem; background: #202020; border: 1px solid #2c3b63; border-radius: 4px; padding: 0.4rem; }
.tl-cluster.pending { border-color: var(--border); }
.tl-clh { font-size: 0.68rem; color: #3395e0; font-weight: 600; margin: 0.1rem 0.15rem 0.4rem; }
.tl-cluster.pending .tl-clh { color: #929292; }
.tl-mini { display: flex; align-items: center; gap: 0.35rem; background: #272727; border: 1px solid var(--border); border-radius: 7px; padding: 0.3rem 0.4rem; margin-bottom: 0.3rem; }
.tl-mini:last-child { margin-bottom: 0; }
.tl-mini.pending { opacity: 0.7; }
.tl-mn { font-size: 0.72rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-ov { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.tl-dl { width: 560px; max-width: 100%; max-height: 85vh; overflow: auto; background: #1c1c1c; border: 1px solid var(--border); border-radius: 5px; }
.tl-dh { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); }
.tl-dt { font-size: 0.95rem; font-weight: 600; }
.tl-db { padding: 0.85rem 1rem; }
.tl-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 0.8rem; margin-bottom: 0.8rem; }
.tl-kv .k { display: block; font-size: 0.66rem; }
.tl-kv .v { display: block; font-size: 0.82rem; }
.tl-at { display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; padding: 0.35rem 0; border-top: 1px solid var(--border); }
.tl-lbl { font-size: 0.7rem; color: #929292; margin: 0.7rem 0 0.2rem; }
.tl-code { font-family: ui-monospace, monospace; font-size: 0.72rem; background: #141414; border: 1px solid var(--border); border-radius: 3px;
    padding: 0.5rem 0.6rem; white-space: pre-wrap; word-break: break-word; max-height: 11rem; overflow: auto; margin: 0; }

/* ---- Spaced-out variant (Collections case timeline) — same rail, more breathing room per node
   so a long collections history doesn't feel cramped. Opt-in via .tl-spaced so the default
   Financial Services journey timeline is unaffected. ---- */
.tl-scroll.tl-spaced { padding: 0.85rem 0.15rem 1.5rem; }
.tl-scroll.tl-spaced .tl-node { gap: 0.6rem; }
.tl-scroll.tl-spaced .tl-gap { min-width: 4.75rem; }
.tl-scroll.tl-spaced .tl-evt { width: 8rem; }
.tl-scroll.tl-spaced .tl-evt .tl-t { font-size: 0.82rem; }
.tl-scroll.tl-spaced .tl-d { font-size: 0.76rem; }
.tl-scroll.tl-spaced .tl-cluster { width: 14rem; }
.tl-scroll.tl-spaced .tl-mini { margin-bottom: 0.45rem; gap: 0.5rem; padding: 0.4rem 0.5rem; }

/* ---- Collections guided action wizard (case detail page): big step-by-step choice
   buttons instead of a dropdown form — pick action → who → template → confirm. ---- */
.wiz-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem; margin: 0.5rem 0 0.75rem; }
.wiz-choice {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; text-align: left;
    background: #1c1c1c; border: 1px solid var(--border); border-radius: 4px; padding: 0.7rem 0.85rem;
    color: var(--fg); cursor: pointer; font: inherit; transition: border-color var(--dur) var(--ease-standard), background var(--dur) var(--ease-standard);
}
.wiz-choice:hover { border-color: var(--accent-2); background: #272727; }
.wiz-choice.sel { border-color: var(--accent); background: rgba(0, 120, 214, 0.08); }
.wiz-ico { font-size: 1.15rem; line-height: 1; }
.wiz-name { font-weight: 600; font-size: 0.88rem; }
.wiz-hint { font-size: 0.72rem; line-height: 1.3; }
.wiz-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 0.85rem; }
.wiz-crumb {
    font-size: 0.74rem; padding: 0.15rem 0.6rem; border-radius: 4px;
    border: 1px solid var(--border); color: var(--muted); background: #1c1c1c;
}
.wiz-crumb.done { color: #5dd39e; border-color: #2f5b48; }
.wiz-crumb.cur { color: var(--fg); border-color: var(--accent); background: rgba(0, 120, 214, 0.10); }
.wiz-cancel { margin-left: auto; }
.wiz-summary { margin: 0.35rem 0 0.75rem; }
.wiz-summary-line { font-size: 0.92rem; margin-bottom: 0.5rem; }
.wiz-preview {
    font-size: 0.8rem; line-height: 1.45; color: var(--fg); white-space: pre-wrap; word-break: break-word;
    background: #141414; border: 1px dashed var(--border); border-left: 3px solid var(--accent);
    border-radius: 3px; padding: 0.6rem 0.75rem; max-width: 46rem;
}

/* =============================================================================
   Reports (/reports)
   ========================================================================== */

.reports-page { max-width: 1200px; }
.reports-range { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 1.25rem; }
.reports-kpis { margin-bottom: 1.5rem; }
.reports-panel { padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }

.bars { display: flex; flex-direction: column; gap: 0.55rem; }
.bars-row {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr 3.5rem;
    align-items: center;
    gap: 0.85rem;
}
.bars-label { font-size: 0.88rem; color: var(--fg); }
.bars-track {
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    overflow: hidden;
    height: 1.1rem;
    position: relative;
}
.bars-fill {
    height: 100%;
    border-radius: 4px;
    min-width: 2px;
    transition: width 220ms ease;
}
.bars-count {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--fg);
}

@media (max-width: 720px) {
    .bars-row { grid-template-columns: 1fr 2.5rem; }
    .bars-label { grid-column: 1 / -1; padding-bottom: 0.15rem; }
    .bars-track { grid-column: 1 / 2; }
    .bars-count { grid-column: 2 / 3; }
}

/* =============================================================================
   Journey stepper — shows where the user is in the customer journey.
   Used at the top of /quote/new and /applications/{id}/form. Each step's accent
   colour mirrors the corresponding node on the landing-page arc.
   ========================================================================== */

.js-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: #1c1c1c;
    margin: 1rem 0 0.5rem;
}

/* Current journey status — a plain-language pill + one-line meaning under the stepper, so the desk
   always knows where the deal stands and what moves it next. Read-only; admins get the ⚙ deep-link. */
.js-status-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.7rem;
    margin: 0 0.15rem 1.25rem; font-size: 0.86rem;
}
.js-status-pill {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
    padding: 0.14rem 0.6rem; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04);
}
.js-status-pill.js-status-wip  { color: #b3d9f2; border-color: rgba(179, 217, 242, 0.45); background: rgba(179, 217, 242, 0.12); }
.js-status-pill.js-status-good { color: #6ddc9f; border-color: rgba(93, 211, 158, 0.45); background: rgba(93, 211, 158, 0.12); }
.js-status-pill.js-status-bad  { color: #ff9b86; border-color: rgba(255, 120, 100, 0.45); background: rgba(255, 120, 100, 0.12); }
.js-status-meaning { flex: 1 1 12rem; min-width: 0; }
.js-status-cfg { white-space: nowrap; text-decoration: none; }
.js-status-cfg:hover { text-decoration: underline; }

.js-step {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.8rem;
    border-radius: 4px;
    border: 1px solid transparent;
    min-width: 0;
}
.js-step .js-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    border: 1.5px solid transparent;
    flex: 0 0 auto;
}
.js-step .js-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.js-step .js-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--fg);
}
.js-step .js-sub {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.js-step .js-mark {
    margin-left: 0.25rem;
    width: 0.75rem; height: 0.75rem;
    border-radius: 50%;
    background: var(--js-c, var(--accent));
    flex: 0 0 auto;
    font-size: 0.78rem;
    line-height: 0.75rem;
    color: var(--bg);
    text-align: center;
    font-weight: 700;
}
.js-step .js-mark.js-pulse {
    animation: jsPulse 1.8s ease-in-out infinite;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--js-c, var(--accent)) 50%, transparent);
}
@keyframes jsPulse {
    0%, 100% { box-shadow: 0 0 0 0  color-mix(in srgb, var(--js-c, var(--accent)) 50%, transparent); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}

.js-step.js-done .js-num {
    background: color-mix(in srgb, var(--js-c) 20%, transparent);
    border-color: var(--js-c);
    color: var(--js-c);
}
.js-step.js-done .js-title { color: color-mix(in srgb, var(--fg) 75%, transparent); }

.js-step.js-active {
    border-color: color-mix(in srgb, var(--js-c) 60%, var(--border));
    background: color-mix(in srgb, var(--js-c) 12%, #1c1c1c);
}
.js-step.js-active .js-num {
    background: var(--js-c);
    color: var(--bg);
    border-color: var(--js-c);
}

.js-step.js-upcoming .js-title { color: color-mix(in srgb, var(--fg) 65%, transparent); }
.js-step.js-upcoming .js-num { color: var(--muted); }

.js-arrow {
    color: var(--muted);
    font-size: 1rem;
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .js-step .js-sub { display: none; }
    .js-arrow { display: none; }
}

/* Clickable steps — only set by the parent when navigation is allowed (backward, or
   forward by one). Non-clickable steps stay plain text, no hover state. */
.js-step.js-clickable {
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.js-step.js-clickable:hover {
    background: color-mix(in srgb, var(--js-c, var(--accent)) 18%, #1c1c1c);
    border-color: color-mix(in srgb, var(--js-c, var(--accent)) 45%, var(--border));
}
.js-step.js-clickable:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--js-c, var(--accent)) 60%, transparent);
    outline-offset: 2px;
}

/* ----- Customer create form (/customers) ----- */
.customer-create { margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; }
.customer-create-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin: 0.75rem 0 1rem;
}
/* Label + input read off this one size (the input is font:inherit), so bumping it scales the pair
   together — the New-customer capture form was noticeably smaller than the rest of the app. */
.customer-create-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.95rem; }
.customer-create-form label > span { color: var(--muted); }

/* Two-step "find first, then create" flow on /customers/new */
.cn-step { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.7rem; }
.cn-step-num {
    flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 0.85rem;
    margin-top: 0.1rem;
}
.cn-step .qc-h { margin: 0; }

/* Provenance of a found customer (which dealer / outlet owns it) */
.cn-owner { display: inline-block; }
.cn-share-tag {
    display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem;
    border-radius: 0.7rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase; vertical-align: middle;
}
.cn-share-tag.group { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.cn-share-tag.other { background: color-mix(in srgb, #d98324 22%, transparent); color: #b5670f; }
.cn-actions { white-space: nowrap; display: flex; gap: 0.35rem; }

/* Step 2 locked until a search has run */
.cn-locked {
    display: flex; align-items: center; gap: 0.55rem;
    margin-top: 0.5rem; padding: 0.7rem 0.9rem; border-radius: 0.6rem;
    background: var(--surface-2, rgba(127,127,127,0.08)); color: var(--muted); font-size: 0.9rem;
}

/* Duplicate warning shown while filling the create form */
.cn-dup-banner {
    margin: 0.4rem 0 0.9rem; padding: 0.8rem 1rem; border-radius: 0.7rem;
    background: color-mix(in srgb, #d98324 12%, transparent);
    border: 1px solid color-mix(in srgb, #d98324 45%, transparent);
}
.cn-dup-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.98rem; }
.cn-dup-body { margin: 0.35rem 0 0.6rem; font-size: 0.9rem; line-height: 1.45; }
.cn-dup-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.cn-override { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--muted); cursor: pointer; }
.cn-override input { width: 1rem; height: 1rem; }
.cn-blocked-hint { align-self: center; }

/* =============================================================================
   Applications list (/applications)
   ========================================================================== */

.apps-toolbar {
    display: flex; align-items: center; gap: 1rem;
    margin: 1rem 0;
}
.apps-toolbar .apps-count { margin-left: auto; font-size: 0.85rem; }

/* Carried-context banner (e.g. "Quoting for <asset> — pick a customer") shown when an
   asset is threaded from /assets through customer selection into a quote. */
.apps-context-banner {
    display: flex; align-items: center; gap: 0.6rem;
    margin: 1rem 0;
    padding: 0.7rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 3px;
    font-size: 0.9rem; color: var(--fg);
}
.apps-context-icon { font-size: 1.1rem; line-height: 1; }
.apps-empty { padding: 1.25rem 1.5rem; }

.apps-grid td { vertical-align: middle; }
.apps-grid .apps-money { font-variant-numeric: tabular-nums; }

.apps-phase, .apps-status {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.apps-phase                       { background: rgba(255,255,255,0.05); color: var(--muted); }
.apps-phase-quoteandonboarding    { background: color-mix(in srgb, #3395e0 20%, transparent); color: #b3d9f2; }
.apps-phase-applicationandcredit  { background: color-mix(in srgb, #c79bff 20%, transparent); color: #ddc6ff; }
.apps-phase-docdatacheck          { background: color-mix(in srgb, #b58cf5 20%, transparent); color: #d8c2fb; }
.apps-phase-approval              { background: color-mix(in srgb, #46cf99 20%, transparent); color: #a8ecd0; }
.apps-phase-contracting           { background: color-mix(in srgb, #ff8a4c 20%, transparent); color: #ffc6a4; }
.apps-phase-handoverandactivation { background: color-mix(in srgb, #7fd8d4 20%, transparent); color: #b6f0ec; }
.apps-phase-ended                 { background: rgba(248,113,113,0.18); color: #fbbcbc; }

.apps-status                      { background: rgba(255,255,255,0.05); color: var(--muted); }
.apps-status-draft                { background: rgba(255,255,255,0.08); }
.apps-status-inprogress           { background: color-mix(in srgb, #3395e0 18%, transparent); color: #b3d9f2; }
.apps-status-awaitingcredit       { background: color-mix(in srgb, #ffd166 18%, transparent); color: #ffe6b0; }
.apps-status-approved             { background: color-mix(in srgb, #5dd39e 20%, transparent); color: #b3edcb; }
.apps-status-declined             { background: rgba(248,113,113,0.18); color: #fbbcbc; }
.apps-status-contracted           { background: color-mix(in srgb, #ff8a4c 20%, transparent); color: #ffc6a4; }
.apps-status-active               { background: color-mix(in srgb, #7fd8d4 20%, transparent); color: #b6f0ec; }
.apps-status-closed               { background: rgba(255,255,255,0.05); }
.apps-status-cancelled            { background: rgba(248,113,113,0.12); color: var(--muted); }

/* ---- Admin → Security module ---- */
.security-run-panel { margin: 0.5rem 0 1.25rem; }
.security-run-body { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0; }
.security-check-group { border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 0.8rem; }
.security-check-group legend { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0 0.3rem; }
.security-check-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; font-size: 0.9rem; }
/* A catalog-declared grant warning (PermissionDef.Warning) — deliberately LOUD: it appears the
   moment the box is ticked, for grants that reach beyond this platform's own data (the source
   code, execution on a laptop). */
.perm-grant-warning { margin: 0.35rem 0 0.6rem 1.7rem; padding: 0.55rem 0.75rem; border: 1px solid rgba(248,113,113,0.55); border-left-width: 4px; border-radius: 6px; background: rgba(248,113,113,0.12); color: #fbbcbc; font-size: 0.85rem; font-weight: 600; line-height: 1.35; }
.security-run-actions { display: flex; gap: 0.6rem; }
.security-run-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.5rem 0 1rem; }
.sev-pill { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 4px; white-space: nowrap; }
.sev-critical { background: rgba(248,113,113,0.22); color: #fbbcbc; }
.sev-high     { background: rgba(251,146,60,0.20); color: #fdd0a8; }
.sev-medium   { background: rgba(250,204,21,0.16); color: #f5e6a3; }
.sev-low      { background: rgba(255,255,255,0.08); color: var(--muted); }
.sev-info     { background: color-mix(in srgb, #7fd8d4 16%, transparent); color: #b6f0ec; }
.security-report { padding: 1rem 1.25rem; }
.security-report h1 { font-size: 1.3rem; }
.security-report h2 { font-size: 1.05rem; margin-top: 1.2rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.security-report h3 { font-size: 0.92rem; color: var(--muted); margin-top: 0.9rem; }
.security-report ul { margin: 0.3rem 0 0.6rem 1.1rem; }
.security-report p { margin: 0.3rem 0; font-size: 0.9rem; }

/* =============================================================================
   Application summary cards (/applications/{id}/form)
   ========================================================================== */

.app-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin: 0.5rem 0 1.25rem;
}
/* Deal summary as a top STRIP: glanceable tiles across the width, so neither vertical rail (the
   party list on the left, the old summary column on the right) squeezes the capture form. Tiles
   stay compact — this is context you glance at, not content you read. */
.app-summary-strip { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; margin: 0.5rem 0 1rem; }
.app-summary-strip .app-summary-card { padding: 0.6rem 0.8rem; gap: 0.1rem; }
.app-summary-strip .app-summary-card strong { font-size: 0.92rem; }
.app-summary-strip .app-summary-money strong { font-size: 1.05rem; }
.app-summary-strip .docs-rail-link { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.35rem; margin: 0; }

/* Right-to-be-forgotten (CustomerDetail). */
.cd-forgotten-banner { border-color: rgba(148,163,184,0.35); margin: 0.5rem 0 1rem; }
.cd-forgotten-banner p { margin: 0; }
.cd-forget-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 1rem; }
.cd-forget-panel { margin: -0.5rem 0 1rem; }
.app-summary-card {
    background: #1c1c1c;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0.85rem 1rem;
    display: flex; flex-direction: column;
    gap: 0.2rem;
}
.app-summary-card strong { font-size: 1rem; }
.app-summary-card .muted { font-size: 0.8rem; }
.app-summary-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
}
.app-summary-money strong { font-variant-numeric: tabular-nums; font-size: 1.15rem; }

/* Design-time mirror of the summary header inside the form editor (connect fields to blocks). */
.fc-summary-design { margin: 0.4rem 0 1.4rem; }
.fc-card-off { opacity: 0.5; }
.fc-cust-toggle { font-size: 0.7rem; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 0.4rem; display: inline-flex; align-items: center; gap: 0.2rem; color: var(--muted); }
.fc-cust-toggle input { margin: 0; }
.fc-summary-design .app-summary-card { gap: 0.3rem; }
.fc-summary-design .app-summary-card select,
.fc-summary-design .app-summary-card input { width: 100%; margin-top: 0.1rem; }
.fc-sum-note { font-size: 0.78rem; }

/* Editable summary block card: label input + field selects + reorder/remove actions. */
.fc-summary-block .fc-summary-block-head { display: flex; align-items: center; gap: 0.35rem; }
.fc-summary-block .fc-summary-block-head input { flex: 1; margin-top: 0; }
.fc-summary-block-actions { display: flex; gap: 0.15rem; flex-shrink: 0; }
.fc-summary-block-actions .lp-btn { padding: 0.15rem 0.4rem; line-height: 1; }
/* A block line pairs a field with its own format (primary line, secondary line). */
.fc-summary-block-line { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem; margin-top: 0.25rem; }
.fc-summary-block-line select:last-child { width: 6.5rem; }
.fc-summary-add { align-self: center; }

/* Form-config scope: a clear banner + a locked scope value so the host template vs a
   market-specific copy is unmistakable, and the scope can't be silently re-pointed. */
.form-edit-scope {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.6rem 0.85rem; border-radius: 4px; margin: 0 0 1rem;
    border: 1px solid var(--border); font-size: 0.88rem;
}
.form-edit-scope-host   { background: color-mix(in srgb, #3395e0 10%, transparent); border-color: color-mix(in srgb, #3395e0 35%, transparent); }
.form-edit-scope-market { background: color-mix(in srgb, #46cf99 10%, transparent); border-color: color-mix(in srgb, #46cf99 35%, transparent); }
.form-edit-scope-customer { background: color-mix(in srgb, #c79bff 12%, transparent); border-color: color-mix(in srgb, #c79bff 40%, transparent); }
.form-audience-chip { display: inline-block; margin-inline-start: 0.5rem; padding: 0.05rem 0.4rem; border-radius: 0.6rem; font-size: 0.72rem;
  background: color-mix(in srgb, #c79bff 16%, transparent); color: #c79bff; border: 1px solid color-mix(in srgb, #c79bff 40%, transparent); }
/* Changes staged against this form on a gated stage, shown in the FORM LIST. Deliberately the same
   amber (#e2a03f) as the editor's "QUEUED — NOT LIVE" strip and the AI panel's queued status —
   three surfaces reporting one fact should not each invent a colour. Sized like the audience chip
   beside it so the name cell stays a name cell. It is an <a> only for a user who can actually open
   the approval queue (see ApprovalQueueLink); a <span> otherwise, hence the shared class. */
.form-queued-chip { display: inline-block; margin-inline-start: 0.5rem; padding: 0.05rem 0.4rem; border-radius: 0.6rem; font-size: 0.72rem;
  font-weight: 600; white-space: nowrap; text-decoration: none;
  background: color-mix(in srgb, #e2a03f 16%, transparent); color: #e2a03f; border: 1px solid color-mix(in srgb, #e2a03f 45%, transparent); }
a.form-queued-chip:hover { background: color-mix(in srgb, #e2a03f 28%, transparent); text-decoration: none; }
span.form-queued-chip { cursor: help; }
/* Queued for approval, NOT live. Amber + a left rule so it reads as a state of the form, not as a
   dismissible notice — this is the banner that stops an editor believing a gated save went live. */
.form-edit-scope-pending {
    align-items: flex-start;
    background: color-mix(in srgb, #e2a03f 12%, transparent);
    border-color: color-mix(in srgb, #e2a03f 45%, transparent);
    border-inline-start: 4px solid #e2a03f;
}
.form-edit-pending-list { margin: 0.35rem 0 0.35rem 1.1rem; padding: 0; }
.form-edit-scope-badge {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.2rem 0.5rem; border-radius: 2px; background: rgba(255,255,255,0.08); white-space: nowrap;
}
.form-edit-scope-fixed { display: inline-flex; align-items: baseline; gap: 0.4rem; font-weight: 600; }
.form-edit-copy { margin: 0.4rem 0 1rem; }
.form-edit-copy-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.3rem 0 0.2rem; }

.phase-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
    padding: 0.65rem 0.9rem;
    border: 1px dashed var(--border);
    border-radius: 4px;
    background: rgba(255,255,255,0.02);
}
.phase-actions-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
    margin-right: 0.25rem;
}

/* =============================================================================
   Admin form-config editor (/admin/forms/{id})
   ========================================================================== */

/* Full-page editor — the authoring surface uses the whole viewport width. */
.form-edit-page { max-width: 100%; }
/* Single-column editor — sections + fields get the full content width. The
   live preview stacks below in its own full-width section so the authoring
   surface isn't fighting for horizontal space. */
.form-edit-layout {
    display: flex; flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.25rem;
}
/* Sticky action bar — Save always reachable on the long editor, with a live unsaved indicator.
   The scroll container (.shell) has 2rem padding and the topbar is a sibling above it, so a sticky
   child pinned at top:0 would sit 2rem below the topbar (content scrolling through the gap). top:-2rem
   pulls it flush against the topbar — nothing of the page shows above it. The impersonation bar's
   height is absorbed by .app-shell padding, so this holds whether or not you're impersonating. The
   negative-margin bleed + extra top padding fill the 2rem so the bar reads as a solid top strip. */
/* The editor's actions now live in a bottom .page-actionbar (.form-edit-actionbar) — consistent
   with the runtime form and free of the old top-overlap. .spacer pushes the saved/dirty status to
   the right end of the bar. */
.page-actionbar .spacer { flex: 1; }
/* The editor's action bar stays a single row (it has ~9 tools); it scrolls sideways rather than
   wrapping to two rows, so its height is predictable and the Export/Import panel can float a fixed
   distance above it. */
.form-edit-actionbar { flex-wrap: nowrap; overflow-x: auto; }
/* Export / Import panels float just ABOVE the bottom bar (sticky), so they open in view next to the
   button that toggled them rather than at the top of a long page. */
.fc-bar-panel {
    position: sticky; bottom: 5rem; z-index: 9;   /* clears the one-row action bar (~4.5rem) + gap */
    max-height: 50vh; overflow-y: auto;
    /* Solid background — it floats over page content, so it must be opaque (the flat .fc-import tint
       let text bleed through). */
    background: var(--panel-bg, rgba(22, 26, 36, 0.99));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.9);
}
.form-edit-status { font-size: 0.85rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 4px; white-space: nowrap; }
.form-edit-status.dirty { color: #ffcf8f; background: rgba(255, 176, 80, 0.16); }
.form-edit-status.saved { color: #9fe09f; background: rgba(124, 196, 124, 0.16); }
.form-edit-status.err   { color: #ff9a9a; background: rgba(255, 90, 90, 0.16); }
/* Changes are filed for approval and NOT applied. Same amber as the "QUEUED — NOT LIVE" strip at
   the top of the page, because it is reporting the same fact — this chip is what the person who
   just clicked Save is looking at, and it used to say "✓ Saved" there. Outlined so it is not
   mistaken for the (also amber) unsaved-changes chip at a glance. */
.form-edit-status.queued { color: #ffd8a0; background: color-mix(in srgb, #e2a03f 20%, transparent);
                           box-shadow: inset 0 0 0 1px color-mix(in srgb, #e2a03f 55%, transparent); }
.form-edit-side {
    display: flex; flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
}

/* Identity in a collapsible details — collapsed by default once the form has
   been saved (the header summary shows the key identity fields). */
.form-edit-identity { border: 1px solid var(--border); border-radius: 0.55rem; padding: 0; margin-bottom: 0.4rem; background: rgba(255,255,255,0.02); }
.form-edit-identity > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.65rem 0.85rem;
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.form-edit-identity > summary::-webkit-details-marker { display: none; }
.form-edit-identity > summary::before {
    content: '▶';
    font-size: 0.7rem;
    color: var(--muted);
    transition: transform 120ms ease;
}
.form-edit-identity[open] > summary::before { transform: rotate(90deg); }
.qc-h-inline {
    font-size: 0.82rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.form-edit-identity-summary { font-size: 0.85rem; }
.form-edit-identity-body { padding: 0 0.85rem 0.85rem; display: flex; flex-direction: column; gap: 0.75rem; }

.form-edit-preview-panel { padding: 1.25rem 1.5rem; }

/* Live preview overlay — a wide modal opened on demand (👁 Preview action-bar button), not squeezed
   into the editor layout. Wider than the Test modal (960px) since this shows the whole rendered
   form, not just a results readout. */
.form-preview-modal { width: min(1400px, 96vw); max-height: 90vh; overflow: auto; }
.form-edit-side h3.qc-h { margin-top: 0.5rem; }
.form-edit-row { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.88rem; }
.form-edit-row > span { color: var(--muted); }
.form-edit-check { flex-direction: row; align-items: center; gap: 0.5rem; }
.form-edit-check input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }
/* Generic filter/action toolbar row (Scope · Kind · Workspace · … · buttons). Used by several
   admin pages (knowledge, journeys, blueprint, mappings). #434343 moved the FORM-EDITOR's own toolbar
   to a bottom action bar and dropped this rule with it — but these pages still rely on it, so
   without it their label-columns + buttons collapse and overlap. Restored as a wrapping flex row. */
.form-edit-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.9rem; margin: 1rem 0; }
.form-edit-toolbar > .spacer { flex: 1 1 auto; }
.form-edit-toolbar .fld { gap: 0.25rem; margin: 0; }
.form-edit-toolbar .form-edit-check { align-self: center; }
.form-edit-help { font-size: 0.82rem; margin: 0; }
.form-edit-json {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.5;
    min-height: 22rem;
    resize: vertical;
    white-space: pre;
}
.form-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

/* Legacy two-column preview rule kept only because some other admin pages reuse
   the panel shape; the new layout puts the preview in .form-edit-preview-wrap. */
.form-edit-preview { display: flex; flex-direction: column; gap: 0.75rem; }
.form-edit-preview h3.qc-h { margin: 0.5rem 0 0; }

/* Guided structured editor — sections + fields */
/* Property picker (searchable modal for binding a property/field) */
.pp-wrap { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; flex: 1; }
.pp-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.4rem; width: 100%; text-align: left; cursor: pointer; }
.pp-trigger-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-trigger-caret { opacity: 0.6; flex: none; }
.pp-clear { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.8rem; padding: 0 0.2rem; }
.pp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 1rem; }
.pp-modal { background: var(--panel, #181818); border: 1px solid var(--border); border-radius: 0.7rem; width: min(820px, 100%); max-height: 78vh; display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,0.5); }
.pp-head { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); }
.pp-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.95rem; }
/* box-sizing + width-minus-margins so the search box stays inside the modal (a plain width:100% input
   plus horizontal margins overflows the right edge). */
.pp-search { box-sizing: border-box; width: calc(100% - 1.8rem); margin: 0.7rem 0.9rem 0.4rem; }
.pp-body { display: grid; grid-template-columns: 14rem 1fr; gap: 0; min-height: 0; flex: 1; overflow: hidden; }
@media (max-width: 620px) { .pp-body { grid-template-columns: 1fr; } .pp-rail { display: none; } }
.pp-rail { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem; border-right: 1px solid var(--border); overflow: auto; }
/* Group name flush-left with its count right after it (not pushed to the far edge, which read as
   centred); the count keeps the leftover space via margin-left:auto only on the count itself. */
.pp-rail-item { display: flex; align-items: center; justify-content: flex-start; gap: 0.4rem; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; padding: 0.35rem 0.55rem; border-radius: 0.4rem; font-size: 0.82rem; }
.pp-rail-item:hover { background: rgba(255,255,255,0.05); }
.pp-rail-item.active { background: rgba(51,149,224,0.18); }
.pp-count { font-size: 0.72rem; color: var(--muted); }
.pp-list { overflow: auto; padding: 0.4rem 0.6rem 0.8rem; }
.pp-group-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #9e9e9e; margin: 0.6rem 0 0.25rem; }
/* Flush-left rows: the label, then the key + hint as muted suffixes right after it (NOT pushed to the
   far right, which read as oddly centred with short labels). */
.pp-opt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.5rem; width: 100%; text-align: left; justify-content: flex-start; background: none; border: 0; color: inherit; cursor: pointer; padding: 0.35rem 0.55rem; border-radius: 0.4rem; }
.pp-opt:hover { background: rgba(255,255,255,0.05); }
.pp-opt.selected { background: rgba(51,149,224,0.22); }
.pp-opt-label { font-size: 0.85rem; font-weight: 500; }
.pp-opt-key { font-size: 0.72rem; color: var(--muted); font-family: var(--mono, monospace); }
.pp-opt-hint { font-size: 0.7rem; color: #898989; }
.pp-empty { padding: 1rem 0.5rem; }

/* Dealers & Outlets admin: edit form title + compact dealer filter in the toolbar */
.ao-form-title { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; }
.ao-dealer-filter { flex-direction: row; align-items: center; gap: 0.4rem; margin: 0 0.5rem; }
.ao-dealer-filter > span { font-size: 0.78rem; }

/* Finance-products: Azure-style full-width stepper editor */
.fp-listhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.fp-editor { display: flex; flex-direction: column; gap: 1rem; }
.fp-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fp-steps { display: flex; gap: 0.4rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 0.6rem; }
.fp-step {
    display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 0.5rem;
    color: inherit; padding: 0.5rem 0.9rem; font-size: 0.88rem;
}
.fp-step:hover { background: rgba(255,255,255,0.06); }
/* The current step reads clearly as selected: filled accent, bold, lifted, with an underline bar. */
.fp-step.active {
    border-color: var(--accent, #3395e0); background: rgba(51,149,224,0.22);
    box-shadow: inset 0 -3px 0 var(--accent, #3395e0); font-weight: 600;
}
.fp-step.active .fp-step-no { background: var(--accent, #3395e0); color: #fff; }
.fp-step-no {
    display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem;
    border-radius: 50%; background: rgba(255,255,255,0.1); font-size: 0.78rem; font-weight: 600;
}
.fp-step.done:not(.active) .fp-step-no { background: rgba(124,196,124,0.3); color: #9fe09f; }
.fp-panel { min-height: 16rem; padding: 0.6rem 0.1rem; display: flex; flex-direction: column; gap: 1rem; }
/* Roomier fields in the wizard so they don't crowd/overlap. */
.fp-panel .cf-form-row { gap: 1rem 1.25rem; }
.fp-panel .cf-form-row .fld { min-width: 9.5rem; }
.fp-panel .cf-form-row .fld .auth-input { width: 100%; box-sizing: border-box; }
.fp-campaign { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.6rem; }
/* Pricing versions (effective-dating) */
.fp-ver-bar { display: flex; align-items: end; gap: 0.75rem; flex-wrap: wrap; padding-bottom: 0.3rem; border-bottom: 1px dashed var(--border); }
.fp-sched { display: flex; align-items: end; gap: 0.75rem; flex-wrap: wrap; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 0.5rem; background: rgba(51,149,224,0.06); }
.fp-sched .fld.grow { flex: 1 1 14rem; }
.fp-ver-sel > td { background: rgba(51,149,224,0.10); }
.fp-ver-badge { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.fp-ver-badge.active { background: rgba(124,196,124,0.22); color: #9fe09f; }
.fp-ver-badge.sched { background: rgba(51,149,224,0.22); color: #b3d9f2; }
.fp-ver-badge.expired { background: rgba(255,255,255,0.08); color: var(--muted); }
.cc-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin-bottom: 0.8rem; }
.cc-filter-actions { display: flex; gap: 0.4rem; align-items: end; margin-left: auto; }
.cc-assign { margin-bottom: 1rem; }
.cc-check { width: 2rem; text-align: center; }
.cc-set { font-size: 0.85rem; color: var(--muted); }
.cc-detail { width: 4.5rem; text-align: right; }
.cc-del { color: #ffb3b3; border-color: rgba(255,110,110,0.4); }
.cc-del:hover:not(:disabled) { background: rgba(255,110,110,0.12); border-color: rgba(255,110,110,0.7); }
.cc-msg { margin: -0.4rem 0 0.8rem; }
/* Config-change detail modal: before/after JSON side by side. */
.cc-detail-modal { max-width: min(1000px, 94vw); width: 94vw; }
.cc-detail-meta { margin: 0 0 0.6rem; }
.cc-detail-cols { display: grid; gap: 0.8rem; }
.cc-detail-cols.two { grid-template-columns: 1fr 1fr; }
.cc-detail-col h4 { margin: 0 0 0.3rem; font-size: 0.85rem; }
.cc-json {
    font-family: var(--mono, monospace); font-size: 0.74rem; line-height: 1.4;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 2px;
    padding: 0.6rem; max-height: 60vh; overflow: auto; white-space: pre; margin: 0;
}
@media (max-width: 760px) { .cc-detail-cols.two { grid-template-columns: 1fr; } }
.rv-settings { margin-bottom: 1rem; }

/* Calculator designer — source viewer + AI-suggested field markers. */
.cd-source { max-height: 65vh; overflow: auto; white-space: pre; }
.cd-ai-suggested { position: relative; }
.cd-ai-suggested > span::after { content: " ✨"; }
.cd-ai-suggested input { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.cf-linklist { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.rv-opt-block { border: 1px solid var(--border); border-radius: 3px; padding: 0.6rem 0.7rem; margin-bottom: 0.6rem; }
.rv-opt-scope { margin-top: 0.3rem; padding-top: 0.4rem; border-top: 1px dashed var(--border); }
.rv-opt-scope .fld span { font-size: 0.78rem; color: var(--muted); }
.rv-settings-save { align-self: end; }
.rv-editor { display: flex; flex-direction: column; gap: 0.8rem; }
/* Rate card grid editor */
.rc-bands { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.rc-bands-label { font-size: 0.82rem; color: var(--muted); }
.rc-band-edit { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.85rem; }
.rc-band-input { width: 4.5rem; }
.rc-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.8rem; }
.rc-grid { width: auto; }
.rc-grid th { font-size: 0.78rem; white-space: nowrap; }
.rc-term { width: 5rem; }
.rc-rate { width: 5rem; }
/* Two-up eligibility (vehicles | dealers) with clear separation. */
.fp-elig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem 2.5rem; }
.fp-elig-col { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.fp-footer { display: flex; align-items: center; gap: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.fp-footer-gap { flex: 1; }
.fp-review { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.7rem 1.4rem; }
.fp-review > div { display: flex; flex-direction: column; gap: 0.15rem; }
.fp-review .muted { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* Vehicle eligibility tree picker (make → model → variant → years/NST) */
.vsp { border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.5rem 0.6rem; max-height: 22rem; overflow: auto; }
.vsp-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; padding: 0.12rem 0; cursor: pointer; }
.vsp-all { font-size: 0.72rem; }
.vsp-children { margin-left: 1.25rem; border-left: 1px solid rgba(255,255,255,0.08); padding-left: 0.6rem; }
.vsp-leaf { margin-left: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; padding: 0.2rem 0 0.35rem; }
.vsp-leaf-label { font-size: 0.72rem; color: #9e9e9e; }
.vsp-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; }

/* Finance-products admin: eligibility dealer/outlet checkbox lists */
.fp-checks { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; max-height: 9rem; overflow: auto; padding: 0.3rem 0.1rem; }
.fp-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; }

/* Form overlay (market inherits host base + thin delta) */
.fo-banner { border: 1px solid rgba(124,196,124,0.4); background: rgba(124,196,124,0.07); border-radius: 0.6rem; padding: 0.6rem 0.8rem; margin-bottom: 0.9rem; }
.fo-banner-head { font-size: 0.9rem; }
.fo-banner-sub { font-size: 0.8rem; margin: 0.3rem 0 0; }
.fo-warn { color: #e0b060; }
.fo-warnings { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.8rem; color: #e0b060; display: flex; flex-direction: column; gap: 0.15rem; }
.fo-badge { background: rgba(124,196,124,0.22); color: #9fe09f; border: 1px solid rgba(124,196,124,0.5); font-weight: 700; font-size: 0.7rem; }

/* User manual (/admin/manual editor, /manual reader) — one card per workspace chapter. */
.manual-toc { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0 0 1.2rem; padding: 0.7rem 1rem; border: 1px solid var(--border); border-radius: 3px; }
.manual-chapter { margin-bottom: 0.8rem; }
.manual-chapter-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.manual-chapter-head-clickable { cursor: pointer; user-select: none; }
.manual-chapter-status { flex: 0 0 auto; }
.manual-chapter-chevron { flex: 0 0 auto; width: 1.2rem; text-align: center; color: var(--muted); }
.manual-chapter-icon { font-size: 1.3rem; line-height: 1; }
.manual-chapter-body-wrap { margin-top: 0.7rem; }
.manual-chapter-edit-toolbar { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.manual-chapter-body { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; resize: vertical; }
.manual-chapter-preview { border: 1px solid var(--border); border-radius: 3px; padding: 0.8rem 1rem; background: rgba(255,255,255,0.02); }
.manual-chapter-draft { margin-top: 0.9rem; }
.manual-chapter-diff { display: flex; gap: 1rem; margin: 0.6rem 0; }
.manual-chapter-diff > div { flex: 1 1 0; min-width: 0; }
.manual-chapter-diff-pane { max-height: 20rem; overflow: auto; }
@media (max-width: 900px) { .manual-chapter-diff { flex-direction: column; } }
.manual-explore { margin: -0.6rem 0 1.2rem; }
.manual-chapter-journey { margin: 0.4rem 0 0.8rem; font-style: italic; }
.manual-chapter-forms { margin-top: 1rem; }
.manual-forms-group { margin-bottom: 1rem; }
.manual-forms-group h4 { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.manual-forms-grid { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.manual-forms-grid .bb-card { width: 26rem; max-width: 100%; flex: 1 1 24rem; }
.manual-chapter-history { margin-top: 1rem; }
.manual-history-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.manual-history-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: 2px; flex-wrap: wrap; }
.manual-history-preview { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; color: var(--muted); }
.manual-appendix { margin-top: 1.5rem; }
.manual-appendix h1 { margin-top: 1.6rem; }
.manual-appendix ul { padding-left: 1.2rem; }
span.fo-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; height: 1.1rem; border-radius: 0.3rem; padding: 0 0.2rem; }

/* Interfaces-at-this-stage panel (build form fields from an interface) */
.fe-ifaces { border: 1px solid rgba(51,149,224,0.28); border-radius: 0.6rem; background: rgba(51,149,224,0.05); margin-bottom: 0.9rem; }
.fe-ifaces-head {
    width: 100%; text-align: left; background: none; border: 0; color: inherit; cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; font-weight: 600; font-size: 0.9rem;
}
.fe-ifaces-caret { width: 0.9rem; display: inline-block; }
.fe-ifaces-sub { font-weight: 400; font-size: 0.8rem; margin-left: auto; }
.fe-ifaces-body { padding: 0 0.8rem 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.fe-ifaces-help { font-size: 0.8rem; margin: 0 0 0.2rem; }
.fe-iface { border: 1px solid rgba(255,255,255,0.08); border-radius: 0.5rem; background: rgba(0,0,0,0.18); }
.fe-iface-head {
    width: 100%; text-align: left; background: none; border: 0; color: inherit; cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; font-size: 0.85rem;
}
.fe-iface-caret { width: 0.9rem; display: inline-block; }
.fe-iface-sys { font-size: 0.78rem; }
.fe-iface-counts { margin-left: auto; font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.fe-iface-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; padding: 0 0.7rem 0.7rem; }
@media (max-width: 800px) { .fe-iface-body { grid-template-columns: 1fr; } }
.fe-iface-col { display: flex; flex-direction: column; gap: 0.35rem; }
.fe-iface-col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; }
.fe-iface-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; max-height: 11rem; overflow: auto; }
.fe-iface-fields li { font-size: 0.78rem; display: flex; gap: 0.4rem; justify-content: space-between; }
.fe-iface-fields code { font-size: 0.76rem; }

.form-edit-sections { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.form-edit-section {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.6rem;
    padding: 0.75rem 0.85rem;
    background: rgba(255,255,255,0.025);
    display: flex; flex-direction: column;
    gap: 0.6rem;
}
.form-edit-section-head { display: flex; align-items: center; gap: 0.4rem; }

/* A live fragment include: content lives in the library, so the block reads as a reference —
   dashed border, no field editors. */
.form-edit-fragment-include { border-style: dashed; border-color: rgba(51,149,224,0.4); }
.form-edit-fragment-include .form-edit-section-head strong { font-size: 0.95rem; }
.form-edit-fragment-shape { margin: 0; }

/* Design-time tabs: filter bar + per-section tab badge so it's obvious which sections live on
   which runtime tab (vs. the always-visible common body). */
.form-edit-tabbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0.9rem; }
.form-edit-tabbar > .muted { width: 100%; font-size: 0.8rem; margin-bottom: 0.15rem; }
.fe-tab {
    font: inherit; font-size: 0.8rem; padding: 0.22rem 0.7rem; border-radius: 4px; cursor: pointer;
    border: 1px solid rgba(140, 150, 170, 0.3); background: rgba(140, 150, 170, 0.08); color: var(--fg, #e6e9f0);
}
.fe-tab:hover { border-color: rgba(51, 149, 224, 0.6); }
.fe-tab.active { border-color: rgba(51, 149, 224, 0.9); background: rgba(51, 149, 224, 0.16); color: #b3d9f2; font-weight: 600; }
.fe-tab-add { border-style: dashed; border-color: rgba(51, 149, 224, 0.55); color: #b3d9f2; background: transparent; margin-left: auto; }
.fe-tab-add:hover { background: rgba(51, 149, 224, 0.12); border-style: solid; }
.fe-section-tab {
    font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: 2px; white-space: nowrap;
    background: rgba(51, 149, 224, 0.16); color: #b3d9f2; border: 1px solid rgba(51, 149, 224, 0.4);
}
.fe-section-tab-common { background: rgba(140, 150, 170, 0.12); color: var(--muted, #929292); border-color: rgba(140, 150, 170, 0.3); }
/* A tabbed section gets a left accent so it reads as "belongs to a tab, not the main body". */
.form-edit-section-tabbed { border-left: 3px solid rgba(51, 149, 224, 0.55); }
.form-edit-insert-empty { font-size: 0.82rem; text-decoration: none; align-self: center; }
.form-edit-insert-empty:hover { text-decoration: underline; }
.form-edit-section-title { flex: 1; font-weight: 600; }
.form-edit-section-tools { display: flex; gap: 0.25rem; }
.form-edit-section-meta { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(160px, 2fr); gap: 0.5rem; }
.form-edit-section-meta label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; }
.form-edit-section-meta label > span { color: var(--muted); }

.form-edit-fields { display: flex; flex-direction: column; gap: 0.45rem; padding-left: 0.6rem; border-left: 2px solid rgba(255,255,255,0.06); }
/* Per-field connection badges in the form editor — colour-coded, click to open the inspector. */
.fc-badges { display: inline-flex; align-items: center; gap: 0.2rem; margin: 0 0.1rem; }
.fc-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; padding: 0; border-radius: 50%;
    font-size: 0.74rem; font-weight: 700; line-height: 1; cursor: pointer;
    border: 1px solid transparent;
}
.fc-badge svg { display: block; }
.fc-badge-api   { background: rgba(179,217,242,0.18); color: #b3d9f2; border-color: rgba(179,217,242,0.4); }
.fc-badge-rule  { background: rgba(240,179,82,0.18);  color: #e9c07a; border-color: rgba(240,179,82,0.4); }
.fc-badge-valid { background: rgba(122,222,167,0.16); color: #84d6a4; border-color: rgba(122,222,167,0.4); }
.fc-badge-calc  { background: rgba(63,217,155,0.16);  color: #5fd6b0; border-color: rgba(63,217,155,0.4); font-style: italic; }
.fc-badge-src   { background: rgba(181,156,255,0.16); color: #b59cff; border-color: rgba(181,156,255,0.4); }
.fc-badge-cond  { background: rgba(160,160,180,0.16); color: #b7b7b7; border-color: rgba(160,160,180,0.4); }
.fc-badge:hover { filter: brightness(1.25); }

/* Read-only field inspector (right-click a field / the ⓘ button on the form editor) */
.fc-inspect-backdrop {
    position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,0.45);
    display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem; overflow-y: auto;
}
.fc-inspect {
    width: min(540px, 100%); background: #1c1c1c; border: 1px solid var(--border);
    border-radius: 5px; padding: 1rem 1.2rem; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.7);
}
.fc-inspect-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.fc-inspect-key { font-size: 0.78rem; color: #9e9e9e; margin-left: 0.5rem; }
.fc-inspect-sub { font-size: 0.8rem; margin: 0.2rem 0 0.6rem; }
.fc-inspect-h { font-size: 0.82rem; color: #b3d9f2; margin: 0.9rem 0 0.3rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.fc-inspect-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; font-size: 0.85rem; margin: 0; }
.fc-inspect-dl dt { color: #9e9e9e; }
.fc-inspect-line { font-size: 0.85rem; margin: 0.2rem 0; }
.fc-inspect-preview { margin: 0.4rem 0; }
.fc-inspect-opts {
    list-style: none; padding: 0.4rem 0.6rem; margin: 0.35rem 0 0;
    max-height: 220px; overflow: auto;
    background: rgba(51, 149, 224, 0.06);
    border: 1px solid rgba(51, 149, 224, 0.18); border-radius: 3px;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.fc-inspect-opts li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem;
    font-size: 0.82rem; padding: 0.12rem 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fc-inspect-opts li:last-child { border-bottom: none; }
.fc-opt-label { color: #e6ecf7; }
.fc-opt-val { color: #9e9e9e; font-size: 0.74rem; white-space: nowrap; }

/* /admin/assets — asset catalogue management */
.aa-count { margin-left: auto; font-size: 0.82rem; }
.aa-editor { margin: 0.8rem 0; }
.aa-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem 0.9rem; }
.aa-check { display: flex; align-items: center; gap: 0.4rem; }
.aa-check input { width: auto; }
.aa-synced { font-size: 0.8rem; margin: 0.5rem 0 0; }
.aa-actions { white-space: nowrap; display: flex; gap: 0.3rem; }
.aa-del { color: #ff8a8a; }
.aa-src { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 0.04rem 0.45rem; border-radius: 4px; }
.aa-src-provider { background: rgba(125, 216, 212, 0.16); color: #7fd8d4; border: 1px solid rgba(125, 216, 212, 0.3); }
.aa-src-local { background: rgba(255, 255, 255, 0.06); color: #aeaeae; border: 1px solid rgba(255, 255, 255, 0.12); }

/* Asset options sub-editor (shared component, used on /assets + /admin/assets) */
.asset-options-editor { margin: 0.6rem 0 0.2rem; }
.aoe-head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.35rem; }
.aoe-empty { font-size: 0.85rem; margin: 0.2rem 0 0.5rem; }
.aoe-table { width: 100%; }
.aoe-table td, .aoe-table th { vertical-align: middle; }
.aoe-table th.aoe-fac, .aoe-table td.aoe-fac { text-align: center; width: 4.5rem; }
.aoe-table td.aoe-fac input { width: auto; margin: 0 auto; display: block; }
.aoe-code { max-width: 7rem; }
.aoe-price { max-width: 8rem; text-align: right; }
.aoe-add { margin-top: 0.4rem; }

.fc-inspect-rules { list-style: none; padding: 0; margin: 0.2rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.fc-inspect-rules li { font-size: 0.85rem; border-left: 2px solid var(--border); padding-left: 0.6rem; }
.fc-rule-sev { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 0.02rem 0.4rem; border-radius: 4px; margin-right: 0.4rem; }
.fc-rule-error { background: rgba(224,83,58,0.16); color: #f0997b; }
.fc-rule-warning { background: rgba(240,179,82,0.16); color: #e9c07a; }

.form-edit-field {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 0.45rem;
    padding: 0.5rem 0.55rem;
    background: rgba(255,255,255,0.015);
    cursor: pointer;   /* click the row to edit its properties in the side panel */
}
.form-edit-field.selected {
    border-color: rgba(51, 149, 224, 0.75);
    background: rgba(51, 149, 224, 0.08);
}
/* Inputs inside a field row shouldn't show the row's "pointer" — they're text-editable. */
.form-edit-field .auth-input, .form-edit-field .form-edit-check { cursor: auto; }

/* Property inspector panel (inside the shared SidePanel) */
.fc-props-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.7rem; }
.fc-props-grid > label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; }
.fc-props-grid > label > span { color: var(--muted); }
.fc-props-grid .form-edit-check { flex-direction: row; align-items: center; gap: 0.4rem; }
.fc-props-wide { grid-column: 1 / -1; }
/* section inspector: intro note + accent colour picker row */
.fc-props-note { grid-column: 1 / -1; margin: 0 0 0.1rem; line-height: 1.45; }
.fc-accent-row { display: flex; align-items: center; gap: 0.4rem; }
.fc-accent-row .auth-input { flex: 1; min-width: 0; }
.fc-accent-swatch { width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid var(--border); border-radius: 2px; background: none; cursor: pointer; flex: none; }
.fc-props-source { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.3rem; }
.fc-props-source > span { font-size: 0.8rem; }
/* read-only Integrations preview (form editor left panel) */
.fc-intg { border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.6rem; margin-bottom: 0.5rem; }
.fc-intg-head { display: flex; align-items: baseline; gap: 0.5rem; }
.fc-intg-code { font-weight: 600; font-family: var(--mono, monospace); }
.fc-intg-fires { color: var(--muted); font-size: 0.78rem; }
.fc-intg-line { font-size: 0.78rem; margin-top: 0.2rem; }
.fc-intg-line.out { color: #b3d9f2; }
.fc-intg-line.in { color: #8fd9a8; }
.fc-intg-line.muted { color: var(--muted); }
.fc-intg-foot { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.fc-props-conn { border-top: 1px solid var(--border); padding-top: 0.6rem; }
.fc-props-conn h4 { margin: 0 0 0.4rem; }
.fc-conn-line { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.82rem; margin: 0.2rem 0; }
.fc-conn-maps { list-style: none; margin: 0.1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.fc-conn-maps li { font-size: 0.8rem; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.fc-badge-tx { background: rgba(255,176,80,0.16); color: #ffcf8f; border: 1px solid rgba(255,176,80,0.4); border-radius: 4px; font-size: 0.66rem; padding: 0.02rem 0.35rem; }
/* One row per field: grip · key · label · kind · req · badges · tools. The template MUST match the
   seven children — the grip in a flexible track once left a huge dead column (and wrapped the tools
   onto a second line), which read as a big empty box on every field row.
   Wrapping keys on the CARD's own width (container query), not the viewport: the same rows render
   inside the ~570px resizable side-panel config column, where a viewport breakpoint never fires and
   the single-row template overflowed out the side. */
.form-edit-field { container-type: inline-size; }
.form-edit-field-row {
    display: grid;
    grid-template-columns: auto minmax(110px, 1fr) minmax(110px, 1.4fr) minmax(100px, auto) auto auto auto;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.85rem;
}
@container (max-width: 640px) {
    /* Narrow card (side-panel column, small screens): badges + tools wrap under the inputs
       instead of squeezing them out of the card. */
    .form-edit-field-row { grid-template-columns: auto minmax(90px, 1fr) minmax(90px, 1.4fr) minmax(90px, auto) auto; }
    .form-edit-field-row .fc-badges { grid-column: 2; justify-self: start; }
    .form-edit-field-row .form-edit-field-tools { grid-column: 3 / -1; justify-self: start; }
}
.form-edit-field-tools { display: flex; gap: 0.25rem; }
/* Row tools as compact circles — one visual family with the round status badges beside them. */
.form-edit-field-tools .lp-btn.sm {
    width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; line-height: 1;
}
.form-edit-field-advanced { margin-top: 0.45rem; }
.form-edit-field-advanced > summary { font-size: 0.78rem; cursor: pointer; }
.form-edit-field-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 0.45rem;
    margin-top: 0.5rem;
}
.form-edit-field-advanced-grid label { display: flex; flex-direction: column; gap: 0.18rem; font-size: 0.8rem; }
.form-edit-field-advanced-grid label > span { color: var(--muted); }

.form-edit-options { margin-top: 0.55rem; padding: 0.45rem 0.55rem; border: 1px dashed rgba(255,255,255,0.1); border-radius: 0.4rem; }
.form-edit-option-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(140px, 1.6fr) auto; gap: 0.4rem; margin-bottom: 0.3rem; }

.form-edit-json-advanced { margin-top: 0.75rem; }
.form-edit-json-advanced > summary { font-size: 0.85rem; cursor: pointer; padding: 0.35rem 0; }

@media (max-width: 980px) {
    .form-edit-layout { gap: 0.85rem; }
    .form-edit-preview-panel { padding: 0.85rem 1rem; }
}

/* =============================================================================
   Floating AI assistant launcher + slide-out panel
   ========================================================================== */

/* Animatable CSS custom property — the only way to animate a conic-gradient
   angle (transform: rotate would also spin the icon inside). */
@property --ai-spin {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Launcher wrapper — fixed-positioned just below the topbar, right-aligned
   with the page-content gutter (.shell padding is 2rem). The orb sits in
   the page frame, not the chrome, and visually caps the right end of the
   journey strip on Quote/Application pages. */
.ai-asst-launcher {
    position: fixed;
    /* Sits just below the topbar on the right edge. `--banner-offset` (0 normally,
       the impersonation bar's height while operating-as) pushes it further down so it
       never overlaps the Sign-out button when a banner shifts the topbar down. */
    top: calc(var(--banner-offset, 0rem) + 3rem + 10px);
    right: calc(2rem - 20px);
    z-index: 80;
    display: inline-flex;
    align-items: center;
}
/* When the drawer is open, hide the orb — the drawer's own header carries
   close. Leaving it visible double-stacks the affordance. */
.ai-asst-launcher.open { display: none; }

/* The orb itself. The 2px spinning conic-gradient ring (StarBorder pattern)
   reads as "AI is alive" — replaces the previous shadow-pulse. */
.ai-bubble {
    position: relative;
    isolation: isolate;
    width: 2.4rem; height: 2.4rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 150ms ease;
}
.ai-bubble:hover { transform: scale(1.1); }

/* Rotating conic-gradient ring — sits BEHIND the bubble, poking 2px out on
   every side. The ::after inner face covers the centre of this gradient,
   leaving only the 2px ring visible. */
.ai-bubble::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(from var(--ai-spin),
        #3395e0, #7fd8d4, #c79bff, #ff8a4c, #3395e0);
    animation: ai-bubble-spin 4s linear infinite;
    z-index: -2;
    filter: drop-shadow(0 0 6px rgba(199, 155, 255, 0.45));
}

/* Inner dark face — opaque enough to fully cover the spinning ring's centre. */
.ai-bubble::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(199, 155, 255, 0.35), rgba(35, 22, 60, 0.95) 70%),
        rgba(18, 22, 35, 0.95);
    z-index: -1;
}

@keyframes ai-bubble-spin {
    to { --ai-spin: 360deg; }
}

/* ===== The AI dock — the shared SidePanel shell skinned as the AI surface ===== */
/* The structural CSS (position, slide, resize handle, collapse rail) comes from .side-panel;
   .ai-dock layers the AI identity on top: its OWN width var (--ai-drawer-w — the app-shell
   coexistence rules below sum it with a page panel's --side-panel-w), the dark-glass treatment,
   the blue glow frame, and a z-index above page panels. */
.side-panel.ai-dock {
    width: var(--ai-drawer-w, 440px);
    z-index: 90;   /* above page side panels (70) — they dock to the AI's left instead */
    /* Translucent dark glass — the AI's own surface treatment. */
    background: rgba(28, 28, 28, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* Only the dark directional shadow lives on the panel itself (floats its left edge over
       the page). The blue glow is drawn by ::after (below) so it reads equally on all four
       edges — an inset shadow placed here was painted over by the child surfaces (header /
       stream / input), which is why it only ever showed on the left. */
    box-shadow: -24px 0 60px -30px rgba(0, 0, 0, 0.8);
    border-left: 0;   /* the ::after frame draws the left edge — a border here doubles it */
    /* Rounded ONLY on the left: the right edge is docked flush to the viewport, so a right-side
       radius would curve away from the screen edge and read as clipped corners. overflow:hidden
       makes the children (header gradient, scroll surfaces) follow the left rounding instead of
       poking square corners past it. */
    border-radius: 6px 0 0 14px;
    overflow: hidden;
}
/* The chat surface manages its own scroll regions (sticky top, flex:1 stream, pinned input row),
   so the body is a flush flex column, not the padded scroll box other panels use. */
.side-panel.ai-dock .side-panel-body { padding: 0; gap: 0; overflow: hidden; }
/* Header keeps the old drawer's subtle blue-tinted gradient over the glass. */
.side-panel.ai-dock .side-panel-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(51, 149, 224, 0.08), transparent);
}

/* Blue glow overlay — an absolutely-positioned layer painted ON TOP of the panel's content
   (it's the last-painted child), so the border + inset halo frame the panel evenly on top,
   right AND bottom, not just the left. pointer-events:none keeps it inert so the chat stays
   clickable. The docked edges sit on the viewport boundary, so an OUTWARD halo can't show —
   this inset-on-overlay approach is what makes all four sides read the same. */
.side-panel.ai-dock::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    border-radius: inherit;   /* follow the drawer's left rounding so the frame hugs the corners */
    border: 1px solid rgba(51, 149, 224, 1);
    box-shadow: inset 0 0 0 1px rgba(51, 149, 224, 0.29),
                inset 0 0 16px 0 rgba(51, 149, 224, 0.36),
                inset 0 0 44px 4px rgba(51, 149, 224, 0.21);
    transition: box-shadow 200ms ease, border-color 200ms ease;
}

/* AI working — the blue frame brightens + pulses. Respects reduced-motion (steady strong halo). */
.side-panel.ai-dock.ai-busy::after {
    border-color: rgba(130, 188, 255, 1);
    animation: ai-drawer-glow 1.6s ease-in-out infinite;
}
@keyframes ai-drawer-glow {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(51, 149, 224, 0.29), inset 0 0 22px 0 rgba(51, 149, 224, 0.29); }
    50%      { box-shadow: inset 0 0 0 1px rgba(51, 149, 224, 0.46), inset 0 0 52px 6px rgba(51, 149, 224, 0.46); }
}
@media (prefers-reduced-motion: reduce) {
    .side-panel.ai-dock.ai-busy::after {
        animation: none;
        box-shadow: inset 0 0 0 1px rgba(51, 149, 224, 0.43), inset 0 0 40px 2px rgba(51, 149, 224, 0.38);
    }
}

/* Edge tab — the AI's docked trigger, hugging the right viewport edge while the dock is closed.
   Vertical writing mode so it reads like a drawer tab; same dark-glass + blue-glow language as
   the dock so tab and panel feel like one control in two states. */
.ai-edge-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 89;   /* under the dock (90) so the slide-in covers it seamlessly */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    writing-mode: vertical-rl;
    padding: 0.75rem 0.3rem 0.75rem 0.35rem;
    background: rgba(28, 28, 28, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(51, 149, 224, 0.65);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    color: var(--fg);
    cursor: pointer;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    box-shadow: -10px 0 30px -18px rgba(0, 0, 0, 0.8),
                inset 0 0 12px 0 rgba(51, 149, 224, 0.22);
    transition: box-shadow 160ms ease, border-color 160ms ease, padding-right 160ms ease;
}
.ai-edge-tab:hover {
    border-color: rgba(130, 188, 255, 1);
    padding-right: 0.55rem;   /* nudges out from the edge — "I'll slide open" */
    box-shadow: -10px 0 30px -14px rgba(0, 0, 0, 0.9),
                inset 0 0 18px 1px rgba(51, 149, 224, 0.4);
}
.ai-edge-tab-label { line-height: 1; }
/* the icon shouldn't rotate with the vertical text */
.ai-edge-tab svg, .ai-edge-tab .ai-icon { writing-mode: horizontal-tb; }

/* Invisible identity key for the AI panel's document-level paste handler. */
.ai-paste-key { display: none; }

/* ===== Screenshot paste/drop zone in the AI panel (form-builder vision flow) ===== */
.ai-paste {
    /* Match the 1rem horizontal padding of .ai-stream / .ai-input-row so the zone + caution
       align with the input box and clear the drawer's edge border + inset glow (otherwise the
       caption sits flush-left under the glow and its first characters look clipped). */
    padding: 0 1rem;
    margin: 0 0 0.6rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.ai-paste-zone {
    border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    padding: 0.75rem 0.85rem;
    text-align: center;
    font-size: 0.82rem; color: var(--muted);
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
    outline: none;
}
.ai-paste-zone:focus-visible { border-color: var(--accent-2); }
.ai-paste-zone.attachments-zone-hover {
    border-color: var(--accent-2);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--fg);
}
.ai-paste-zone strong { color: var(--fg); }
.ai-paste-caution { font-size: 0.72rem; color: var(--muted); margin: 0; }
.ai-paste-thumbs { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ai-paste-thumb {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 3px; overflow: hidden;
    border: 1px solid var(--border);
    background: #121212;
}
.ai-paste-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-paste-thumb-x {
    position: absolute; top: 1px; right: 1px;
    width: 16px; height: 16px; line-height: 14px;
    border: none; border-radius: 50%;
    background: rgba(0, 0, 0, 0.65); color: #fff;
    font-size: 0.7rem; cursor: pointer; padding: 0;
}
.ai-paste-status { font-size: 0.78rem; margin: 0; }

/* Monospace + vertical-resize for structured/markdown text areas (AI guidance, YAML). */
.mono { font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; }
textarea.auth-input { resize: vertical; }
.aig-edit-row > td { padding-top: 0.5rem; }

/* AI guidance — phase accordion × perspective grid. */
.aig-scopebar { display: flex; align-items: flex-end; gap: 1rem; margin: 1.25rem 0 1rem; flex-wrap: wrap; }
.aig-scopebar .fld { min-width: 320px; }
.aig-phase { padding: 0; margin-top: 0.6rem; overflow: hidden; }
.aig-phase-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; cursor: pointer; user-select: none; }
.aig-phase-head:hover { background: rgba(140, 150, 170, 0.06); }
.aig-phase-head .spacer { flex: 1; }
.aig-phase-sub { font-size: 0.85rem; }
.aig-count { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 4px;
    background: rgba(140, 150, 170, 0.16); color: var(--muted, #929292); }
.aig-count.aig-count-on { background: rgba(51, 149, 224, 0.18); color: #3395e0; }
.aig-phase-body { padding: 0.2rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.9rem;
    border-top: 1px solid rgba(140, 150, 170, 0.14); }
.aig-persp { display: flex; flex-direction: column; gap: 0.35rem; }
.aig-persp-label { font-size: 0.82rem; font-weight: 600; }

/* Merged-prompt preview panel */
.aig-preview-panel { margin: 0.8rem 0 1rem; padding: 0; }
.aig-preview-summary {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; width: 100%;
    cursor: pointer; user-select: none; border-radius: 3px; text-align: left;
    background: rgba(51, 149, 224, 0.06); border: 1px solid rgba(51, 149, 224, 0.18);
    font-family: inherit; font-size: inherit; color: inherit;
}
.aig-preview-summary:hover { background: rgba(51, 149, 224, 0.11); }
.aig-preview-panel.aig-preview-open .aig-preview-summary { border-radius: 3px 8px 0 0; border-bottom: none; }
.aig-preview-summary .spacer { flex: 1; }
.aig-preview-sub { font-size: 0.82rem; }
.aig-preview-body {
    padding: 1rem; border: 1px solid rgba(51, 149, 224, 0.18);
    border-top: none; border-radius: 0 0 8px 8px;
}
.aig-preview-help { font-size: 0.82rem; margin: 0 0 0.75rem; }
.aig-preview-pre {
    white-space: pre-wrap; word-break: break-word; font-size: 0.78rem;
    max-height: 60vh; overflow-y: auto;
    background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 2px; padding: 0.75rem 1rem; margin: 0;
}

/* Market journey definition — architecture foundation + interface library. */
.mj-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.4fr); gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .mj-grid { grid-template-columns: 1fr; } }
.mj-diagram { max-width: 100%; border: 1px solid rgba(140, 150, 170, 0.25); border-radius: 3px; margin-bottom: 0.5rem; }
.mj-iface-table input.auth-input.sm, .mj-iface-table select.auth-input.sm,
.mj-sys-table input.auth-input.sm { padding: 0.25rem 0.45rem; font-size: 0.82rem; width: 100%; }
.mj-iface-table td, .mj-sys-table td { vertical-align: middle; }
/* The interface library is full-width below the grid so each interface has room. */
.mj-iface-panel { margin-top: 1rem; }
.mj-iface-table th:nth-child(2), .mj-iface-table th:nth-child(3) { min-width: 11rem; }
/* Unmatched source/target system → red, prompting the user to fix / alias / add it. */
.mj-unmatched { border-color: #e0533a !important; background: rgba(224, 83, 58, 0.10); }
.mj-unmatched-key { color: #e0805a; font-weight: 600; }
.mj-sys-inherited td { opacity: 0.72; }
.mj-sys-cell { display: flex; align-items: center; gap: 0.25rem; }
.mj-addsys {
    flex: none; width: 1.4rem; height: 1.4rem; padding: 0; border-radius: 2px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 0.9rem;
    border: 1px solid rgba(51, 149, 224, 0.6); background: rgba(51, 149, 224, 0.15); color: #b3d9f2; font-weight: 600;
}
.mj-addsys:hover { background: rgba(51, 149, 224, 0.28); }
.mj-xlink { margin: -0.4rem 0 1rem; font-size: 0.85rem; max-width: 90ch; }
.mj-paste {
    border: 1px dashed rgba(140, 150, 170, 0.35); border-radius: 4px; padding: 0.9rem;
    margin-bottom: 0.6rem; cursor: text; transition: border-color 0.15s, background 0.15s;
    display: flex; flex-direction: column; gap: 0.4rem; min-height: 90px;
    align-items: center; justify-content: center; text-align: center;
}
.mj-paste:focus, .mj-paste:focus-within { outline: none; border-color: rgba(51, 149, 224, 0.8); }
.mj-paste.attachments-zone-hover { border-color: rgba(51, 149, 224, 1); background: rgba(51, 149, 224, 0.08); }
.mj-paste-hint { margin: 0; }
.mj-archived { margin: 0.5rem 0; }
.mj-archived summary { cursor: pointer; font-size: 0.82rem; color: var(--muted, #929292); }
.mj-archived .mj-diagram { margin-top: 0.5rem; }
.mj-build { margin-top: 0.85rem; }
.mj-vision-model { font-size: 0.8rem; margin: 0.45rem 0 0; }
.mj-vision-model code { font-size: 0.78rem; }
.mj-vision-none { color: #e0805a; }
/* Brief highlight when a build drops fresh rows into the library below. */
@keyframes mj-flash { from { box-shadow: 0 0 0 3px rgba(51, 149, 224, 0.55); } to { box-shadow: 0 0 0 0 rgba(51, 149, 224, 0); } }
.mj-flash { animation: mj-flash 1.6s ease-out 1; }

/* Feature-sets active-recording banner */
.fs-active { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; margin: 0.6rem 0 1rem;
    border-left: 3px solid rgba(51, 149, 224, 0.8); }
.fs-active .spacer { flex: 1; }
.fs-active-none { border-left-color: #e0a83a; background: rgba(240, 179, 82, 0.06); }
.mj-import { margin-top: 1rem; }
.mj-import summary { cursor: pointer; font-size: 0.85rem; color: var(--muted, #929292); }

/* Catalogue count tiles (market-journey right panel) */
.mj-catalogue-counts { display: flex; gap: 0.75rem; margin: 0.6rem 0; }
.mj-count-tile {
    flex: 1; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 1rem;
    border: 1px solid var(--border); border-radius: 4px; background: #1c1c1c; text-decoration: none;
}
.mj-count-tile:hover { border-color: rgba(51, 149, 224, 0.6); }
.mj-count-n { font-size: 1.6rem; font-weight: 700; color: var(--fg, #e6e9f0); }
.mj-count-l { font-size: 0.85rem; color: #9e9e9e; }

/* Rendered architecture diagram + detail panel */
.mj-render-panel { margin-top: 1rem; }
.mj-render-row { display: flex; gap: 1rem; align-items: stretch; }
@media (max-width: 1000px) { .mj-render-row { flex-direction: column; } }
.mj-diagram-wrap { flex: 1 1 auto; min-width: 0; position: relative; }
.mj-diagram-host {
    height: 62vh; overflow: hidden; border: 1px solid var(--border); border-radius: 4px;
    background: #181818; touch-action: none;
    /* Must be the containing block for the absolutely-positioned .er-pan wrapper, or
       overflow:hidden won't clip it and the diagram spills out the sides. */
    position: relative;
}
.mj-zoom { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; display: flex; gap: 0.3rem; }
.mj-zoom .lp-btn { min-width: 2.2rem; }
.mj-detail {
    flex: 0 0 22rem; max-width: 22rem; background: #1c1c1c; border: 1px solid var(--border);
    border-radius: 4px; padding: 0.9rem 1rem; overflow: auto; max-height: 70vh;
}
@media (max-width: 1000px) { .mj-detail { flex-basis: auto; max-width: none; } }
.mj-detail-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.mj-detail-head strong { flex: 1; }
.mj-detail-kind { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #9e9e9e; margin: 0.7rem 0 0.2rem; }
.mj-detail-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.7rem; margin: 0.3rem 0; font-size: 0.85rem; }
.mj-detail-dl dt { color: #9e9e9e; }
.mj-detail-dl dd { margin: 0; }
.mj-detail-list { margin: 0.2rem 0; padding-left: 1.1rem; font-size: 0.84rem; }
.mj-detail-list li { margin: 0.15rem 0; }
.mj-detail .lp-btn { margin-top: 0.7rem; }

/* Interfaces editor: meta grid + YAML label */
/* Full-width editor: fields flow to fill the row (≈3–4 cols wide, 1 on a phone). */
.mj-iface-editor { width: 100%; }
.mj-iface-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem 1rem; }
.mj-iface-meta-wide { grid-column: 1 / -1; }
/* Stack each field's caption above its control. */
.mj-iface-meta > label:not(.customer-create-check) { display: flex; flex-direction: column; gap: 0.25rem; }
.mj-iface-meta > label > span { font-size: 0.8rem; color: #9e9e9e; }
/* Save / Publish / Close / Delete pinned to the right of the editor header. */
.mj-iface-head-actions { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.mj-rev-view { margin: 0.4rem 0 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.mj-yaml-label { display: block; font-size: 0.85rem; color: #9e9e9e; margin: 0.6rem 0 0.2rem; }
.mj-iface-selected { outline: 2px solid rgba(51, 149, 224, 0.5); }
/* "inherited from the Aeon host blueprint" marker on a Market's lists */
.mj-inherited-badge {
    display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 0.05rem 0.4rem;
    border-radius: 4px; background: rgba(179, 217, 242, 0.14); color: #b3d9f2;
    border: 1px solid rgba(179, 217, 242, 0.35); white-space: nowrap;
}
.mj-ws-badge { display: inline-block; margin-left: 0.4rem; font-size: 0.66rem; padding: 0.05rem 0.4rem; border-radius: 4px; white-space: nowrap; background: rgba(255,255,255,0.06); color: var(--muted); border: 1px solid var(--border); }
.mj-inherited-note { font-size: 0.82rem; color: #9e9e9e; margin: 0.2rem 0 0.6rem; }
/* "defined for this market only" tag, paired with .mj-inherited-badge in the Source column */
.mj-src-market {
    display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 0.05rem 0.4rem;
    border-radius: 4px; background: rgba(122, 222, 167, 0.13); color: #84d6a4;
    border: 1px solid rgba(122, 222, 167, 0.32); white-space: nowrap;
}
/* Systems table gained hosting/tenancy/tech-stack columns — let it scroll sideways rather than squash. */
.mj-sys-scroll { overflow-x: auto; }
.mj-sys-scroll .mj-sys-table { min-width: 1000px; }

/* Form ↔ API mapping page: interfaces (drag sources) | read-only form (drop targets) */
.fm-pane { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1rem; }
@media (max-width: 1000px) { .fm-pane { flex-direction: column; } }
/* Each pane scrolls independently so a long form (right) doesn't drag the API list (left) with it. */
.fm-apis, .fm-form { max-height: calc(100vh - 13rem); overflow-y: auto; }
.fm-apis { flex: 0 0 340px; max-width: 340px; border: 1px solid var(--border); border-radius: 5px; background: #1c1c1c; padding: 0.8rem 0.9rem; }
@media (max-width: 1000px) { .fm-apis { flex-basis: auto; max-width: none; width: 100%; max-height: 42vh; } }
.fm-apis-head, .fm-form-head { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.6rem; }
.fm-api-select { width: 100%; margin-bottom: 0.5rem; }
.fm-chip.used { opacity: 0.5; }
.fm-trigger { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.4rem; }
.fm-trigger-head { font-weight: 600; font-size: 0.85rem; }
.fm-trigger-fields { display: flex; flex-direction: column; gap: 0.2rem; max-height: 11rem; overflow-y: auto; }
.fm-trigger-opt { font-size: 0.85rem; }
.fm-note { font-size: 0.8rem; margin: 0.2rem 0; }
.fm-api-card { border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.6rem; margin-bottom: 0.6rem; background: rgba(255,255,255,0.015); }

/* Code snippets JavaScript sandbox */
.cs-bar { display: flex; align-items: flex-end; gap: 0.75rem; margin: 0.6rem 0 1rem; flex-wrap: wrap; }
.cs-elapsed { font-size: 0.82rem; align-self: center; }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr; } }
.cs-col { display: flex; flex-direction: column; gap: 0.3rem; }
.cs-label { font-size: 0.78rem; color: #9e9e9e; margin-top: 0.4rem; }
.cs-code { min-height: 22rem; white-space: pre; overflow: auto; font-size: 0.82rem; line-height: 1.5; }
.cs-ctx { min-height: 8rem; white-space: pre; overflow: auto; font-size: 0.82rem; line-height: 1.5; }
.cs-out {
    background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 3px;
    padding: 0.6rem 0.8rem; font-family: ui-monospace, monospace; font-size: 0.8rem; line-height: 1.45;
    white-space: pre-wrap; overflow: auto; max-height: 22rem; margin: 0;
}
.cs-err { color: #f0997b; }

/* Computed fields admin (/admin/computed-fields) */
.cf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem; align-items: start; }
@media (max-width: 1000px) { .cf-grid { grid-template-columns: 1fr; } }
.cf-list-head { display: flex; justify-content: space-between; align-items: center; }
.cf-table { width: 100%; }
.cf-table code { font-size: 0.82rem; }
.cf-row-active { outline: 1px solid var(--accent, #3395e0); }
.cf-row-actions { white-space: nowrap; text-align: right; }
.cf-form { display: flex; flex-direction: column; gap: 0.7rem; }
.cf-form-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.cf-form-row .fld { flex: 1; min-width: 7rem; }
.fld.chk { flex-direction: row; align-items: center; gap: 0.4rem; align-self: end; }
.cf-formula { min-height: 9rem; white-space: pre; overflow: auto; font-size: 0.82rem; line-height: 1.5; }
.cf-actions { display: flex; gap: 0.6rem; align-items: center; }
.cf-preview { margin-top: 1.4rem; border-top: 1px solid var(--border); padding-top: 0.9rem; }
.cf-label { display: block; font-size: 0.78rem; color: #9e9e9e; margin-top: 0.6rem; }
.cf-out {
    background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 3px;
    padding: 0.6rem 0.8rem; font-family: ui-monospace, monospace; font-size: 0.8rem; line-height: 1.45;
    white-space: pre-wrap; overflow: auto; max-height: 16rem; margin: 0.2rem 0 0;
}
.cf-err { color: #f0997b; }

/* Interface "Test call" result line */
.mj-test-status { font-size: 0.82rem; margin: 0.5rem 0 0.3rem; font-weight: 600; }
.mj-test-status.ok { color: #7bd88f; }
.mj-test-status.bad { color: #f0997b; }

/* Form action button (FieldKind.Button) + interface-trigger status line */
.form-field-button { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }
.form-trigger-status { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.6rem; }
.form-trigger-status.ok { color: #7bd88f; }
.form-trigger-status.bad { color: #f0997b; }
.fm-api-card-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.fm-api-name { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fm-chip {
    font-size: 0.76rem; padding: 0.15rem 0.5rem; border-radius: 4px; cursor: grab; user-select: none;
    border: 1px solid rgba(179,217,242,0.4); background: rgba(179,217,242,0.12); color: #b3d9f2;
}
.fm-chip:hover { border-color: rgba(179,217,242,0.8); }
.fm-chip.on { background: rgba(51,149,224,0.3); border-color: rgba(51,149,224,0.95); }
.fm-form { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 5px; background: #1c1c1c; padding: 0.8rem 1rem; }
.fm-section { margin-bottom: 0.8rem; }
.fm-section-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #9e9e9e; margin: 0.4rem 0 0.3rem; }
.fm-field {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;
    border: 1px solid var(--border); border-radius: 3px; padding: 0.45rem 0.6rem; margin: 0.3rem 0; cursor: pointer;
}
.fm-field.droppable { border-style: dashed; border-color: rgba(51,149,224,0.6); }
.fm-field.droppable:hover { background: rgba(51,149,224,0.10); }
.fm-field.mapped { border-color: rgba(51,149,224,0.45); background: rgba(51,149,224,0.06); }
.fm-field-main { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.fm-field-label { font-size: 0.88rem; }
.fm-field-key { font-size: 0.74rem; }
.fm-field-src {
    display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem;
    background: rgba(51,149,224,0.16); color: #b3d9f2; border: 1px solid rgba(51,149,224,0.4);
    border-radius: 4px; padding: 0.1rem 0.5rem;
}
.fm-unmap { border: 0; background: none; color: #b3d9f2; cursor: pointer; font-size: 0.8rem; line-height: 1; padding: 0; }
.fm-unmap:hover { color: #fff; }

/* Interface versioning: badge, publish row, history list */
.mj-ver-badge {
    display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.4rem;
    border-radius: 4px; background: rgba(51, 149, 224, 0.16); color: #b3d9f2; border: 1px solid rgba(51, 149, 224, 0.4);
}
.mj-ver-dirty { font-size: 0.78rem; color: #e0a83a; }
.mj-iface-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.85rem; }
.mj-note-input { width: 18rem; max-width: 100%; }
.mj-history { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.7rem; }
.mj-history-h { margin: 0 0 0.5rem; font-size: 0.85rem; color: #9e9e9e; }
.mj-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.mj-history-list li { padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 3px; background: rgba(255,255,255,0.015); }
.mj-history-list li.on { border-color: rgba(51, 149, 224, 0.6); background: rgba(51, 149, 224, 0.08); }
.mj-history-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.82rem; }
.mj-history-actions { margin-left: auto; display: inline-flex; gap: 0.3rem; }
.mj-history-note { font-size: 0.8rem; color: var(--fg); margin-top: 0.25rem; }

/* Generate-from-samples block in the interface editor */
.mj-gen { margin: 0.8rem 0; border: 1px solid var(--border); border-radius: 3px; padding: 0.7rem 0.9rem; background: rgba(255,255,255,0.015); }
.mj-gen summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; padding: 0.15rem 0; }
.mj-gen[open] summary { margin-bottom: 0.5rem; }
.mj-gen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin: 0.5rem 0; }
@media (max-width: 700px) { .mj-gen-grid { grid-template-columns: 1fr; } }
.mj-gen-ta { min-height: 8rem; font-size: 0.78rem; line-height: 1.45; white-space: pre; overflow: auto; width: 100%; }
/* scripted mock scenario */
.mj-script-ta { min-height: 16rem; resize: vertical; font-size: 0.8rem; line-height: 1.5; white-space: pre; overflow: auto; width: 100%; tab-size: 2; }
/* script studio — full-screen split editor */
.mj-studio-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 70; }
.mj-studio { position: fixed; inset: 3vh 3vw; z-index: 71; display: flex; flex-direction: column; background: var(--panel, #1a1a1a); border: 1px solid var(--border); border-radius: 5px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden; }
.mj-studio-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); }
.mj-studio-head .spacer { flex: 1; }
.mj-studio-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; padding: 0.8rem 0.9rem; min-height: 0; }
.mj-studio-pane { display: flex; flex-direction: column; gap: 0.35rem; min-height: 0; }
.mj-studio-pane label { font-size: 0.72rem; }
.mj-studio-ta { flex: 1; resize: none; font-size: 0.82rem; line-height: 1.5; white-space: pre; overflow: auto; width: 100%; tab-size: 2; min-height: 0; }
.mj-studio-out { flex: 1; margin: 0; padding: 0.6rem 0.7rem; border-radius: 3px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); font-size: 0.8rem; overflow: auto; white-space: pre-wrap; min-height: 0; }
.mj-studio-out.err { border-color: rgba(248,113,113,0.5); color: #f8a4a4; }
.mj-studio-yaml { margin: 0; padding: 0.6rem 0.7rem; border-radius: 3px; border: 1px solid var(--border); background: rgba(255,255,255,0.02); color: var(--muted); font-size: 0.74rem; max-height: 40%; overflow: auto; white-space: pre; }
.mj-studio-foot { padding: 0.4rem 0.9rem 0.7rem; margin: 0; font-size: 0.7rem; border-top: 1px solid var(--border); }
.mj-studio-pane { overflow: auto; }
.mj-studio-palettes { display: flex; flex-direction: column; gap: 0.4rem; }
.mj-pal { border: 1px solid var(--border); border-radius: 3px; padding: 0.4rem 0.5rem; }
.mj-pal-h { font-size: 0.72rem; color: var(--muted); cursor: default; }
details.mj-pal > summary.mj-pal-h { cursor: pointer; }
.mj-pal-row { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
.mj-pal-grp { margin-top: 0.35rem; }
.mj-studio-ai { border: 1px solid rgba(51,149,224,0.3); border-radius: 3px; padding: 0.5rem 0.6rem; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; background: rgba(51,149,224,0.05); }
.mj-ai-instruction { min-height: 2.6rem; resize: vertical; font-size: 0.8rem; width: 100%; }
.mj-ai-prompt { min-height: 7rem; resize: vertical; font-size: 0.74rem; line-height: 1.45; white-space: pre-wrap; width: 100%; }
.mj-studio-yaml-wrap { margin-top: 0.5rem; }
.mj-studio-yaml-wrap > summary { cursor: pointer; }
.mj-script-toggle { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.mj-script-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }
.mj-script-out { margin-top: 0.4rem; padding: 0.5rem 0.6rem; border-radius: 2px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); font-size: 0.74rem; max-height: 14rem; overflow: auto; white-space: pre-wrap; }
.mj-script-out.err { border-color: rgba(248,113,113,0.5); color: #f8a4a4; }
/* Test-call request header: caption left, "Sample request" button right */
.mj-test-reqhead { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0.3rem; }
.mj-field-label { font-size: 0.8rem; color: #9e9e9e; }
.mj-iface-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }

/* ---- Interface Parameters view (per-field documentation notes) ---- */
.mj-param-scroll { overflow-x: auto; border: 1px solid var(--border, #3a3a3a); border-radius: 3px; }
.mj-param-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.mj-param-table th {
    text-align: left; font-weight: 600; color: var(--muted, #929292);
    padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border, #3a3a3a);
    position: sticky; top: 0; background: var(--panel, #202020); z-index: 1; white-space: nowrap;
}
.mj-param-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: top; }
.mj-param-blockrow td {
    font-weight: 700; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: #b3d9f2; background: rgba(120,150,255,0.06); padding-top: 0.5rem; padding-bottom: 0.35rem;
}
.mj-param-branch .mj-param-key { color: var(--muted, #929292); font-weight: 600; }
.mj-param-key { font-family: var(--mono, ui-monospace, monospace); font-size: 0.8rem; }
.mj-param-arr { color: #e0a83a; font-size: 0.7rem; margin-left: 0.25rem; }
.mj-param-type { font-family: var(--mono, ui-monospace, monospace); color: #5dd39e; white-space: nowrap; }
.mj-param-reqcell { text-align: center; }
.mj-param-req { color: #e0663a; font-size: 0.7rem; }
.mj-param-sdm code { font-size: 0.72rem; color: #c792ea; }
.mj-sdm-tag { font-size: 0.72rem; margin-left: 0.25rem; }
.mj-sdm-explicit { color: #b3d9f2; }
.mj-sdm-conv { color: #929292; }
.mj-sdm-formula { font-size: 0.72rem; color: #5dd39e; font-family: var(--mono, ui-monospace, monospace); }
.mj-param-notecell { width: 40%; min-width: 16rem; }
.mj-param-note {
    width: 100%; min-height: 1.9rem; resize: vertical; font-size: 0.78rem; line-height: 1.35;
    padding: 0.3rem 0.45rem; border: 1px solid var(--border, #3a3a3a); border-radius: 2px;
    background: rgba(255,255,255,0.02); color: inherit; font-family: inherit;
}
.mj-param-note:focus { outline: none; border-color: #b3d9f2; background: rgba(120,150,255,0.05); }
.mj-param-audit { font-size: 0.68rem; color: var(--muted, #929292); margin-top: 0.2rem; }
.mj-param-fromyaml { font-size: 0.7rem; color: #929292; margin-top: 0.2rem; font-style: italic; }
.mj-param-orphans {
    margin-top: 0.8rem; padding: 0.6rem 0.8rem; border: 1px solid #6b531a;
    border-radius: 3px; background: rgba(240, 179, 82, 0.06);
}
.mj-param-orphans ul { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.78rem; }
.mj-param-orphans li { margin: 0.2rem 0; }
.mj-param-orphans code { color: #e0a83a; }
.lp-btn.xs { padding: 0.05rem 0.35rem; font-size: 0.7rem; }
.xs { font-size: 0.72rem; }

/* ---- Forms journey view (/admin/forms, 🧭 Journey) ----
   One column per journey step in canonical order; the miniatures (shared FormMiniature,
   bb-* styles below) stack vertically when several forms resolve for the same step. */
.fj-toggle { display: flex; gap: 0.35rem; }
.fj-strip {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 1.1rem;
    align-items: start; margin-top: 0.75rem; padding-bottom: 0.75rem; overflow-x: auto;
    text-align: left;
}
.fj-col { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.fj-col-head {
    display: flex; align-items: baseline; gap: 0.45rem; font-weight: 700; font-size: 0.92rem;
    padding-bottom: 0.4rem; border-bottom: 2px solid var(--ph, var(--border));
}
.fj-col-head .fj-dot {
    width: 10px; height: 10px; border-radius: 50%; background: var(--ph, #888);
    align-self: center; flex: none;
}
.fj-col-head .fj-sub { font-weight: 400; color: var(--muted); font-size: 0.74rem; }
.fj-col-head .fj-count { margin-left: auto; font-weight: 400; font-size: 0.78rem; }
.fj-empty {
    border: 1px dashed var(--border); border-radius: 5px; padding: 1.1rem 0.9rem;
    color: var(--muted); font-size: 0.8rem; text-align: center;
}
.fj-off { opacity: 0.5; }

/* ---- Blueprint board (/admin/blueprint/board) ---- */
.bb-host {
    position: relative; display: grid; grid-template-columns: 1.25fr 0.95fr 1.05fr; gap: 3.4rem;
    align-items: start; margin-top: 1rem;
}
@media (max-width: 1100px) { .bb-host { grid-template-columns: 1fr; gap: 1rem; } .bb-svg { display: none; } }
.bb-svg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bb-svg path { pointer-events: stroke; transition: opacity 0.15s; }
.bb-host.bb-focus .bb-svg path.bb-agg { opacity: 0.06 !important; }
.bb-lane { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; }
.bb-lane-title { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.03em; }
.bb-lane-forms .bb-lane-title { color: #3fd99b; }
.bb-lane-sdm .bb-lane-title { color: #a779ff; }
.bb-lane-ifaces .bb-lane-title { color: #b3d9f2; }

.bb-card {
    border: 1px solid var(--border, #3a3a3a); border-radius: 5px; padding: 0.9rem 1rem;
    background: rgba(255,255,255,0.015); transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.bb-form   { border-color: #234436; background: rgba(63,217,155,0.03); }
.bb-entity { border-color: #3a2c55; background: rgba(167,121,255,0.03); }
.bb-iface  { border-color: #24344f; background: rgba(179,217,242,0.03); }
.bb-owned  { border-style: dashed; border-width: 1.5px; }
.bb-dim    { opacity: 0.55; }
.bb-host.bb-focus .bb-card:not(.bb-card-hl) { opacity: 0.25; }
.bb-card-hl { opacity: 1 !important; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.25); }

.bb-card-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.35rem; cursor: default; }
.bb-title { font-weight: 700; font-size: 0.95rem; color: inherit; text-decoration: none; min-width: 0; }
.bb-title:hover { text-decoration: underline; }
.bb-code { font-family: var(--mono, ui-monospace, monospace); color: #b3d9f2; }
.bb-badges { margin-left: auto; display: flex; gap: 0.3rem; flex: none; }
.bb-badge { font-size: 0.7rem; padding: 0.06rem 0.34rem; border: 1px solid var(--border, #3a3a3a); border-radius: 99px; color: var(--muted, #929292); white-space: nowrap; }
.bb-owned-badge { color: #f6c453; border-color: #6b531a; }
.bb-card-foot { font-size: 0.74rem; margin-top: 0.55rem; }

/* journey strip */
.bb-journey { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.bb-ws { font-size: 0.66rem; font-weight: 700; color: #9adbbb; text-transform: uppercase; letter-spacing: 0.05em; }
.bb-phases { display: inline-flex; gap: 2px; }
.bb-phase {
    font-size: 0.64rem; padding: 0.14rem 0.4rem; border-radius: 3px; color: #5f5f5f;
    background: rgba(255,255,255,0.04); white-space: nowrap;
}
.bb-phase.on  { background: var(--ph); color: #101010; font-weight: 700; }
.bb-phase.any { background: color-mix(in srgb, var(--ph) 28%, transparent); color: #cfcfcf; }
.bb-anyphase, .bb-pin { font-size: 0.62rem; color: var(--muted, #929292); border: 1px dashed var(--border, #3a3a3a); border-radius: 99px; padding: 0.04rem 0.34rem; }

/* mini form */
.bb-tabs { display: flex; gap: 0.25rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--border, #3a3a3a); padding-bottom: 0.3rem; }
.bb-tab { font-size: 0.62rem; padding: 0.12rem 0.5rem; border: 1px solid var(--border, #3a3a3a); border-bottom: none; border-radius: 2px 6px 0 0; color: #9adbbb; background: rgba(63,217,155,0.06); }
.bb-form-body.with-panel { display: grid; grid-template-columns: 1fr 34%; gap: 0.5rem; }
.bb-form-panel { border-left: 1px dashed #234436; padding-left: 0.5rem; }
.bb-sect { margin-bottom: 0.8rem; }
.bb-sect-title { font-size: 0.76rem; font-weight: 700; color: #cdf6e6; margin-bottom: 0.35rem; }
.bb-sect-tab { font-size: 0.58rem; color: var(--muted, #929292); font-weight: 400; margin-left: 0.3rem; }
.bb-fields { display: flex; flex-wrap: wrap; gap: 0.45rem 2%; }
.bb-fld { display: flex; flex-direction: column; gap: 0.12rem; border-radius: 2px; padding: 0.12rem 0.2rem; margin: -0.12rem -0.2rem; }
.bb-w-full { width: 100%; } .bb-w-half { width: 48%; } .bb-w-third { width: 31%; }
.bb-fld.bb-bound { cursor: crosshair; }
.bb-fld.bb-hl, .bb-sdm-row.bb-hl, .bb-chip.bb-hl { background: rgba(255,255,255,0.09); outline: 1px solid rgba(255,255,255,0.28); }
.bb-fld-label { font-size: 0.68rem; color: #929292; display: inline-flex; align-items: center; gap: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-dot { width: 6px; height: 6px; border-radius: 50%; background: #a779ff; flex: none; }
.bb-dot-bad { background: #e0533a; }
.bb-scratch { color: #f6c453; }
.bb-input {
    display: block; height: 1.15rem; border: 1px solid #37405480; border-radius: 4px;
    background: rgba(255,255,255,0.03); font-size: 0.62rem; line-height: 1.1rem; padding: 0 0.3rem; color: #5f5f5f;
}
.bb-select i { float: right; font-style: normal; }
.bb-area { height: 2rem; }
.bb-img { height: 1.6rem; text-align: center; line-height: 1.55rem; }
.bb-check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; color: #929292; }
.bb-box { width: 0.7rem; height: 0.7rem; border: 1px solid #374054; border-radius: 3px; flex: none; background: rgba(255,255,255,0.03); }
.bb-radio { display: inline-flex; gap: 0.35rem; }
.bb-radio > span { width: 0.65rem; height: 0.65rem; border: 1px solid #374054; border-radius: 50%; background: rgba(255,255,255,0.03); }
.bb-multi { display: inline-flex; gap: 0.3rem; }
.bb-slider { display: block; height: 3px; border-radius: 2px; background: #374054; position: relative; margin: 0.45rem 0.2rem 0.3rem; }
.bb-knob { position: absolute; left: 38%; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #b3d9f2; }
.bb-output { display: block; font-size: 0.7rem; padding: 0.22rem 0.35rem; border-radius: 2px; background: #171717; border: 1px solid #374054; color: #7fd8d4; text-align: center; }
.bb-btn { display: inline-block; font-size: 0.68rem; padding: 0.16rem 0.55rem; border-radius: 99px; background: #0078d6; color: #b3d9f2; }
.bb-table { display: flex; flex-direction: column; gap: 2px; }
.bb-table > span { height: 5px; border-radius: 2px; background: rgba(255,255,255,0.06); }
.bb-table > span:first-child { background: rgba(179,217,242,0.25); }
.bb-repeater { display: flex; flex-direction: column; gap: 0.25rem; border: 1px dashed #37405480; border-radius: 2px; padding: 0.3rem; }
.bb-add { font-size: 0.56rem; color: #9adbbb; }
.bb-more { font-size: 0.7rem; color: var(--muted, #929292); background: none; border: none; cursor: pointer; padding: 0.15rem 0; text-align: left; }
.bb-more:hover { color: #e8ecf4; }

/* SDM lane */
.bb-sdm-rows { display: flex; flex-direction: column; }
.bb-sdm-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.26rem 0.35rem; border-radius: 2px; cursor: crosshair; font-size: 0.76rem; }
.bb-sdm-path { color: #ecdcff; font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-sdm-meta { display: inline-flex; gap: 0.25rem; align-items: center; flex: none; }
.bb-type { font-size: 0.66rem; color: #5f5f5f; }
.bb-use { margin-left: auto; display: inline-flex; gap: 0.35rem; font-size: 0.68rem; flex: none; }
.bb-use-f { color: #3fd99b; } .bb-use-feed { color: #b3d9f2; } .bb-use-fill { color: #ff8a4c; }
.bb-unused { opacity: 0.42; }

/* interfaces lane */
.bb-iface-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.72rem; margin-bottom: 0.4rem; align-items: center; }
.bb-endpoint { font-family: var(--mono, ui-monospace, monospace); font-size: 0.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bb-chip { font-size: 0.7rem; padding: 0.14rem 0.5rem; border-radius: 99px; border: 1px solid var(--border, #3a3a3a); color: #b3d9f2; white-space: nowrap; }
.bb-trigger { color: #f6c453; border-color: #6b531a; }
.bb-wires { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0; align-items: center; }
.bb-wires-label { font-size: 0.66rem; color: var(--muted, #929292); flex: none; min-width: 4.6rem; }
.bb-wire { font-family: var(--mono, ui-monospace, monospace); cursor: crosshair; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bb-k-explicit { color: #b3d9f2; }
.bb-k-convention { color: #9adbbb; }
.bb-k-formula { color: #7fd8d4; }
.bb-chip-bad { border-color: #6b2a1a; color: #ffd9cf; }
.bb-unglued summary { font-size: 0.72rem; color: var(--muted, #929292); cursor: pointer; margin: 0.3rem 0; }
.bb-unglued .bb-card { margin-top: 0.6rem; }

/* pin lock: clicked paths stay lit until released (Esc / ✕) */
.bb-pinned { outline: 2px solid rgba(246, 196, 83, 0.7) !important; background: rgba(246, 196, 83, 0.10) !important; }
.bb-pinbar {
    position: fixed; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; max-width: min(92vw, 60rem);
    padding: 0.5rem 0.8rem; border-radius: 4px; z-index: 60;
    background: rgba(18, 22, 32, 0.96); border: 1px solid #f6c45366;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.bb-pinbar-icon { font-size: 0.85rem; }
.bb-pinbar-chip {
    font-family: var(--mono, ui-monospace, monospace); font-size: 0.72rem; cursor: pointer;
    padding: 0.18rem 0.55rem; border-radius: 4px; border: 1px solid #6b531a;
    background: rgba(246, 196, 83, 0.12); color: #f6c453;
}
.bb-pinbar-chip:hover { background: rgba(246, 196, 83, 0.24); }
.bb-pinbar-follow, .bb-pinbar-clear {
    font-size: 0.74rem; cursor: pointer; padding: 0.2rem 0.7rem; border-radius: 4px;
    border: 1px solid var(--border, #3a3a3a); background: rgba(255,255,255,0.05); color: #e8ecf4;
}
.bb-pinbar-follow { border-color: #2f6b50; color: #9adbbb; }
.bb-pinbar-follow:hover { background: rgba(63, 217, 155, 0.15); }
.bb-pinbar-clear:hover { background: rgba(224, 83, 58, 0.15); border-color: #6b2a1a; }

/* follow-the-data: the travelling value + the manipulation flag */
.bb-dot-travel { filter: drop-shadow(0 0 4px rgba(255,255,255,0.8)); pointer-events: none; }
.bb-flag {
    font-size: 13px; fill: #f6c453; font-weight: 700; pointer-events: auto; cursor: help;
    paint-order: stroke; stroke: #101010; stroke-width: 3px;
}

.bp-deeplink { margin: 0.4rem 0 0.6rem; }

/* ---- Runtime field inspector (right-click a control in a live form) ---- */
/* Discoverability hint: a subtle corner mark on any inspectable field, only on hover, so the
   affordance never distracts dealer-facing eyes (the class itself is only rendered for
   Admin/Developer/SolutionArchitect via FormRenderer's EnableFieldInspector). */
.field-inspectable { position: relative; cursor: context-menu; }
.field-inspectable::after {
    content: "⋯"; position: absolute; top: -0.15rem; right: -0.1rem; font-size: 0.7rem;
    color: var(--muted, #929292); opacity: 0; transition: opacity 0.12s; pointer-events: none;
}
.field-inspectable:hover::after { opacity: 0.85; }

.field-inspector-scrim { position: fixed; inset: 0; z-index: 69; background: transparent; }
.field-inspector-pop {
    position: fixed; z-index: 70; width: 19rem; max-width: calc(100vw - 1.5rem);
    border-radius: 5px; padding: 0.75rem 0.85rem; background: rgba(18, 22, 32, 0.98);
    border: 1px solid var(--border, #3a3a3a); box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    transform: translate(0.6rem, 0.6rem);
}
.field-inspector-head { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.4rem; }
.field-inspector-head strong { font-size: 0.88rem; }
.field-inspector-kind { font-size: 0.68rem; color: var(--muted, #929292); }
.field-inspector-close {
    margin-left: auto; background: none; border: none; color: var(--muted, #929292);
    cursor: pointer; font-size: 0.85rem; padding: 0 0.1rem; line-height: 1;
}
.field-inspector-close:hover { color: #e8ecf4; }
.field-inspector-path {
    display: block; font-size: 0.76rem; color: #ecdcff; word-break: break-all;
    margin-bottom: 0.4rem;
}
.field-inspector-note { font-size: 0.74rem; margin: 0.3rem 0; }
.field-inspector-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.35rem; }
.field-inspector-chip {
    font-size: 0.68rem; padding: 0.14rem 0.5rem; border-radius: 99px;
    border: 1px solid var(--border, #3a3a3a); color: #b3d9f2; white-space: nowrap;
    background: rgba(255,255,255,0.03); text-decoration: none;
}
.field-inspector-pii { border-color: #6b531a; color: #f6c453; }
.field-inspector-ifaces { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0; }
.field-inspector-iface { color: #b3d9f2; }
.field-inspector-iface:hover { background: rgba(179,217,242,0.12); }
.field-inspector-actions { margin-top: 0.55rem; display: flex; justify-content: flex-end; }

/* ---- Site map (/admin/sitemap) ---- */
.sitemap .lead { max-width: 60ch; }
.sm-stats { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.2rem 0 0.8rem; }
.sm-stat {
    display: flex; flex-direction: column; align-items: center; min-width: 5.5rem;
    padding: 0.55rem 0.9rem; border: 1px solid var(--border, #3a3a3a); border-radius: 4px;
    background: rgba(120, 150, 255, 0.05);
}
.sm-stat-n { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.sm-stat-l { font-size: 0.72rem; color: var(--muted, #929292); margin-top: 0.25rem; text-align: center; }
.sm-stat-warn { border-color: #6b531a; background: rgba(240, 179, 82, 0.08); }
.sm-stat-ok { border-color: #2f6b50; background: rgba(93, 211, 158, 0.07); }

.sm-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.78rem; color: var(--muted, #929292); margin-bottom: 0.5rem; }
.sm-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.sm-dot-public { background: #b3d9f2; }
.sm-dot-user { background: #5dd39e; }
.sm-dot-admin { background: #c792ea; }
.sm-dot-dep { background: #8a8a8a; }
.sm-edge-key { width: 20px; height: 0; border-top: 2px solid #515151; display: inline-block; }
.sm-edge-key-cross { border-top: 2px dashed #e0a83a; }
.sm-sub { font-size: 0.82rem; margin: 0.1rem 0 0.7rem; max-width: 75ch; }

.sm-diagram {
    overflow-x: auto; margin-bottom: 2rem; padding: 0.4rem 0.2rem 0.8rem;
    border: 1px solid var(--border, #3a3a3a); border-radius: 5px;
    background: radial-gradient(circle at 30% 20%, rgba(120,150,255,0.05), transparent 60%);
}
.sm-svg { max-width: 100%; height: auto; display: block; }
.sm-edge { stroke: #515151; stroke-width: 1.6; }
.sm-edge-cross { stroke: #e0a83a; stroke-width: 1.6; stroke-dasharray: 5 4; opacity: 0.85; }
.sm-nodelink { cursor: pointer; }
.sm-rect { fill: #212121; stroke-width: 1.4; transition: fill 0.12s; }
.sm-nodelink:hover .sm-rect { fill: #303030; }
.sm-rect-public { stroke: #3395e0; }
.sm-rect-user { stroke: #4cae86; }
.sm-rect-admin { stroke: #b07fd8; }
.sm-rect-dep { stroke: #7b7b7b; }
.sm-tab-public { fill: #b3d9f2; }
.sm-tab-user { fill: #5dd39e; }
.sm-tab-admin { fill: #c792ea; }
.sm-tab-dep { fill: #8a8a8a; }
.sm-label { fill: #dbe1f2; font-size: 12px; font-weight: 600; font-family: inherit; pointer-events: none; }

.sm-dups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.8rem; margin-bottom: 1.5rem; }
.sm-dup { border: 1px solid #6b531a; border-radius: 4px; padding: 0.7rem 0.85rem; background: rgba(240, 179, 82, 0.05); }
.sm-ctx { border-color: #2f6b50; background: rgba(93, 211, 158, 0.05); }
.sm-dup-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.sm-dup-count { font-size: 0.74rem; color: var(--muted, #929292); }
.sm-dup-pages { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sm-chip {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.5rem;
    border: 1px solid var(--border, #3a3a3a); border-radius: 4px; font-size: 0.76rem;
    text-decoration: none; color: var(--fg, #e6e9f0); background: rgba(0,0,0,0.15);
}
.sm-chip:hover { border-color: var(--accent, #3395e0); }

.sm-feat {
    display: inline-block; padding: 0.1rem 0.45rem; border-radius: 2px; font-size: 0.72rem;
    background: rgba(120, 150, 255, 0.1); color: #b3d9f2; border: 1px solid transparent;
}
.sm-feat-dup { background: rgba(240, 179, 82, 0.14); color: #f0c46a; border-color: #6b531a; font-weight: 600; }
.sm-feat-ctx { background: rgba(93, 211, 158, 0.13); color: #8fe3bd; border-color: #2f6b50; font-weight: 600; }
.sm-feat-ctx-label { font-size: 0.72rem; align-self: center; }
.sm-card-feats { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }

/* Application-service tags + shared-service section */
.sm-feat-svc { background: rgba(150, 130, 220, 0.12); color: #c3b6ef; border-color: transparent; font-family: var(--mono, monospace); }
.sm-feat-svc-shared { background: rgba(150, 130, 220, 0.2); color: #d6c9ff; border-color: #4a3d75; font-weight: 600; }
.sm-svc { border-color: #4a3d75; background: rgba(150, 130, 220, 0.05); }
.sm-feat-svc.sm-feat { font-weight: 600; }
.sm-svc .sm-feat-svc { font-family: var(--mono, monospace); }

/* AI overlap analysis */
.sm-ai { border: 1px solid var(--border); border-radius: 4px; padding: 0.85rem; background: var(--panel-2, rgba(255,255,255,0.02)); margin-bottom: 1.5rem; }
.sm-ai-row { display: flex; gap: 0.5rem; align-items: center; }
.sm-ai-row > .auth-input { flex: 1 1 auto; min-width: 0; }
.sm-ai-row > .lp-btn { flex: 0 0 auto; white-space: nowrap; }
.sm-ai-suggest { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.sm-chip-btn { cursor: pointer; background: none; }
.sm-ai-err { color: #ffb3b3; font-size: 0.82rem; margin-top: 0.6rem; }
.sm-ai-answer { margin-top: 0.8rem; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 3px; background: var(--panel, #181818); font-size: 0.9rem; line-height: 1.55; }
.sm-ai-answer :first-child { margin-top: 0; }
.sm-ai-answer :last-child { margin-bottom: 0; }
.sm-ai-answer code { font-family: var(--mono, monospace); background: rgba(255,255,255,0.06); padding: 0.05rem 0.3rem; border-radius: 4px; }
.sm-ai-answer ul { padding-left: 1.2rem; }

.sm-section-h { margin: 1.8rem 0 0.7rem; font-size: 1.15rem; }
.sm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.sm-card {
    border: 1px solid var(--border, #3a3a3a); border-radius: 5px; padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.015); scroll-margin-top: 1rem;
}
.sm-card-dep { opacity: 0.78; border-style: dashed; }
.sm-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
.sm-card-title { font-size: 0.96rem; }
.sm-card-route { font-size: 0.72rem; color: var(--muted, #929292); background: rgba(0,0,0,0.2); padding: 0.05rem 0.4rem; border-radius: 2px; }
.sm-card-open { font-size: 0.72rem; margin-left: auto; color: var(--accent, #3395e0); text-decoration: none; }
.sm-card-open:hover { text-decoration: underline; }
.sm-card-summary { font-size: 0.85rem; line-height: 1.5; margin: 0.5rem 0 0.4rem; }
.sm-card-cando { margin: 0; padding-left: 1.1rem; font-size: 0.8rem; color: var(--muted, #929292); line-height: 1.5; }
.sm-card-cando li { margin: 0.1rem 0; }
.sm-card-note { font-size: 0.78rem; color: #e0a83a; margin: 0.5rem 0 0; }
.sitemap-foot { margin-top: 2rem; font-size: 0.78rem; }
.ai-paste-files { display: flex; flex-direction: column; gap: 0.35rem; }
.ai-paste-file {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border); border-radius: 3px;
    background: #121212; font-size: 0.82rem;
}
.ai-paste-file-icon { line-height: 1; }
.ai-paste-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-paste-file .ai-paste-thumb-x { position: static; width: 16px; height: 16px; flex: 0 0 auto; }

/* Drawer is non-blocking: no backdrop, no blur on the page underneath.
   The user can scroll + click anywhere outside the drawer while it's open
   (and ask the AI about what they're looking at). Close via × in the
   header.

   When pinned + open, the .app-shell column shrinks its right edge to make
   room for the drawer so the topbar items and main content don't sit behind
   the drawer. The drawer itself is position:fixed (anchored to the
   viewport's right edge), so this padding creates the visual "side-by-side"
   layout without moving the drawer. Page content + the drawer scroll
   independently — .shell has its own overflow:auto. Falls back to overlay
   on small screens where there isn't room for both. */
.app-shell .shell { transition: padding-right 240ms ease; }
@media (min-width: 900px) {
    /* Reserve room on the MAIN content only (.shell), not the whole .app-shell — so the topbar header
       stays full width and isn't "pushed in" when a right-docked panel opens. The panels are
       position:fixed below the topbar, so the header spans the full width above them. */
    /* The AI dock (a SidePanel with its own width var — see .side-panel.ai-dock) reserves its
       width; collapsed to its rail it reserves only rail width. The generic .side-panel rules
       below all carry :not(.ai-dock) so the dock is priced exactly once, from these two. */
    .app-shell:has(.side-panel.ai-dock.open:not(.collapsed)) .shell {
        padding-right: min(var(--ai-drawer-w, 440px), 60vw);
    }
    .app-shell:has(.side-panel.ai-dock.open.collapsed) .shell {
        padding-right: 2.75rem;
    }
    /* Shared docked RIGHT SidePanel (calculation / property inspector) shrinks the content the same way
       the AI dock does, so its fixed surface doesn't cover it. :not(.side-panel-left) so a
       LEFT panel (the APIs panel) doesn't wrongly reserve right-side space too; :not(.floating) so a
       floating window (drag-positioned, may not even be near the right edge) never reserves page space. */
    .app-shell:has(.side-panel.open:not(.side-panel-left):not(.inline):not(.floating):not(.ai-dock)) .shell {
        padding-right: min(var(--side-panel-w, 420px), 60vw);
    }
    /* Collapsed → the panel is a slim rail, not its full stored width — reserve only rail width, or
       the page would carry a big empty gap where the panel used to be. */
    .app-shell:has(.side-panel.open.collapsed:not(.side-panel-left):not(.inline):not(.floating):not(.ai-dock)) .shell {
        padding-right: 2.75rem;
    }
    /* When the AI dock is ALSO open, dock the right side panel to its LEFT (instead of both
       stacking on the right edge, where the higher-z AI dock would hide it) and shrink the content
       by the sum so nothing slips under either. (Inline + floating panels are excluded — floating is
       drag-positioned, not edge-docked, so it must never have its `right` overridden here.)
       A collapsed dock only offsets by its rail. */
    .app-shell:has(.side-panel.ai-dock.open:not(.collapsed)) .side-panel.open:not(.side-panel-left):not(.inline):not(.floating):not(.ai-dock) {
        right: min(var(--ai-drawer-w, 440px), 60vw);
    }
    .app-shell:has(.side-panel.ai-dock.open.collapsed) .side-panel.open:not(.side-panel-left):not(.inline):not(.floating):not(.ai-dock) {
        right: 2.75rem;
    }
    .app-shell:has(.side-panel.ai-dock.open:not(.collapsed)):has(.side-panel.open:not(.side-panel-left):not(.inline):not(.floating):not(.ai-dock)) .shell {
        padding-right: calc(min(var(--ai-drawer-w, 440px), 60vw) + min(var(--side-panel-w, 420px), 60vw));
    }
    .app-shell:has(.side-panel.ai-dock.open.collapsed):has(.side-panel.open:not(.side-panel-left):not(.inline):not(.floating):not(.ai-dock)) .shell {
        padding-right: calc(2.75rem + min(var(--side-panel-w, 420px), 60vw));
    }
    /* The interface editor slide-over docks to the LEFT of an open AI dock (instead of both
       anchoring to right:0, where the higher-z AI dock overlaps it) so the two sit side by side. */
    .app-shell:has(.side-panel.ai-dock.open:not(.collapsed)) .iface-drawer {
        right: min(var(--ai-drawer-w, 440px), 60vw);
    }
    .app-shell:has(.side-panel.ai-dock.open.collapsed) .iface-drawer {
        right: 2.75rem;
    }
}

/* Editor: body sections (left) + the side-panel section config (right column), mirroring where the
   end-user sees the panel. Collapses to one column on narrower screens. */
.form-edit-sections-split { display: flex; gap: 1rem; align-items: flex-start; }
.form-edit-sections-body { flex: 1 1 auto; min-width: 0; }
.form-edit-sections-panel {
    flex: 0 0 var(--fe-panel-w, 570px); max-width: var(--fe-panel-w, 570px); align-self: flex-start;
    position: sticky; top: 2.6rem;
    border: 1px solid rgba(51, 149, 224, 0.5); border-radius: 3px;
    background: rgba(51, 149, 224, 0.06);
    padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.6rem;
}
/* Drag the left edge to resize the side-panel config column (width persisted via --fe-panel-w). */
.fe-panel-resize {
    position: absolute; left: -4px; top: 0; bottom: 0; width: 8px;
    cursor: col-resize; z-index: 3; border-radius: 4px;
}
.fe-panel-resize:hover, .fe-panel-resize:active { background: rgba(51, 149, 224, 0.4); }
.fe-panel-config-head { font-weight: 600; font-size: 0.95rem; }
@media (max-width: 1180px) {
    .form-edit-sections-split { flex-direction: column; }
    .form-edit-sections-panel { flex-basis: auto; max-width: none; width: 100%; position: static; }
}

/* Editor live preview: form (left) + side panel (right), so the preview matches the runtime layout. */
/* flex-direction:row is REQUIRED here — the base .form-renderer is flex-direction:column (sections
   stack), so without this the body + inline panel stack vertically and the body stays full-width
   (spreading .form-fields' auto-fit grid into one long row). */
.form-renderer.has-inline-panel { display: flex; flex-direction: row; gap: 1rem; align-items: flex-start; }
.form-renderer.has-inline-panel .form-renderer-body { flex: 1 1 auto; min-width: 0; }
.form-renderer.has-inline-panel .form-inline-panel { flex: 0 0 320px; align-self: flex-start; position: sticky; top: 0; margin-top: 0; }
@media (max-width: 899px) {
    .form-renderer.has-inline-panel { flex-direction: column; }
    .form-renderer.has-inline-panel .form-inline-panel { flex-basis: auto; }
}

/* Side-panel sections rendered INLINE (editor preview) — a bordered box so the admin sees what the
   docked panel will hold, in context. The docked case uses .side-panel (below). */
.form-inline-panel {
    border: 1px solid rgba(51, 149, 224, 0.5);
    border-radius: 3px;
    background: rgba(51, 149, 224, 0.06);
    padding: 0.4rem 0.7rem 0.7rem;
    margin-top: 0.8rem;
}
.form-inline-panel-head { font-weight: 600; font-size: 0.9rem; margin: 0.3rem 0 0.5rem; }
/* Floating pill to reopen the docked panel after it's been closed (runtime form). */
.form-panel-reopen {
    position: fixed; right: 0.9rem; bottom: 5.5rem; z-index: 69;
    background: var(--panel-bg, rgba(22,26,36,0.97)); color: var(--fg);
    border: 1px solid rgba(51,149,224,0.6); border-radius: 4px;
    padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.85rem;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,0.6);
}
.form-panel-reopen:hover { filter: brightness(1.12); }
/* Editor: the 📌 Side panel section badge + the form-level panel-title field. */
.fe-section-panel { background: rgba(51,149,224,0.18); color: #b3d9f2; border-color: rgba(51,149,224,0.45); }
.form-edit-panel-title { display: flex; flex-direction: column; gap: 0.25rem; max-width: 22rem; margin-bottom: 0.6rem; }
.form-edit-panel-title > span { font-size: 0.8rem; color: var(--muted); }

/* ===== APIs panel (left) + form-field mapping chips/badges (AdminFormEdit) ===== */
.fc-api-iface { border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.6rem; margin-bottom: 0.6rem; }
.fc-api-iface-head { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.lp-btn.xs { font-size: 0.7rem; padding: 0.12rem 0.45rem; font-weight: 500; white-space: nowrap; }
.fc-api-iface-head-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
/* Interfaces panel "Expand" — pop the in-flow left panel out as a large centered window for
   complex mapping. Overrides the inline-column positioning; a dim backdrop sits behind it. */
.side-panel.iface-panel-expanded {
    position: fixed; inset: 0; margin: auto; z-index: 1200;
    width: min(1100px, 92vw); height: min(86vh, 920px); max-width: 92vw;
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 30px 90px -24px rgba(0, 0, 0, 0.75);
    /* Always centred — beat .side-panel-left's left-slide transform so it never slides off-screen
       (it was sliding to -1166px on close), and no transition jank. */
    transform: none; transition: none;
}
/* Clickable dim backdrop (a real element, so click-outside collapses — a ::before can't take a click). */
.iface-expand-backdrop { position: fixed; inset: 0; background: rgba(4, 6, 12, 0.55); z-index: 1190; }
.side-panel.iface-panel-expanded .side-panel-resize { display: none; }
.side-panel.iface-panel-expanded .side-panel-body { padding-bottom: 1.5rem; }
.fc-api-ord { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; height: 1.1rem;
    padding: 0 0.2rem; border-radius: 4px; background: rgba(51, 149, 224, 0.16); color: #3395e0;
    font-size: 0.66rem; font-weight: 600; margin-right: 0.25rem; }
.fc-api-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.25rem 0; }
.fc-api-dir { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.05rem 0.4rem; border-radius: 4px; margin: 0.45rem 0 0.2rem; }
.fc-api-dir.in  { color: #9fe09f; background: rgba(124,196,124,0.16); }
.fc-api-dir.out { color: #ffcf8f; background: rgba(255,176,80,0.16); }

/* Param tables (request/response) — a row per field, draggable onto a form field. */
.fc-api-tbl { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.fc-api-tbl thead th {
    text-align: left; font-weight: 600; color: var(--muted);
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem; border-bottom: 1px solid var(--border);
}
.fc-api-row { cursor: grab; border-bottom: 1px solid rgba(255,255,255,0.05); }
.fc-api-row:hover { background: rgba(51,149,224,0.10); }
.fc-api-row td { padding: 0.2rem 0.4rem; vertical-align: top; }
.fc-api-fname { font-weight: 500; word-break: break-word; }
.fc-api-type { color: var(--muted); font-family: var(--mono, monospace); white-space: nowrap; }
.fc-api-mapped { color: var(--muted); }
/* SDM-property picker in the Mapped column — a compact select listing every canonical key. */
.fc-api-target { font-size: 0.72rem; padding: 0.1rem 0.2rem; width: 100%; max-width: 11rem; }
.fc-api-automap { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.2rem 0 0.6rem; }
/* Mapped row: left accent + tint so you can see at a glance which params are wired. */
.fc-api-row.mapped { background: rgba(124,196,124,0.10); box-shadow: inset 3px 0 0 rgba(124,196,124,0.7); }
.fc-api-row.mapped.out { background: rgba(255,176,80,0.10); box-shadow: inset 3px 0 0 rgba(255,176,80,0.7); }
.fc-api-row.mapped .fc-api-mapped { color: var(--text); }
.fc-api-row.picked { outline: 2px solid rgba(51,149,224,0.8); outline-offset: -2px; }

/* Per-interface trigger (when/how it fires). */
.fc-api-trigger { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.fc-api-trigger select.sm, .fc-api-trigger input.sm { font-size: 0.74rem; padding: 0.15rem 0.35rem; width: auto; flex: 1 1 8rem; min-width: 7rem; }
.fc-api-trig-opt { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--muted); }

/* Per-interface transformations (Jint). */
.fc-api-tx { margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px dashed var(--border); }
.fc-api-tx-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.fc-api-tx-row { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; }
.fc-api-tx-stage { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; padding: 0.05rem 0.35rem; border-radius: 4px; }
.fc-api-tx-stage.out { color: #ffcf8f; background: rgba(255,176,80,0.16); }
.fc-api-tx-stage.in  { color: #9fe09f; background: rgba(124,196,124,0.16); }
.fc-api-tx-name { flex: 1; text-align: left; background: none; border: 0; color: var(--link, #b3d9f2); cursor: pointer; font-size: 0.76rem; padding: 0; text-decoration: underline; }
/* Above the docked side panels (z70) + AI drawer (z90) so the editor opens on top, not behind them. */
.fc-tx-backdrop { z-index: 120; }
.fc-tx-modal { max-width: 640px; width: 92vw; z-index: 121; }
.fc-tx-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.25rem 0; }
.fc-tx-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.fc-tx-script { font-family: var(--mono, monospace); font-size: 0.8rem; width: 100%; }
.fc-tx-test { display: flex; flex-direction: column; gap: 0.4rem; }
.fc-tx-result { font-family: var(--mono, monospace); font-size: 0.75rem; background: rgba(124,196,124,0.10); border: 1px solid rgba(124,196,124,0.4); border-radius: 2px; padding: 0.5rem; max-height: 11rem; overflow: auto; white-space: pre-wrap; }
.fc-tx-result.err { background: rgba(255,110,110,0.10); border-color: rgba(255,110,110,0.5); color: #ffb3b3; }
.fc-expr-open { align-self: flex-start; margin-top: 0.35rem; }
.fc-expr-save { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.fc-expr-msg { color: #e0a458; }
.fc-expr-ai { display: flex; gap: 0.4rem; align-items: center; margin: 0.5rem 0 0.3rem; }
.fc-expr-ai > .auth-input { flex: 1 1 auto; min-width: 0; }
.fc-expr-ai > .lp-btn { white-space: nowrap; flex: 0 0 auto; }
.fc-api-chip {
    font-size: 0.78rem; padding: 0.15rem 0.5rem; border-radius: 2px; cursor: grab;
    border: 1px solid var(--border); background: rgba(255,255,255,0.04); user-select: none;
}
.fc-api-chip.in:hover  { border-color: rgba(124,196,124,0.6); }
.fc-api-chip.out:hover { border-color: rgba(255,176,80,0.6); }
.fc-api-chip.on { outline: 2px solid rgba(51,149,224,0.8); }
/* Form field as a drop target while a chip is picked. */
.form-edit-field.fc-droppable { outline: 1px dashed rgba(51,149,224,0.7); outline-offset: 2px; cursor: copy; }
/* Mapping badges under a field. */
.fc-api-maps { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.fc-api-map {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; padding: 0.08rem 0.45rem; border-radius: 4px;
}
.fc-api-map.in  { color: #9fe09f; background: rgba(124,196,124,0.14); }
.fc-api-map.out { color: #ffcf8f; background: rgba(255,176,80,0.14); }
/* Inherited-from-Host mapping shown while editing a market scope: muted + dashed, read-only (no ✕). */
.fc-api-map.inherited { opacity: 0.6; border: 1px dashed currentColor; background: transparent; }
.fc-api-unmap { background: none; border: 0; color: inherit; opacity: 0.6; cursor: pointer; font-size: 0.7rem; line-height: 1; }
.fc-api-unmap:hover { opacity: 1; }

/* APIs-panel wiring-scope selector (Host vs a market) + the "editing market X" note. */
.fc-api-scope { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.5rem; }
.fc-api-scope select { width: 100%; }
.fc-api-scope-note {
    font-size: 0.74rem; line-height: 1.3; margin: 0 0 0.6rem;
    padding: 0.35rem 0.5rem; border-radius: 2px;
    color: #b3d9f2; background: rgba(51,149,224,0.12); border: 1px solid rgba(51,149,224,0.35);
}

/* ===== Shared docked side panel (Components/Shared/SidePanel.razor) ===== */
.side-panel {
    position: fixed;
    /* Start BELOW the app topbar so the page header stays visible above the panel (it's not a
       full-viewport overlay). The editor's inline variant overrides this back to a sticky column. */
    top: calc(var(--banner-offset, 0rem) + var(--topbar-h, 3rem));
    right: 0;
    bottom: 0;
    width: var(--side-panel-w, 420px);
    max-width: 92vw;
    background: var(--panel-bg, rgba(22, 26, 36, 0.97));
    border-left: 1px solid var(--border);
    box-shadow: -24px 0 60px -34px rgba(0, 0, 0, 0.7);
    transform: translateX(106%);
    transition: transform 220ms cubic-bezier(0.18, 0.89, 0.32, 1.28), right 240ms ease;
    z-index: 70;   /* below the AI drawer (90); when the AI is open it docks to the AI's left (above) */
    display: flex;
    flex-direction: column;
    color: var(--fg);
}
/* `none` (not translateX(0)) once open: a zero translate still establishes a containing block that traps
   position:fixed descendants (e.g. the property picker's modal) inside the panel; `none` lets them
   anchor to the viewport. The slide still animates (translateX(106%) → identity). */
.side-panel.open { transform: none; }
/* When impersonating, the published --banner-offset is a hair shorter than the impersonation bar's
   true rendered height, so a fixed panel's header can tuck under it. Nudge fixed (non-inline) side
   panels down to clear it — same fix the iface-drawer uses. Keeps the panel header (with its Save
   button) fully visible below the topbar + impersonation bar. */
.app-shell--impersonating .side-panel:not(.inline):not(.floating) {
    top: calc(var(--banner-offset, 0px) + var(--topbar-h, 3rem) + 0.4rem);
}

/* Floating variant — a draggable window instead of an edge-docked panel (SidePanel Side="Floating").
   Position is (x, y) via --float-panel-x/y, dragged by the header (aeon.initPanelDrag), NOT the edge-
   docking slide/transform/width-var machinery above — deliberately opts out of .inline too (a floating
   window never joins the sticky-column flex row). Only one floating panel exists today (the form
   editor's Properties), so — like --side-panel-w — the position vars are shared globally without a
   collision (see the enum doc comment on SidePanel.PanelSide.Floating). */
.side-panel.floating {
    position: fixed;
    left: var(--float-panel-x, 120px);
    top: var(--float-panel-y, 120px);
    right: auto; bottom: auto;
    width: var(--side-panel-w, 420px);
    max-width: 92vw;
    height: auto; max-height: 80vh;
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
    transform: none; transition: none;
    z-index: 75;   /* above docked panels (70), below the AI drawer (90) */
}
.side-panel.floating:not(.open) { display: none; }
.side-panel-head.draggable { cursor: move; }
.side-panel-resize {
    position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
    cursor: col-resize; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    border-left: 1px solid var(--border);
}
/* always-visible grip so the drag-to-resize is discoverable (a "slider" handle) */
.side-panel-resize::before {
    content: ""; width: 4px; height: 34px; border-radius: 3px;
    background: var(--border);
}
.side-panel-resize:hover { background: rgba(51, 149, 224, 0.12); }
.side-panel-resize:hover::before, .side-panel-resize:active::before { background: var(--accent); }
.side-panel-left .side-panel-resize { border-left: none; border-right: 1px solid var(--border); }

/* Left-docked variant (e.g. the APIs panel) — own width var so it coexists with a right panel. */
.side-panel-left {
    right: auto; left: 0;
    width: var(--side-panel-left-w, 420px);
    border-left: 0; border-right: 1px solid var(--border);
    box-shadow: 24px 0 60px -34px rgba(0, 0, 0, 0.7);
    transform: translateX(-106%);
    transition: transform 220ms cubic-bezier(0.18, 0.89, 0.32, 1.28), left 240ms ease;
}
.side-panel-left.open { transform: none; }
.side-panel-left .side-panel-resize { left: auto; right: 0; }
@media (min-width: 900px) {
    .app-shell:has(.side-panel-left.open:not(.inline)) { padding-left: min(var(--side-panel-left-w, 420px), 60vw); }
    .app-shell:has(.side-panel-left.open.collapsed:not(.inline)) { padding-left: 2.75rem; }
}

/* ---- In-flow (inline) COLUMN mode — ONLY on a genuinely wide monitor (two ~420px panels + a usable
   editor + gaps need ≈1620px). There the form editor's APIs + Properties panels become sticky columns
   inside a flex workspace (toolbar + page span full width). On anything narrower the `.inline` class is
   inert: the panels fall back to the base fixed docked overlays (which shrink the page) — that's far more
   workable than crushing 3 columns onto a laptop. ---- */
@media (min-width: 1621px) {
    .form-edit-workspace { display: flex; align-items: flex-start; gap: 1rem; }
    /* min-width is the editor's usable floor: with a fixed-basis preview column and shrinkable
       flex, the columns to the right give way BEFORE the field rows compress into each other. */
    .form-edit-main { order: 0; flex: 1 1 auto; min-width: min(560px, 100%); }
    /* :not(.side-panel-flow) — this block is the FORM EDITOR's column mode. The runtime calc panel
       also carries .inline but has its own flow layout below; letting this sticky/top:1rem rule
       bleed onto it is what floated the Calculation panel over the quote form on wide monitors. */
    .side-panel.inline:not(.side-panel-flow) {
        /* top clears the sticky editor toolbar (which sticks at -2rem, effective bottom ~1.8rem) so a
           stuck panel locks just BELOW it, not under it. */
        /* No editor toolbar above the workspace any more (actions moved to the bottom bar), so the
           panel sticks near the top. It must end ABOVE the sticky bottom action bar (both float at
           once), so the max-height leaves room for the topbar + the ~4.5rem action bar + footer —
           its body scrolls internally instead of slipping under the bar. */
        position: sticky; top: 1rem; right: auto; left: auto; bottom: auto;
        align-self: flex-start;
        max-height: calc(100vh - 10.5rem);
        width: auto; max-width: none;
        transform: none; transition: none;
        box-shadow: none; border: 1px solid var(--border); border-radius: 4px;
        z-index: 1;
        flex: 0 0 var(--side-panel-w, 420px);
        order: 2;   /* right column, after main */
    }
    .side-panel.inline.side-panel-left {
        flex-basis: var(--side-panel-left-w, 420px);
        border-right: 1px solid var(--border);
        order: -1;  /* left column, before main */
        transform: none;
    }
    .side-panel.inline:not(.open) { display: none; }   /* closed → takes no column space */
    /* A buffer at the foot of the scroll body so the last property clears the sticky bottom action
       bar even at the scroll positions where the panel box's tail dips behind it. */
    .side-panel.inline .side-panel-body { padding-bottom: 3rem; }
}
/* Below the wide breakpoint the editor panels are fixed overlays — shrink the page for them like any
   docked panel (the base :not(.inline) shrink rules skip them, so add them back here). */
@media (min-width: 900px) and (max-width: 1620px) {
    .app-shell:has(.side-panel.inline.open:not(.side-panel-left):not(.side-panel-flow)) { padding-right: min(var(--side-panel-w, 420px), 60vw); }
    .app-shell:has(.side-panel-left.inline.open) { padding-left: min(var(--side-panel-left-w, 420px), 60vw); }
    .app-shell:has(.side-panel.inline.open.collapsed:not(.side-panel-left):not(.side-panel-flow)) { padding-right: 2.75rem; }
    .app-shell:has(.side-panel-left.inline.open.collapsed) { padding-left: 2.75rem; }
}

/* ---- Runtime calc panel: a sticky in-flow column to the RIGHT of the form body (a flex sibling),
   NOT a viewport overlay — so the page header / journey stepper / summary cards span the FULL page
   width above it instead of being squeezed by a page-shrink. It never shrinks .app-shell (excluded
   from the rules above via :not(.side-panel-flow); and it's .inline so the base overlay shrink skips
   it too). Below 1024px it stacks full-width under the form. ---- */
.side-panel.side-panel-flow {
    position: static; transform: none; transition: none;
    width: 100%; max-width: none; box-shadow: none; max-height: none;
    border: 1px solid var(--border); border-radius: 4px;
}
.side-panel.side-panel-flow:not(.open) { display: none; }
/* Docked mode keys off .has-flow-panel — a class the renderer stamps when the panel is present
   and open — NOT a :has() selector (support/specificity fragility left the panel undocked
   mid-form). Breakpoint 900px, not 1024: a laptop at 125–150% display scaling is often
   900–1000 CSS px wide and still deserves the right-docked calculator. */
@media (min-width: 900px) {
    .form-flow-layout.has-flow-panel { display: flex; align-items: flex-start; gap: 1.25rem; }
    .form-flow-layout.has-flow-panel > .form-renderer { flex: 1 1 auto; min-width: 0; }
    .form-flow-layout.has-flow-panel > .side-panel.side-panel-flow {
        position: sticky; top: 3.5rem; align-self: flex-start;
        /* Reset the base overlay z-index (70) — docked, this column must sit BELOW the sticky bottom
           action bar (.page-actions-sticky, z-index 8), not paint over the Save buttons. */
        z-index: 1;
        /* End the column ABOVE the bottom action bar (~4.5rem) as well as the topbar, so its last rows
           (Total cost of credit / fees) are scrollable into view instead of hidden behind the bar. */
        width: auto; max-height: calc(100vh - 8.5rem); overflow: auto;
        /* min() clamp: --side-panel-w is a GLOBAL var any panel can stamp (and localStorage can
           hold an old dragged width) — never let the calculator column eat more than half the
           row; the form always keeps the majority of the width. */
        flex: 0 0 min(var(--side-panel-w, 420px), 46%); order: 2;
    }
}
.side-panel-head {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.side-panel-head strong { font-size: 0.95rem; }
.side-panel-head .spacer { flex: 1; }
.side-panel-sub { font-size: 0.8rem; }
.side-panel-close {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 0.15rem 0.3rem; border-radius: 4px;
}
.side-panel-close:hover { color: var(--fg); background: rgba(255, 255, 255, 0.08); }

/* ---- Collapsed rail: tucked out of the way without closing (title only, vertical) — the button is
   ALWAYS present (not just while collapsed) so every panel gets the affordance for free. ---- */
.side-panel-collapse {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 0.9rem; line-height: 1; padding: 0.15rem 0.3rem; border-radius: 4px; flex: 0 0 auto;
}
.side-panel-collapse:hover { color: var(--fg); background: rgba(255, 255, 255, 0.08); }
.side-panel.collapsed .side-panel-head {
    flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 0.5rem; padding: 0.6rem 0.3rem;
}
.side-panel.collapsed .side-panel-head strong {
    writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-height: 14rem; font-size: 0.85rem;
}
/* Fixed/overlay panels (Properties, APIs, SDM mapping panels; and .inline panels below the 1621px
   column breakpoint, where .inline is CSS-inert and they're fixed overlays too — see the "In-flow
   (inline) COLUMN mode" comment below) — collapse to a slim vertical rail. !important beats the
   base .side-panel width var regardless of which mode is active. */
.side-panel.collapsed:not(.floating) { width: 2.75rem !important; }
/* In-flow sticky-column panels (editor Properties/APIs in wide mode; the runtime calc panel) —
   shrink the flex column too. !important: the runtime calc panel's own media query (below) sets an
   explicit flex-basis on .side-panel-flow that would otherwise win on specificity alone. */
.side-panel.inline.collapsed { flex: 0 0 2.75rem !important; min-width: 0; }

/* 3-way dock-position switch in a panel's HeaderActions (form editor's Properties panel: left /
   right / floating). Small segmented control, one button "on" at a time. */
.fe-props-dock-switch { display: inline-flex; gap: 2px; border: 1px solid var(--border); border-radius: 2px; padding: 2px; }
.fe-props-dock-switch button {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 0.85rem; line-height: 1; padding: 0.2rem 0.4rem; border-radius: 4px;
}
.fe-props-dock-switch button:hover { color: var(--fg); background: rgba(255, 255, 255, 0.08); }
.fe-props-dock-switch button.on { color: var(--fg); background: var(--accent, #3395e0); }
/* min-height:0 is load-bearing: a flex item defaults to min-height:auto (= its content height), which
   would refuse to shrink below the property list and so never scroll — the tall Properties panel then
   ran off the bottom of the page. min-height:0 lets it shrink to the panel's bounded height so
   overflow:auto actually scrolls. */
.side-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.9rem; }
/* A docked panel with multiple form sections (e.g. Finance calculator + Live quote) — give the
   sections a touch more breathing room than the default flex gap so they don't read as one block. */
.side-panel-body > .form-section + .form-section { margin-top: 0.5rem; }
@media (max-width: 899px) {
    .side-panel { width: 100vw; }
}

/* (The dock's header, close and collapse controls are SidePanel's own — see .side-panel-head /
   .side-panel-close / .side-panel-collapse. Only the AI-specific header extras live here.) */

/* Clear-chat button in the dock header (admin-only). Small, no chrome, color-only hover. */
.ai-asst-clear {
    background: transparent; border: 0; color: var(--muted);
    cursor: pointer; line-height: 1;
    padding: 0.15rem 0.4rem;
    margin-right: 0.1rem;
    transition: transform 120ms ease, color 120ms ease;
    display: inline-flex; align-items: center;
}
.ai-asst-clear svg { display: block; }
.ai-asst-clear:hover { color: #ef4444; transform: scale(1.15); }

/* Multi-select answer mode: buttons read as checkboxes (☐/☑ prefix) with a
   primary Send-selected button. .on lights up the toggled state. */
.ai-answer-multi { gap: 0.35rem; }
.ai-answer-multi .ai-answer-box { font-size: 0.95rem; opacity: 0.7; }
.ai-answer-multi.on { background: rgba(51, 149, 224, 0.18); border-color: rgba(51, 149, 224, 0.5); }
.ai-answer-multi.on .ai-answer-box { opacity: 1; }
.ai-answer-submit { margin-left: auto; }
/* The resize handle is SidePanel's (.side-panel-resize) — on the dock, hide its always-visible
   grip bar and default border so the ::after glow frame stays the panel's only left edge; the
   blue divider appears on hover/drag exactly as the old bespoke handle did. */
.side-panel.ai-dock .side-panel-resize { border-left: 0; z-index: 100; }
.side-panel.ai-dock .side-panel-resize::before { background: transparent; }
.side-panel.ai-dock .side-panel-resize:hover,
.side-panel.ai-dock .side-panel-resize:active {
    background: linear-gradient(to right, rgba(51, 149, 224, 1) 0, rgba(51, 149, 224, 1) 2px, transparent 2px);
    box-shadow: 0 0 12px 1px rgba(51, 149, 224, 0.7);
}
.side-panel.ai-dock .side-panel-resize:hover::before,
.side-panel.ai-dock .side-panel-resize:active::before { background: transparent; }

/* ===== /admin/ai — status strip, scope bar, tabs, subpanels ===== */
/* Four tiles answering "what's the state right now?" before any tab; each is a shortcut to its tab. */
.ai-status-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.7rem; margin: 1rem 0 0.9rem; }
.ai-stat {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; text-align: left;
    padding: 0.75rem 0.95rem; border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
    background: var(--panel-bg, rgba(22, 26, 36, 0.6)); color: var(--fg); font: inherit;
    transition: border-color 120ms ease, background 120ms ease;
}
.ai-stat:hover { border-color: rgba(51, 149, 224, 0.55); background: rgba(51, 149, 224, 0.06); }
.ai-stat-n { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.ai-stat-of { font-size: 0.85rem; font-weight: 500; color: var(--muted); margin-left: 0.1rem; }
.ai-stat-l { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ai-stat-s { font-size: 0.78rem; color: var(--muted); }
/* One scope control for every per-Market setting — it used to hide mid-page and quietly govern four sections. */
.ai-scope-bar {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 0.6rem 0.9rem; border: 1px solid rgba(51, 149, 224, 0.35); border-radius: 6px;
    background: rgba(51, 149, 224, 0.07);
}
.ai-scope-pick { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.ai-scope-pick .auth-input { min-width: 20rem; }
.ai-tab-pane { margin-top: 1rem; }
.ai-tab-lead { margin: 0 0 0.9rem; max-width: 70rem; }
.ai-models-add { padding: 0.8rem 1rem; margin-bottom: 0.9rem; }
.ai-models-add-head { margin-bottom: 0.5rem; }
.ai-models-add-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ai-models-add-row .auth-input { max-width: 13rem; }
.ai-models-add-row select.auth-input { max-width: 10rem; }
.ai-subpanels { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0.9rem; margin-top: 1rem; }
.ai-subpanel { padding: 0.9rem 1.1rem; }
.ai-subpanel-h { margin: 0 0 0.35rem; font-size: 1rem; }
.ai-subpanel-h .muted { font-weight: 400; font-size: 0.85rem; }
/* Admin AI default — global single-choice card on /admin/ai */
/* Provider cards — all providers configured side by side, no picklist. */
.ai-provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.ai-provider-card { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ai-provider-card > label { display: flex; flex-direction: column; gap: 0.25rem; }
.ai-provider-card > label > span:first-child { font-size: 0.85rem; }
.ai-provider-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ai-provider-head h3 { margin: 0; font-size: 1.05rem; }
.ai-provider-card .form-actions { margin-top: 0.25rem; }
.ai-provider-hint { margin: 0; }

.ai-admin-default-card { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ai-admin-default-now {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
    font-size: 0.92rem;
}
.ai-admin-default-now code { font-size: 0.78rem; padding: 0.1rem 0.4rem; background: rgba(255,255,255,0.04); border-radius: 4px; }
.ai-admin-default-actions { margin-top: 0.6rem; display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }

/* Capability tag chips ("🧠 Reasoning", "👁 Vision", ...). Small + soft so a
   row can wear two or three without dominating. Per-key tint differentiates
   capabilities at a glance. */
.ai-cap-chip {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    margin: 0.1rem 0.2rem 0.1rem 0;
    border-radius: 4px;
    font-size: 0.7rem;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    white-space: nowrap;
}
.ai-cap-reasoning { color: #c79bff; border-color: rgba(199, 155, 255, 0.45); background: rgba(199, 155, 255, 0.08); }
.ai-cap-vision    { color: #7fd8d4; border-color: rgba(127, 216, 212, 0.45); background: rgba(127, 216, 212, 0.08); }
.ai-cap-tools     { color: #ffb868; border-color: rgba(255, 184, 104, 0.45); background: rgba(255, 184, 104, 0.08); }
.ai-cap-free      { color: #5dd39e; border-color: rgba(93, 211, 158, 0.45); background: rgba(93, 211, 158, 0.08); }

/* Inline "Saved ✓" indicator next to the markup input — fades out via CSS so
   the JS-side Task.Delay only needs to clear the flag, not animate. */
.ai-mkt-saved {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.72rem;
    color: #5dd39e;
    animation: ai-mkt-saved-fade 2.2s ease-in forwards;
    pointer-events: none;
}
@keyframes ai-mkt-saved-fade {
    0%   { opacity: 0; transform: translateY(-2px); }
    15%  { opacity: 1; transform: translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Catalog modal — wider than the default modal-wide so the table breathes
   with capability + price + action columns; max-height keeps the page
   scrollable inside the modal when there are many rows. */
.ai-catalog-modal { width: min(1100px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); }
.ai-catalog-controls {
    display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
    padding: 0 0.1rem;
}
.ai-catalog-search { flex: 1 1 280px; min-width: 220px; }
.ai-catalog-filters { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.ai-catalog-filter-chip {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    border-radius: 4px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ai-catalog-filter-chip:hover { background: rgba(255, 255, 255, 0.06); color: var(--fg); }
.ai-catalog-filter-chip.on {
    background: rgba(199, 155, 255, 0.18);
    color: #c79bff;
    border-color: rgba(199, 155, 255, 0.55);
}
.ai-catalog-filter-chip.ai-catalog-clear { color: #ff8a8a; border-color: rgba(255, 100, 100, 0.35); }
/* Match the site-standard DataGrid (.dg-scroll) shell so the catalog table reads the same
   as every other table on the site — just kept scrollable for the modal's sticky header. */
.ai-catalog-list {
    flex: 1 1 auto;
    overflow-y: auto;
    margin-top: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: #1c1c1c;
}
.ai-catalog-list table { margin: 0; }
.ai-catalog-desc { font-size: 0.74rem; margin-top: 0.25rem; max-width: 380px; }
.ai-catalog-pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.3rem;
    font-size: 0.82rem;
}

/* Top block: context + model + admin transparency. Doesn't scroll with the
   chat stream — the user wants this info always visible. */
.ai-asst-drawer-top {
    /* Allow this header region to shrink and scroll internally rather than growing unbounded and
       shoving the chat stream + input off the bottom of the drawer. Without the cap, expanding the
       admin transparency peek (many long <pre> blocks) made the whole panel un-scrollable. */
    flex: 0 1 auto;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ai-asst-drawer-top .ai-controls {
    padding: 0.55rem 1rem;
    display: flex; flex-direction: column; gap: 0.3rem;
}
.ai-controls-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Picker row: a tethered AGENT's ClaudeLab icon (sent with its registration) sits beside the
   <select>, which can't render images itself; the same face marks each of its turns below. */
.ai-model-row { display: flex; align-items: center; gap: 0.45rem; }
.ai-model-row .auth-input { flex: 1; min-width: 0; }
.ai-model-avatar {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none;
    border: 1px solid rgba(51, 149, 224, 0.55);
    box-shadow: 0 0 0 2px rgba(51, 149, 224, 0.14);
    background: rgba(255, 255, 255, 0.06);
}
.ai-turn-avatar {
    width: 16px; height: 16px; border-radius: 50%; object-fit: cover;
    vertical-align: -3px; margin-right: 0.3rem;
    border: 1px solid rgba(51, 149, 224, 0.45);
}
.tether-agent-avatar {
    width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
    vertical-align: -5px; margin-right: 0.25rem;
    border: 1px solid rgba(51, 149, 224, 0.45);
}
/* Under the model picker: what a 🔌 tethered pick means, and the warning when the machine
   backing the current pick disconnects. Sits inside the sticky top, so it must stay compact. */
.ai-model-note {
    margin: 0;
    padding: 0 1rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1.35;
}
.ai-model-note-warn { color: var(--warn, #d08b2c); }

/* Admin "What the AI sees" expander. Collapsed by default; expanded shows
   the actual system prompt + redacted aggregate + UI culture + tools. */
.ai-asst-admin-peek {
    margin: 0;
    padding: 0;
    border-top: 1px dashed rgba(199, 155, 255, 0.25);
    background: rgba(199, 155, 255, 0.05);
}
.ai-asst-admin-peek > summary {
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
    color: #c79bff;
    cursor: pointer;
    list-style: none;
}
.ai-asst-admin-peek > summary::before {
    content: "▸ ";
    margin-right: 0.25rem;
}
.ai-asst-admin-peek[open] > summary::before { content: "▾ "; }
.ai-asst-admin-peek-body {
    padding: 0 1rem 0.85rem;
    font-size: 0.78rem;
    /* The peek can be very tall (system prompt + aggregate + form JSON + …); scroll it internally
       so it never overruns the drawer even on short viewports. */
    max-height: 45vh;
    overflow-y: auto;
}
.ai-asst-admin-peek-help {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
}
.ai-asst-admin-peek-body h4 {
    margin: 0.6rem 0 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #c79bff;
    letter-spacing: 0.05em;
}
.ai-asst-admin-peek-body pre {
    margin: 0;
    padding: 0.45rem 0.6rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    font-size: 0.72rem;
    line-height: 1.5;
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: #b3d9f2;
}

/* Per-turn admin "Show prompt sent" expander — same look, smaller scale. */
.ai-asst-turn-peek {
    margin-top: 0.4rem;
    border-top: 1px dashed rgba(199, 155, 255, 0.2);
    padding-top: 0.3rem;
}
.ai-asst-turn-peek > summary {
    font-size: 0.7rem;
    color: #c79bff;
    cursor: pointer;
    list-style: none;
}
.ai-asst-turn-peek > summary::before {
    content: "▸ ";
}
.ai-asst-turn-peek[open] > summary::before { content: "▾ "; }
.ai-asst-turn-peek h5 {
    margin: 0.4rem 0 0.2rem;
    font-size: 0.66rem;
    text-transform: uppercase;
    color: #c79bff;
    letter-spacing: 0.05em;
}
.ai-asst-turn-peek pre {
    margin: 0;
    padding: 0.4rem 0.55rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    font-size: 0.7rem;
    line-height: 1.45;
    max-height: 10rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-close {
    background: transparent; border: 0; color: var(--muted);
    font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.ai-close:hover { color: var(--fg); }

.ai-consent { padding: 0.9rem 1rem; }
.ai-consent h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.ai-consent-body { color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.ai-empty { padding: 1rem; font-size: 0.85rem; }

.ai-controls { padding: 0.6rem 1rem 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ai-controls select { width: 100%; }

.ai-stream {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.6rem 1rem;
    display: flex; flex-direction: column; gap: 0.55rem;
    min-height: 6rem;
}
.ai-turn { display: flex; flex-direction: column; gap: 0.15rem; }
.ai-turn p { margin: 0; font-size: 0.88rem; line-height: 1.45; white-space: pre-wrap; }
.ai-role { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* User messages align right (their own bubble), AI responses align left.
   The bubble itself takes the role colour; max-width keeps long messages
   from spanning the drawer's full width so the "who said what" stays clear. */
.ai-turn-user { align-items: flex-end; text-align: right; }
.ai-turn-user p {
    color: var(--fg);
    background: rgba(51, 149, 224, 0.18);
    border: 1px solid rgba(51, 149, 224, 0.35);
    padding: 0.5rem 0.7rem;
    border-radius: 5px 12px 4px 12px;
    max-width: 85%;
    display: inline-block;
}
.ai-turn-assistant { align-items: flex-start; text-align: left; }
.ai-turn-assistant p {
    color: var(--fg);
    padding: 0.5rem 0.7rem;
    background: #242424;
    border-radius: 5px 12px 12px 4px;
    max-width: 85%;
    display: inline-block;
}

/* Markdown content inside the AI bubble. Headings, lists, code, tables — kept
   compact so the chat doesn't sprawl. The bubble's max-width still caps the
   horizontal real estate. */
.ai-md {
    color: var(--fg);
    padding: 0.5rem 0.7rem;
    background: #242424;
    border-radius: 5px 12px 12px 4px;
    max-width: 85%;
    display: inline-block;
    font-size: 0.88rem;
    line-height: 1.5;
}
.ai-md > :first-child { margin-top: 0; }
.ai-md > :last-child { margin-bottom: 0; }
.ai-md p { margin: 0 0 0.5rem; }
.ai-md h1, .ai-md h2, .ai-md h3, .ai-md h4 { margin: 0.6rem 0 0.35rem; font-size: 1rem; }
.ai-md h1 { font-size: 1.1rem; }
.ai-md ul, .ai-md ol { margin: 0 0 0.5rem 0; padding-left: 1.2rem; }
.ai-md li { margin: 0.1rem 0; }
.ai-md code {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.82em;
    font-family: var(--mono);
}
.ai-md pre {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.55rem 0.7rem;
    overflow-x: auto;
    margin: 0.45rem 0;
}
.ai-md pre code { background: transparent; padding: 0; font-size: 0.78rem; line-height: 1.45; }
.ai-md a { color: var(--accent); }
.ai-md strong { color: var(--fg); }
.ai-md table { border-collapse: collapse; margin: 0.45rem 0; font-size: 0.82rem; }
.ai-md th, .ai-md td { border: 1px solid var(--border); padding: 0.2rem 0.45rem; }

/* Copy-JSON button next to the AI's ```json``` blocks.
   The row WRAPS and the status/lint take a full row of their own. They used to be plain flex
   siblings of the buttons on a nowrap row: at the real drawer width (~380px) a long status
   ("NOT LIVE — queued for approval…" plus the appended SDM lint) ate ~230px and squeezed
   "Copy JSON" / "Apply to this page" into a ~60px column. Buttons never shrink or wrap their
   label — they take their natural width and push the next one onto a new line instead. */
.ai-json-actions { margin: 0.2rem 0 0.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ai-json-actions > .lp-btn { flex: 0 0 auto; white-space: nowrap; }
.ai-json-actions > .ai-apply-status,
.ai-json-actions > .ai-apply-lint { flex: 0 0 100%; min-width: 0; }

/* Clickable answer suggestions — buttons rendered from [ANSWER:X] markers. */
.ai-answer-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.ai-answer-btn {
    background: rgba(199, 155, 255, 0.12);
    color: #c79bff;
    border-color: rgba(199, 155, 255, 0.45);
    font-size: 0.8rem;
}
.ai-answer-btn:hover {
    background: rgba(199, 155, 255, 0.22);
    color: #fff;
}

/* Three-dot "thinking" indicator while the AI is processing the request.
   Replaces the static "…" placeholder so it's obvious the panel hasn't hung. */
.ai-thinking {
    display: inline-flex;
    gap: 5px;
    padding: 0.7rem 0.9rem;
    background: #242424;
    border-radius: 5px 12px 12px 4px;
    align-self: flex-start;
}
.ai-thinking span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--muted);
    animation: ai-thinking-bounce 1.3s infinite ease-in-out both;
}
.ai-thinking span:nth-child(2) { animation-delay: 0.15s; }
.ai-thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-thinking-bounce {
    0%, 80%, 100% { transform: scale(0.45); opacity: 0.45; }
    40%           { transform: scale(1); opacity: 1; }
}

.ai-stars { margin-top: 0.3rem; display: flex; gap: 0.2rem; align-items: center; }
.ai-star {
    background: transparent; border: 0; cursor: pointer;
    color: #3d4250; font-size: 1.1rem; line-height: 1;
    padding: 0 0.1rem;
}
.ai-star:disabled { cursor: default; opacity: 0.4; }
.ai-star.on, .ai-star:hover { color: #ffc857; }

.ai-input-row {
    padding: 0.6rem 1rem 0.5rem;
    border-top: 1px solid var(--border);
    display: flex; gap: 0.4rem;
}
.ai-input-row input { flex: 1; }

/* 🎤 voice dictation toggle — pulses while listening; greyed when the browser has no SpeechRecognition. */
.ai-mic { flex: none; padding-left: 0.55rem; padding-right: 0.55rem; }
.ai-mic-listening {
    background: rgba(248, 113, 113, 0.16); border-color: rgba(248, 113, 113, 0.5);
    animation: ai-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes ai-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0.12); }
}
.ai-mic-unsupported { opacity: 0.35; cursor: not-allowed; }

.ai-foot { padding: 0.4rem 1rem 0.75rem; font-size: 0.75rem; }
.ai-foot a { color: var(--accent); }

@media (max-width: 520px) {
    /* Full-width on phones: both edges are flush against the viewport, so no rounding at all
       (a left radius here would clip against the screen edge the same way right rounding would). */
    .side-panel.ai-dock { width: 100vw; border-radius: 0; }
}

/* =============================================================================
   AI: hero header on /admin/ai + bubble/panel icon centering
   ========================================================================== */

.ai-hero {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin: 0.6rem 0 1.25rem;
}
.ai-hero .ai-icon { flex: 0 0 auto; filter: drop-shadow(0 6px 20px rgba(51, 149, 224, 0.25)); }
.ai-hero-title { margin: 0 0 0.25rem; }
.ai-hero .lead { margin: 0; }

@media (max-width: 640px) {
    .ai-hero { flex-direction: column; align-items: flex-start; }
}

.ai-bubble .ai-icon {
    /* Inline-flex parents shrink intrinsic-size SVGs to 0 — pin the width
       explicitly so the mark actually renders inside the orb. Matches the
       Size="20" passed by AiAssistant.razor's launcher. */
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45));
}

/* Context pill: shown at the very top of the panel body so the user knows
   what data the AI has on this page ("Application · 2f0e5e", "Quote builder",
   "Dashboard", etc). Updates on navigation. */
.ai-asst-context {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(51, 149, 224, 0.05);
}
/* "What the assistant can see for this screen" — a small context block by the chat. */
.ai-ctx-block {
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(51, 149, 224, 0.05);
}
.ai-ctx-head {
    display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: #9e9e9e; margin-bottom: 0.4rem;
}
.ai-ctx-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ai-ctx-chip {
    display: inline-flex; align-items: center; gap: 0.28rem;
    font-size: 0.72rem; color: #b3d9f2;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 4px; padding: 0.14rem 0.52rem; cursor: default;
}
/* Guidance toggle button — same pill shape, interactive */
.ai-ctx-chip-btn {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    font-family: inherit;
}
.ai-ctx-chip-btn:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.18); }
.ai-ctx-chip-btn.on  { background: rgba(51,149,224,0.18); border-color: rgba(51,149,224,0.45); color: #b3d9f2; }
.ai-ctx-chip-btn.off { opacity: 0.45; }
.ai-asst-context-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ai-asst-context-value {
    font-size: 0.82rem;
    color: #b3d9f2;
    font-weight: 500;
}

/* The 💡 "Help me with this page" one-click — always available; the AI grounds itself
   in the page briefing + live page context and answers with option buttons. */
.ai-help-row { padding: 0.5rem 0.85rem 0; }
.ai-help-btn {
    width: 100%; text-align: left; cursor: pointer;
    padding: 0.45rem 0.7rem; font-size: 0.82rem;
    border: 1px dashed rgba(179, 217, 242, 0.45); border-radius: 3px;
    background: rgba(179, 217, 242, 0.07); color: #b3d9f2;
    transition: background 0.15s, border-color 0.15s;
}
.ai-help-btn:hover:not(:disabled) { background: rgba(179, 217, 242, 0.14); border-color: #b3d9f2; }
.ai-help-btn:disabled { opacity: 0.5; cursor: default; }

/* Suggested-question chips. Shown above the input row when the panel is open
   on a Quote / Application page and the resolver returned matching templates. */
.ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* Autofill-this-page controls */
.ai-autofill { padding: 0.55rem 0.85rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ai-autofill-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.15rem; }
.ai-autofill-msg { margin: 0.35rem 0 0; }
.ai-suggestions-head {
    width: 100%;
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Proactive opening line a page can show before any chat (e.g. the form↔API mapper). */
.ai-stream-greeting {
    margin: 0;
    padding: 0.55rem 0.7rem;
    border-radius: 3px;
    background: rgba(51, 149, 224, 0.10);
    border: 1px solid rgba(51, 149, 224, 0.22);
    color: #b3d9f2;
    font-size: 0.86rem;
    line-height: 1.4;
}
.ai-chip {
    background: rgba(51, 149, 224, 0.12);
    color: #b3d9f2;
    border: 1px solid rgba(51, 149, 224, 0.22);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 100ms ease, transform 100ms ease;
    line-height: 1.2;
}
.ai-chip:hover {
    background: rgba(51, 149, 224, 0.22);
    transform: translateY(-1px);
}
.ai-chip:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
}
.ai-suggestions-loading {
    font-size: 0.78rem;
    padding: 0.5rem 0.85rem;
    margin: 0;
}

/* Tool-call turn — sits between the user turn and the AI's final answer. Small,
   monospace, distinct from the regular assistant bubble so the user reads it as
   "AI did something" rather than "AI said this". */
.ai-turn-tool {
    background: rgba(199, 155, 255, 0.08);
    border-left: 2px solid rgba(199, 155, 255, 0.45);
    padding: 0.4rem 0.85rem;
    margin: 0.2rem 0;
    font-size: 0.78rem;
}
.ai-turn-tool .ai-role {
    color: #c79bff;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.ai-tool-result {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.72rem;
    color: #c7c7c7;
    margin: 0.2rem 0 0;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Small mark in the floating panel header next to the title. */
.ai-asst-panel-mark { display: inline-flex; align-items: center; margin-right: 0.4rem; }
.ai-asst-panel-head { gap: 0.1rem; }

/* Login version line — matches the chrome footer style so users can read which
   build they're hitting before signing in. */
.auth-ver { margin-top: 1.4rem; font-size: 0.78rem; display: flex; gap: 0.5rem; align-items: center; }
.auth-ver code { background: #222222; padding: 0 0.4rem; border-radius: 3px; color: var(--fg); }

/* Journey blockers banner on /applications/{id}/form */
.case-blockers {
    background: color-mix(in srgb, #f87171 14%, #1c1c1c);
    border: 1px solid color-mix(in srgb, #f87171 40%, var(--border));
    border-radius: 5px;
    padding: 0.9rem 1.1rem;
    margin: 0.6rem 0 1rem;
}
.case-blockers strong { color: #fbbcbc; }
.case-blockers ul { margin: 0.4rem 0 0.4rem 1.1rem; padding: 0; font-size: 0.9rem; }
.case-blockers ul li { margin: 0.15rem 0; }
.case-blockers p { margin: 0.3rem 0 0; font-size: 0.82rem; }

/* =============================================================================
   /admin/document-templates — split editor + live preview
   ========================================================================== */
.doctmpl-pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin-top: 0.6rem;
    min-height: 70vh;
}
@media (max-width: 1100px) { .doctmpl-pane { grid-template-columns: 1fr; } }
.doctmpl-edit, .doctmpl-preview {
    background: #1c1c1c;
    border: 1px solid var(--border);
    border-radius: 5px;
    display: flex; flex-direction: column;
    padding: 0.9rem 1rem;
}
.doctmpl-pane-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.6rem; margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.doctmpl-pane-head strong { font-size: 0.95rem; }
.doctmpl-meta {
    display: grid; gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 0.7rem;
}
.doctmpl-textarea {
    flex: 1 1 auto;
    min-height: 28rem;
    font-family: ui-monospace, 'SFMono-Regular', 'Consolas', 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre;
    word-wrap: normal;
    overflow: auto;
}
.doctmpl-ai { margin-top: 0.7rem; }
.doctmpl-ai summary { cursor: pointer; padding: 0.3rem 0; font-weight: 600; }
.doctmpl-ai-result {
    background: rgba(0,0,0,0.35);
    border-radius: 2px;
    padding: 0.75rem 0.9rem;
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    max-height: 24rem;
    overflow: auto;
    white-space: pre-wrap;
    color: var(--fg);
}
.doctmpl-preview-controls { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.doctmpl-preview-controls input { min-width: 18rem; }
.doctmpl-preview-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 28rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: #fff;       /* white so the rendered HTML reads naturally */
}
.doctmpl-preview-empty {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--border);
    border-radius: 3px;
    padding: 2rem;
    text-align: center;
}

/* /admin/settings — read-only settings table */
.cfg-note {
    background: color-mix(in srgb, #ffc857 14%, #1c1c1c);
    border: 1px solid color-mix(in srgb, #ffc857 35%, var(--border));
    border-radius: 4px;
    padding: 0.7rem 1rem;
    margin: 0.6rem 0 1rem;
    font-size: 0.88rem;
}
.cfg-table td, .cfg-table th { padding: 0.5rem 0.75rem; vertical-align: top; }
.cfg-table td:nth-child(2) { font-family: ui-monospace, monospace; font-size: 0.85rem; word-break: break-all; }
.cfg-unset { color: var(--muted); }
.cfg-src { color: var(--muted); font-size: 0.82rem; }

/* Landing page footer version line + impersonation offset */
.lp-foot { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.lp-foot .spacer { flex: 1; }
.lp-foot-ver { font-size: 0.8rem; color: var(--muted); display: inline-flex; gap: 0.5rem; align-items: center; }
.lp-foot-ver code { background: #222222; padding: 0 0.4rem; border-radius: 3px; color: var(--fg); }
.lp--impersonating { padding-top: 0; }   /* impersonation bar already pushes the page down */

/* ===== /search page ===================================================== */
.search-page .search-bar { display: flex; gap: 0.5rem; align-items: center; margin: 1rem 0 0.5rem; }
.search-page .search-input { flex: 1; min-width: 0; padding: 0.6rem 0.8rem; font-size: 1rem; }
.search-page .search-hint { padding: 1rem 0; }

.search-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 1rem; border-bottom: 1px solid #353535; }
.search-tab {
    background: transparent; border: 0; color: var(--fg);
    padding: 0.55rem 0.9rem; cursor: pointer; font-size: 0.92rem;
    border-radius: 2px 6px 0 0;
}
.search-tab:hover { background: #282828; }
.search-tab.active { background: #353535; border-bottom: 2px solid var(--accent); }
.search-tab-count {
    display: inline-block; margin-left: 0.4rem; font-size: 0.72rem;
    padding: 0.05rem 0.4rem; border-radius: 4px;
    background: #222222; color: var(--muted); font-variant-numeric: tabular-nums;
}
.search-tab.active .search-tab-count { background: var(--accent); color: #000; }

.search-summary { display: grid; gap: 1rem; }
.search-group { background: #1b1b1b; border-radius: 3px; padding: 0.85rem 1rem; }
.search-group h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.search-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.search-group li { font-size: 0.92rem; }
.search-group .lp-btn { margin-top: 0.5rem; }

/* ===== /applications structured filter strip ============================ */
.apps-filters {
    display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end;
    margin: 0.25rem 0 0.75rem; padding: 0.6rem 0.8rem;
    background: #1b1b1b; border-radius: 3px;
}
.apps-filter-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; }
.apps-filter-field .auth-input.sm { padding: 0.35rem 0.5rem; min-width: 11rem; }
.apps-filter-clear { margin-left: auto; }

/* Search-page filter strip — same chrome as /applications, with the contextual
   "pick a tab" note vertically centred next to the date dropdown. */
.search-filters { align-items: center; }
.search-filter-note { font-size: 0.82rem; }

/* ===== Dashboard quick-search bar ======================================= */
.dash-search {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0 0 1.5rem; padding: 0.5rem 0.65rem;
    background: #1b1b1b; border: 1px solid #2d2d2d; border-radius: 4px;
}
.dash-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.dash-search-ico { opacity: 0.7; font-size: 1rem; padding-left: 0.2rem; }
.dash-search-input { flex: 1; border: none; background: transparent; }
.dash-search-input:focus { outline: none; box-shadow: none; }
.dash-search-btn { flex-shrink: 0; }

/* ===== AdminFormEdit preview head + locale picker ======================= */
.form-edit-preview-head {
    display: flex; align-items: end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.form-edit-preview-locale {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem;
    flex-shrink: 0;          /* keep the picker intact; let the header wrap it as a unit */
}
.form-edit-preview-locale > span { white-space: nowrap; }   /* "🌍 Preview locale" stays one line */
/* The global .auth-input rule is width:100%; left unchecked, the select demands the full
   label width AND refuses to shrink, so it overflows the page's right edge. Size it to its
   content (short locale codes), cap at the container, and let it shrink. */
.form-edit-preview-locale select { width: auto; min-width: 9rem; max-width: 100%; flex-shrink: 1; }

/* QA test-data upload form — let the content box span the grid + be genuinely large. */
.qa-wide { grid-column: 1 / -1; }

/* QA bulk generator (/qa/generator) */
/* Recent applications quick-access on the FS workspace home */
.dash-recent-apps { padding: 0.4rem 0.6rem; }
.dash-recent-apps td, .dash-recent-apps th { color: var(--fg); }
.dash-recent-row { cursor: pointer; }
.dash-recent-row:hover td { background: color-mix(in srgb, currentColor 6%, transparent); }

/* Document & data check panel (PMS proposal / application at later placements) */
.ddc-panel { padding: 1rem 1.25rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.ddc-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ddc-head h3 { margin: 0; }
/* The two clearly-separated stages: ① Document check, ② Data check. */
/* Decision-gate PRECONDITION note (PMS): amber requirement callout, not a red error — nothing
   failed, the decision is just locked until the doc & data check completes. */
.pms-gate-note {
    display: flex; align-items: flex-start; gap: 0.55rem;
    margin: 0.75rem 0 1rem; padding: 0.6rem 0.85rem; font-size: 0.87rem; line-height: 1.45;
    border: 1px solid color-mix(in srgb, #f0b65a 45%, transparent); border-left-width: 3px;
    border-radius: 0; border-top-right-radius: 8px; border-bottom-right-radius: 8px;
    background: color-mix(in srgb, #f0b65a 8%, transparent); color: var(--fg);
}
.pms-gate-ico { line-height: 1.45; }

/* Side-by-side document review (doc & data check): the preview scrolls in ITS OWN box (the PDF
   iframe additionally scrolls internally), independent of both the panel body and the page.
   flex: none is LOAD-BEARING — .side-panel-body is a column flex container, and without it the
   default flex-shrink squeezes this box to its 2px borders the moment the facts/match table below
   grows (the height rule alone loses to flex shrinking). */
.ddc-review-preview {
    flex: none; height: 52vh; overflow: auto; margin-bottom: 0.7rem;
    border: 1px solid var(--border, #3a3a3a); border-radius: 4px; background: #131313;
}
.ddc-review-frame { width: 100%; height: 100%; border: 0; display: block; }
.ddc-review-img { max-width: 100%; display: block; }
.ddc-review-nopreview { padding: 0.8rem; }
.ddc-review-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.ddc-review-tally { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.2rem 0 0.5rem; }
/* "Is this even the right kind of document" — the market's standard, advisory. */
.ddc-template { margin: 0.4rem 0 0.6rem; padding: 0.45rem 0.65rem; border-radius: 2px; font-size: 0.85rem;
    border: 1px solid rgba(120, 120, 120, 0.25); }
.ddc-template-ok { border-color: rgba(26, 127, 55, 0.4); background: rgba(26, 127, 55, 0.08); }
.ddc-template-bad { border-color: rgba(230, 160, 30, 0.5); background: rgba(230, 160, 30, 0.1); }

.ddc-section { border: 1px solid var(--border, #3a3a3a); border-radius: 4px; padding: 0.7rem 0.85rem; display: flex; flex-direction: column; gap: 0.55rem; }
.ddc-section-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ddc-section-h { margin: 0; font-size: 0.95rem; }
.ddc-evidence { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.ddc-upload { display: flex; align-items: center; gap: 0.4rem; }
.ddc-table { color: var(--fg); }
.ddc-table td, .ddc-table th { color: var(--fg); }
.ddc-row-mismatch td { background: color-mix(in srgb, #ff6b6b 9%, transparent); }
.ddc-summary { margin: 0.2rem 0 0; }
/* "What happens next" — the doc-check → credit hand-off is automatic, so say so explicitly. */
.ddc-run-hint { flex: 1 1 18rem; min-width: 14rem; line-height: 1.45; }
.ddc-next { margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 3px; font-size: 0.85rem; line-height: 1.5;
  background: color-mix(in srgb, #f0b65a 10%, transparent); border: 1px solid color-mix(in srgb, #f0b65a 32%, transparent); }
.ddc-next-go { background: color-mix(in srgb, #46cf99 10%, transparent); border-color: color-mix(in srgb, #46cf99 35%, transparent); }
.ddc-waive-reason { max-width: 300px; }

.qa-gen-ai { padding: 1rem 1.25rem; margin-top: 1rem; }
.qa-gen-ai-row { display: flex; gap: 0.6rem; align-items: flex-start; }
.qa-gen-ai-prompt { flex: 1; resize: vertical; min-height: 3.2rem; }
.qa-gen-ai-notes { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.qa-gen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; align-items: start; margin-top: 1rem; }
.qa-gen-panel { padding: 1rem 1.25rem; }
.qa-gen-weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
.qa-gen-weight { display: flex; flex-direction: column; gap: 0.2rem; }
.qa-gen-weight > span { font-size: 0.8rem; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-gen-weight input { width: 100%; }
.qa-gen-preview { color: var(--fg); }
.qa-gen-preview td { padding: 0.2rem 0.5rem; color: var(--fg); }
.qa-gen-preview th { text-align: left; padding: 0.45rem 0.5rem 0.2rem; opacity: 0.7; font-size: 0.8rem; color: var(--fg); }
.qa-gen-n { text-align: right; font-variant-numeric: tabular-nums; }
.qa-gen-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, currentColor 12%, transparent); overflow: hidden; }
.qa-gen-bar-fill { height: 100%; background: var(--accent, #3395e0); transition: width 400ms ease; }
.qa-gen-actions { white-space: nowrap; }
.qa-gen-erase:hover { color: #ff8f8f; border-color: #ff8f8f; }
.qa-gen-summary { max-width: 260px; }
.qa-content {
    width: 100%;
    min-height: 360px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre;
    overflow: auto;
}

/* ===== AdminFormEdit Test modal ========================================= */
.form-test-modal { width: min(960px, 96vw); max-height: 90vh; overflow: auto; }
.form-test-body { display: grid; gap: 0.75rem; padding-top: 0.5rem; }
.form-test-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.form-test-summary { background: #222222; padding: 0.6rem 0.8rem; border-radius: 2px; font-size: 0.9rem; }
.form-test-results { display: grid; gap: 0.5rem; }
.form-test-errors { background: #2a1418; padding: 0.6rem 0.8rem; border-radius: 2px; }
.form-test-warnings { background: #2a230f; padding: 0.6rem 0.8rem; border-radius: 2px; }
.form-test-errors ul, .form-test-warnings ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.form-test-render { margin-top: 0.5rem; }

/* ===== AiAssistant Apply-to-form status ================================= */
.ai-apply-status { font-size: 0.8rem; line-height: 1.45; }

/* A change FILED for approval on a gated stage is NOT live. It must not read like the muted
   "saved" line — same amber as the form editor's "QUEUED — NOT LIVE" banner. */
.ai-apply-status.queued {
    color: #e2a03f;
    font-weight: 600;
    background: color-mix(in srgb, #e2a03f 12%, transparent);
    border-inline-start: 3px solid #e2a03f;
    padding: 0.15rem 0.4rem;
}

/* The advisory SDM lint the apply path appends to its message. It can run to hundreds of
   characters, which is fine — here — and not on the status line, where it buried the one fact
   that matters ("NOT LIVE" vs "saved"). Collapsed by default; opens onto its own full-width row. */
.ai-apply-lint { font-size: 0.75rem; }
.ai-apply-lint > summary { cursor: pointer; color: var(--muted); list-style: none; }
.ai-apply-lint > summary::-webkit-details-marker { display: none; }
.ai-apply-lint > summary::before { content: "▸ "; }
.ai-apply-lint[open] > summary::before { content: "▾ "; }
.ai-apply-lint ul {
    margin: 0.3rem 0 0;
    padding-inline-start: 1.1rem;
    max-height: 12rem;
    overflow-y: auto;
}
.ai-apply-lint li { margin: 0.15rem 0; color: var(--muted); overflow-wrap: anywhere; }

/* ===== AdminFormEdit: AI Apply flash =====================================
   Section / field / rule cards that the AI's last Apply touched briefly
   pulse a green border + soft fill so the admin sees exactly what changed.
   The .fc-flash class is added by AdminFormEdit for the duration of
   FlashDurationMs and removed on a delayed StateHasChanged, after which
   the animation has already faded — both layers cooperate. */
.form-edit-section.fc-flash,
.form-edit-field.fc-flash,
.form-edit-rule.fc-flash {
    animation: fc-flash-pulse 2.4s ease-out;
    position: relative;
}
.form-edit-section.fc-flash { outline: 2px solid #4ade80; outline-offset: 2px; border-radius: 2px; }
.form-edit-field.fc-flash   { outline: 2px solid #4ade80; outline-offset: 2px; border-radius: 2px; }
.form-edit-rule.fc-flash    { outline: 2px solid #4ade80; outline-offset: 2px; border-radius: 2px; }

@keyframes fc-flash-pulse {
    0%   { background-color: rgba(74, 222, 128, 0.30); }
    20%  { background-color: rgba(74, 222, 128, 0.30); }
    100% { background-color: transparent; }
}


/* Feature-sets: "show archived" toggle in the toolbar */
.fs-archived-toggle { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.5rem; font-size: 0.85rem; }
.fs-archived-toggle input { width: auto; }

/* Feature-sets: the staged form-config diff an approver reads before confirming. */
.fs-form-review { padding: 0.5rem 0.2rem 0.8rem; font-size: 0.88rem; }
.fs-form-review ul { margin: 0.2rem 0 0.5rem 1.1rem; padding: 0; }
.fs-form-review pre {
    max-height: 22rem; overflow: auto; padding: 0.6rem 0.8rem; margin: 0.4rem 0 0;
    background: rgba(0,0,0,0.18); border: 1px solid var(--border); border-radius: 4px;
    font-size: 0.78rem; white-space: pre-wrap; word-break: break-word;
}

/* ============================================================================
   SignalR reconnection overlay
   Blazor drops the circuit when the connection is lost and toggles one of
   .components-reconnect-{show,failed,rejected} on #components-reconnect-modal.
   Base rule keys off the id alone so the overlay stays hidden even if Blazor
   rewrites the class list; the state overrides (id + class) win when present.
   ============================================================================ */
#components-reconnect-modal {
    display: none;
    position: fixed; inset: 0; z-index: 9999;
    align-items: center; justify-content: center; padding: 1.5rem;
    background: rgba(4, 6, 12, 0.72);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    font-family: var(--font-sans);
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-timedout { display: flex; }

.reconnect-card {
    width: min(420px, 100%);
    background: #181818; color: var(--fg);
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.85);
    padding: 1.9rem 1.7rem; text-align: center;
    animation: reconnect-pop var(--dur, 200ms) var(--ease-emphasized, ease-out);
}
@keyframes reconnect-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* one state block shown at a time, driven by the class Blazor sets on the modal */
.reconnect-state { display: none; flex-direction: column; align-items: center; gap: 0.5rem; }
#components-reconnect-modal.components-reconnect-show     .reconnect-state-show     { display: flex; }
#components-reconnect-modal.components-reconnect-failed   .reconnect-state-failed   { display: flex; }
#components-reconnect-modal.components-reconnect-rejected .reconnect-state-rejected { display: flex; }
#components-reconnect-modal.components-reconnect-timedout .reconnect-state-timedout { display: flex; }

.reconnect-title { margin: 0.2rem 0 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.reconnect-msg { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted); max-width: 32ch; }
.reconnect-attempt { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
#components-reconnect-current-attempt, #components-reconnect-max-retries { color: var(--fg); font-weight: 600; }

.reconnect-spinner {
    width: 38px; height: 38px; border-radius: 50%; margin-bottom: 0.4rem;
    border: 3px solid color-mix(in srgb, var(--accent) 26%, transparent);
    border-top-color: var(--accent);
    animation: dp-spin 0.8s linear infinite;
}
.reconnect-icon {
    width: 44px; height: 44px; border-radius: 50%; margin-bottom: 0.4rem;
    display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; line-height: 1;
}
.reconnect-icon-warn { background: color-mix(in srgb, #f87171 20%, transparent); color: #fca5a5; }

.reconnect-btn {
    margin-top: 0.9rem; appearance: none; cursor: pointer; font: inherit;
    font-size: 0.9rem; font-weight: 600; color: #fff;
    background: var(--accent); border: 1px solid var(--accent); border-radius: 4px;
    padding: 0.55rem 1.15rem; transition: background var(--dur, 200ms) var(--ease-standard, ease), transform var(--dur, 200ms);
}
.reconnect-btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.reconnect-btn:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
    .reconnect-spinner { animation-duration: 1.6s; }
    .reconnect-card { animation: none; }
}

/* ============================================================================
   Interface editor — right-docked slide-over drawer
   Replaces the old inline "div below the list" editor. Keeps the interface list
   visible for context while editing (metadata · AI draft · mock · test · YAML ·
   versions). Mirrors the .schema-overlay slide-over pattern.
   ============================================================================ */
/* The interface editor is its OWN full-width page view (it replaces the list, which is hidden while
   editing) — a right-side drawer then a modal both felt cramped for an editor that keeps growing.
   The page's .page.wide container is already full width, so the editor's auto-fit field grid flows
   into as many columns as fit. */
.iface-page-back { display: inline-block; margin-bottom: 0.5rem; cursor: pointer; }
.iface-page.doctmpl-edit { padding: 0; background: transparent; border: 0; border-radius: 0; }
/* sticky action header so Save / Publish / Close stay reachable while scrolling the long editor */
.iface-page .doctmpl-pane-head {
    position: sticky; top: var(--banner-offset, 0); z-index: 5;
    margin: 0 0 0.9rem; padding: 0.8rem 1rem;
    background: rgba(14, 17, 26, 0.96);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border); border-radius: 5px;
    align-items: center;
}
.app-shell--impersonating .iface-page .doctmpl-pane-head { top: calc(var(--banner-offset, 0px) + 0.4rem); }

/* ============================================================================
   PMS — credit assessment (/admin/pms)
   ============================================================================ */
.pms-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pms-badge {
    display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.5rem;
    border-radius: 4px; border: 1px solid transparent; white-space: nowrap;
}
.pms-pending  { background: color-mix(in srgb, #a3a3a3 22%, transparent); color: #d3d3d3; }
.pms-doccheck { background: color-mix(in srgb, #b58cf5 22%, transparent); color: #ddd0f8; }
.pms-inreview { background: color-mix(in srgb, #3395e0 22%, transparent); color: #b3d9f2; }
.pms-approved { background: color-mix(in srgb, #4ade80 20%, transparent); color: #bbf7d0; }
.pms-referred { background: color-mix(in srgb, #fbbf24 22%, transparent); color: #fde68a; }
.pms-declined { background: color-mix(in srgb, #f87171 22%, transparent); color: #fecaca; }
.pms-processing { background: color-mix(in srgb, #a78bfa 22%, transparent); color: #ddd6fe; }
.pms-auto {
    margin-left: 0.35rem; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted); border: 1px solid var(--border); border-radius: 2px; padding: 0 0.25rem;
}

.pms-detail { max-width: 760px; }
.pms-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem 1.4rem;
    padding: 0.6rem 0 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem;
}
.pms-summary > div { display: flex; flex-direction: column; gap: 0.1rem; }
.pms-k { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pms-v { font-size: 0.95rem; color: var(--fg); font-weight: 600; }

.pms-assess { display: flex; flex-direction: column; gap: 0.6rem; }
.pms-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pms-assess label { display: flex; flex-direction: column; gap: 0.25rem; }
.pms-assess label > span { font-size: 0.8rem; color: #9e9e9e; }
.pms-w { max-width: 100%; }
.pms-check { flex-direction: row !important; align-items: flex-start; gap: 0.5rem !important; cursor: pointer; }
.pms-check input[type="checkbox"] { width: 1rem; height: 1rem; margin-top: 0.15rem; flex: none; }
.pms-check span { color: var(--fg); }
.pms-field-label { font-size: 0.8rem; color: #9e9e9e; margin-top: 0.3rem; }
.pms-decisions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pms-dec {
    appearance: none; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600;
    color: var(--fg); background: #1f1f1f; border: 1px solid var(--border);
    border-radius: 4px; padding: 0.45rem 0.85rem; transition: border-color var(--dur, 200ms), background var(--dur, 200ms);
}
.pms-dec:hover { border-color: var(--accent); }
/* the picked decision wears its outcome colour — green approve, red decline, blue review/info,
   amber refer — so the choice reads at a glance before Record is pressed */
.pms-dec.on.pms-approved { background: color-mix(in srgb, #4ade80 16%, transparent); color: #bbf7d0; border-color: #4ade80; }
.pms-dec.on.pms-declined { background: color-mix(in srgb, #f87171 16%, transparent); color: #fecaca; border-color: #f87171; }
.pms-dec.on.pms-inreview { background: color-mix(in srgb, #3395e0 16%, transparent); color: #b3d9f2; border-color: #3395e0; }
.pms-dec.on.pms-referred { background: color-mix(in srgb, #fbbf24 16%, transparent); color: #fde68a; border-color: #fbbf24; }
.pms-dec.on.pms-pending  { background: color-mix(in srgb, #a3a3a3 16%, transparent); color: #d3d3d3; border-color: #a3a3a3; }

/* decision-bar left summary: label/value rows under the score hero */
.pms-sum { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.7rem 0 0; padding-top: 0.6rem; border-top: 1px solid rgba(140,150,170,0.14); }
.pms-sum > div { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; }
.pms-sum dt { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.pms-sum dd { font-size: 0.85rem; font-weight: 600; margin: 0; text-align: right; overflow-wrap: anywhere; }

/* decided state: the recorded outcome as a read-only card (re-deciding is explicit) */
.pms-db-decided { display: flex; flex-direction: column; gap: 0.45rem; }
.pms-decided-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.pms-badge-lg { font-size: 0.95rem; padding: 0.3rem 0.9rem; }
.pms-decided-line { margin: 0; font-size: 0.88rem; line-height: 1.5; }
.pms-decided-line strong { display: block; font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* score/band inputs folded away — secondary to the decision itself */
.pms-inputs-detail summary { cursor: pointer; font-size: 0.8rem; color: #9e9e9e; margin-top: 0.2rem; }
.pms-inputs-detail[open] summary { margin-bottom: 0.4rem; }

/* AI assessment card: empty state + inline re-run */
.pms-ai-empty p { margin: 0.3rem 0 0.6rem; }
.pms-ai-rerun { margin-left: auto; }

/* advance-refusal message rendered AT the Move-forward strip (the same _message also shows by Save) */
.phase-actions-error { margin: 0.5rem 0 0; }

/* ============================================================================
   Workspaces — role-based landing (chooser, topbar switcher, foundation homes)
   ============================================================================ */
.ws-chooser { max-width: 1000px; margin: 0 auto; }
/* Customer portal pointer on the workspace chooser — deliberately NOT a .ws-card: it isn't a
   workspace, and looking identical to one would imply staff can work in there. */
.ws-portal { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin-top: 1.5rem; padding: 0.9rem 1.1rem;
    border: 1px dashed var(--border); border-radius: 0.7rem;
    background: color-mix(in srgb, var(--fg) 2%, transparent); }
.ws-portal-main { display: flex; gap: 0.75rem; align-items: flex-start; min-width: 16rem; flex: 1; }
.ws-portal-ico { font-size: 1.3rem; line-height: 1.4; }
.ws-portal-main p { margin: 0.2rem 0 0; max-width: 60ch; }
.ws-portal-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.ws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.ws-card {
    display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none;
    background: #1c1c1c; border: 1px solid var(--border); border-radius: 6px; padding: 1.4rem;
    color: var(--fg); transition: transform var(--dur, 200ms) var(--ease-standard, ease), border-color var(--dur, 200ms), box-shadow var(--dur, 200ms);
}
.ws-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 34px rgba(0,0,0,0.32); text-decoration: none; }
.ws-card-ico { font-size: 1.8rem; color: var(--accent); }
.ws-card-ico svg { display: block; }
.ws-card-label { font-size: 1.1rem; font-weight: 700; }
.ws-card-tag { font-size: 0.85rem; color: var(--muted); line-height: 1.4; flex: 1; }
.ws-card-enter { font-size: 0.85rem; font-weight: 600; color: var(--accent-2); margin-top: 0.4rem; }

/* topbar switcher — pure <details> dropdown */
.ws-switcher { position: relative; }
.ws-switcher > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.ws-switcher > summary::-webkit-details-marker { display: none; }
.ws-switcher .ws-caret { font-size: 0.7rem; opacity: 0.8; }
.ws-menu {
    position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 60;
    width: 320px; background: #181818; border: 1px solid var(--border); border-radius: 5px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.5); padding: 0.4rem;
}
.ws-menu-title { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0.3rem 0.5rem; }
.ws-menu-item { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.5rem; border-radius: 4px; text-decoration: none; color: var(--fg); }
.ws-menu-item-form { margin: 0; }
.ws-menu-item-btn { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; }
.ws-menu-item:hover { background: rgba(255,255,255,0.05); text-decoration: none; }
.ws-menu-item.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ws-menu-ico { font-size: 1.2rem; line-height: 1.4; color: var(--accent); display: inline-flex; align-items: center; }
.ws-menu-ico svg { display: block; }
.roles-ws-ico { color: var(--accent); margin-right: .25rem; }
.ws-menu-text { display: flex; flex-direction: column; }
.ws-menu-text small { color: var(--muted); font-size: 0.76rem; line-height: 1.35; }

/* foundation-home KPIs + placeholder action cards */
/* Per-workspace journey strip (workspace home pages) — each workspace's OWN stages, numbered,
   connected by a rail. Read-only overview; colours come per-stage via --wj-accent. */
.wj-strip { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; margin: 0.2rem 0 1.4rem; }
.wj-stage {
    position: relative; display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 0.75rem; flex: 1 1 0; min-width: 130px;
    background: #1c1c1c; border: 1px solid var(--border); border-left: 3px solid var(--wj-accent, #3395e0);
}
.wj-stage:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.wj-stage:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.wj-stage + .wj-stage { border-left-width: 3px; }
.wj-num {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 1.35rem; height: 1.35rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700;
    font-variant-numeric: tabular-nums; color: #101010;
    background: var(--wj-accent, #3395e0);
}
.wj-label { font-size: 0.85rem; font-weight: 500; }

.ws-kpis { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.8rem 0 1.4rem; }
.ws-kpi { background: #1c1c1c; border: 1px solid var(--border); border-radius: 5px; padding: 0.9rem 1.3rem; min-width: 130px; }
.ws-kpi-n { display: block; font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ws-kpi-l { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ws-h2 { font-size: 1.25rem; margin: 0 0 0.7rem; }

/* Dynamic dashboard charts (Dealer Performance + BI) — dependency-free inline SVG,
   styled to match the .ws-kpi / .panel card language rather than a bolted-on library look. */
.mini-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 0.75rem; }
.mini-chart { background: #1c1c1c; border: 1px solid var(--border); border-radius: 5px; padding: 0.9rem 1.1rem 1rem; }
.mini-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.mini-chart-title { font-size: 0.85rem; font-weight: 600; }
.mini-chart-sub { font-size: 0.72rem; color: var(--muted); }
.mini-chart-empty { font-size: 0.82rem; margin: 0.5rem 0; }
.mini-chart-svg-wrap { width: 100%; }
.mini-chart-svg { width: 100%; height: 90px; display: block; overflow: visible; }
.mc-axis { stroke: var(--border); stroke-width: 0.4; }
.mc-target { stroke: #fbbf24; stroke-width: 0.6; stroke-dasharray: 2 1.5; }
.mc-bar { fill: var(--accent); transition: fill 0.15s; }
.mc-bar:hover { fill: var(--accent-2); }
.mc-line { fill: none; stroke: var(--accent-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.mc-dot { fill: var(--accent-2); }
.mini-chart-donut-wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mini-chart-donut { width: 96px; height: 96px; flex: none; }
.mc-donut-seg { stroke: #1c1c1c; stroke-width: 0.5; }
.mc-donut-hole { fill: #1c1c1c; }
.mini-chart-legend { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; max-height: 130px; overflow-y: auto; }
.mini-chart-legend li { display: flex; align-items: center; gap: 0.4rem; }
.mc-legend-label { color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-legend-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.mc-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }

.ws-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; }
.ws-action {
    display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem;
    background: #171717; border: 1px dashed var(--border); border-radius: 5px; opacity: 0.85;
}
.ws-action-ico { font-size: 1.4rem; }
.ws-action small { color: var(--muted); font-size: 0.82rem; line-height: 1.4; }

/* Vehicle Sales — new-sale form grid */
.vs-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.7rem 1rem; }
.vs-form label { display: flex; flex-direction: column; gap: 0.25rem; }
.vs-form label > span { font-size: 0.8rem; color: #9e9e9e; }

/* "Integration at this step" banner on the application form (per journey phase) */
.integration-banner {
    display: flex; gap: 0.7rem; align-items: flex-start;
    margin: 0.6rem 0 0.4rem; padding: 0.7rem 0.9rem;
    background: color-mix(in srgb, var(--accent) 10%, #181818);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: 5px;
}
.integration-ico { font-size: 1.2rem; line-height: 1.3; }
.integration-body { display: flex; flex-direction: column; gap: 0.35rem; }
.integration-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.integration-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.8rem; font-weight: 600; color: var(--fg);
    background: #1f1f1f; border: 1px solid var(--border); border-radius: 4px;
    padding: 0.18rem 0.6rem 0.18rem 0.4rem; cursor: help;
}
.integration-chip .ic-code {
    font-family: var(--mono); font-size: 0.7rem;
    background: var(--accent); color: #fff; border-radius: 4px; padding: 0.05rem 0.4rem;
}
/* Occurred: this interface has actually run for the open application. */
.integration-chip.done {
    border-color: color-mix(in srgb, #34d399 55%, var(--border));
    background: color-mix(in srgb, #34d399 12%, #1f1f1f);
    color: #a7f3d0;
}
.integration-chip.done .ic-code { background: #059669; }
.integration-chip .ic-done { color: #34d399; font-weight: 700; }
/* Untracked: the call happened in this phase but the step's blueprint doesn't list the interface. */
.integration-chip.untracked {
    border-color: color-mix(in srgb, #f59e0b 60%, var(--border));
    background: color-mix(in srgb, #f59e0b 12%, #1f1f1f);
    color: #fcd34d;
}
.integration-chip.untracked .ic-code { background: #b45309; }
.integration-chip .ic-warn { color: #f59e0b; }
.integration-untracked-note { font-size: 0.78rem; color: #fcd34d; }
.integration-untracked-note a { color: inherit; text-decoration: underline; }

.vs-form .vs-form-wide { grid-column: 1 / -1; }

/* Vehicle Sales — selected vehicle image + financing tile (revealed after a vehicle is chosen) */
.vs-selected { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 1rem; margin-top: 1rem; }
.vs-veh-tile { background: #1c1c1c; border: 1px solid var(--border); border-radius: 5px; padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.vs-car { width: 100%; max-width: 220px; color: #3395e0; }
.vs-veh-meta { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; }
.vs-veh-meta strong { font-size: 0.95rem; }
.vs-veh-price { font-size: 1.1rem; font-weight: 600; margin-top: 0.2rem; }
.vs-fin-tile { background: #1c1c1c; border: 1px solid var(--border); border-radius: 5px; padding: 1rem 1.1rem; }
.vs-fin-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.8rem; }
.vs-iface-tag { font-size: 0.7rem; color: #3395e0; background: rgba(51, 149, 224, 0.12); padding: 0.1rem 0.5rem; border-radius: 2px; }
.vs-fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem 1rem; }
.vs-fin-grid label { display: flex; flex-direction: column; gap: 0.25rem; }
.vs-fin-grid label > span { font-size: 0.8rem; color: #9e9e9e; }
.vs-deeplink { display: inline-block; margin-top: 0.2rem; font-size: 0.74rem; color: #b3d9f2; text-decoration: none; white-space: nowrap; }
.vs-deeplink:hover { text-decoration: underline; }
.vs-quote { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--border); transition: opacity 0.15s; }
.vs-quote.busy { opacity: 0.5; }
.vs-quote-main { font-size: 1.5rem; font-weight: 600; }
.vs-quote-sub { font-size: 0.82rem; }
.vs-fcs { font-size: 0.7rem; color: #9e9e9e; font-family: ui-monospace, monospace; margin-top: 0.3rem; }
@media (max-width: 720px) { .vs-selected { grid-template-columns: 1fr; } }

/* Vehicle Sales — convenience pickers above the configured capture form */
.vs-pickers { display: grid; grid-template-columns: 2fr 1fr; gap: 0.6rem; margin-bottom: 0.8rem; }
.vs-pickers label { display: flex; flex-direction: column; gap: 0.25rem; }
.vs-pickers label > span { font-size: 0.78rem; color: var(--muted, #9e9e9e); }
@media (max-width: 720px) { .vs-pickers { grid-template-columns: 1fr; } }

.vs-modeld-badge { display: inline-block; vertical-align: middle; margin-left: 0.6rem; padding: 0.15rem 0.55rem;
    border-radius: 999px; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
    background: rgba(63,217,155,0.14); color: #3fd99b; border: 1px solid rgba(63,217,155,0.35); }
.vs-h3 { font-size: 1rem; margin: 0 0 0.3rem; }
.vs-dealer-options { margin-bottom: 1rem; padding: 0.8rem 1rem; border: 1px solid var(--border, #3a3a3a); border-radius: 3px; }
.vs-option-picker { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0; flex-wrap: wrap; }
.vs-option-picker select { flex: 2 1 12rem; }
.vs-option-picker input { flex: 1 1 6rem; }
.vs-option-list { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.vs-option-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.5rem; border: 1px solid var(--border, #3a3a3a); border-radius: 2px; }
.vs-option-name { flex: 1 1 auto; }
.vs-option-price { font-variant-numeric: tabular-nums; color: var(--muted, #9e9e9e); }
.vs-option-total { margin: 0.4rem 0 0; font-size: 0.85rem; }

/* Vehicle Sales — interface simulation (Interfaces side panel) */
.vs-sim { margin-top: 0.6rem; border-top: 1px dashed var(--border, #2a3550); padding-top: 0.5rem; }
.vs-sim-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.vs-sim-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.vs-sim-pre { margin: 0.2rem 0 0; padding: 0.5rem 0.6rem; background: rgba(0,0,0,0.25); border-radius: 2px;
  font-size: 0.72rem; font-family: var(--mono); line-height: 1.35;
  white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }
@media (max-width: 720px) { .vs-sim-cols { grid-template-columns: 1fr; } }

/* Roles & permissions config (/admin/roles) */
.roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.5rem 1rem; }
.roles-check { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; background: #181818; cursor: pointer; }
.roles-check input { margin-top: 0.2rem; }
.roles-check span { display: flex; flex-direction: column; }
.roles-check small { color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.roles-permgroup { margin-bottom: 1rem; }
.roles-permgroup-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.4rem; }

/* ===== /admin/data-model — Standard Data Model ===== */
.dm-msg { font-size: 0.85rem; color: var(--accent, #3395e0); margin: 0.25rem 0 0.75rem; }
/* The data-model toolbar's action buttons: a horizontal row pushed to the right of the scope select
   (they were wrongly wrapped in .fld — a vertical label/field column — so they stacked + looked centred). */
.dm-actions-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-left: auto; }
/* Groups the export pair away from the view controls without a flex spacer — this row wraps, and a
   flex:1 spacer inside a wrapping row collapses to nothing on the line it happens to land on. */
.dm-sep { width: 1px; align-self: stretch; min-height: 1.1rem; background: var(--border, #3a3a3a);
    margin: 0 0.25rem; flex: none; }
/* .dm-check is otherwise only styled inside .dm-edit-grid, where it's a form row; in a toolbar it
   needs to sit inline with the buttons rather than stack label-over-input. */
.dm-actions-row .dm-check { display: flex; flex-direction: row; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; color: var(--muted, #929292); white-space: nowrap; flex: none; }
.auth-input.sm { padding: 0.2rem 0.4rem; font-size: 0.82rem; }
.dm-entity { font-size: 1rem; margin: 1.2rem 0 0.4rem; text-transform: capitalize; }
.dm-workspace { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--brand, #0a7); margin: 2rem 0 0.2rem; padding-bottom: 0.3rem;
  border-bottom: 2px solid color-mix(in srgb, var(--brand, #0a7) 30%, transparent); }
.dm-workspace:first-of-type { margin-top: 0.6rem; }
.dm-workspace .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Proposal Management admin hub */
.pma-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.9rem; margin: 1.2rem 0 1.6rem; }
.pma-link { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.15rem; border: 1px solid var(--border);
  border-radius: 6px; background: #1c1c1c; text-decoration: none; transition: border-color .12s, background .12s; }
.pma-link:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: #212121; }
.pma-link-t { font-weight: 700; color: var(--fg); }
.pma-link-d { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.pma-ai h2 { margin: 0 0 0.3rem; }
.pma-check { display: flex; align-items: center; gap: 0.55rem; margin: 0.6rem 0; cursor: pointer; }
.pma-check.sm { font-size: 0.86rem; margin: 0.3rem 0; }
.pma-check input { width: 1rem; height: 1rem; }
.pma-field { margin: 1rem 0; display: flex; flex-direction: column; gap: 0.35rem; max-width: 640px; }
.pma-field textarea { resize: vertical; font-family: inherit; }
.pma-context { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.1rem 1.2rem; }
.pma-dim { opacity: 0.5; }
.dm-table td code, .dm-proposals td code { font-size: 0.82rem; }
/* Fixed layout so every entity table lines its columns up identically. 6 columns: the description
   stacks UNDER the label (same cell) so it doesn't steal a column + crush Type/Req/PII/actions when
   the AI drawer is pinned. min-width + a scroll wrapper guarantees nothing clips on a squeezed page. */
.dm-table-wrap { overflow-x: auto; }
.dm-table { table-layout: fixed; width: 100%; min-width: 760px; }
.dm-table th:nth-child(1), .dm-table td:nth-child(1) { width: 22%; }
.dm-table th:nth-child(2), .dm-table td:nth-child(2) { width: 36%; }
.dm-table th:nth-child(3), .dm-table td:nth-child(3) { width: 14%; }
.dm-table th:nth-child(4), .dm-table td:nth-child(4) { width: 6%; text-align: center; }
.dm-table th:nth-child(5), .dm-table td:nth-child(5) { width: 6%; text-align: center; }
/* The actions column is a FIXED pixel width (not a %): a % column squeezes when the AI drawer pins
   or the optional Value column appears, wrapping/clipping the buttons. Class-based (not nth-child)
   because the Value column, when shown, shifts every later column index. */
.dm-table th.dm-val-col, .dm-table td.dm-val-col { width: 12%; }
.dm-table th.dm-actions-col, .dm-table td.dm-actions-col { width: 182px; }
.dm-table td code { overflow-wrap: anywhere; }
.dm-table td { vertical-align: top; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.dm-path-line { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.dm-labelcell .dm-label { font-size: 0.88rem; margin-bottom: 0.25rem; }
.dm-desc, .dm-desc-text { width: 100%; }
.dm-desc { min-height: 1.9rem; }
.dm-desc-text { font-style: italic; }
/* Right-aligned, never wraps; every icon action (and the 🔒 placeholder) occupies an IDENTICAL
   30px slot so the Edit button's left edge lines up across rows regardless of which icons follow. */
.dm-row-actions { display: flex; gap: 0.3rem; justify-content: flex-end; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.dm-row-actions > * { flex: none; }
.dm-row-actions .dm-act-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; padding-left: 0; padding-right: 0;
}
.dm-locked { font-size: 0.8rem; opacity: 0.55; cursor: help; }
/* storage badges */
.dm-store { display: inline-block; font-size: 0.66rem; padding: 0.05rem 0.4rem; border-radius: 4px; margin-top: 0.25rem;
    border: 1px solid var(--border); white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.dm-store-column { background: rgba(54, 179, 126, 0.16); color: #4ed99a; border-color: rgba(54,179,126,0.4); }
.dm-store-bag { background: rgba(255, 184, 77, 0.14); color: #f0b65a; border-color: rgba(255,184,77,0.35); }
.dm-store-computed { background: rgba(51, 149, 224, 0.14); color: #b3d9f2; border-color: rgba(51,149,224,0.35); }
.dm-store-transient { background: rgba(255,255,255,0.06); color: var(--muted); }
/* per-workspace journey editor — rules are scoped under .wj-flow because the read-only
   WorkspaceJourneyStrip uses the same .wj-stage/.wj-label class names; unscoped they clobbered
   the strip's row layout (numbers drifting away from their labels on PM/CM). */
.aj-journey-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wj-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; margin: 1rem 0; }
.wj-flow .wj-stage { border: 1px solid var(--border); border-left: 4px solid var(--accent-2); border-radius: 3px; padding: 0.5rem 0.6rem; min-width: 12rem; display: flex; flex-direction: column; gap: 0.25rem; }
.wj-flow .wj-stage-row { display: flex; align-items: center; gap: 0.3rem; }
.wj-flow .wj-label { flex: 1; min-width: 6rem; }
.wj-color { width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid var(--border); border-radius: 2px; background: transparent; cursor: pointer; }
.wj-key { font-size: 0.66rem; font-family: var(--mono, monospace); }
.wj-arrow { align-self: center; color: var(--muted); }
/* journey state-machine editor */
.jm-diagram-wrap { border: 1px solid var(--border); border-radius: 4px; margin: 0.8rem 0 1.2rem; overflow: hidden; }
.jm-diagram-tools { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); }
.jm-diagram-tools .spacer, .jm-diagram-tools .muted { margin-right: auto; }
/* position:relative + overflow:hidden required — the abs-positioned .er-pan escapes otherwise
   (and never contributed height, so overflow:auto had nothing to scroll anyway). */
.jm-diagram-host { height: 56vh; padding: 0.8rem; overflow: hidden; position: relative; touch-action: none; }
.jm-table .jm-from { white-space: nowrap; }
.jm-terminal { margin-left: 0.4rem; font-size: 0.66rem; padding: 0.05rem 0.4rem; border-radius: 4px; background: rgba(255,255,255,0.06); color: var(--muted); }
.jm-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.jm-chip { font-size: 0.72rem; padding: 0.12rem 0.5rem; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; }
.jm-chip.on { background: rgba(51,149,224,0.18); color: #b3d9f2; border-color: rgba(51,149,224,0.4); }
.jm-chip.ro { cursor: default; opacity: 0.6; }
.jm-chip:not(.ro):hover { border-color: rgba(51,149,224,0.5); }
.jm-rowact { white-space: nowrap; display: flex; align-items: center; gap: 0.4rem; }
/* "mapped to" — which interface(s) + param consume this field */
.dm-mapped { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.dm-mapped-chip { font-size: 0.66rem; padding: 0.05rem 0.4rem; border-radius: 4px; white-space: nowrap;
    background: rgba(51,149,224,0.12); color: #b3d9f2; border: 1px solid rgba(51,149,224,0.3); text-decoration: none; }
.dm-mapped-chip:hover { background: rgba(51,149,224,0.22); }
/* payload generator */
.dm-payload-panel { padding: 0.85rem 1rem; margin: 0.75rem 0; }
.dm-hint { margin: 0.5rem 0 0.2rem; max-width: 90ch; line-height: 1.5; }
.dm-history { max-width: 680px; }
.dm-history table { width: 100%; margin-top: 0.5rem; }
.dm-audit-created { color: #4caf50; font-weight: 600; }
.dm-audit-updated { color: #ffb74d; font-weight: 600; }
.dm-audit-deleted { color: #ef5350; font-weight: 600; }
.dm-payload-controls { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin: 0.4rem 0; }
.dm-payload-tabs { display: flex; gap: 0.3rem; margin: 0.5rem 0 0.3rem; }
.dm-payload-json { background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 3px;
    padding: 0.8rem 1rem; font-size: 0.8rem; max-height: 480px; overflow: auto; white-space: pre; }
.dm-proposals { padding: 0.85rem 1rem; margin: 0.75rem 0; }
.dm-proposals-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.dm-proposals-head .spacer { flex: 1; }
.dm-edit-backdrop { position: fixed; inset: 0; background: rgba(4, 6, 12, 0.55); z-index: 1190; }
.dm-edit { position: fixed; inset: 0; margin: auto; z-index: 1200; width: min(620px, 94vw); height: max-content; max-height: 88vh; overflow: auto; padding: 1rem 1.2rem; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 30px 90px -24px rgba(0,0,0,0.75); }
.dm-edit-head { display: flex; align-items: center; margin-bottom: 0.8rem; }
.dm-edit-head .spacer { flex: 1; }
.dm-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 0.9rem; }
.dm-edit-grid .dm-wide { grid-column: 1 / -1; }
.dm-edit-grid .dm-check { flex-direction: row; align-items: center; gap: 0.4rem; grid-column: 1 / -1; }
.dm-edit-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }

/* ---- SDM Explorer (three-pane /admin/data-model) ---- */
.sdmx-search { max-width: 340px; }
.sdmx-body { display: grid; grid-template-columns: 232px minmax(0, 1fr) 320px; margin-top: 1rem; padding: 0; overflow: hidden; }
@media (max-width: 1100px) { .sdmx-body { grid-template-columns: 200px minmax(0, 1fr); } .sdmx-rail { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--border); max-height: none; } }
@media (max-width: 760px) { .sdmx-body { grid-template-columns: 1fr; } .sdmx-tree { border-right: none; border-bottom: 1px solid var(--border); max-height: 260px; } }
.sdmx-tree { border-right: 1px solid var(--border); padding: 0.6rem 0.45rem; overflow-y: auto; max-height: 72vh; }
.sdmx-tree-group { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); padding: 0.6rem 0.6rem 0.25rem; }
.sdmx-tree-item {
    display: flex; align-items: center; gap: 0.4rem; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; color: var(--fg); padding: 0.3rem 0.6rem; border-radius: 7px; font-size: 0.83rem;
}
.sdmx-tree-item:hover { background: rgba(140,150,170,0.1); }
.sdmx-tree-item.on { background: rgba(0,120,214,0.16); color: var(--accent-2); font-weight: 600; }
.sdmx-tree-item code { font-size: 0.8rem; }
.sdmx-coll { color: var(--muted); font-family: ui-monospace, monospace; font-size: 0.72rem; }
.sdmx-ext { width: 7px; height: 7px; border-radius: 50%; background: #7dd3a8; flex: none; }
.sdmx-count { margin-left: auto; font-size: 0.66rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Tree view drops the entity rail on the left — the tree IS the navigation. */
.sdmx-body--tree { grid-template-columns: minmax(0, 1fr) 320px; }
/* Diagram / board / C# / contracts fill the panel on their own — one column, or the grid keeps
   holding space for a tree and a rail that aren't rendered. */
.sdmx-body--wide { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .sdmx-body--tree { grid-template-columns: minmax(0, 1fr); } }
.sdmx-viewtoggle { display: inline-flex; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.sdmx-viewbtn { background: none; border: 0; color: var(--muted); cursor: pointer;
    padding: 0.32rem 0.7rem; font-size: 0.78rem; font-family: inherit; }
.sdmx-viewbtn:hover { color: var(--fg); background: rgba(140, 150, 170, 0.1); }
.sdmx-viewbtn.on { background: rgba(0, 120, 214, 0.16); color: var(--accent-2); font-weight: 600; }
.sdmx-treeview { max-height: 72vh; overflow-y: auto; }
.sdmx-treehint { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding-bottom: 0.6rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.sdmx-treeall { margin-left: auto; }
.sdmx-treerow { font-size: 0.83rem; }
/* Base left inset for the model tree's rows — the per-level indent now comes from .sdmp-guide
   columns, not an inline padding-left. */
.sdmx-treeview .sdmp-node { padding-left: 0.35rem; }
/* Market-owned rows tint green here exactly as they do in the entity table. */
.sdmx-treerow.sdmx-mkt { background: rgba(125, 211, 168, 0.07); }

/* ---- the model blueprint: composition branches above the per-entity field rows ---------------
   Branches read as structure, fields read as detail, so the branch row is heavier and the field
   rows underneath keep the lighter treatment they already had. */
.sdmb-branch { font-size: 0.86rem; padding-top: 0.24rem; padding-bottom: 0.24rem; }
.sdmb-name { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 0;
    padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.sdmb-name[disabled] { cursor: default; opacity: 0.75; }
.sdmb-name:hover:not([disabled]) strong { text-decoration: underline; }
/* ▤ object · ⧉ collection · ○ nothing models it yet */
.sdmb-ico { font-size: 0.82rem; opacity: 0.75; width: 1rem; display: inline-block; text-align: center; }
.sdmb-note { font-size: 0.74rem; margin-left: 0.55rem; }
/* Reference edges (RefEntity) an entity's own fields carry — the graph composition can't draw,
   since a root's connections to other roots are pointers, not ownership. Wraps independently of
   the row it sits in so a heavily-connected entity (Case: application/contract/party/parentCase)
   doesn't force the whole branch row wider. */
.sdmb-refs { display: inline-flex; flex-wrap: wrap; gap: 0.05rem 0.5rem; margin-left: 0.6rem; max-width: 22rem; }
.sdmb-entity { font-size: 0.7rem; color: #b3d9f2; white-space: nowrap; }
/* A gap is a real finding, not an error — amber reads as "worth knowing", red would read as broken. */
.sdmb-gap { font-size: 0.68rem; color: #e0b154; border: 1px dashed rgba(224, 177, 84, 0.45);
    border-radius: 0.4rem; padding: 0.02rem 0.34rem; white-space: nowrap; }
.sdmb-branch--gap .sdmb-name strong { opacity: 0.72; font-weight: 500; }

/* Projected values inline in the tree, matching the entity table's value column. */
.sdmx-treeval { font-size: 0.72rem; font-family: var(--mono, ui-monospace, monospace);
    color: var(--fg); background: rgba(125, 211, 168, 0.1); border-radius: 0.35rem;
    padding: 0.02rem 0.36rem; max-width: 22ch; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.sdmx-treeval.sdmx-val-empty { color: var(--muted); background: none; }
.sdmx-mid { padding: 0.9rem 1rem; overflow-x: auto; min-width: 0; }
.sdmx-mid .dm-entity:first-of-type { margin-top: 0; }
/* entity names are code-cased paths — don't let .dm-entity's capitalize mangle them or the counts */
.sdmx-mid .dm-entity { text-transform: none; }
.sdmx-enthead .dm-entity { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.sdmx-table .dm-path-line code { white-space: nowrap; }
.sdmx-ws-chip, .sdmx-it-chip {
    font-size: 0.64rem; border-radius: 4px; padding: 0.08rem 0.55rem; font-weight: 600; letter-spacing: 0.02em;
    border: 1px solid var(--border); color: var(--muted); background: rgba(140,150,170,0.08);
}
.sdmx-it-chip { border-color: rgba(125,211,168,0.5); color: #7dd3a8; background: rgba(125,211,168,0.08); }
.sdmx-usedby { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin: 0.15rem 0 0.7rem; }
.sdmx-usedby-note { font-size: 0.72rem; }

/* The entity layer on the entity header: kind, owner, what it owns, context, backing table. This
   strip is the answer to "what IS this thing" — a question the model could not answer at all until
   composition became a stored row rather than a switch statement in SdmModelViews. */
.sdmx-entmeta { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin: 0.2rem 0 0.35rem; }
.sdmx-entmeta .spacer { flex: 1 1 auto; }
.sdmx-entmeta code { font-size: 0.74rem; }
.sdmx-ownerlink { background: none; border: 1px solid var(--border, #3a3a3a); border-radius: 99px;
    color: #ff8f6b; font-size: 0.72rem; padding: 0.06rem 0.5rem; cursor: pointer; align-self: center; }
.sdmx-ownerlink code { color: inherit; background: none; padding: 0; }
.sdmx-ownerlink:hover { border-color: #ff8f6b; }
.sdmx-entnote { margin: 0 0 0.7rem; max-width: 78ch; line-height: 1.45; }
.sdmx-table tbody tr { cursor: pointer; }
.sdmx-table tbody tr.sdmx-sel td { background: rgba(0,120,214,0.10); }
.sdmx-table tbody tr.sdmx-mkt td { background: rgba(125,211,168,0.05); }
.sdmx-table tbody tr.sdmx-sel.sdmx-mkt td { background: rgba(0,120,214,0.12); }
.sdmx-reflink { background: none; border: none; color: var(--accent-2); cursor: pointer; font: inherit; padding: 0; }
.sdmx-reflink:hover { text-decoration: underline; }
.sdmx-val { font-family: ui-monospace, monospace; font-size: 0.76rem; color: #34d399; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdmx-val-empty { color: var(--muted); opacity: 0.55; }
.sdmx-rail { border-left: 1px solid var(--border); display: flex; flex-direction: column; max-height: 72vh; min-width: 0; }
.sdmx-rtabs { display: flex; border-bottom: 1px solid var(--border); }
.sdmx-rtab {
    flex: 1; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
    color: var(--muted); font: inherit; font-size: 0.78rem; padding: 0.55rem 0.2rem;
}
.sdmx-rtab:hover { color: var(--fg); }
.sdmx-rtab.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.sdmx-rbody { padding: 0.8rem 0.9rem; overflow-y: auto; font-size: 0.83rem; flex: 1; }
.sdmx-loadbar { display: flex; gap: 0.45rem; align-items: center; margin: 0.5rem 0; }
.sdmx-loadbar input { flex: 1; min-width: 0; }
.sdmx-data-ok { color: #34d399; display: flex; align-items: center; gap: 0.5rem; }
.sdmx-rrow { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0; border-bottom: 1px solid rgba(140,150,170,0.12); }
.sdmx-wu-note { margin-top: 0.6rem; }
.sdmx-payload-controls { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.4rem 0; }
.sdmx-pre { max-height: 320px; font-size: 0.72rem; }

/* ===== /admin/data-model/mappings — interface ↔ SDM ===== */
.sdmmap-card { padding: 0.85rem 1rem; margin: 0.8rem 0; }
.sdmmap-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.sdmmap-dir { font-size: 0.72rem; padding: 0.1rem 0.55rem; border-radius: 4px; border: 1px solid var(--border); white-space: nowrap; }
.sdmmap-dir.dir-out { background: rgba(51, 149, 224, 0.14); color: #b3d9f2; }
.sdmmap-dir.dir-in { background: rgba(54, 179, 126, 0.16); color: #4ed99a; }
.sdmmap-picker .sdmmap-pick-row { cursor: pointer; }
.sdmmap-picker .sdmmap-pick-row:hover { background: rgba(51, 149, 224, 0.08); }
.sdmmap-detail { margin-top: 0.4rem; }
.sdmmap-compose { margin: 0.6rem 0; padding: 0.6rem; border: 1px solid var(--border); border-radius: 3px; background: rgba(255,255,255,0.02); }
.sdmmap-compose-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sdmmap-compose-bar .auth-input { max-width: 320px; }
.sdmmap-compose-out { margin: 0.6rem 0 0; max-height: 360px; overflow: auto; font-size: 0.78rem; line-height: 1.4;
    background: var(--code-bg, rgba(0,0,0,0.25)); border-radius: 2px; padding: 0.6rem; }
.sdmmap-custom-badge { font-size: 0.68rem; padding: 0.05rem 0.45rem; border-radius: 4px; white-space: nowrap;
    background: rgba(54,179,126,0.16); color: #4ed99a; border: 1px solid rgba(54,179,126,0.4); }
.sdmmap-readonly { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; opacity: 0.92; }
.sdmmap-ro-row { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem;
    padding: 0.25rem 0; border-bottom: 1px solid var(--border); }
.sdmmap-ro-row code { font-size: 0.8rem; }
/* ---- Mapping row (redesigned): the mapping reads in the data-flow direction on one line, with the
   SDM selector centred; ƒ/open/comment drop to a quiet line below. ---- */
.sdmmap-row2 { padding: 0.65rem 0; border-bottom: 1px solid rgba(140, 150, 170, 0.10); }
.sdmmap-row2.is-mapped { background: linear-gradient(90deg, rgba(51,149,224,0.05), transparent 60%); }
.sdmmap-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.7rem; }
.sdmmap-wire { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 0; }
.sdmmap-wire code { font-size: 0.92rem; overflow-wrap: anywhere; }
/* long enum/type hints truncate instead of overrunning; full value on hover. */
.sdmmap-hint { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; color: var(--muted); }
.sdmmap-flow { color: #b3d9f2; font-weight: 700; text-align: center; }
.sdmmap-sdm { min-width: 0; }
.sdmmap-formula { width: 100%; font-family: ui-monospace, monospace; font-size: 0.9rem; resize: vertical;
    line-height: 1.5; min-height: 3.4rem; padding: 0.5rem 0.6rem; }
/* meta row mirrors the mapping line's 3-column grid so the ƒ/open/comment controls sit exactly
   under the SDM cell: column 1 for a request (SDM on the left), column 3 for a response (SDM on
   the right). They never bleed across the interface column. */
.sdmmap-meta { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.7rem; margin-top: 0.3rem; }
.sdmmap-meta.on-left .sdmmap-meta-inner { grid-column: 1; }
.sdmmap-meta.on-right .sdmmap-meta-inner { grid-column: 3; }
.sdmmap-meta-inner { display: flex; align-items: flex-start; gap: 0.4rem; min-width: 0; }
.sdmmap-comment { flex: 1; font-size: 0.86rem; min-width: 0; min-height: 2.6rem; line-height: 1.4;
    resize: vertical; font-family: inherit; }
.lp-btn.xs { padding: 0.15rem 0.5rem; font-size: 0.74rem; }
.auth-input.xs { min-height: 1.9rem; padding: 0.25rem 0.5rem; font-size: 0.78rem; }

/* the nesting-aware SDM path picker (replaces the flat <select>) */
.sdmmap-picker { position: relative; }
.sdmmap-pickbtn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
    padding: 0.4rem 0.6rem; border-radius: 7px; border: 1px solid var(--border); background: #1c1c1c;
    color: var(--fg, #e6e9f0); font-family: ui-monospace, monospace; font-size: 0.9rem; cursor: pointer; text-align: left; }
.sdmmap-pickbtn { padding: 0.55rem 0.7rem; }
.sdmmap-pickbtn:hover { border-color: rgba(51, 149, 224, 0.6); }
.sdmmap-pickbtn.empty { color: var(--muted); font-family: inherit; font-style: italic; }
.sdmmap-picker.open .sdmmap-pickbtn { border-color: rgba(51, 149, 224, 0.9); }
.sdmmap-pickval { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdmmap-caret { color: var(--muted); flex: none; }
.sdmmap-tree-pop { position: absolute; z-index: 40; top: calc(100% + 3px); left: 0; right: 0; min-width: 26rem;
    background: #181818; border: 1px solid rgba(51, 149, 224, 0.5); border-radius: 4px; padding: 0.4rem;
    box-shadow: 0 12px 34px rgba(0,0,0,0.5); }
.sdmmap-tree-search { width: 100%; margin-bottom: 0.35rem; }
.sdmmap-tree { max-height: 24rem; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.sdmmap-branch { font-size: 0.82rem; color: #9e9e9e; font-weight: 600; padding: 0.25rem 0.4rem; letter-spacing: 0.02em; }
.sdmmap-leaf { display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left; border: none;
    background: transparent; color: var(--fg, #e6e9f0); font-size: 0.88rem; padding: 0.35rem 0.5rem; border-radius: 2px; cursor: pointer; }
.sdmmap-leaf:hover { background: rgba(51, 149, 224, 0.15); }
.sdmmap-leaf.sel { background: rgba(51, 149, 224, 0.28); }
.sdmmap-leaf.clear { color: var(--muted); font-style: italic; }
.sdmmap-seg { font-family: ui-monospace, monospace; }
.sdmmap-leaf-type { flex: none; margin-left: auto; }
.sdmmap-pii { flex: none; }
/* formula edit/test side panel */
.fx-panel { display: flex; flex-direction: column; gap: 0.9rem; }
.fx-code { font-family: ui-monospace, monospace; font-size: 0.9rem; line-height: 1.5; resize: vertical; }
.fx-ai { background: rgba(51,149,224,0.08); border: 1px solid var(--border); border-radius: 3px; padding: 0.55rem 0.7rem; }
.fx-ai-row { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.fx-ai-row input { flex: 1; }
.fx-run { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.fx-result { font-family: ui-monospace, monospace; font-size: 0.85rem; color: #4ed99a; }
.fx-mode { display: flex; gap: 0.3rem; }
/* version history panel */
.hist { display: flex; flex-direction: column; gap: 0.6rem; }
.hist-rev { border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.6rem; }
.hist-rev-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.hist-rev-body { display: flex; flex-direction: column; gap: 0.15rem; }
.hist-row { font-size: 0.8rem; }
.hist-row code { font-size: 0.76rem; }
.fx-snips { display: flex; flex-direction: column; gap: 0.3rem; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0.3rem; }
.fx-chip { text-align: left; padding: 0.2rem 0.5rem; border: 1px solid var(--border); border-radius: 2px;
    background: rgba(255,255,255,0.03); cursor: pointer; max-width: 100%; overflow: hidden; }
.fx-chip:hover { background: rgba(51,149,224,0.14); border-color: rgba(51,149,224,0.4); }
.fx-chip code { font-family: ui-monospace, monospace; font-size: 0.74rem; white-space: nowrap; }
/* AI mapping wizard */
.wiz { display: flex; flex-direction: column; gap: 0.55rem; }
.wiz-prop { border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.6rem; }
.wiz-prop.wiz-skip { opacity: 0.5; }
.wiz-prop-head { display: flex; align-items: center; gap: 0.5rem; }
.wiz-prop-head code { font-size: 0.82rem; }
.wiz-acc { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--muted); }
.wiz-q { font-size: 0.82rem; margin: 0.35rem 0 0.3rem; }
.wiz-opts { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.wiz-val { font-size: 0.85rem; margin-top: 0.3rem; }
.wiz-val code { font-size: 0.82rem; }
.wiz-trig { font-size: 0.82rem; padding: 0.4rem 0.6rem; background: rgba(51,149,224,0.08); border: 1px solid var(--border); border-radius: 3px; }
.lp-btn.on { background: rgba(51, 149, 224, 0.22); color: #b3d9f2; }
.sdmmap-block { margin: 0.7rem 0 0.2rem; }
.sdmmap-block-title { display: flex; align-items: baseline; gap: 0.6rem; margin: 1.15rem 0 0.55rem;
    padding-bottom: 0.35rem; border-bottom: 1px solid rgba(179, 217, 242, 0.22); }
.sdmmap-block-name { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--accent, #b3d9f2); }
.sdmmap-block-dir { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--muted); }
.sdmmap-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.4rem 0.8rem; align-items: center; }
.sdmmap-colhead { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
    padding-bottom: 0.25rem; border-bottom: 1px solid var(--border); }
.sdmmap-arrow { color: var(--muted); text-align: center; }
.sdmmap-param code { font-size: 0.82rem; overflow-wrap: anywhere; }
.sdmmap-sel { width: 100%; }
.sdmmap-fires { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.7rem;
    padding: 0.5rem 0.7rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 3px; }
.sdmmap-fires-lbl { display: flex; align-items: center; gap: 0.4rem; }
.sdmmap-fires-lbl > span { font-size: 0.8rem; white-space: nowrap; }
.sdmmap-fires-paths { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sdmmap-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; }
.sdmmap-chip code { font-size: 0.78rem; }

/* calculation-panel glyph (inline SVG replacing the abacus emoji) */
.form-calc-ico { width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-right: 0.15em; color: #b3d9f2; }

/* form editor: full-height raw-JSON panel ({ } JSON toolbar toggle) */
.fc-jsonpanel { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; min-height: 0; }
.fc-jsonpanel-bar { display: flex; align-items: center; gap: 0.4rem; }
.fc-jsonpanel-code { flex: 1; min-height: 60vh; width: 100%; font-size: 0.85rem; line-height: 1.5;
    resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto; }

/* form editor: tab management (per-section select + tab-bar rename/dissolve + count chips) */
.fe-tab-new { display: inline-flex; align-items: center; gap: 0.3rem; }
.fe-tab-count { font-size: 0.66rem; font-weight: 600; padding: 0.02rem 0.35rem; margin-left: 0.25rem;
    border-radius: 4px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); }

/* form editor: configurable customer card inputs on the summary designer */
.fc-cust-label { max-width: 130px; font-size: 0.72rem; padding: 0.2rem 0.4rem; min-height: 1.7rem; }

/* form editor: "＋ from SDM" picker + portable JSON import panel */
.fc-sdmpick { margin: 0.5rem 0 0.3rem; padding: 0.6rem 0.7rem; border: 1px solid rgba(179,217,242,0.35);
    border-radius: 4px; background: rgba(51,149,224,0.06); }
.fc-sdmpick-h { display: flex; align-items: center; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.4rem; }
.fc-sdmpick-list { max-height: 18rem; overflow: auto; display: flex; flex-direction: column; gap: 1px; margin-bottom: 0.5rem; }
.fc-sdmpick-grp { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9e9e9e;
    font-weight: 700; padding: 0.4rem 0.2rem 0.15rem; }
.fc-sdmpick-row { display: flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; padding: 0.2rem 0.3rem;
    border-radius: 2px; cursor: pointer; }
.fc-sdmpick-row:hover { background: rgba(51,149,224,0.10); }
.fc-sdmpick-row.bound { opacity: 0.55; cursor: default; }
.fc-sdmpick-row code { font-size: 0.82rem; }
.fc-import { margin: 0.6rem 0; padding: 0.7rem 0.8rem; border: 1px solid rgba(179,217,242,0.4);
    border-radius: 4px; background: rgba(51,149,224,0.06); }
.fc-export-opts { display: flex; flex-direction: column; gap: 0.35rem; }
.fc-export-h { font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.fc-export-chip { display: flex; align-items: baseline; gap: 0.45rem; font-size: 0.86rem; cursor: pointer; }
.fc-export-chip code { font-size: 0.82rem; }
.fc-import-staged { margin: 0.4rem 0 0.6rem; padding: 0.45rem 0.7rem; font-size: 0.84rem;
    border: 1px dashed rgba(240,182,90,0.5); border-radius: 3px; background: rgba(255,184,77,0.08); color: #f0b65a; }
.fc-import-h { font-size: 0.84rem; margin-bottom: 0.45rem; }
.fc-import textarea { width: 100%; font-family: ui-monospace, monospace; font-size: 0.82rem; }

/* mapping-by-convention hint: the param auto-binds by name at runtime */
.sdmmap-auto { flex: none; font-size: 0.76rem; color: #8fd6ae; white-space: nowrap; padding: 0.15rem 0.5rem;
    border: 1px dashed rgba(54,179,126,0.45); border-radius: 4px; background: rgba(54,179,126,0.08); }
.sdmmap-auto code { font-size: 0.74rem; color: #4ed99a; }

/* "Where it's used →" quick-links on the interface editor */
.iface-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem;
    padding: 0.45rem 0.6rem; background: rgba(51,149,224,0.06); border: 1px solid var(--border); border-radius: 3px; }
.iface-links-lbl { font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-right: 0.15rem; }

/* ---- rich "Find an SDM path" finder panel ---- */
.find { display: flex; flex-direction: column; gap: 0.8rem; }
.find-lead { font-size: 0.86rem; color: var(--muted); margin: 0; line-height: 1.5; }
.find-lead code { font-size: 0.84rem; color: var(--fg, #e6e9f0); }
.find-tool { background: rgba(51,149,224,0.07); border: 1px solid var(--border); border-radius: 4px; padding: 0.6rem 0.7rem; }
.find-tool-h { font-size: 0.82rem; font-weight: 600; margin-bottom: 0.45rem; }
.find-row-input { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.find-row-input input { flex: 1; min-width: 12rem; }
.find-app-on { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; padding: 0.15rem 0.5rem;
    border-radius: 4px; background: rgba(54,179,126,0.16); color: #4ed99a; border: 1px solid rgba(54,179,126,0.4); }
.find-app-x { border: none; background: none; color: inherit; cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0; }
.find-hits { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; }
.find-hit { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; cursor: pointer;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(179,217,242,0.35); border-radius: 7px; padding: 0.4rem 0.55rem; }
.find-hit:hover { background: rgba(51,149,224,0.16); border-color: rgba(51,149,224,0.6); }
.find-hit-star { color: #f0c56a; flex: none; }
.find-hit code { font-size: 0.88rem; }
.find-search { width: 100%; }
.find-list { display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow: auto;
    border: 1px solid var(--border); border-radius: 4px; padding: 0.35rem; }
.find-grp { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9e9e9e; font-weight: 700;
    padding: 0.5rem 0.4rem 0.25rem; }
.find-r { display: flex; flex-direction: column; gap: 0.2rem; width: 100%; text-align: left; border: 1px solid transparent;
    background: transparent; color: var(--fg, #e6e9f0); border-radius: 7px; padding: 0.45rem 0.55rem; cursor: pointer; }
.find-r:hover { background: rgba(51,149,224,0.12); }
.find-r.sel { background: rgba(51,149,224,0.24); border-color: rgba(51,149,224,0.5); }
.find-r.clear { color: var(--muted); font-style: italic; font-size: 0.85rem; }
.find-r-main { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.find-r-main code { font-size: 0.9rem; font-weight: 600; }
.find-type { font-size: 0.72rem; color: var(--muted); padding: 0.05rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; }
.find-pii { font-size: 0.7rem; color: #f0b65a; }
.find-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
.find-enum { font-size: 0.76rem; color: var(--muted); }
.find-enum code { font-size: 0.74rem; }
.find-r-val { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.8rem; }
.find-r-val code { font-size: 0.82rem; color: #b2b2b2; }
.find-r-val.is-live code { color: #4ed99a; }
.find-val-lbl { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.find-r-val.is-live .find-val-lbl { color: #4ed99a; }
.find-val.live { font-size: 0.8rem; color: #4ed99a; margin-left: auto; font-family: ui-monospace, monospace; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

/* ── Interface call inspector (live debug console for the form→API firing seam) ─────────── */
.ic-fab {
    position: fixed; left: 1rem; bottom: 1rem; z-index: 1200;
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.7rem; border-radius: 4px; cursor: pointer;
    background: #181818; border: 1px solid var(--border); color: var(--fg);
    font-size: 0.82rem; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.8);
}
.ic-fab:hover { border-color: var(--accent); }
.ic-fab.on { border-color: var(--accent); background: #1f1f1f; }
.ic-fab-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem;
    height: 1.25rem; padding: 0 0.35rem; border-radius: 4px; font-size: 0.72rem;
    background: var(--accent); color: #fff;
}
.ic-panel {
    position: fixed; left: 1rem; bottom: 3.4rem; z-index: 1200;
    width: min(560px, calc(100vw - 2rem)); max-height: min(72vh, 720px);
    display: flex; flex-direction: column;
    background: #141414; border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9); overflow: hidden;
}
.ic-head {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border); background: #121212;
}
.ic-head-sub { color: var(--muted); font-size: 0.76rem; }
.ic-head-actions { margin-left: auto; display: inline-flex; gap: 0.3rem; }
.ic-body { overflow-y: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ic-empty, .ic-none { color: var(--muted); font-size: 0.82rem; margin: 0.4rem; }
.ic-none { margin: 0.2rem 0; }
.ic-call { border: 1px solid var(--border); border-radius: 4px; background: #181818; overflow: hidden; }
.ic-call.err { border-color: #7f1d1d; }
.ic-call > summary {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; cursor: pointer;
    list-style: none; font-size: 0.82rem;
}
.ic-call > summary::-webkit-details-marker { display: none; }
.ic-pill {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem;
    padding: 0.05rem 0.35rem; border-radius: 2px; font-size: 0.72rem; font-weight: 600;
    background: #14331f; color: #6ee7a8;
}
.ic-pill.err { background: #3a1414; color: #fca5a5; }
.ic-verb { font-family: ui-monospace, monospace; font-size: 0.72rem; color: var(--accent-2); }
.ic-code { font-weight: 600; }
.ic-name { color: var(--muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-meta { margin-left: auto; color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
.ic-detail { padding: 0.4rem 0.6rem 0.6rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
.ic-line { display: flex; gap: 0.5rem; font-size: 0.78rem; align-items: baseline; }
.ic-line > span { color: var(--muted); min-width: 3.4rem; }
.ic-line code { font-size: 0.76rem; word-break: break-all; }
.ic-block-h { font-size: 0.74rem; color: var(--muted); margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ic-pre {
    margin: 0; padding: 0.5rem; border-radius: 3px; background: #0e0e0e; border: 1px solid var(--border);
    font-family: ui-monospace, monospace; font-size: 0.75rem; line-height: 1.4;
    max-height: 15rem; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.ic-pre.err { color: #fca5a5; border-color: #7f1d1d; }
.ic-updates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ic-updates li { font-size: 0.78rem; display: flex; align-items: baseline; gap: 0.35rem; }
.ic-updates code { font-size: 0.76rem; }
.ic-arrow { color: var(--muted); }
.ic-val { color: #6ee7a8; font-family: ui-monospace, monospace; font-size: 0.76rem; word-break: break-all; }

/* Interface inspector: picked-path bar + clickable JSON tree */
.ic-picked {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem;
    border-bottom: 1px solid var(--border); background: #0e0e0e;
}
.ic-picked-lbl { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ic-picked code {
    font-family: ui-monospace, monospace; font-size: 0.8rem; color: var(--accent-2);
    background: #181818; border: 1px solid var(--border); border-radius: 2px; padding: 0.1rem 0.4rem;
    word-break: break-all;
}
.ic-picked-hint { color: var(--muted); font-size: 0.72rem; margin-left: auto; white-space: nowrap; }
.ic-block-hint { color: var(--muted); font-size: 0.7rem; text-transform: none; letter-spacing: 0; }
.ic-block-hint code { font-size: 0.7rem; }
.ic-json { line-height: 1.45; }
.jt-children { padding-left: 1.05rem; border-left: 1px solid #292929; margin-left: 0.15rem; }
.jt-row { white-space: nowrap; }
.jt-key {
    color: var(--accent-2); cursor: pointer; border-radius: 4px; padding: 0 0.1rem;
}
.jt-key:hover { background: rgba(51, 149, 224, 0.18); text-decoration: underline; }
.jt-idx {
    color: var(--muted); cursor: pointer; border-radius: 4px; padding: 0 0.25rem;
    font-size: 0.72rem; background: #181818; border: 1px solid var(--border);
}
.jt-idx:hover { border-color: var(--accent); color: var(--fg); }
.jt-punc, .jt-brace { color: var(--muted); }
.jt-val { cursor: pointer; border-radius: 4px; padding: 0 0.15rem; }
.jt-val:hover { background: rgba(110, 231, 168, 0.16); text-decoration: underline; }
.jt-val.str { color: #6ee7a8; }
.jt-val.num { color: #fbbf24; }
.jt-val.bool { color: #c084fc; }
.jt-val.null { color: var(--muted); font-style: italic; }

/* Inline "add a field to the SDM" quick-add (mappings page + form editor) */
.sdmmap-quickadd-wrap { margin: 0.5rem 0 0.2rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border);
    border-radius: 5px; background: #141414; }
.sdmmap-quickadd-h { font-size: 0.82rem; font-weight: 600; margin-bottom: 0.5rem; }
.fc-sdm-add { margin-top: 0.35rem; }
.sdm-quickadd { display: flex; flex-direction: column; gap: 0.5rem; }
.sdm-quickadd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.sdm-quickadd-grid .fld { margin: 0; min-width: 0; }
.sdm-quickadd-grid .fld > span { font-size: 0.72rem; color: var(--muted); }
.sdm-quickadd-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.sdm-quickadd-path { font-size: 0.78rem; color: var(--accent-2); background: #181818; border: 1px solid var(--border);
    border-radius: 2px; padding: 0.15rem 0.45rem; min-height: 1.2rem; min-width: 6rem; }
.sdm-quickadd-chk { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--muted); }
@media (max-width: 760px) { .sdm-quickadd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sdm-quickadd-storage { display: flex; flex-direction: column; gap: 0.35rem; }
.sdm-quickadd-storage > span { font-size: 0.72rem; color: var(--muted); }
.sdm-quickadd-note { font-size: 0.75rem; color: var(--muted); margin: 0; line-height: 1.4; }

/* SDM storage chips — the typed-column vs JSON-bag tell (SdmStorageChip) */
.sdm-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.68rem; font-weight: 600;
    border-radius: 4px; padding: 0.08rem 0.5rem; white-space: nowrap; border: 1px solid transparent; }
.sdm-chip-col { color: #7ee2a8; background: rgba(80, 200, 130, 0.12); border-color: rgba(80, 200, 130, 0.35); }
.sdm-chip-bag { color: #e8c47a; background: rgba(226, 178, 90, 0.12); border-color: rgba(226, 178, 90, 0.35); }
.sdm-chip-comp { color: #b3d9f2; background: rgba(51, 149, 224, 0.12); border-color: rgba(51, 149, 224, 0.35); }
.sdm-chip-trans { color: var(--muted); background: rgba(140, 150, 170, 0.12); border-color: rgba(140, 150, 170, 0.35); }
.sdm-chip-unknown { color: #ff9d9d; background: rgba(224, 83, 58, 0.12); border-color: rgba(224, 83, 58, 0.4); }

/* SDM path picker (SdmPathPicker) — searchable binding combobox */
.sdmp { position: relative; }
.sdmp-closed { display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left; cursor: pointer;
    background: #181818; border: 1px solid var(--border); border-radius: 3px; padding: 0.42rem 0.6rem;
    color: var(--fg); font-size: 0.82rem; }
.sdmp-closed:hover { border-color: var(--accent-2); }
.sdmp-closed .spacer { flex: 1; }
.sdmp-caret { color: var(--muted); font-size: 0.65rem; }
.sdmp-path { color: var(--accent-2); font-size: 0.8rem; }
.sdmp-backdrop { position: fixed; inset: 0; z-index: 60; }
.sdmp-panel { position: absolute; z-index: 61; top: calc(100% + 4px); left: 0; right: 0;
    background: #181818; border: 1px solid var(--border); border-radius: 4px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); padding: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.sdmp-search { width: 100%; }
.sdmp-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; }
.sdmp-group { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted); padding: 0.45rem 0.45rem 0.15rem; }
.sdmp-row { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; cursor: pointer;
    background: none; border: 0; border-radius: 2px; padding: 0.32rem 0.45rem; color: var(--fg); font-size: 0.8rem; }
.sdmp-row:hover { background: rgba(51, 149, 224, 0.1); }
.sdmp-row.on { background: rgba(51, 149, 224, 0.16); }
.sdmp-row .spacer { flex: 1; }
.sdmp-label { font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38%; }
.sdmp-type { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.sdmp-empty { padding: 0.5rem 0.45rem; margin: 0; }

/* ---- picker: the tree (browse mode; searching falls back to the flat .sdmp-row list above) ---- */
/* Taller than the flat list was: a tree is only worth having if you can see a branch at once. */
.sdmp-list { max-height: 420px; }
.sdmp-node { display: flex; align-items: center; gap: 0.45rem; border-radius: 2px;
    padding: 0.16rem 0.45rem 0.16rem 0; font-size: 0.8rem; }
.sdmp-node:hover { background: rgba(51, 149, 224, 0.08); }
.sdmp-node.on { background: rgba(51, 149, 224, 0.16); }
.sdmp-node .spacer { flex: 1; }
/* Tree indent guides — one column per ancestor level, each drawing the vertical line that makes
   the nesting read as a real treeview (the old inline padding-left indented but drew nothing).
   top/bottom overshoot bridges the rows' vertical padding so a branch reads as one unbroken line. */
.sdmp-guide { flex: 0 0 0.6rem; align-self: stretch; position: relative; }
.sdmp-guide::before { content: ""; position: absolute; left: 0.28rem; top: -0.17rem; bottom: -0.17rem;
    border-left: 1px solid color-mix(in srgb, var(--muted) 32%, transparent); }
/* Fixed width whether it holds a twisty or not, so names stay column-aligned down a branch. */
.sdmp-twisty { flex: 0 0 auto; width: 1rem; background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--muted); font-size: 0.62rem; line-height: 1; }
.sdmp-twisty:hover { color: var(--fg); }
.sdmp-twisty-leaf { display: inline-block; cursor: default; }
.sdmp-name { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent-2);
    font-size: 0.8rem; text-align: left; white-space: nowrap; }
.sdmp-name code { font-size: 0.8rem; }
.sdmp-name:hover { text-decoration: underline; }
/* A grouping level with no SDM row of its own — nothing to bind to, so it doesn't look bindable. */
.sdmp-name-group { color: var(--fg); }
.sdmp-name-group:hover { text-decoration: none; color: var(--accent-2); }
.sdmp-arr { color: #f0b352; font-size: 0.72rem; margin-left: 0.1rem; }
.sdmp-ref { font-size: 0.7rem; color: #c7a6f5; white-space: nowrap; }
.sdmp-cycle { font-size: 0.72rem; color: var(--muted); font-style: italic; padding: 0.16rem 0.45rem 0.16rem 0; }

/* Inspector: collapsible property groups */
.fc-group { border: 1px solid var(--border); border-radius: 4px; background: #141414;
    padding: 0 0.6rem; margin-bottom: 0.55rem; }
.fc-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; font-weight: 700; color: var(--muted); padding: 0.5rem 0.05rem; user-select: none; }
.fc-group > summary::-webkit-details-marker { display: none; }
.fc-group > summary::after { content: "▸"; margin-left: auto; font-size: 0.65rem; transition: transform 0.12s; }
.fc-group[open] > summary::after { transform: rotate(90deg); }
.fc-group[open] > summary { color: var(--fg); }
.fc-group > .fc-props-grid { padding: 0.1rem 0.05rem 0.65rem; }

/* Inspector: live SDM lint under the binding control */
.fc-sdm-lint { margin: 0.3rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
.fc-sdm-lint li { font-size: 0.75rem; line-height: 1.4; padding: 0.3rem 0.5rem; border-radius: 2px; }
.fc-sdm-lint li.warn { color: #ffb4a3; background: rgba(224, 83, 58, 0.1); border: 1px solid rgba(224, 83, 58, 0.3); }
.fc-sdm-lint li.info { color: var(--muted); background: rgba(140, 150, 170, 0.08); border: 1px solid var(--border); }

/* Section headers open the section inspector on click */
.form-edit-section-head { cursor: pointer; }
.form-edit-section-head .form-edit-section-title { cursor: text; }

/* Right-click context menu (form editor) — above every editor overlay (dm-edit family is ~1200) */
.fe-ctx-backdrop { position: fixed; inset: 0; z-index: 1210; }
.fe-ctx-menu {
    position: fixed; z-index: 1211; min-width: 200px;
    background: #181818; border: 1px solid var(--border); border-radius: 4px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); padding: 0.3rem; display: flex; flex-direction: column;
}
.fe-ctx-menu button {
    background: none; border: 0; border-radius: 2px; padding: 0.45rem 0.6rem;
    color: var(--fg); font-size: 0.85rem; text-align: left; cursor: pointer;
}
.fe-ctx-menu button:hover { background: rgba(51, 149, 224, 0.12); }

/* ✨ Field wizard modal. Its backdrop MUST sit BELOW the panel: the wizard first reused
   .dm-edit-backdrop (z 1190) while the panel was z 80 — the dimmer covered the wizard itself and
   swallowed every click, closing it. Pair the layers like the dm-edit family: backdrop 1190 / panel 1200.
   Docked RIGHT (not centered) and the backdrop kept LIGHT on purpose: the canvas stays readable on
   the left so the .fe-wiz-ghost placement block shows where the field will land. */
.fe-wiz-backdrop { position: fixed; inset: 0; background: rgba(4, 6, 12, 0.3); z-index: 1190; }
.fe-wiz {
    position: fixed; z-index: 1200; top: 50%; right: 1.25rem; transform: translateY(-50%);
    width: min(880px, calc(100vw - 2.5rem)); height: min(90vh, 960px);
    display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1.1rem;
}
.fe-wiz-head { display: flex; align-items: center; gap: 0.5rem; }
.fe-wiz-head .spacer { flex: 1; }
.fe-wiz-body { overflow-y: auto; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.fe-wiz-body .fld { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.fe-wiz-body .fld > span { color: var(--muted); font-size: 0.8rem; }
.fe-wiz-airow { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.fe-wiz-ifaces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.fe-wiz-ifaces li { font-size: 0.84rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 3px; background: #181818; }
.fe-wiz-radio { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; margin: 0.15rem 0; }
.fe-wiz-deploy-ok { font-size: 0.88rem; padding: 0.5rem 0.65rem; border: 1px solid rgba(80, 200, 130, 0.35);
    border-radius: 3px; background: rgba(80, 200, 130, 0.08); }
.fe-wiz-foot { display: flex; align-items: center; gap: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.fe-wiz-foot .spacer { flex: 1; }

/* Placement ghost — the "your field lands HERE" block shown in the canvas while the right-click
   menu or the field wizard is open. Bright on purpose: it must read through the light wizard backdrop. */
.fe-wiz-ghost {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.65rem; margin: 0.15rem 0;
    border: 2px dashed var(--accent, #3395e0); border-radius: 4px;
    background: rgba(51, 149, 224, 0.14);
    color: var(--fg); font-size: 0.85rem;
    box-shadow: 0 0 0 3px rgba(51, 149, 224, 0.12), 0 0 18px rgba(51, 149, 224, 0.25);
    animation: fe-wiz-ghost-pulse 1.6s ease-in-out infinite;
}
.fe-wiz-ghost code { color: var(--accent-2); }
@keyframes fe-wiz-ghost-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(51, 149, 224, 0.10), 0 0 14px rgba(51, 149, 224, 0.18); }
    50%      { box-shadow: 0 0 0 4px rgba(51, 149, 224, 0.22), 0 0 26px rgba(51, 149, 224, 0.40); }
}

/* The field currently loaded into the wizard's REWORK mode — same glow family as the ghost,
   solid outline (it's the real row, not a placeholder). */
.form-edit-field.fe-wiz-rework {
    outline: 2px dashed var(--accent, #3395e0);
    outline-offset: 2px;
    animation: fe-wiz-ghost-pulse 1.6s ease-in-out infinite;
    border-radius: 4px;
}

/* Step-6 in-wizard mapping + step-7 AI rule suggestions */
.fe-wiz-map { display: flex; flex-direction: column; gap: 0.45rem; border: 1px solid var(--border);
    border-radius: 4px; padding: 0.6rem 0.7rem; background: #181818; }
.fe-wiz-map-row { display: flex; align-items: flex-end; gap: 0.55rem; flex-wrap: wrap; }
.fe-wiz-map-row .fld { flex: 1; min-width: 180px; }
.fe-wiz-suggestion { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.84rem;
    padding: 0.45rem 0.55rem; border: 1px solid var(--border); border-radius: 3px; background: #181818; }
.fe-wiz-suggestion code { color: var(--accent-2); word-break: break-all; }
.fe-wiz-suggestion .muted { display: block; margin-top: 0.15rem; }
.fe-wiz-suggestion-body { flex: 1; }

/* ⚡ Auto-bind staged-review panel (bottom action bar neighbour, like Export/Import) */
.fc-autobind-rows { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.5rem 0; max-height: 300px; overflow-y: auto; }
.fc-autobind-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.82rem;
    padding: 0.3rem 0.45rem; border: 1px solid var(--border); border-radius: 3px; background: #181818; }
.fc-autobind-row code { color: var(--accent-2); }
.fc-autobind-row .muted { font-size: 0.75rem; }
.fc-autobind-row .spacer { flex: 1; }
.fc-autobind-actions { display: flex; align-items: center; gap: 0.6rem; }

/* Form editor: per-field persistence choice (Saved / Screen-only) */
.fc-persist { display: flex; flex-direction: column; gap: 0.3rem; }
.fc-persist-note { font-size: 0.75rem; margin: 0.1rem 0 0; line-height: 1.45; }
.fc-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; width: fit-content; }
.fc-seg > button { background: transparent; border: none; color: var(--muted); padding: 0.35rem 0.7rem;
    font-size: 0.82rem; cursor: pointer; border-right: 1px solid var(--border); }
.fc-seg > button:last-child { border-right: none; }
.fc-seg > button:hover { background: rgba(127,127,127,0.1); color: var(--fg); }
.fc-seg > button.on { background: rgba(51,149,224,0.16); color: var(--fg); }
.fc-local-note { font-size: 0.82rem; color: var(--muted); background: #141414; border: 1px solid var(--border);
    border-radius: 3px; padding: 0.5rem 0.65rem; margin: 0.2rem 0 0; }

/* Form editor: editable direct interface-wiring panel */
.fc-wire-scope { margin: 0.4rem 0 0; padding: 0.4rem 0.6rem; border-left: 3px solid rgba(51, 149, 224, 0.55);
    background: rgba(51, 149, 224, 0.06); border-radius: 0 6px 6px 0; }
.fc-wire-add { display: flex; gap: 0.4rem; margin: 0.5rem 0; }
.fc-wire-add select { flex: 1; }
.fc-wire-call { border: 1px solid var(--border); border-radius: 4px; background: #141414; padding: 0.55rem 0.65rem; margin-bottom: 0.5rem; }
.fc-wire-call-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.fc-wire-fires { display: flex; align-items: center; gap: 0.4rem; margin: 0.25rem 0; }
.fc-wire-fires > span { font-size: 0.76rem; color: var(--muted); min-width: 3.2rem; }
.fc-wire-fires select { flex: 1; }
.fc-wire-trigfields { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.2rem 0 0.4rem; }
.fc-wire-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.76rem; color: var(--muted);
    border: 1px solid var(--border); border-radius: 4px; padding: 0.05rem 0.45rem; }
.fc-wire-block { margin-top: 0.45rem; }
.fc-wire-block-h { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; }
.fc-wire-row { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.25rem; }
.fc-wire-row > code { font-size: 0.76rem; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-wire-arrow { color: var(--muted); }
.fc-wire-fieldsel { flex: 1; min-width: 0; }
.fc-wire-actions { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0; }
.fc-wire-sdm { margin-top: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.fc-wire-sdm > summary { cursor: pointer; font-size: 0.82rem; color: var(--muted); }

/* Form editor: the form Name field under the title */
.form-edit-name { display: block; margin: 0.1rem 0 0.6rem; max-width: 640px; }
.form-edit-name > span { display: block; font-size: 0.78rem; margin-bottom: 0.2rem; }
.form-edit-name input { width: 100%; font-size: 1rem; }

/* ===== Contract Management (console + /contracts/{id} detail) ===== */
.contract-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
/* Contract payment schedule — behind a reveal so the page leads with the summary, not 60 rows */
.cm-schedule-head { display: flex; align-items: center; gap: 0.9rem; margin-top: 1rem; flex-wrap: wrap; }
.cm-schedule-scroll { margin-top: 0.9rem; max-height: 440px; overflow: auto; border: 1px solid var(--border); border-radius: 4px; }
.cm-schedule thead th { position: sticky; top: 0; z-index: 1; }
.contract-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.8rem; }
.contract-chip {
    display: inline-block; padding: 0.15rem 0.6rem; border-radius: 4px;
    border: 1px solid var(--border); background: #1c1c1c; color: var(--fg);
    font-size: 0.78rem; font-weight: 600;
}
.contract-chip.ok { background: color-mix(in srgb, #4ade80 16%, transparent); color: #bbf7d0; border-color: color-mix(in srgb, #4ade80 35%, transparent); }
.contract-chip.warn { background: color-mix(in srgb, #f87171 14%, transparent); color: #fecaca; border-color: color-mix(in srgb, #f87171 35%, transparent); }

/* ===== Collections workbench (/collections + /collections/{id}) ===== */
.coll-row-highlight td { background: color-mix(in srgb, #4ade80 10%, transparent); }
.term-progress-wrap { margin-top: 0.75rem; }
.term-progress-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; }
.term-progress-track { height: 10px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; }
.term-progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.contract-row-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ---- Credit "more info" bounce-back banner (FS application page) ---- */
.info-request-banner { display: flex; gap: 0.75rem; align-items: flex-start; border-left: 3px solid #3395e0;
  background: rgba(51, 149, 224, 0.08); margin: 0 0 1rem; }
.info-request-icon { font-size: 1.2rem; line-height: 1.4; }
.info-request-text { margin: 0.25rem 0; font-size: 0.95rem; }

/* ---- Credit "running checks" processing banner (FS application page) ---- */
.processing-banner { display: flex; gap: 0.75rem; align-items: flex-start; border-left: 3px solid #a78bfa;
  background: rgba(167, 139, 250, 0.08); margin: 0 0 1rem; }
.processing-banner .phase-spinner { margin-top: 0.2rem; flex: 0 0 auto; }

/* ---- Auto-approval rule builder (/admin/auto-approval-rules) ---- */
.aar-head h1 { margin: 0.2rem 0 0.3rem; }
.aar-scope { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.8rem 0 1rem; }
.aar-scope select { max-width: 320px; }
.aar-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .aar-grid { grid-template-columns: 1fr; } }
.aar-rules-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.aar-rules-head h2 { margin: 0; font-size: 1.05rem; }
.aar-empty { padding: 1rem; border: 1px dashed var(--border); border-radius: 4px; }
.aar-card { display: flex; gap: 0.6rem; padding: 0.7rem 0.8rem; border: 1px solid var(--border);
  border-radius: 5px; background: rgba(255,255,255,0.02); margin-bottom: 0.6rem; }
.aar-card.aar-off { opacity: 0.55; }
.aar-card.aar-editing { border-color: #3395e0; box-shadow: 0 0 0 1px #6ea8fe33; }
.aar-card-ord { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.aar-ord-btn { background: none; border: 1px solid var(--border); border-radius: 2px; color: var(--muted);
  cursor: pointer; width: 22px; height: 20px; line-height: 1; font-size: 0.65rem; }
.aar-ord-btn:disabled { opacity: 0.3; cursor: default; }
.aar-ord-n { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.aar-card-body { flex: 1; min-width: 0; }
.aar-card-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.aar-card-cond { margin-top: 0.4rem; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.aar-chip { font-size: 0.78rem; padding: 0.1rem 0.45rem; border-radius: 2px; background: rgba(255,255,255,0.06);
  border: 1px solid var(--border); white-space: nowrap; }
.aar-comb { font-size: 0.68rem; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
.aar-detail { margin-top: 0.3rem; }
.aar-card-actions { display: flex; flex-direction: column; gap: 0.3rem; }
.aar-del { color: #ff8a8a; }
.aar-outcome { font-size: 0.72rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.aar-badge-off { font-size: 0.68rem; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0.05rem 0.4rem; }
.aar-ok   { background: rgba(70, 200, 120, 0.16); color: #7ee2a8; }
.aar-bad  { background: rgba(255, 110, 110, 0.16); color: #ff9a9a; }
.aar-info { background: rgba(51, 149, 224, 0.18); color: #b3d9f2; }
.aar-warn { background: rgba(240, 190, 90, 0.18); color: #f2cd82; }
.aar-editor, .aar-test { padding: 1rem; }
.aar-editor h3, .aar-test h3 { margin: 0 0 0.6rem; }
.aar-f { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.6rem; }
.aar-f > span, .aar-f-label { font-size: 0.78rem; color: var(--muted); }
.aar-f-label { display: block; margin: 0.4rem 0 0.3rem; }
.aar-f-top { margin-top: 0.4rem; }
.aar-comb-toggle { display: flex; gap: 0.4rem; }
.aar-cond-row { display: grid; grid-template-columns: minmax(0,1.3fr) auto minmax(0,1fr) auto; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
.aar-cond-row .aar-op { min-width: 68px; }
.aar-cond-del { background: none; border: none; color: #ff8a8a; cursor: pointer; font-size: 0.9rem; }
.aar-editor-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; }
.aar-test-result { padding: 0.7rem 0.9rem; border-radius: 4px; margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.15rem; }
.aar-test-none { background: rgba(255,255,255,0.05); }
.aar-test-ctx { margin-top: 0.4rem; }
.aar-ctx-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; }
.aar-ctx-table td { padding: 0.15rem 0.3rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.aar-ctx-table td:first-child { width: 60%; }

/* ---- PMS proposal timeline (reuses the FS tl-* strip classes) ---- */
.pms-tl-wrap { margin: 0.6rem 0 1rem; }
.pms-tl-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pms-callpop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pms-callpop-card { background: #181818; border: 1px solid var(--border); border-radius: 6px;
  padding: 1rem 1.1rem; width: min(680px, 96vw); max-height: 86vh; overflow-y: auto; }
.pms-callpop-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; }
.pms-callpop-card h4 { margin: 0.7rem 0 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.pms-callpre { margin: 0; padding: 0.5rem 0.65rem; background: rgba(0,0,0,0.35); border-radius: 3px;
  font-size: 0.74rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 30vh; overflow-y: auto; }

/* ---- "with Proposal Management" banner (FS, while awaiting the credit decision) ---- */
.awaiting-credit-banner { display: flex; gap: 0.75rem; align-items: flex-start; border-left: 3px solid #f2cd82;
  background: rgba(240, 205, 130, 0.08); margin: 0.4rem 0 1rem; }
.awaiting-credit-icon { font-size: 1.2rem; line-height: 1.4; }
.awaiting-credit-banner p { margin: 0.25rem 0 0.5rem; }

/* ---- Approved-with-conditions round trip (FS, the dealer's checklist) ---- */
.conditions-panel { border-left: 3px solid #f2cd82; background: rgba(240, 205, 130, 0.06); margin: 0.4rem 0 1rem; }
.conditions-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.conditions-list { list-style: none; margin: 0.7rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.conditions-row { display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; padding: 0.45rem 0.6rem;
  border: 1px solid var(--border); border-radius: 3px; background: rgba(255, 255, 255, 0.02); }
.conditions-row.done { opacity: 0.75; }
.conditions-row.done .conditions-check span { text-decoration: line-through; text-decoration-color: rgba(240, 205, 130, 0.6); }
.conditions-check { display: flex; gap: 0.55rem; align-items: center; cursor: pointer; flex: 1 1 18rem; min-width: 0; }
.conditions-check input[type="checkbox"] { width: 1.05rem; height: 1.05rem; cursor: pointer; flex: none; }
.conditions-note { flex: 1 1 16rem; }

/* Two-column field grid inside a proposal-management config panel. */
.pma-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.5rem 1rem; margin: 0.4rem 0; }
.pma-grid2 label { display: flex; flex-direction: column; gap: 0.2rem; }

/* ---- Finance calculator form — the deal inputs on /admin/calculator ---- */
.calc-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem 1rem; margin-bottom: 0.8rem; }
.calc-tool-grid label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--muted); }
.calc-tool-results { margin-top: 1rem; }
.calc-tool-results .app-summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.7rem; margin-bottom: 0.8rem; }
.calc-schedule th { text-align: right; padding: 0.28rem 0.6rem 0.28rem 0; color: var(--muted); font-weight: 600; }
.calc-schedule th:first-child, .calc-schedule td:first-child { text-align: left; }
.calc-schedule td { text-align: right; }
.calc-skip-row td { opacity: 0.55; }

/* ---- Dispute workflow: dealer motivation panel + PMS review list ---- */
.dispute-panel { border-left-color: #e0a0a0; background: rgba(224, 160, 160, 0.06); }
.pms-dispute-review { border: 1px solid var(--border); border-left: 3px solid #e0a0a0; border-radius: 3px;
  padding: 0.6rem 0.8rem; margin-bottom: 0.7rem; background: rgba(224, 160, 160, 0.05); }
.pms-dispute-review .lp-btn { margin-left: 0.4rem; }

/* ---- PMS: podium alternative-offer editor + four-eyes card ---- */
.pms-option-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin: 0.3rem 0; }
.pms-option-row .auth-input.sm { flex: 1 1 10rem; min-width: 0; }
.pms-option-row .auth-input.sm.num { flex: 0 1 6.5rem; }
.pms-second-approval { border-left: 3px solid #f2cd82; }
.pms-badge-warn { background: rgba(240, 205, 130, 0.18); color: #f2cd82; }

/* ---- federated sign-in offers on /login ------------------------------------------------------ */
.auth-sso { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.9rem; }
/* An identity-provider button is not the primary action for most users today, so it reads as a
   secondary surface rather than competing with the password form below it. */
.sso-button { background: transparent; border: 1px solid var(--border); color: var(--fg);
    text-align: center; text-decoration: none; display: block; }
.sso-button:hover { border-color: #b3d9f2; color: #b3d9f2; }
.auth-or { text-align: center; font-size: 0.78rem; margin: 0 0 0.6rem;
    text-transform: uppercase; letter-spacing: 0.06em; }
/* Used across the PMS/collections pages but never defined — they have been rendering as plain
   badges, so a "resolved" and an "urgent" looked identical. */
.pms-badge-ok { background: rgba(125, 211, 168, 0.16); color: #7dd3a8; }
.pms-badge-bad { background: rgba(233, 129, 129, 0.16); color: #e98181; }
.pms-badge-muted { background: rgba(150, 150, 160, 0.14); color: var(--muted); }

/* ---- the disposition picker: the market's own outcome list ---------------------------------- */
.disp-lead { margin-top: 0; }
.disp-group { margin-bottom: 0.9rem; }
.disp-group-h { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 0.35rem; }
.disp-choice { align-items: flex-start; }
/* What the outcome counts as, stated before it is recorded — the contact vs right-party-contact
   distinction is the one an agent is most tempted to blur under queue pressure. */
.disp-meaning { font-size: 0.8rem; color: #b3d9f2; margin: 0.4rem 0 0.2rem; }
.disp-effects { margin: 0.5rem 0 0.2rem; padding-left: 1.1rem; font-size: 0.78rem; color: var(--muted); }
.disp-effects li { margin-bottom: 0.15rem; }
/* Two ways to record: the outcome list, or the guided template/recipient flow. */
.wiz-modes { display: flex; gap: 0.3rem; margin: 0.2rem 0 0.8rem; }
.panel-inset { border: 1px solid var(--border); border-radius: 0.5rem;
    padding: 0.6rem 0.8rem; margin-bottom: 0.6rem; }

/* Sub-heading inside a market-admin panel (Credit regulation's grouped blocks). */
.mkt-h3 { font-size: 0.95rem; margin: 1.1rem 0 0.2rem; color: var(--muted); font-weight: 600; }

/* ---- Cost-of-credit disclosure (credit-act markets) ---- */
.coc-panel { border-left: 3px solid #b3d9f2; background: rgba(179, 217, 242, 0.05); margin: 0.4rem 0 1rem; }
.coc-grid { border-collapse: collapse; margin: 0.6rem 0 0.2rem; font-size: 0.9rem; min-width: 22rem; }
.coc-grid td { padding: 0.28rem 0.6rem 0.28rem 0; border-bottom: 1px solid var(--border); }
.coc-grid td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.coc-grid tr.coc-total td { font-weight: 700; border-bottom-width: 2px; }
.coc-log { margin-top: 0.5rem; }
.coc-log ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }

/* ---- Statutory declarations (credit-act markets) — reuses the conditions chrome. ---- */
.decl-panel { border-left-color: #b3d9f2; background: rgba(179, 217, 242, 0.06); }
.decl-panel .conditions-row.done { opacity: 1; }        /* answered ≠ struck-through */
.decl-q { display: flex; gap: 0.9rem; align-items: center; justify-content: space-between; flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
.decl-text { flex: 1 1 18rem; min-width: 0; }
.decl-btns { display: flex; gap: 0.35rem; flex: none; }
.decl-group-head { border-bottom: none; padding-bottom: 0; color: var(--muted); }
.decl-retired .decl-text { text-decoration: line-through solid rgba(128,128,128,0.35); }

/* ---- Consent panels — same chrome; the pre-application gate glows until satisfied. ---- */
.consent-panel { border-left-color: #a8d5b0; background: rgba(168, 213, 176, 0.06); }
.consent-panel .conditions-row.done { opacity: 1; }
.consent-panel.consent-gate-open { border-left-color: #e0b264; background: rgba(224, 178, 100, 0.07); }
.consent-clause-text { margin: 0.15rem 0 0.1rem; font-style: italic; max-width: 62rem; white-space: pre-line; }

/* PMS decided card — the underwriter's read-only view of the dealer's condition progress. */
.pms-cond-list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.86rem; }
.pms-cond-list li.done { color: var(--muted); }
/* Underwriter's tickable standard-condition catalogue on the decision form. */
.pms-cond-catalogue { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.3rem; }
/* Assessor's conditions-review panel (dealer reported met, manual decision). */
.pms-cond-review { border: 1px solid color-mix(in srgb, #e0a86b 40%, transparent); background: color-mix(in srgb, #e0a86b 8%, transparent); border-radius: 0.6rem; padding: 0.7rem 0.85rem; margin-bottom: 0.9rem; }
.pms-cond-review-or { margin: 0.6rem 0 0; }
.pms-snapshot { margin: 0.5rem 0; }
.pms-snapshot .pms-row2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1rem; margin-top: 0.4rem; }
/* Admin: per-market catalogue editor rows. */
.pma-cond-catalogue { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0; }
.pma-cond-row { display: flex; gap: 0.5rem; align-items: center; }

/* ============ PMS proposal detail (full-width redesign) ============ */
.pms-detail-full { width: 100%; text-align: left; }
.pms-dh { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.pms-dh-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pms-dh-title strong { font-size: 1.15rem; }
.pms-dh-timers { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pms-timer { font-size: 0.78rem; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0.15rem 0.6rem; }
.pms-timer.warn { color: #f2cd82; border-color: rgba(240,205,130,0.4); }

/* decision bar */
.pms-decision-bar { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 1.2rem; padding: 1rem 1.2rem; margin-bottom: 1rem; }
@media (max-width: 780px) { .pms-decision-bar { grid-template-columns: 1fr; } }
.pms-db-score { display: flex; flex-direction: column; gap: 0.2rem; border-right: 1px solid var(--border); padding-right: 1rem; }
@media (max-width: 780px) { .pms-db-score { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 0.6rem; } }
.pms-db-scoreval { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.pms-db-overall { font-size: 0.85rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 2px; align-self: flex-start; margin-top: 0.2rem; }
.pms-db-form .pms-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.pms-db-form .pms-field-label { display: block; margin: 0.5rem 0 0.3rem; font-size: 0.78rem; color: var(--muted); }

/* the two-column body */
.pms-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .pms-detail-grid { grid-template-columns: 1fr; } }
.pms-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pms-side { min-width: 0; }
.pms-side-sticky { position: sticky; top: 1rem; }

.pms-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.1rem; }
.pms-card > h3 { margin: 0 0 0.7rem; font-size: 1rem; display: flex; align-items: baseline; gap: 0.5rem; }
.pms-card-hint { font-size: 0.75rem; font-weight: 400; color: var(--muted); }
.pms-subh { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0.8rem 0 0.35rem; }

/* key-value grid */
.pms-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem 1.2rem; }
.pms-kv > div { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.88rem; }
.pms-kv .muted { font-size: 0.72rem; }

/* tables */
.pms-tbl { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.pms-tbl th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border); }
.pms-tbl td { padding: 0.3rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pms-tbl th.num, .pms-tbl td.num { text-align: right; }

/* Applicant Overview grid (application detail) — the primary applicant plus co-applicants /
   guarantors as real Parties, mirroring the downstream "Applicants (N)" table. */
.applicant-overview { margin-bottom: 1rem; padding: 1rem 1.1rem; }
.ao-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.55rem; }
.ao-head h3 { margin: 0; font-size: 0.95rem; }
.ao-count { font-size: 0.74rem; color: var(--muted); }
.ao-scroll { overflow-x: auto; }
.ao-tbl { width: 100%; border-collapse: collapse; font-size: 0.82rem; white-space: nowrap; }
.ao-tbl th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--border); }
.ao-tbl td { padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ao-tbl tr.ao-primary td { font-weight: 500; }
.ao-check.ok { color: #7ee2a8; font-weight: 700; }
.ao-check.bad { color: #ff9a9a; font-weight: 700; }
.ao-role { font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 4px; }
.ao-role.main { background: rgba(120,160,255,0.16); color: #b3d9f2; }
.ao-role.co { background: rgba(160,140,255,0.16); color: #c3b3ff; }
.ao-role.guar { background: rgba(240,190,90,0.16); color: #f2cd82; }
.ao-role.spouse { background: rgba(120,220,180,0.16); color: #9fe3c5; }

/* ---- Applicant tabs — avatar cards that swap the capture area (Galaxi-style) ------------- */
.ao-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; }
.ao-tab {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.8rem; min-width: 12rem; text-align: left;
    background: rgba(255,255,255,0.03); color: inherit;
    border: 1px solid rgba(255,255,255,0.10); border-radius: 0.65rem;
    cursor: pointer; transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
    font: inherit;
}
.ao-tab:hover { background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.ao-tab-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ao-tab-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
.ao-avatar {
    flex: none; width: 2.15rem; height: 2.15rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
    background: rgba(120,160,255,0.18); color: #b3d9f2;
}
.ao-avatar.co { background: rgba(160,140,255,0.18); color: #c3b3ff; }
.ao-avatar.guar { background: rgba(240,190,90,0.18); color: #f2cd82; }
.ao-avatar.spouse { background: rgba(120,220,180,0.18); color: #9fe3c5; }
.ao-avatar svg { width: 1.2rem; height: 1.2rem; }
.ao-issues {
    flex: none; margin-left: auto; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem;
    border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,110,110,0.2); color: #ff9d9d; font-size: 0.72rem; font-weight: 700;
}
.ao-tab .ao-check { margin-left: auto; }
.ao-tab.ao-add {
    flex-direction: column; align-items: stretch; gap: 0.35rem; min-width: 9rem;
    border-style: dashed; cursor: default; background: transparent;
}
.ao-tab.ao-add:hover { transform: none; }
.ao-add-label { font-size: 0.78rem; font-weight: 600; opacity: 0.75; }
.ao-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.ao-detail-head h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.ao-detail-actions { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.9rem; }
.lp-btn.danger { color: #ff9d9d; border-color: rgba(255,110,110,0.35); }

/* ===== The party rail — the roster beside the capture, not above it ==========================
   A horizontal strip of party cards fought the page: it wrapped onto two lines as soon as a deal
   had three parties, it pushed the form down, and on a demo-sized screen the cards overlapped. A
   vertical rail can't do any of that — it holds any number of parties, keeps every issue badge in
   view while you type into a different party, and the selected row is unmistakable.
   The rail is recessed so the selected row, filled with the content colour, reads as continuous
   with the capture area beside it (same trick the tab strip used vertically). */
.ao-shell { padding: 0; overflow: hidden; display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); }
.ao-rail {
    background: rgba(0,0,0,0.28); border-right: 1px solid #373737;
    display: flex; flex-direction: column; min-width: 0;
}
.ao-capture { min-width: 0; }
/* The rail's background fills the column; its CONTENT sticks, so the roster is still there after
   scrolling a long capture form. Internal scroll only if the party list itself outgrows the screen. */
.ao-rail-inner {
    position: sticky; top: 0.5rem;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 5rem); min-height: 0;
}
.ao-rail .ao-tabs {
    flex-direction: column; flex-wrap: nowrap; gap: 0.3rem; align-items: stretch;
    padding: 0 0.55rem 0.75rem; margin-top: 0.4rem; overflow-y: auto;
}
.ao-rail .ao-tab {
    min-width: 0; align-self: auto;
    padding: 0.5rem 0.6rem; gap: 0.55rem; border-radius: 4px;
    border-color: transparent; background: transparent;
}
.ao-rail .ao-tab:hover { background: rgba(255,255,255,0.05); transform: none; }
/* Selected: the content surface + a role-coloured spine on the leading edge, so the row belongs to
   the capture area on its right rather than sitting on top of it. */
.ao-rail .ao-tab.active,
.ao-rail .ao-tab.active.co, .ao-rail .ao-tab.active.guar, .ao-rail .ao-tab.active.spouse {
    background: #1f1f1f; border-color: #373737; border-right-color: #1f1f1f;
    border-top: 1px solid #373737;
    border-radius: 4px 0 0 9px; margin-right: -0.55rem; padding-right: 1.15rem;
    box-shadow: inset 3px 0 0 rgba(120,160,255,0.85);
}
.ao-rail .ao-tab.active.guar { box-shadow: inset 3px 0 0 rgba(240,190,90,0.9); }
.ao-rail .ao-tab.active.spouse { box-shadow: inset 3px 0 0 rgba(120,220,180,0.9); }
.ao-rail .ao-tab.active.co { box-shadow: inset 3px 0 0 rgba(160,140,255,0.9); }
.ao-rail .ao-tab .ao-avatar { width: 2.1rem; height: 2.1rem; font-size: 0.78rem; margin-top: 0; }
.ao-rail .ao-tab-name { font-size: 0.86rem; max-width: 100%; }
.ao-rail .ao-tab-meta { max-width: 100%; }
/* In a narrow rail only the identity lines earn their space; the rest is on the card's own form. */
.ao-rail .ao-tab-meta:nth-of-type(n+3) { display: none; }
.ao-rail .ao-tab.ao-add {
    flex-direction: column; align-items: stretch; gap: 0.35rem;
    margin: 0.15rem 0.55rem 0.75rem; padding: 0.6rem;
    border: 1px dashed rgba(255,255,255,0.14); border-radius: 4px; background: transparent;
}
.ao-rail .ao-head { padding: 0.9rem 0.9rem 0.15rem; }
.ao-rail .ao-guarantor-note { margin: 0.2rem 0.9rem 0; font-size: 0.78rem; }
@media (max-width: 1100px) {
    /* No room for two columns — the rail goes back to a scrolling row above the capture, which is
       fine when it's the ONLY horizontal thing on the screen. */
    .ao-shell { grid-template-columns: 1fr; }
    .ao-rail { border-right: 0; border-bottom: 1px solid #373737; }
    .ao-rail .ao-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 0.6rem; }
    .ao-rail .ao-tab { min-width: 14rem; }
    .ao-rail .ao-tab.active { margin-right: 0; padding-right: 0.6rem; border-radius: 4px; }
}
/* Quote step: no tab strip (nothing to tab BETWEEN), so the shell is an ordinary panel and the
   capture form supplies the padding — otherwise the panel's own padding doubles up with it. */
.panel.ao-plain { padding: 0; }
.panel.ao-plain > .form-panel { border: none; background: transparent; box-shadow: none; margin: 0; }
/* Padding + surface come from .ao-rail (a rail, not a bar) — this rule only keeps the shell's
   children flush; markets tint the page, so the rail's recess is translucent black, never a fixed
   colour that would clash with a tinted theme. */
.ao-shell .applicant-overview { padding: 0; }

/* ===== Chip-bar mode — the roster for an everyday deal (see RailPartyThreshold) ===============
   Same markup as the rail; presentation only. A chip carries what you need to CHOOSE a party —
   avatar, name, role, issue count — and drops the identifiers the rail had room for, because at
   this size they'd truncate to nothing anyway. The bar is the same recessed surface as the rail, so
   the selected chip filled with the content colour still reads as continuous with the form. */
.ao-shell-chips { grid-template-columns: minmax(0, 1fr); }
/* .ao-shell .applicant-overview — TWO classes — zeroes the padding for the rail, which supplies its
   own. This selector has to match that weight (and sits after it) or the bar renders flush: the
   reason two rounds of "more padding please" changed nothing on screen. */
.ao-shell .ao-chipbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
    padding: 1rem 1.25rem;
    background: rgba(0,0,0,0.28); border-bottom: 1px solid #373737;
}
.ao-chipbar-inner { display: contents; }   /* the head + list are the bar's own flex children */
.ao-chipbar .ao-head { padding: 0; margin: 0 0.2rem 0 0; gap: 0.4rem; }
.ao-chipbar .ao-head h3 {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); font-weight: 700; margin: 0;
}
.ao-chipbar .ao-tabs {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 0.5rem; margin: 0; padding: 0; flex: 1 1 auto;
}
.ao-chipbar .ao-tab {
    min-width: 0; max-width: 17rem; align-self: auto;
    padding: 0.45rem 1rem 0.45rem 0.45rem; gap: 0.6rem;
    border-radius: 999px; border-color: transparent; background: rgba(255,255,255,0.04);
    align-items: center;
}
.ao-chipbar .ao-tab:hover { background: rgba(255,255,255,0.08); transform: none; }
.ao-chipbar .ao-tab .ao-avatar { width: 1.95rem; height: 1.95rem; font-size: 0.72rem; margin-top: 0; }
.ao-chipbar .ao-tab .ao-avatar svg { width: 0.9rem; height: 0.9rem; }
.ao-chipbar .ao-tab-body { flex-direction: row; align-items: center; gap: 0.4rem; min-width: 0; }
.ao-chipbar .ao-tab-name { font-size: 0.95rem; font-weight: 600; max-width: 12rem; }
/* The role becomes a DOT: spelled out ("Main Applicant") it doubled the width of every chip and
   four parties no longer fit on one line — which is the whole point of the chip bar. The text stays
   in the DOM for screen readers, and the avatar carries the same colour. */
.ao-chipbar .ao-role {
    font-size: 0; padding: 0; flex: none;
    width: 0.5rem; height: 0.5rem; border-radius: 50%;
}
/* One height for every chip, so the row reads as a row and not as a ragged edge — a chip with an
   issue badge or a ✓ is otherwise taller than one without. */
.ao-chipbar .ao-tab, .ao-chipbar .ao-tab.ao-add { min-height: 2.9rem; }
/* The identifiers stay on the party's own form — a chip that tries to show them shows an ellipsis. */
.ao-chipbar .ao-tab-meta { display: none; }
.ao-chipbar .ao-tab .ao-issues, .ao-chipbar .ao-tab .ao-check { margin-left: 0.1rem; }
.ao-chipbar .ao-tab.active,
.ao-chipbar .ao-tab.active.co, .ao-chipbar .ao-tab.active.guar, .ao-chipbar .ao-tab.active.spouse {
    background: #1f1f1f; border-color: #373737; opacity: 1; transform: none;
    box-shadow: inset 0 0 0 1px rgba(120,160,255,0.55);
}
.ao-chipbar .ao-tab.active.guar { box-shadow: inset 0 0 0 1px rgba(240,190,90,0.6); }
.ao-chipbar .ao-tab.active.spouse { box-shadow: inset 0 0 0 1px rgba(120,220,180,0.6); }
.ao-chipbar .ao-tab.active.co { box-shadow: inset 0 0 0 1px rgba(160,140,255,0.6); }
/* "+ Add" collapses to its two buttons — the label would only repeat what they say. */
.ao-chipbar .ao-tab.ao-add {
    flex-direction: row; align-items: center; gap: 0.45rem;
    margin: 0; padding: 0.3rem 0.6rem; border-radius: 999px;
    border: 1px dashed rgba(255,255,255,0.16); min-width: 0;
    max-width: none;                 /* the 16rem chip cap squeezed its buttons onto two lines */
}
.ao-chipbar .ao-tab.ao-add .lp-btn { white-space: nowrap; }
.ao-chipbar .ao-add-label { font-size: 0.84rem; }
.ao-chipbar .ao-guarantor-note { flex: 1 1 100%; margin: 0.15rem 0 0; font-size: 0.78rem; }
/* The bar is a lid on the capture area, so the content under it needs the same air the panel's own
   padding gives the sides — without it the scope note sits right against the chips. */
.ao-shell.ao-shell-chips .form-panel { padding: 1.5rem 1.25rem 1.25rem; }   /* 3 classes: beats .ao-shell .form-panel */

.ao-shell .form-panel { border: none; background: transparent; box-shadow: none; margin: 0; padding: 1.1rem; border-radius: 0; }
.ao-tabs { align-items: stretch; }
.ao-tab {
    min-width: 15rem; align-items: flex-start; gap: 0.7rem;
    padding: 0.7rem 0.9rem 0.8rem;
    align-self: stretch;   /* a global button rule sets align-self:center — that alone kept the
                              <button> cards short while the <div> "+ Add" card stretched */
}
.ao-tab:not(.active):not(.ao-add) { opacity: 0.82; }
.ao-tab.active { opacity: 1; transform: none; }
.ao-tab .ao-avatar { margin-top: 0.15rem; width: 2.5rem; height: 2.5rem; font-size: 0.9rem; }
.ao-tab-meta { font-size: 0.72rem; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; line-height: 1.45; }
/* The business id is what gets read out on the phone — tabular figures so it stays scannable. */
.ao-tab-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; opacity: 0.8; letter-spacing: -0.01em; }
.ao-scope-note { font-size: 0.85rem; margin-bottom: 0.8rem; padding: 0.45rem 0.7rem; border-left: 3px solid rgba(120,160,255,0.55); background: rgba(120,160,255,0.06); border-radius: 0.35rem; }
.applicant-detail-panel .ao-scope-note { border-left-color: rgba(240,190,90,0.55); background: rgba(240,190,90,0.05); }

/* Provenance chip on settings-driven panels (consents, declarations): these are NOT form config,
   and the chip says so + links to where they ARE edited — ending the hunt through the form editor
   for sections that were never there. Admin-visible only. */
.panel-provenance { margin-left: 0.6rem; font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 999px;
    border: 1px solid rgba(179,217,242,0.4); background: rgba(51,149,224,0.08); color: #b3d9f2;
    text-decoration: none; white-space: nowrap; }
.panel-provenance:hover { background: rgba(51,149,224,0.16); }

/* Binding chip + picker suggestions: the unbound 🧬 is dimmed with an amber ring — visible at a
   glance which fields capture ad-hoc; the Suggested group ranks paths from the field's own name. */
.fc-badge-unbound { opacity: 0.45; filter: grayscale(0.6); border: 1px solid rgba(240,190,90,0.5); }
.fc-badge-unbound:hover { opacity: 1; filter: none; }
.sdmp-sugg-h { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9e9e9e;
    font-weight: 700; padding: 0.35rem 0.4rem 0.15rem; }
.sdmp-row.sdmp-sugg { background: rgba(51,149,224,0.05); }
.sdmp-row.sdmp-sugg:hover { background: rgba(51,149,224,0.14); }
.sdmp-sugg-sep { border-bottom: 1px solid var(--border); margin: 0.35rem 0; }
.sdmp-legend { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.3rem 0.4rem 0.4rem; border-bottom: 1px solid var(--border); }
.sdmp-legend .sdm-chip { cursor: default; }
.sdmp-entity { font-size: 0.66rem; color: var(--muted); background: rgba(140,150,170,0.14);
    border-radius: 4px; padding: 0.05rem 0.35rem; white-space: nowrap; flex: 0 0 auto; }
.sdmp-browse-all, .sdmp-browse-less { display: block; width: 100%; text-align: left; background: none;
    border: 0; padding: 0.45rem 0.45rem; cursor: pointer; color: var(--accent-2); font-size: 0.78rem; }
.sdmp-browse-all:hover, .sdmp-browse-less:hover { background: rgba(51, 149, 224, 0.1); }
.sdmp-browse-less { border-bottom: 1px solid var(--border); margin-bottom: 0.2rem; color: var(--muted); }

/* ---- SDM live-model views: diagram / C# / contracts (mirrors the sketchpad's) ------------- */
.sdmx-diagramview, .sdmx-codeview, .sdmx-contractsview, .sdmx-boardview { grid-column: 1 / -1; padding: 0.9rem 1rem; min-width: 0; }
.sdmx-boardview .dbv-search { display: block; margin: 0.4rem 0; }
.sdmx-diagramview .sdmsk-diagram { height: 72vh; }
.sdmx-codeview pre, .sdmx-contractsview pre { margin-top: 0.5rem; }
/* minmax(0, 1fr), not 1fr: a grid track's default minimum is its CONTENT, and a <pre> of generated
   YAML is one very long line — the schema column grew to 2818px inside a 1344px panel and pushed the
   sample payload off the right-hand edge of the page. The pre scrolls inside its own column instead. */
.dm-contracts-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.dm-contracts-cols > * { min-width: 0; }
.dm-contracts-cols h4 { margin: 0 0 0.4rem; }
.dm-contracts-cols pre { max-height: 34rem; overflow: auto; max-width: 100%; }
@media (max-width: 1100px) { .dm-contracts-cols { grid-template-columns: 1fr; } }
.ao-guarantor-note {
    margin: 0 0 0.6rem; padding: 0.45rem 0.7rem; border-radius: 2px;
    background: rgba(240,190,90,0.1); border: 1px solid rgba(240,190,90,0.28);
    color: #f2cd82; font-size: 0.8rem;
}

/* 5 Cs scorecard */
.pms-5c { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.8rem; }
/* AI credit assessment card on the proposal detail */
.pms-ai-card { border-left: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.pms-ai-body { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.pms-ai-score { flex: 0 0 auto; min-width: 130px; text-align: center; padding: 0.4rem 0.9rem 0.5rem; border-right: 1px solid var(--border); }
.pms-ai-score-n { font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pms-ai-score-n small { font-size: 0.95rem; font-weight: 400; color: var(--muted); }
.pms-ai-conf { margin-top: 0.35rem; font-size: 0.76rem; color: var(--muted); }
.pms-ai-main { flex: 1 1 340px; min-width: 300px; }
.pms-ai-rationale { margin: 0 0 0.7rem; line-height: 1.5; }
.pms-ai-factors { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; }
.pms-ai-factor { display: grid; grid-template-columns: 64px minmax(120px, 200px) 1fr; gap: 0.6rem; align-items: baseline; font-size: 0.86rem; }
.pms-ai-fw { text-transform: uppercase; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.12rem 0.35rem;
  border-radius: 2px; text-align: center; align-self: start; }
.pms-ai-fw-high { background: color-mix(in srgb, #f87171 22%, transparent); color: #fecaca; }
.pms-ai-fw-medium { background: color-mix(in srgb, #fbbf24 22%, transparent); color: #fde68a; }
.pms-ai-fw-low { background: color-mix(in srgb, #a3a3a3 22%, transparent); color: #d3d3d3; }
.pms-ai-fn { font-weight: 600; }
.pms-ai-fa { line-height: 1.4; }
.pms-ai-meta { margin-top: 0.5rem; font-family: ui-monospace, monospace; font-size: 0.72rem; }
.pms-5c-card { border: 1px solid var(--border); border-radius: 4px; padding: 0.7rem 0.8rem; background: rgba(0,0,0,0.15); }
.pms-5c-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.pms-5c-label { font-weight: 600; font-size: 0.82rem; }
.pms-5c-grade { font-size: 0.68rem; font-weight: 700; padding: 0.08rem 0.4rem; border-radius: 4px; }
.pms-5c-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); margin: 0.45rem 0 0.4rem; overflow: hidden; }
.pms-5c-bar > span { display: block; height: 100%; border-radius: 3px; }
.pms-5c-val { font-size: 1.05rem; font-weight: 700; }
.pms-5c-expl { margin: 0.25rem 0 0.4rem; line-height: 1.4; }
.pms-5c-metrics { display: flex; flex-direction: column; gap: 0.15rem; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 0.4rem; }
.pms-5c-metrics > div { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.76rem; }

/* grade colours (bar fill, grade pill, overall) */
.g-strong { background: rgba(70,200,120,0.9); color: #072; }
.g-good   { background: rgba(150,200,110,0.9); color: #363; }
.g-fair   { background: rgba(240,190,90,0.9); color: #630; }
.g-weak   { background: rgba(255,110,110,0.9); color: #600; }
.pms-5c-grade.g-strong, .pms-db-overall.g-strong { background: rgba(70,200,120,0.18); color: #7ee2a8; }
.pms-5c-grade.g-good, .pms-db-overall.g-good { background: rgba(150,200,110,0.18); color: #bfe29a; }
.pms-5c-grade.g-fair, .pms-db-overall.g-fair { background: rgba(240,190,90,0.18); color: #f2cd82; }
.pms-5c-grade.g-weak, .pms-db-overall.g-weak { background: rgba(255,110,110,0.18); color: #ff9a9a; }

/* screening */
.pms-screen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
@media (max-width: 560px) { .pms-screen { grid-template-columns: 1fr; } }
.pms-screen-item { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 4px; }
.pms-screen-icon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.pms-screen-item.ok { border-color: rgba(70,200,120,0.4); } .pms-screen-item.ok .pms-screen-icon { background: rgba(70,200,120,0.2); color: #7ee2a8; }
.pms-screen-item.bad { border-color: rgba(255,110,110,0.4); } .pms-screen-item.bad .pms-screen-icon { background: rgba(255,110,110,0.2); color: #ff9a9a; }
.pms-screen-item.warn { border-color: rgba(240,190,90,0.4); } .pms-screen-item.warn .pms-screen-icon { background: rgba(240,190,90,0.2); color: #f2cd82; }
.pms-screen-item.none .pms-screen-icon { background: rgba(255,255,255,0.08); color: var(--muted); }

/* finance side panel */
.pms-fin { display: flex; flex-direction: column; gap: 0.3rem; }
.pms-fin-row { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.88rem; }
.pms-fin-row.strong { font-weight: 700; }
.pms-fin-row.big { font-size: 1.15rem; font-weight: 700; }
.pms-fin-row.big > span:last-child { color: #b3d9f2; }
.pms-fin-sep { height: 1px; background: var(--border); margin: 0.35rem 0; }

/* ============ PMS detail v2: top row (scorecard + finance), full-width below ============ */
.pms-top-row { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: stretch; margin-bottom: 1rem; }
@media (max-width: 1000px) { .pms-top-row { grid-template-columns: 1fr; } }
.pms-scorecard-card { min-width: 0; }
.pms-fin-aside { min-width: 0; }
.pms-fin-card { height: 100%; box-sizing: border-box; }
.pms-below { display: flex; flex-direction: column; gap: 1rem; }
.pms-below .pms-card { width: 100%; box-sizing: border-box; }

/* horizontal timeline: give the nodes breathing room so it scrolls instead of squashing,
   with an always-visible horizontal scrollbar when the track overflows */
/* Spacing now comes from the labelled tl-gap chips between nodes (like the FS activity timeline),
   not a uniform track gap. */
.pms-tl-wrap .tl-track { gap: 0; padding-bottom: 0.5rem; }
/* Keep the Details button inside the fixed-width card: let the pill shrink and the row wrap. */
.pms-tl-wrap .tl-row { flex-wrap: wrap; }
.pms-tl-wrap .tl-pill { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pms-tl-wrap .tl-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-color: var(--muted) transparent; }
.pms-tl-wrap .tl-scroll::-webkit-scrollbar { height: 10px; }
.pms-tl-wrap .tl-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 2px; }
.pms-tl-wrap .tl-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 2px; }

/* existing-customer & exposure */
.pms-expo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; margin-bottom: 0.6rem; }
.pms-expo-fig { display: flex; flex-direction: column; gap: 0.1rem; border: 1px solid var(--border); border-radius: 4px; padding: 0.6rem 0.7rem; background: rgba(0,0,0,0.15); }
.pms-expo-n { font-size: 1.3rem; font-weight: 700; }
.pms-active-row td { background: rgba(51,149,224,0.05); }

/* payment / contact / area status pills */
.pms-pay { font-size: 0.74rem; padding: 0.1rem 0.45rem; border-radius: 4px; white-space: nowrap; }
.pms-pay.ok { background: rgba(70,200,120,0.16); color: #7ee2a8; }
.pms-pay.warn { background: rgba(240,190,90,0.16); color: #f2cd82; }
.pms-pay.bad { background: rgba(255,110,110,0.16); color: #ff9a9a; }
.pms-area { font-size: 0.72rem; padding: 0.05rem 0.4rem; border-radius: 4px; margin-left: 0.4rem; white-space: nowrap; }
.pms-area.ok { color: #7ee2a8; } .pms-area.warn { color: #f2cd82; } .pms-area.bad { color: #ff9a9a; }
.pms-contact-note { margin-top: 0.6rem; }
.pms-contact-note span { font-size: 0.72rem; color: var(--muted); }
.pms-upload { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.35rem; }

.pms-hidden { display: none !important; }

/* ── Knowledge base (/admin/knowledge) ─────────────────────────────────────── */
.kb-add { border: 1px solid var(--border); border-radius: 5px; padding: 1rem 1.1rem; margin: 0.4rem 0 1rem; background: rgba(0,0,0,0.12); display: flex; flex-direction: column; gap: 0.8rem; }
.kb-add-modes { display: flex; align-items: center; gap: 0.5rem; }
.kb-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.7rem 0.9rem; }
.kb-add-grid .kb-span2 { grid-column: span 2; }
.kb-paste { min-height: 8rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; resize: vertical; }
.kb-title-btn { background: none; border: none; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.kb-title-btn:hover { text-decoration: underline; }

.kb-detail { display: flex; flex-direction: column; gap: 0.7rem; }
.kb-detail-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.kb-chip { font-size: 0.72rem; padding: 0.12rem 0.5rem; border-radius: 4px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.kb-detail-file { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0; }
.kb-detail-img { max-width: 100%; border: 1px solid var(--border); border-radius: 4px; }
.kb-detail-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
.kb-tag { font-size: 0.72rem; padding: 0.08rem 0.45rem; border-radius: 2px; background: rgba(51,149,224,0.14); color: #b3d9f2; }
.kb-detail-h { margin: 0.4rem 0 0; font-size: 0.9rem; }
.kb-detail-text { white-space: pre-wrap; word-break: break-word; max-height: 26rem; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; line-height: 1.5; border: 1px solid var(--border); border-radius: 4px; padding: 0.7rem 0.8rem; background: rgba(0,0,0,0.18); margin: 0; }

/* knowledge base — "Draft into…" previews */
.kb-draft-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.6rem; }
/* build/integrate: scope picker + AI plan */
.kb-build-scope { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 0.5rem; }
.kb-build-steps { margin: 0.4rem 0 0.2rem; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; }
.kb-build-steps li { line-height: 1.45; }
.kb-build-steps .lp-btn { margin-left: 0.5rem; }
.kb-build-target {
    display: inline-block; margin-right: 0.4rem; font-size: 0.68rem; font-weight: 600;
    border: 1px solid var(--border); border-radius: 4px; padding: 0.06rem 0.5rem; color: var(--muted);
}
.kb-build-oos { margin: 0.15rem 0 0.3rem; padding-left: 1.3rem; }
.kb-draft-preview { border: 1px solid var(--border); border-radius: 4px; padding: 0.7rem 0.8rem; background: rgba(51,149,224,0.05); display: flex; flex-direction: column; gap: 0.45rem; }
.kb-draft-tree { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; }
.kb-draft-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.kb-draft-table th, .kb-draft-table td { text-align: left; padding: 0.3rem 0.45rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.kb-draft-table .sm { font-size: 0.78rem; }
.kb-draft-stages { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.kb-draft-stage { border: 1px solid var(--border); border-left: 3px solid #3395e0; border-radius: 3px; padding: 0.25rem 0.55rem; font-size: 0.82rem; }
.kb-draft-stage .muted { font-size: 0.7rem; margin-left: 0.3rem; }

/* ── Complex forms: explicit grid, group boxes, wizard presentation ─────────── */
.form-fields-grid { display: grid; gap: 0.9rem 1rem; }
.form-fields-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-fields-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-fields-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-fields-grid .fr-span-2 { grid-column: span 2; }
.form-fields-grid .fr-span-3 { grid-column: span 3; }
.form-fields-grid .fr-span-4 { grid-column: span 4; }
@media (max-width: 860px) {
  .form-fields-grid-3, .form-fields-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-fields-grid .fr-span-3, .form-fields-grid .fr-span-4 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .form-fields-grid-2, .form-fields-grid-3, .form-fields-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .form-fields-grid .fr-span-2, .form-fields-grid .fr-span-3, .form-fields-grid .fr-span-4 { grid-column: span 1; }
}

.form-group-box { border: 1px solid var(--border); border-radius: 4px; padding: 0.8rem 0.9rem 0.9rem; margin: 0 0 0.9rem; min-width: 0; }
.form-group-legend { padding: 0 0.4rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); text-transform: uppercase; }

.form-wizard-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.1rem; }
.form-wizard-step { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--fg); padding: 0.3rem 0.8rem 0.3rem 0.35rem; font: inherit; font-size: 0.86rem; cursor: pointer; }
.form-wizard-step:disabled { opacity: 0.45; cursor: default; }
.form-wizard-step-n { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 4px; background: rgba(255,255,255,0.08); font-size: 0.78rem; font-weight: 700; }
.form-wizard-step.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.form-wizard-step.current .form-wizard-step-n { background: var(--accent); color: #fff; }
.form-wizard-step.done .form-wizard-step-n { background: rgba(70,200,120,0.2); color: #7ee2a8; }
.form-wizard-step-sep { width: 1.1rem; height: 1px; background: var(--border); flex: none; }
.form-wizard-nav { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.form-wizard-spacer { flex: 1; }
.form-wizard-error { font-size: 0.85rem; }
.form-wizard-final { font-size: 0.85rem; }

/* form editor: drag grips, drop affordance, presentation picker */
.fe-grip { cursor: grab; user-select: none; color: var(--muted); font-size: 0.95rem; padding: 0.1rem 0.25rem; border-radius: 2px; flex: none; align-self: center; }
.fe-grip:hover { color: var(--fg); background: rgba(255,255,255,0.07); }
.fe-grip:active { cursor: grabbing; }
.form-edit-field.fe-drop-ok { outline: 1px dashed rgba(51,149,224,0.55); outline-offset: 2px; }
.form-edit-presentation { display: flex; align-items: center; gap: 0.7rem; margin: 0.3rem 0 0.6rem; }

/* ── Display field kinds: stat tiles, progress, badges, notes, widget slots ── */
.form-field-viz { display: block; }
.form-stat { display: flex; gap: 0.7rem; align-items: flex-start; border: 1px solid var(--border); border-radius: 5px; padding: 0.8rem 0.95rem; background: rgba(0,0,0,0.14); height: 100%; }
.form-stat-icon { font-size: 1.5rem; line-height: 1.2; }
.form-stat-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.form-stat-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.form-stat-value { font-size: 1.45rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.form-stat-sub { font-size: 0.78rem; }

.form-progress { display: flex; flex-direction: column; gap: 0.3rem; }
.form-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.form-progress-readout { font-weight: 700; font-size: 0.95rem; }
.form-progress-track { height: 0.55rem; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.form-progress-bar { height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.35s ease; }

.form-badge-wrap { display: flex; flex-direction: column; gap: 0.25rem; }
.form-badge { --badge-color: #b3d9f2; display: inline-flex; align-self: flex-start; align-items: center; padding: 0.18rem 0.65rem; border-radius: 4px; font-size: 0.82rem; font-weight: 600; color: var(--badge-color); background: color-mix(in srgb, var(--badge-color) 16%, transparent); border: 1px solid color-mix(in srgb, var(--badge-color) 40%, transparent); }

.form-note { display: flex; gap: 0.6rem; border-left: 3px solid var(--border); padding: 0.35rem 0 0.35rem 0.75rem; }
.form-note-icon { font-size: 1.2rem; }
.form-note-title { display: block; font-size: 0.88rem; margin-bottom: 0.15rem; }
.form-note-body { margin: 0; font-size: 0.84rem; color: var(--muted); line-height: 1.5; }

.form-widget-slot { min-width: 0; }
.form-widget-placeholder { border: 1px dashed var(--border); border-radius: 4px; padding: 0.7rem 0.9rem; font-size: 0.85rem; }

/* built-in widgets */
.fw-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.fw-tl-row { display: flex; align-items: baseline; gap: 0.55rem; }
.fw-tl-icon { flex: none; width: 1.2rem; text-align: center; }
.fw-tl-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fw-tl-title { font-size: 0.86rem; font-weight: 600; }
.fw-tl-detail { font-size: 0.76rem; }
.fw-tl-time { flex: none; font-size: 0.74rem; white-space: nowrap; }
.fw-tl-empty { font-size: 0.85rem; }
.fw-docs { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.fw-doc-row { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.86rem; }
.fw-doc-row .muted { font-size: 0.76rem; }
.fw-docs-toggle { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; font: inherit;
    color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); border: 1px solid var(--border);
    border-radius: 3px; padding: 0.35rem 0.7rem; cursor: pointer; }
.fw-docs-toggle:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent); }
.fw-docs-caret { color: var(--muted); font-size: 0.75rem; }
.fe-opt-color { width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid var(--border); border-radius: 3px; background: transparent; flex: none; }

/* knowledge base — quick-capture paste zone + classify-later */
.kb-quick-zone { display: flex; align-items: center; gap: 0.6rem; border: 1.5px dashed var(--border); border-radius: 5px; padding: 0.75rem 1rem; margin: 0.2rem 0 0.7rem; font-size: 0.9rem; color: var(--muted); cursor: text; outline: none; }
.kb-quick-zone:focus, .kb-quick-zone.attachments-zone-hover { border-color: var(--accent); color: var(--fg); box-shadow: 0 0 0 1px var(--accent); }
.kb-quick-icon { font-size: 1.2rem; }
.kb-quick-busy { margin-left: auto; font-size: 0.82rem; color: var(--accent); white-space: nowrap; }
/* The "just added" confirmation — a picture of what you pasted/uploaded, not just a status line,
   so attaching a screenshot is obviously confirmed right where you're looking instead of only
   showing up once you scroll down to the attachments list. */
.kb-quick-added { display: flex; align-items: center; gap: 0.6rem;
    border: 1px solid color-mix(in srgb, #22c55e 45%, transparent);
    background: color-mix(in srgb, #22c55e 10%, transparent);
    border-radius: 4px; padding: 0.5rem 0.7rem; margin: 0.3rem 0 0.7rem;
    animation: kb-quick-added-in 0.25s ease-out; }
.kb-quick-added img { width: 48px; height: 48px; border-radius: 2px; object-fit: cover;
    border: 1px solid var(--border); flex: 0 0 auto; }
.kb-quick-added strong { color: color-mix(in srgb, #22c55e 75%, var(--fg)); }
@keyframes kb-quick-added-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.kb-chip-warn { border-color: rgba(240,190,90,0.5); color: #f2cd82; }
.kb-classify { border: 1px solid var(--border); border-radius: 4px; padding: 0.55rem 0.8rem; }
.kb-classify summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; }
.kb-classify .kb-add-grid { margin-top: 0.6rem; }

/* knowledge base — ideas view (card grid + discussion page) */
.kb-view-toggle { display: flex; gap: 0.5rem; margin: 0 0 0.7rem; }
.kb-idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.8rem; margin-top: 0.4rem; }
.kb-idea-card { display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid var(--border); border-radius: 5px; padding: 0.85rem 1rem; background: rgba(0,0,0,0.12); color: var(--fg); text-decoration: none; transition: border-color 0.15s; }
.kb-idea-card:hover { border-color: var(--accent); }
.kb-idea-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.kb-idea-snippet { margin: 0; font-size: 0.84rem; color: var(--muted); }
.kb-idea-foot { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-top: auto; }
.kb-stage-open { border-color: rgba(120,200,140,0.5); color: #9fd8ae; }
.kb-stage-exploring { border-color: rgba(120,170,240,0.5); color: #b3d9f2; }
.kb-stage-adopted { border-color: rgba(120,220,160,0.7); color: #7ee2a8; }
.kb-stage-declined { border-color: rgba(240,130,120,0.5); color: #f0a49c; }
.kb-stage-archived { opacity: 0.7; }
.kb-idea-body { width: 100%; min-height: 10rem; resize: vertical; }
.kb-idea-attachments { display: flex; flex-direction: column; gap: 0.5rem; }
.kb-idea-attachment { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 0.8rem; font-size: 0.86rem; }
.kb-idea-attachment .spacer { margin-left: auto; }
.kb-idea-thumb { width: 40px; height: 40px; border-radius: 2px; object-fit: cover; flex: 0 0 auto;
    border: 1px solid var(--border); background: var(--bg); }
.kb-idea-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex: 0 0 auto; }

/* form editor — "Where used" placement panel */
.form-edit-whereused { border: 1px solid var(--border); border-radius: 4px; padding: 0.6rem 0.85rem; margin: 0.5rem 0 0.2rem; background: rgba(51,149,224,0.05); }
.form-edit-whereused-off { background: rgba(240,190,90,0.06); border-color: rgba(240,190,90,0.4); }
.form-edit-whereused-h { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; }
.form-edit-whereused-warn { display: block; color: #f2cd82; font-size: 0.84rem; margin-top: 0.2rem; }
.form-edit-whereused-list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; font-size: 0.86rem; }
.form-edit-whereused-list li { white-space: normal; }

/* document templates — draft-from-example step flow */
.doctmpl-fromexample .doctmpl-steps { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.doctmpl-steps > li { display: flex; gap: 0.7rem; align-items: flex-start; opacity: 0.55; }
.doctmpl-steps > li.current, .doctmpl-steps > li.done { opacity: 1; }
.doctmpl-step-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 4px; background: rgba(255,255,255,0.08); font-size: 0.82rem; font-weight: 700; }
.doctmpl-steps > li.current .doctmpl-step-n { background: var(--accent); color: #fff; }
.doctmpl-steps > li.done .doctmpl-step-n { background: rgba(70,200,120,0.2); color: #7ee2a8; }
.doctmpl-steps > li.done .doctmpl-step-n::after { content: "✓"; }
.doctmpl-steps > li.done .doctmpl-step-n { font-size: 0; }
.doctmpl-steps > li.done .doctmpl-step-n::after { font-size: 0.9rem; }
.doctmpl-upload-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; flex-wrap: wrap; }

/* document templates — signing panel editor, refine compare, binding scan, email row */
.doctmpl-signer-row { display: flex; gap: 0.6rem; align-items: flex-end; margin: 0.45rem 0; flex-wrap: wrap; }
.doctmpl-signer-row label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--muted); }
.doctmpl-original { width: 100%; max-height: 420px; border: 1px solid var(--border); border-radius: 3px; margin: 0.5rem 0; object-fit: contain; background: #fff; }
.doctmpl-original-pdf { height: 420px; }
.doctmpl-refine-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.5rem 0; }
.doctmpl-map-table { margin-top: 0.6rem; }
.doctmpl-map-table code { word-break: break-all; }
.doctmpl-email-row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }
.doctmpl-email-row input { max-width: 260px; }

/* shared "Edit this form" deep-link row above a rendered form */

/* ── Sticky page actions ─────────────────────────────────────────────────────
   Long workspace pages put their primary actions (Save / Record decision / …) in a row that
   rides the bottom of the scroll viewport while the page extends past it, and settles inline
   once you reach its natural position — Save is always in reach, no hunting at the page end.
   Sticky is relative to the app's scroll container (.shell, overflow:auto), so it coexists
   with the pinned AI drawer (which pads .shell, not the viewport). */
.page-actions-sticky {
    position: sticky; bottom: 0; z-index: 8;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    padding: 0.65rem 0.2rem;
    margin-top: 0.6rem;
}
.form-banner-inline { font-size: 0.85rem; margin-left: 0.4rem; }
.form-banner-inline.form-banner-error { color: #ff9a9a; }
.form-banner-inline.form-banner-warn { color: #ffc978; }
.form-banner-inline.form-banner-ok { color: #7ee2a8; }
.form-banner-inline.form-banner-info { color: #b3d9f2; }

/* ── Page action bar ─────────────────────────────────────────────────────────────
   A single primary-action row locked across the full width of the page bottom (Save / Record /
   …). Place it as the LAST child of a .page section: being last means nothing ever renders
   beneath it (the earlier in-panel sticky let the Documents/Timeline below bleed through). It
   full-bleeds across the content column by canceling .page's 1.5rem side padding, and eats
   .page's 2rem bottom padding so — with .shell's bottom padding zeroed — it locks flush to the
   scroll-area bottom. Sticky (not fixed) so it stays inside .shell and shrinks with the pinned
   AI drawer / side panel instead of overlapping them. */
.page-actionbar {
    position: sticky; bottom: 0; z-index: 8;
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    margin: 1.2rem -1.5rem -2rem;
    padding: 0.8rem 1.5rem;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -12px 28px -22px rgba(0, 0, 0, 0.85);
}
.page-actionbar-msg { font-size: 0.85rem; margin-left: 0.3rem; }
.page-actionbar-msg.form-banner-error { color: #ff9a9a; }
/* Amber, not the error red it used to share: a change filed for approval is a warning about where
   the change went, not a failure. Matches the queued strip and the queued status chip. */
.page-actionbar-msg.form-banner-warn { color: #ffc978; font-weight: 600; }
.page-actionbar-msg.form-banner-ok { color: #7ee2a8; }
.page-actionbar-msg.form-banner-info { color: #b3d9f2; }
/* The form editor's bar is nowrap + overflow-x (it carries ~13 tools), so a message in it must not
   be squeezed to a sliver by the buttons after it — it holds its own width and the BAR scrolls. */
.form-edit-actionbar .page-actionbar-msg { flex: 0 0 auto; max-width: 46rem; }
/* On a narrow viewport the message wraps to its own full-width line under the buttons. */
@media (max-width: 560px) { .page-actionbar-msg { flex-basis: 100%; margin-left: 0; } }

/* ── Perceived responsiveness ──────────────────────────────────────────────────
   Blazor Server round-trips every event, so the click itself must acknowledge
   INSTANTLY on the client: a pressed state costs nothing and removes the
   "did I even click?" doubt while the server round-trip is in flight. */
.lp-btn:active:not(:disabled),
.reconnect-btn:active,
.form-tab:active,
.fe-tab:active,
.form-wizard-step:active:not(:disabled),
.ws-menu-item:active,
.dash-quick-tile:active,
.kb-title-btn:active {
    transform: translateY(1px) scale(0.985);
    filter: brightness(0.88);
    transition: transform 0.03s linear, filter 0.03s linear;
}
.lp-btn:disabled { opacity: 0.55; cursor: progress; }

/* Until the interactive circuit is up, clicks go nowhere — make that state visible
   instead of silent: a slim animated bar across the top + progress cursor on
   interactive elements. html.blazor-ready is stamped by the Blazor.start() hook. */
html:not(.blazor-ready) body::before {
    content: "";
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 3000;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    background-size: 40% 100%; background-repeat: no-repeat;
    animation: aeon-connecting 1s linear infinite;
}
@keyframes aeon-connecting {
    from { background-position: -40% 0; }
    to   { background-position: 140% 0; }
}
html:not(.blazor-ready) .lp-btn,
html:not(.blazor-ready) button,
html:not(.blazor-ready) select,
html:not(.blazor-ready) input[type="checkbox"] {
    cursor: progress;
}

/* =============================================================================
   Config-change nudge — "link these edits to a feature set" (bottom-left toast)
   ========================================================================== */
.cfg-nudge-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.94rem; }
.cfg-nudge-icon { font-size: 1.05rem; }
.cfg-nudge-body { margin: 0.4rem 0 0.6rem; font-size: 0.85rem; line-height: 1.45; color: var(--fg); }
.cfg-nudge-body.muted { color: var(--muted); }
.cfg-nudge-actions { display: flex; gap: 0.4rem; align-items: center; }
.cfg-nudge-actions .auth-input { flex: 1 1 auto; min-width: 0; }
.cfg-nudge-actions .lp-btn { flex: none; }
.cfg-nudge-alt { margin-top: 0.45rem; padding-left: 0; }
.cfg-nudge-note { margin: 0.5rem 0 0; font-size: 0.76rem; }
.cfg-nudge-err { margin: 0.5rem 0 0; font-size: 0.8rem; }
.cfg-nudge-done { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; line-height: 1.4; padding-right: 1rem; }
.cfg-nudge-dot { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px color-mix(in srgb, #34d399 25%, transparent); }

/* "What was detected" expander inside the nudge */
.cfg-nudge-toggle { background: none; border: none; padding: 0; margin: 0 0 0.5rem; cursor: pointer;
    color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.cfg-nudge-toggle:hover { color: var(--fg); }
.cfg-nudge-detail { margin: 0 0 0.65rem; max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem;
    border: 1px solid var(--border); border-radius: 3px; padding: 0.45rem; background: rgba(255,255,255,0.02); }
.cfg-nudge-chg { border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.4rem; }
.cfg-nudge-chg:last-child { border-bottom: none; padding-bottom: 0; }
.cfg-nudge-chg-head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.8rem; }
.cfg-nudge-chg-type { font-weight: 600; }
.cfg-nudge-op { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 0.05rem 0.35rem; border-radius: 4px; }
.cfg-nudge-op.op-added { background: rgba(52,211,153,0.16); color: #6ee7b7; }
.cfg-nudge-op.op-modified { background: rgba(51,149,224,0.16); color: #b3d9f2; }
.cfg-nudge-op.op-deleted { background: rgba(248,113,113,0.16); color: #fca5a5; }
.cfg-nudge-warn { font-size: 0.68rem; font-weight: 600; color: #fbbf24; }
.cfg-nudge-peek { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--muted);
    font-size: 0.72rem; text-decoration: underline; padding: 0; }
.cfg-nudge-peek:hover { color: var(--fg); }
.cfg-nudge-chg-sub { font-size: 0.72rem; color: var(--muted); margin-top: 0.12rem; }
.cfg-nudge-chg-sub code { font-size: 0.7rem; }
.cfg-nudge-json { margin: 0.35rem 0 0; max-height: 30vh; overflow: auto; background: #101010; border: 1px solid var(--border);
    border-radius: 2px; padding: 0.5rem; font-size: 0.68rem; line-height: 1.4; white-space: pre; color: #cfcfcf; }

/* Sections within the config-changes flyin beyond the primary link flow: the wider unassigned
   backlog + the "other feature sets" browser. */
.cfg-nudge-section { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--border); }
.cfg-nudge-setlist { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem;
    max-height: 30vh; overflow-y: auto; }
.cfg-nudge-setlist-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.cfg-nudge-setlist-name { min-width: 0; overflow-wrap: anywhere; }

/* Feature-set recorded-change payload viewer (/admin/feature-sets detail) */
.fs-nochange { color: #fbbf24; font-weight: 700; cursor: help; }
/* Row-level lifecycle buttons on the feature-set list — compact, no wrap-per-button. */
td.fs-rowactions { white-space: nowrap; text-align: right; }
td.fs-rowactions .lp-btn { padding: 0.2rem 0.55rem; font-size: 0.74rem; margin-left: 0.3rem; }
.fs-payload-row > td { padding: 0 !important; background: rgba(255,255,255,0.02); }
.fs-payload { margin: 0; max-height: 46vh; overflow: auto; background: #101010; border: 0; border-radius: 0;
    padding: 0.7rem 0.9rem; font-size: 0.72rem; line-height: 1.45; white-space: pre; color: #cfcfcf; }

/* ===== Dev mailbox (/admin/mailbox) — a real-inbox two-pane layout ===== */
.mbx-unread-badge {
    display: inline-block; vertical-align: middle; margin-left: 0.6rem; padding: 0.12rem 0.6rem;
    border-radius: 4px; background: rgba(51,149,224,0.16); color: #b3d9f2;
    font-size: 0.72rem; font-weight: 600;
}
.mbx { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 0; margin-top: 1rem;
    border: 1px solid var(--border); border-radius: 6px; overflow: hidden; min-height: 560px; background: #171717; }
.mbx-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; max-height: 78vh; }
.mbx-list-head { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border); font-size: 0.78rem; color: var(--muted); position: sticky; top: 0; background: #171717; z-index: 1; }
.mbx-item { display: flex; gap: 0.5rem; width: 100%; text-align: left; padding: 0.7rem 0.9rem;
    background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; color: inherit; }
.mbx-item:hover { background: rgba(255,255,255,0.03); }
.mbx-item.on { background: rgba(51,149,224,0.1); }
.mbx-item.unread .mbx-subject, .mbx-item.unread .mbx-from { font-weight: 700; color: #fff; }
.mbx-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3395e0; margin-top: 0.45rem; }
.mbx-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.mbx-item-top { display: flex; justify-content: space-between; gap: 0.5rem; }
.mbx-from { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-date { font-size: 0.72rem; color: var(--muted); flex: none; }
.mbx-subject { font-size: 0.83rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-to { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-reading { display: flex; flex-direction: column; min-width: 0; }
.mbx-read-head { padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); }
.mbx-read-subject { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; }
.mbx-read-meta { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.mbx-meta-k { display: inline-block; width: 3rem; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.mbx-read-actions { margin-top: 0.7rem; }
/* Scoped to the mailbox reading pane — was a GLOBAL `.lp-btn.danger` that leaked a muted-red text
   colour onto every danger button in the app (e.g. "Clear transactional data" read as greyed). */
.mbx-read-actions .lp-btn.danger { color: #ff9a9a; border-color: rgba(255,110,110,0.35); }
.mbx-attachments { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.7rem 1.2rem; border-bottom: 1px solid var(--border); }
.mbx-att-label { font-size: 0.78rem; color: var(--muted); }
.mbx-att { font-size: 0.8rem; padding: 0.25rem 0.6rem; border: 1px solid var(--border); border-radius: 3px; background: #1c1c1c; text-decoration: none; color: #b3d9f2; }
.mbx-att:hover { border-color: color-mix(in srgb, #3395e0 45%, var(--border)); }
.mbx-body { flex: 1; width: 100%; border: none; background: #fff; min-height: 72vh; }
.mbx-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 3rem 1rem; color: var(--muted); text-align: center; }
.mbx-empty-ico { font-size: 2rem; opacity: 0.7; }
@media (max-width: 820px) { .mbx { grid-template-columns: 1fr; } .mbx-list { max-height: 40vh; } }

/* ---- Interface Workbench (/admin/interface-hub) ---- */
.ifhub-shell { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; align-items: start; margin-top: 0.8rem; }
.ifhub-rail { display: flex; flex-direction: column; gap: 0.55rem; position: sticky; top: calc(var(--topbar-h) + 0.8rem); }
.ifhub-chiprow { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ifhub-chip { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 4px; padding: 0.16rem 0.6rem; font-size: 0.74rem; cursor: pointer; }
.ifhub-chip.on { border-color: var(--accent); color: var(--fg); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ifhub-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: calc(100vh - var(--topbar-h) - 12rem); overflow-y: auto; padding-right: 0.15rem; }
.ifhub-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: 4px; padding: 0.45rem 0.6rem; cursor: pointer; transition: border-color var(--dur) var(--ease-standard), background var(--dur) var(--ease-standard); }
.ifhub-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ifhub-item:active { transform: translateY(1px); }
.ifhub-item.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ifhub-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ifhub-item-code { font-weight: 700; font-size: 0.83rem; display: flex; align-items: center; gap: 0.3rem; }
.ifhub-item-name { color: var(--muted); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifhub-item-side { flex: 0 0 auto; }
.ifhub-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; background: var(--muted); }
.ifhub-dot.live { background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.6); }
.ifhub-dot.mock { background: #fbbf24; }
.ifhub-dot.loopback { background: #b3d9f2; }
.ifhub-dot.design { background: #545454; }
.ifhub-errbadge { color: #f87171; font-size: 0.72rem; font-weight: 700; }
.ifhub-okbadge { color: #34d399; font-size: 0.72rem; }
.ifhub-main { min-width: 0; }
.ifhub-empty { padding: 2rem; }
.ifhub-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.7rem 0.9rem; flex-wrap: wrap; }
.ifhub-head-id { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; min-width: 0; }
.ifhub-code { font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.95rem; border: 1px solid var(--border); border-radius: 3px; padding: 0.2rem 0.55rem; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ifhub-head-name { display: flex; flex-direction: column; line-height: 1.25; }
.ifhub-head-name .muted { font-size: 0.75rem; }
.ifhub-head-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.ifhub-pill { font-size: 0.7rem; font-weight: 700; border-radius: 4px; padding: 0.14rem 0.55rem; border: 1px solid var(--border); color: var(--muted); }
.ifhub-pill.live { color: #34d399; border-color: color-mix(in srgb, #34d399 45%, var(--border)); }
.ifhub-pill.mock { color: #fbbf24; border-color: color-mix(in srgb, #fbbf24 45%, var(--border)); }
.ifhub-pill.loopback { color: #b3d9f2; border-color: color-mix(in srgb, #b3d9f2 45%, var(--border)); }
.ifhub-tabs { display: flex; gap: 0.25rem; margin: 0.7rem 0; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.ifhub-tab { border: none; background: transparent; color: var(--muted); padding: 0.45rem 0.8rem; font-size: 0.85rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ifhub-tab:hover { color: var(--fg); }
.ifhub-tab.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.ifhub-tabcount { background: color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 4px; padding: 0 0.4rem; font-size: 0.7rem; margin-left: 0.3rem; }
.ifhub-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.ifhub-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.8rem; align-items: end; }
.ifhub-span2 { grid-column: span 2; }
.ifhub-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.83rem; color: var(--fg); }
.ifhub-btnrow { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }
.ifhub-urlline { margin: 0.5rem 0 0; }
.ifhub-policy { border: 1px dashed var(--border); border-radius: 4px; padding: 0.55rem 0.75rem; margin-top: 0.7rem; font-size: 0.86rem; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ifhub-yaml { width: 100%; }
.ifhub-details { margin-top: 0.7rem; }
.ifhub-details > summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.ifhub-h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0.8rem 0 0.3rem; }
.ifhub-params td { font-size: 0.8rem; }
.ifhub-bind { font-size: 0.74rem; border-radius: 2px; padding: 0.1rem 0.4rem; border: 1px solid var(--border); white-space: nowrap; }
.ifhub-bind.explicit { color: #3395e0; border-color: color-mix(in srgb, #3395e0 45%, var(--border)); }
.ifhub-bind.conv { color: #c084fc; border-color: color-mix(in srgb, #c084fc 45%, var(--border)); }
.ifhub-bind.formula { color: #fbbf24; border-color: color-mix(in srgb, #fbbf24 45%, var(--border)); }
.ifhub-bind.none { color: var(--muted); border-style: dashed; }
.ifhub-out { background: #131313; border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.7rem; font-size: 0.76rem; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.ifhub-out.bad { border-color: color-mix(in srgb, #f87171 55%, var(--border)); }
.ifhub-scenario { border: 1px solid var(--border); border-radius: 4px; padding: 0.6rem; margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ifhub-scenario.active { border-color: color-mix(in srgb, #fbbf24 55%, var(--border)); }
.ifhub-scenario-head { display: flex; gap: 0.45rem; align-items: center; }
.ifhub-scenario-head .auth-input.sm { padding: 0.25rem 0.5rem; font-size: 0.82rem; }
.ifhub-status { width: 5.2rem; flex: 0 0 auto; }
.ifhub-statrow { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ifhub-stat { border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 0.9rem; text-align: center; min-width: 5rem; }
.ifhub-stat b { display: block; font-size: 1.15rem; }
.ifhub-stat span { color: var(--muted); font-size: 0.72rem; }
.ifhub-stat.bad b { color: #f87171; }
.ifhub-wiredigest { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.86rem; }
.ifhub-revs { list-style: none; margin: 0.3rem 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; }
.ifhub-subrow { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; border: 1px solid var(--border); border-radius: 4px; padding: 0.55rem 0.7rem; margin-top: 0.5rem; }
.ifhub-subrow.off { opacity: 0.55; }
.ifhub-subrow-main { display: flex; flex-direction: column; gap: 0.12rem; font-size: 0.84rem; min-width: 0; }
.ifhub-result { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.7rem; padding: 0.45rem 0.7rem; border: 1px solid color-mix(in srgb, #34d399 45%, var(--border)); border-radius: 3px; }
.ifhub-result.bad { border-color: color-mix(in srgb, #f87171 55%, var(--border)); }
.ifhub-runlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.ifhub-runrow { display: flex; justify-content: space-between; gap: 0.6rem; width: 100%; text-align: left; border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: 3px; padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.82rem; }
.ifhub-runrow:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ifhub-runrow.bad { border-color: color-mix(in srgb, #f87171 40%, var(--border)); }
.ifhub-actbar { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.ifhub-acttable td { font-size: 0.82rem; }
.ifhub-actbad td:first-child { border-left: 2px solid #f87171; }
.ifhub-actdetail td { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* The causation trace on the Activity tab: one call per row, oldest first, with the row the
   user opened it from marked so a long chain doesn't lose its anchor. */
.ifhub-flow { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.ifhub-flow li { display: flex; align-items: baseline; gap: 0.45rem; font-size: 0.85rem;
  padding: 0.3rem 0.5rem; border-left: 2px solid var(--border); }
.ifhub-flow li.on { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* Scoped to the interface hub — was a GLOBAL `.lp-btn.danger` leaking muted-red text onto every
   danger button app-wide (same bug as the mailbox one above). */
.ifhub-actbar .lp-btn.danger { color: #f87171; }
@media (max-width: 1000px) { .ifhub-shell { grid-template-columns: 1fr; } .ifhub-rail { position: static; } .ifhub-grid2 { grid-template-columns: 1fr; } .ifhub-form { grid-template-columns: 1fr; } .ifhub-span2 { grid-column: span 1; } }

/* ---- Mapping Studio (/admin/mapping-studio) ---- */
.ms-hint { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0; min-height: 1.4rem; }
.ms-canvas { position: relative; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 3.2rem; align-items: start; padding: 0.4rem 0 1rem; }
.ms-wires { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ms-wire { fill: none; stroke-width: 1.6; opacity: 0.75; }
.ms-wire.form { stroke: #545454; stroke-dasharray: 4 3; opacity: 0.5; }
.ms-wire.form.hl { stroke: #e9edf6; opacity: 0.95; }
.ms-wire.req { stroke: #3395e0; }
.ms-wire.resp { stroke: #34d399; }
.ms-wire.sel { stroke-width: 2.6; opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
.ms-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ms-colhead { font-size: 0.95rem; margin: 0 0 0.4rem; }
.ms-colhead .muted { font-size: 0.75rem; font-weight: 400; }
.ms-blockhead { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0.7rem 0 0.2rem; padding-left: 0.2rem; }
.ms-blockhead.req { color: #3395e0; }
.ms-blockhead.resp { color: #34d399; }
.ms-blockhead .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ms-group { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.35rem; }
.ms-grouphead { display: flex; align-items: center; gap: 0.4rem; border: none; background: transparent; color: var(--muted); font-size: 0.8rem; font-weight: 700; cursor: pointer; padding: 0.2rem 0.1rem; text-align: left; }
.ms-grouphead:hover { color: var(--fg); }
.ms-node { display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; width: 100%; text-align: left; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 60%, transparent); color: var(--fg); border-radius: 3px; padding: 0.32rem 0.55rem; cursor: pointer; transition: border-color var(--dur) var(--ease-standard); }
.ms-node:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.ms-node:active { transform: translateY(1px); }
.ms-node-label { font-size: 0.79rem; font-weight: 600; word-break: break-all; }
.ms-node-sub { font-size: 0.68rem; color: var(--muted); }
.ms-node-val { font-size: 0.68rem; color: #fbbf24; font-family: ui-monospace, monospace; }
.ms-formfield { border-style: dashed; }
.ms-sdm.linked { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.ms-wirenode.linked.req { border-color: color-mix(in srgb, #3395e0 55%, var(--border)); }
.ms-wirenode.linked.resp { border-color: color-mix(in srgb, #34d399 55%, var(--border)); }
.ms-node.armed { border-color: #fbbf24; box-shadow: 0 0 0 2px color-mix(in srgb, #fbbf24 35%, transparent); }
.ms-node.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ms-node.hl { box-shadow: 0 0 0 2px color-mix(in srgb, var(--fg) 30%, transparent); }
.ms-inspector { margin-top: 0.6rem; }
.ms-insp-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.ms-insp-head h2 { margin: 0; font-size: 0.95rem; }
.ms-insp-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.2rem; align-items: start; margin-top: 0.6rem; }
.ms-arrow { font-weight: 700; padding: 0 0.25rem; }
.ms-arrow.req { color: #3395e0; }
.ms-arrow.resp { color: #34d399; }
.ms-step { border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 0.65rem; margin-bottom: 0.45rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ms-step-head { display: flex; justify-content: space-between; align-items: center; }
.ms-step-kind { font-size: 0.8rem; font-weight: 700; }
.ms-vmap { display: flex; flex-direction: column; gap: 0.3rem; }
.ms-vmap-row { display: flex; align-items: center; gap: 0.4rem; }
.ms-vmap-row .auth-input.sm { padding: 0.22rem 0.5rem; font-size: 0.8rem; }
.ms-preview { margin-top: 0.7rem; border-top: 1px dashed var(--border); padding-top: 0.5rem; }
.ms-preview-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ms-preview-in, .ms-preview-out { background: #131313; border: 1px solid var(--border); border-radius: 2px; padding: 0.25rem 0.55rem; font-size: 0.78rem; }
.ms-preview-out { border-color: color-mix(in srgb, #34d399 45%, var(--border)); }
.ms-golden { margin-top: 0.8rem; }
.ms-golden-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.5rem; }
.ms-verify td { font-size: 0.8rem; }
.ms-vbad td { color: #f87171; }
.ms-empty { padding: 1.6rem; }
@media (max-width: 1100px) { .ms-canvas { grid-template-columns: 1fr; gap: 0.8rem; } .ms-wires { display: none; } .ms-insp-grid, .ms-golden-grid { grid-template-columns: 1fr; } }
.ms-grouphead-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.ms-showall { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 4px; font-size: 0.68rem; padding: 0.08rem 0.5rem; cursor: pointer; flex: 0 0 auto; }
.ms-showall:hover { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ms-proposals td { vertical-align: top; }
.ms-stepchips { display: inline-block; margin-left: 0.4rem; font-size: 0.7rem; color: #fbbf24; border: 1px solid color-mix(in srgb, #fbbf24 40%, var(--border)); border-radius: 4px; padding: 0.05rem 0.45rem; }

/* ---- Field lineage (/admin/lineage) ---- */
.lin-shell { display: grid; grid-template-columns: 320px 1fr; gap: 1.1rem; align-items: start; margin-top: 0.8rem; }
.lin-rail { display: flex; flex-direction: column; gap: 0.5rem; position: sticky; top: calc(var(--topbar-h) + 0.8rem); max-height: calc(100vh - var(--topbar-h) - 2rem); overflow-y: auto; padding-right: 0.2rem; }
.lin-railnote { margin: 0.1rem 0 0; }
.lin-railgroup { display: flex; flex-direction: column; gap: 0.2rem; }
.lin-railentity { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 0.4rem; }
.lin-railpath { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; text-align: left; border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: 3px; padding: 0.34rem 0.55rem; cursor: pointer; font-size: 0.79rem; }
.lin-railpath:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.lin-railpath.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lin-railpath-name { word-break: break-all; }
.lin-railpath-badges { display: flex; gap: 0.35rem; font-size: 0.7rem; color: var(--muted); flex: 0 0 auto; }
.lin-railpath-badges .feed { color: #3395e0; }
.lin-railpath-badges .fill { color: #34d399; }
.lin-hits { display: flex; flex-direction: column; gap: 0.25rem; }
.lin-hit { display: flex; gap: 0.5rem; align-items: center; width: 100%; text-align: left; border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: 3px; padding: 0.4rem 0.55rem; cursor: pointer; }
.lin-hit:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.lin-hit-main { display: flex; flex-direction: column; font-size: 0.79rem; min-width: 0; }
.lin-hit-main .muted { font-size: 0.71rem; word-break: break-all; }
.lin-main { min-width: 0; }
.lin-empty { padding: 1.6rem; }
.lin-insights { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; min-height: 1.2rem; }
.lin-insight { font-size: 0.78rem; border: 1px solid var(--border); border-radius: 4px; padding: 0.2rem 0.7rem; }
.lin-insight.warn { color: #fbbf24; border-color: color-mix(in srgb, #fbbf24 45%, var(--border)); }
.lin-insight.info { color: var(--muted); }
.lin-chain { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 0; align-items: start; }
.lin-colhead { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding-bottom: 0.5rem; }
.lin-colhead.wires { text-align: left; padding-left: 2.4rem; }
.lin-col { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.lin-forms { align-items: stretch; }
.lin-hub { display: flex; align-items: center; padding: 0 2.4rem; position: relative; align-self: stretch; }
.lin-node { border: 2px solid var(--accent); border-radius: 5px; padding: 0.7rem 1rem; background: color-mix(in srgb, var(--accent) 10%, transparent); display: flex; flex-direction: column; gap: 0.15rem; max-width: 20rem; position: sticky; top: calc(var(--topbar-h) + 4rem); }
.lin-node-path { font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.92rem; word-break: break-all; }
.lin-node-sub { color: var(--muted); font-size: 0.74rem; }
.lin-node-val { color: #fbbf24; font-family: ui-monospace, monospace; font-size: 0.8rem; margin-top: 0.2rem; }
.lin-card { position: relative; border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 0.7rem; display: flex; flex-direction: column; gap: 0.12rem; background: color-mix(in srgb, var(--bg) 60%, transparent); }
.lin-card-title { font-size: 0.83rem; font-weight: 600; word-break: break-all; }
.lin-card-title code { font-size: 0.78rem; }
.lin-card-sub { color: var(--muted); font-size: 0.72rem; }
.lin-card-kind { font-size: 0.74rem; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.lin-card-val { color: #fbbf24; font-family: ui-monospace, monospace; font-size: 0.75rem; }
.lin-card-link { font-size: 0.72rem; align-self: flex-end; }
.lin-card.form { border-style: dashed; }
.lin-card.form::after { content: ""; position: absolute; right: -2.4rem; top: 50%; width: 2.4rem; border-top: 1.6px dashed #545454; }
.lin-card.feed { border-color: color-mix(in srgb, #3395e0 45%, var(--border)); }
.lin-card.feed::before { content: ""; position: absolute; left: -2.4rem; top: 50%; width: 2.4rem; border-top: 1.6px solid #3395e0; }
.lin-card.fill { border-color: color-mix(in srgb, #34d399 45%, var(--border)); }
.lin-card.fill::before { content: ""; position: absolute; left: -2.4rem; top: 50%; width: 2.4rem; border-top: 1.6px solid #34d399; }
@media (max-width: 1100px) { .lin-shell { grid-template-columns: 1fr; } .lin-rail { position: static; max-height: none; } .lin-chain { grid-template-columns: 1fr; } .lin-hub { padding: 0.8rem 0; } .lin-card.form::after, .lin-card.feed::before, .lin-card.fill::before { display: none; } .lin-colhead.wires { padding-left: 0; } }

/* ---- retired Form ↔ API mapping page ---- */
.fm-retired-pill { font-size: 0.7rem; font-weight: 700; vertical-align: middle; border: 1px solid color-mix(in srgb, #fbbf24 55%, var(--border)); color: #fbbf24; border-radius: 4px; padding: 0.15rem 0.6rem; margin-left: 0.5rem; letter-spacing: 0.04em; text-transform: uppercase; }
.fm-retired-banner { border: 1px solid color-mix(in srgb, #fbbf24 40%, var(--border)); border-radius: 5px; padding: 0.9rem 1.1rem; margin: 0.6rem 0 1rem; background: color-mix(in srgb, #fbbf24 6%, transparent); display: flex; flex-direction: column; gap: 0.5rem; }
.fm-retired-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---- Application chat dock (dealer ↔ underwriter) ---- */
.appchat { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; }
.appchat-fab { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 88%, var(--accent)); color: var(--fg); border-radius: 4px; padding: 0.55rem 1rem; font-size: 0.86rem; font-weight: 600; cursor: pointer; box-shadow: var(--elev-2); }
.appchat-fab:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.appchat-fab:active { transform: translateY(1px); }
.appchat-unread { background: #f87171; color: #fff; border-radius: 4px; font-size: 0.7rem; padding: 0.05rem 0.45rem; font-weight: 700; }
.appchat-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.appchat-dot.available { background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.6); }
.appchat-dot.viewing { background: #34d399; box-shadow: 0 0 0 3px color-mix(in srgb, #34d399 30%, transparent); animation: appchat-pulse 2s infinite; }
.appchat-dot.away { background: #fbbf24; }
.appchat-dot.off { background: #545454; }
.appchat-dot.pulse { animation: appchat-pulse 2s infinite; }
@keyframes appchat-pulse { 0%,100% { box-shadow: 0 0 0 2px color-mix(in srgb, #34d399 35%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, #34d399 15%, transparent); } }

/* Closed-dock nudge: "the other side is reachable right now" — sits above the FAB */
.appchat-callout { display: flex; align-items: center; gap: 0.55rem; max-width: 340px; margin-bottom: 0.55rem; border: 1px solid color-mix(in srgb, #34d399 45%, var(--border)); background: color-mix(in srgb, var(--bg) 92%, #34d399); border-radius: 5px; padding: 0.55rem 0.7rem; box-shadow: var(--elev-2); animation: appchat-callout-in 0.25s ease-out; }
.appchat-callout-text { font-size: 0.82rem; line-height: 1.3; }
@keyframes appchat-callout-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Machine-written context line at the top of a conversation */
.appchat-sysmsg { align-self: center; text-align: center; font-size: 0.76rem; color: var(--muted); border: 1px dashed var(--border); border-radius: 4px; padding: 0.3rem 0.7rem; margin: 0.25rem auto 0.45rem; max-width: 95%; }
.appchat-panel { width: 380px; max-width: calc(100vw - 2rem); height: 520px; max-height: calc(100vh - 6rem); display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); box-shadow: var(--elev-3); overflow: hidden; }
.appchat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.appchat-head-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.appchat-presenceline { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.76rem; }
.appchat-person { display: flex; align-items: center; gap: 0.35rem; }
.appchat-head-actions { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
.appchat-avail { display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.appchat-avail.standalone { font-size: 0.84rem; color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 0.3rem 0.8rem; width: fit-content; }
.pms-chat-availability { margin: 0.35rem 0 0.6rem; }
.appchat-x { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.95rem; }
.appchat-x:hover { color: var(--fg); }
.appchat-body { flex: 1; overflow-y: auto; padding: 0.7rem 0.85rem; display: flex; flex-direction: column; gap: 0.45rem; }
.appchat-empty { margin: auto; text-align: center; font-size: 0.84rem; padding: 0 1.4rem; }
.appchat-threadinfo { text-align: center; color: var(--muted); font-size: 0.7rem; margin-bottom: 0.2rem; }
.appchat-msg { display: flex; flex-direction: column; gap: 0.1rem; max-width: 85%; }
.appchat-msg.mine { align-self: flex-end; align-items: flex-end; }
.appchat-msg.theirs { align-self: flex-start; align-items: flex-start; }
.appchat-msg-meta { font-size: 0.68rem; color: var(--muted); }
.appchat-msg-body { border-radius: 5px; padding: 0.45rem 0.7rem; font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; }
.appchat-msg.mine .appchat-msg-body { background: color-mix(in srgb, var(--accent) 30%, transparent); border-bottom-right-radius: 4px; }
.appchat-msg.theirs .appchat-msg-body { background: color-mix(in srgb, var(--fg) 8%, transparent); border-bottom-left-radius: 4px; }
.appchat-translated { display: inline-block; margin-top: 0.15rem; background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 0.68rem; color: var(--muted); }
.appchat-translated:hover { color: var(--accent-2); text-decoration: underline; }
.appchat-history { margin-top: 0.5rem; }
.appchat-history > summary { color: var(--muted); font-size: 0.75rem; cursor: pointer; }
.appchat-histrow { display: block; width: 100%; text-align: left; border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 3px; padding: 0.3rem 0.55rem; margin-top: 0.3rem; font-size: 0.73rem; cursor: pointer; }
.appchat-histrow:hover, .appchat-histrow.sel { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.appchat-foot { border-top: 1px solid var(--border); padding: 0.55rem 0.85rem 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
.appchat-input { width: 100%; resize: none; font-size: 0.85rem; }
.appchat-foot-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
@media (max-width: 700px) { .appchat-panel { width: calc(100vw - 2rem); height: 60vh; } }

/* ---- chat round 2: prominent on-duty switch, assignee chip, composer footer ---- */
.uwavail { display: inline-flex; align-items: center; gap: 0.7rem; border-radius: 4px; padding: 0.45rem 1rem 0.45rem 0.55rem; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--fg); transition: border-color var(--dur) var(--ease-standard), background var(--dur) var(--ease-standard); text-align: left; }
.uwavail.on { border-color: color-mix(in srgb, #34d399 55%, var(--border)); background: color-mix(in srgb, #34d399 8%, transparent); }
.uwavail.off { opacity: 0.85; }
.uwavail:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.uwavail-track { width: 40px; height: 22px; border-radius: 999px; background: #545454; position: relative; flex: 0 0 auto; transition: background var(--dur) var(--ease-standard); }
.uwavail.on .uwavail-track { background: #34d399; }
.uwavail-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left var(--dur) var(--ease-emphasized); }
.uwavail.on .uwavail-knob { left: 20px; }
.uwavail-text { display: flex; flex-direction: column; line-height: 1.2; }
.uwavail-text strong { font-size: 0.86rem; }
.uwavail-text span { font-size: 0.7rem; color: var(--muted); }
.pms-assignee { font-size: 0.75rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 4px; padding: 0.12rem 0.6rem; color: var(--fg); }
.appchat-foot-left { display: flex; align-items: center; gap: 0.4rem; }

/* ---- PMS-wide chat inbox ---- */
.pms-chat-availability { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.pmsinbox { position: relative; }
.pmsinbox-btn { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: 4px; padding: 0.5rem 1rem; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.pmsinbox-btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.pmsinbox-btn.hot { border-color: color-mix(in srgb, #f87171 55%, var(--border)); animation: appchat-pulse 2s infinite; }
.pmsinbox-panel { position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 55; width: 380px; max-width: 90vw; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); box-shadow: var(--elev-3); overflow: hidden; }
.pmsinbox-head { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pmsinbox-empty { padding: 0.9rem; margin: 0; }
.pmsinbox-row { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--fg); padding: 0.55rem 0.8rem; cursor: pointer; }
.pmsinbox-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pmsinbox-row:last-child { border-bottom: none; }
.pmsinbox-row.unread { border-left: 3px solid #f87171; }
.pmsinbox-row-top { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.pmsinbox-row-top .muted { margin-left: auto; font-size: 0.72rem; }
.pmsinbox-preview { color: var(--muted); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pmsinbox-rowchip { font-size: 0.72rem; font-weight: 700; color: #f87171; border: 1px solid color-mix(in srgb, #f87171 45%, var(--border)); border-radius: 4px; padding: 0.05rem 0.45rem; margin-left: 0.4rem; white-space: nowrap; }

/* ---- PMS right-side chat panel (shared <SidePanel> shell + embedded dock) ---- */
/* Title left, chat controls right — the controls sit at the edge the panel opens from.
   The bottom margin keeps the on-duty switch + Chats button clear of the lead text below. */
.pms-headrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.pms-headrow h1 { margin: 0; }
.pms-headrow .pms-chat-availability { margin: 0; justify-content: flex-end; }
.pms-search { width: 15rem; max-width: 100%; }
.side-panel.pmschat-side .side-panel-body { padding: 0; gap: 0; overflow: hidden; }
/* UNPINNED = floating overlay: cancel the shared SidePanel content-shift (the page stays put and
   the panel floats over it); the 📌 pin docks it — side by side, page shifts — and remembers it
   open. Mirrors the AI drawer's pinned/unpinned convention. */
@media (min-width: 900px) {
    .app-shell:has(.side-panel.pmschat-unpinned.open:not(.side-panel-left):not(.inline)) .shell {
        padding-right: 0;
    }
    /* …but an unpinned chat panel must not cancel an open AI dock's own reserved space. */
    .app-shell:has(.side-panel.ai-dock.open:not(.collapsed)):has(.side-panel.pmschat-unpinned.open:not(.side-panel-left):not(.inline)) .shell {
        padding-right: min(var(--ai-drawer-w, 440px), 60vw);
    }
    .side-panel.pmschat-unpinned { box-shadow: -30px 0 70px -30px rgba(0, 0, 0, 0.85); }
}
.pmschat-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.pmschat-list .pmsinbox-row { flex: 0 0 auto; }
.pmschat-current .pmsinbox-preview { color: var(--fg); }
.pmschat-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.pmschat-bar-label { font-size: 0.85rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmschat-bar .spacer { flex: 1; }
.pmschat-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pmschat-pin { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.95rem; padding: 0 0.2rem; }
.pmschat-pin:hover { color: var(--fg); }
.pmschat-pin.on { color: var(--accent-2); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 60%, transparent)); }
/* Embedded dock: no fixed positioning — fill the panel column edge-to-edge. */
.appchat.embedded { position: static; display: flex; flex-direction: column; align-items: stretch; flex: 1; min-height: 0; }
.appchat.embedded .appchat-panel { width: 100%; max-width: none; height: 100%; max-height: none; flex: 1; min-height: 0; border: none; border-radius: 0; box-shadow: none; background: transparent; }

/* ---- the waiting surface (doc & data check / awaiting credit) — the cockpit column while the
       deal is with the back office: verification digest + the embedded chat, instead of the dead
       space the missing capture form used to leave. ---- */
.waiting-digest-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; padding: 0; margin: 0.6rem 0 0.7rem; font-size: 0.86rem; }
.waiting-digest-list li { display: flex; align-items: center; gap: 0.45rem; }
.waiting-chat-panel { display: flex; flex-direction: column; }
.waiting-chat-host { height: 440px; display: flex; flex-direction: column; min-height: 0; margin-top: 0.5rem; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }

/* ---- chat typing indicator ---- */
.appchat-typing { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.9rem 0.35rem; color: var(--muted); font-size: 0.76rem; }
.appchat-typing-dots { display: inline-flex; gap: 3px; }
.appchat-typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: appchat-typing-bounce 1.2s infinite; }
.appchat-typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.appchat-typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes appchat-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* ---- ⚑ Cases panel on the FS application page ---- */
.app-cases { border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 0.9rem; margin: 0 0 1rem; }
.app-cases > summary { cursor: pointer; display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.9rem; }
.app-cases-count { background: color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 4px; padding: 0.05rem 0.5rem; font-size: 0.75rem; font-weight: 700; }
.app-cases-none { font-size: 0.78rem; font-weight: 400; }
.app-cases-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0 0.3rem; }
.app-cases-body .app-cases-list, .app-cases-body .app-case-new { align-self: stretch; }
.app-cases-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.app-cases-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; flex-wrap: wrap; }
.app-cases-list li.closed a { color: var(--muted); }
.app-case-chip { border-radius: 4px; padding: 0.02rem 0.45rem; font-size: 0.7rem; font-weight: 700; }
.app-case-chip.open { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.app-case-chip.warn { background: color-mix(in srgb, #fbbf24 25%, transparent); }
.app-case-chip.ok { background: color-mix(in srgb, #34d399 22%, transparent); }
.app-case-chip.off { background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--muted); }
.app-case-chip.prio { background: color-mix(in srgb, #f87171 28%, transparent); }
.app-case-new { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px dashed var(--border); padding-top: 0.6rem; }
.app-case-new-row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.app-case-new-row label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; }
.app-case-new-actions { display: flex; gap: 0.5rem; }

/* ---- applicant prefill notice ---- */
.prefill-note { display: flex; align-items: center; gap: 0.6rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 4px; padding: 0.5rem 0.9rem; margin-bottom: 0.8rem; font-size: 0.85rem; }
.prefill-note .appchat-x { margin-left: auto; }

/* ---- MultiSelect (Shared/MultiSelect.razor) — global because the app doesn't load scoped CSS ---- */
.ms { position: relative; }
.ms-control { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; min-height: 2.3rem;
    padding: 0.3rem 1.8rem 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 3px;
    background: #151515; cursor: pointer; position: relative; box-sizing: border-box; width: 100%; }
.ms.open .ms-control { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent); }
.ms-ph { color: var(--muted); font-size: 0.9rem; }
.ms-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.2rem 0.1rem 0.5rem;
    border-radius: 2px; font-size: 0.8rem; color: var(--fg); max-width: 100%;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.ms-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-pill-x { border: 0; background: none; cursor: pointer; color: inherit; opacity: 0.6; font-size: 0.7rem;
    line-height: 1; padding: 0.05rem 0.2rem; border-radius: 4px; }
.ms-pill-x:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.ms-caret { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); opacity: 0.5; font-size: 0.7rem; pointer-events: none; }
.ms-backdrop { position: fixed; inset: 0; z-index: 2000; background: transparent; }
.ms-menu { position: absolute; z-index: 2001; top: calc(100% + 4px); left: 0; right: 0;
    background: #191919; border: 1px solid var(--border); border-radius: 3px;
    box-shadow: 0 14px 36px rgba(0,0,0,0.5); padding: 0.4rem; max-height: 16rem;
    display: flex; flex-direction: column; gap: 0.35rem; }
.ms-menu .ms-search { width: 100%; box-sizing: border-box; }
.ms-list { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.ms-opt, .ms-add { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
    padding: 0.4rem 0.5rem; border: 0; background: transparent; cursor: pointer; border-radius: 2px;
    font: inherit; color: var(--fg); }
.ms-opt:hover, .ms-add:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.ms-opt.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ms-tick { width: 1rem; flex: none; color: var(--accent); font-size: 0.85rem; }
.ms-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-add { color: var(--accent-2); }
.ms-empty { padding: 0.5rem; font-size: 0.85rem; color: var(--muted); }

/* ---- Form editor: floating interface field-mapping panel ---- */
.ifmap { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.5rem; }
.ifmap-h { font-size: 0.8rem; font-weight: 600; margin-top: 0.5rem; }
.ifmap-row { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
    border: 1px solid var(--border); border-radius: 2px; background: transparent; color: inherit;
    font: inherit; padding: 0.35rem 0.5rem; cursor: pointer; }
.ifmap-row:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ifmap-row code { background: color-mix(in srgb, var(--fg) 8%, transparent); padding: 0.05rem 0.35rem; border-radius: 4px; }
.ifmap-arrow { color: var(--accent); }
.ifmap-field { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifmap-hint { margin-top: 0.5rem; }

/* ---- Form editor: AI rule/regex helper in the property inspector ---- */
.fc-ai-rules { margin-top: 0.5rem; }
.fc-ai-pop { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.4rem;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 3px;
    background: color-mix(in srgb, var(--accent) 6%, transparent); padding: 0.5rem 0.6rem; }
.fc-ai-pop .auth-input.sm { width: 100%; box-sizing: border-box; }
.fc-ai-result { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem;
    border-top: 1px solid var(--border); padding-top: 0.4rem; }
.fc-ai-result code { background: color-mix(in srgb, var(--fg) 8%, transparent); padding: 0.05rem 0.3rem; border-radius: 4px; }
.fc-ai-actions { display: flex; gap: 0.4rem; margin-top: 0.25rem; }

/* ---- Form editor: AI fix on SDM binding-check findings ---- */
.lint-fix-btn { margin-left: 0.5rem; padding: 0.1rem 0.5rem; }
.lint-fix { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem;
    padding: 0.35rem 0.5rem; border-radius: 2px; font-size: 0.83rem;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); }
.lint-fix code { background: color-mix(in srgb, var(--fg) 8%, transparent); padding: 0.05rem 0.3rem; border-radius: 4px; }

/* ---- Form editor: live-preview highlight of the selected control ---- */
.form-field-selected { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); scroll-margin: 6rem;
    transition: outline-color .15s, box-shadow .15s; }

/* ---- Production Test run banner ---- */
.testrun-banner { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    background: repeating-linear-gradient(45deg, rgba(224,164,88,0.16), rgba(224,164,88,0.16) 12px, rgba(224,164,88,0.24) 12px, rgba(224,164,88,0.24) 24px);
    border-bottom: 1px solid rgba(224,164,88,0.5); color: var(--fg); padding: 0.4rem 1rem; font-size: 0.85rem; }
.testrun-banner strong { letter-spacing: 0.04em; }
.testrun-banner a { margin-left: auto; color: var(--accent-2); white-space: nowrap; }
.testrun-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #22c55e; animation: testrun-pulse 1.6s infinite; }
@keyframes testrun-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } }

/* ---- Domain board (/admin/domain/board) — modern sibling of the classic ER diagram ---- */
.dbv-host { position: relative; margin-top: 1rem; }
.dbv-svg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.dbv-svg path { pointer-events: stroke; transition: opacity 0.15s; }
.dbv-search { min-width: 18rem; }

.dbv-group { position: relative; z-index: 1; margin-bottom: 1.6rem; }
.dbv-group-title {
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--muted, #929292); margin-bottom: 0.55rem;
}
/* 270px, not 230px: the board's own entity names are long — caseProceedingParticipant[] is 26
   characters before the badge — and at 230 the head row ran out of card. */
.dbv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0.9rem 1.4rem; align-items: start; }

.dbv-card {
    border: 1px solid var(--border, #3a3a3a); border-radius: 5px; padding: 0.65rem 0.8rem;
    background: rgba(255,255,255,0.015); transition: opacity 0.15s, box-shadow 0.15s;
    cursor: crosshair; min-width: 0;
}
.dbv-card.dbv-tenant { border-color: #3c3a2a; }
.dbv-card.dbv-hidden { display: none; }
.dbv-host.dbv-focus .dbv-card:not(.dbv-card-hl) { opacity: 0.18; }
.dbv-card-hl { opacity: 1 !important; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.22); }
.dbv-card-src { box-shadow: 0 0 0 2px #b3d9f2; }

.dbv-card-head { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
/* The name must be the part that gives. It sits next to `.dbv-badges`, which is flex:none by
   design — a "gap" tag or a field count that wrapped or truncated would be worse than useless —
   so without min-width:0 the name refuses to shrink below its content and pushes the badge past
   the card edge. Widening the track alone only moves the length at which that happens. */
.dbv-name {
    font-weight: 700; font-size: 0.9rem;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dbv-inh { font-size: 0.68rem; color: #a779ff; white-space: nowrap; }
.dbv-badges { margin-left: auto; display: inline-flex; gap: 0.3rem; flex: none; align-items: baseline; }
/* The { } button on an SDM board card — opens the real Aeon.Core class in a side panel. Sits in
   .dbv-badges; domain-board.js already ignores clicks on any <button>, so it never toggles a pin. */
.dbv-code-btn {
    flex: none; cursor: pointer;
    font-family: var(--mono, ui-monospace, monospace); font-size: 0.6rem; font-weight: 700; line-height: 1;
    padding: 0.14rem 0.3rem; border-radius: 3px;
    border: 1px solid var(--border, #3a3a3a); background: transparent; color: var(--muted, #929292);
}
.dbv-code-btn:hover { color: #b3d9f2; border-color: #b3d9f2; }
/* Inside the side panel the code block should fill what the panel gives it, not hold the code
   view's 22rem floor. */
.side-panel .sdm-class-src { min-height: 0; margin: 0; }
.dbv-rows { font-size: 0.66rem; color: var(--muted, #929292); border: 1px solid var(--border, #3a3a3a); border-radius: 99px; padding: 0.02rem 0.32rem; white-space: nowrap; }
.dbv-badge-t { font-size: 0.7rem; }
.dbv-table { display: block; font-family: var(--mono, ui-monospace, monospace); font-size: 0.64rem; color: var(--muted, #929292); text-decoration: none; margin: 0.1rem 0 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbv-table:hover { color: #b3d9f2; text-decoration: underline; }

.dbv-cols { display: flex; flex-direction: column; gap: 0.14rem; }
.dbv-cols-other { margin-top: 0.25rem; opacity: 0.75; }
.dbv-col { display: flex; align-items: baseline; gap: 0.35rem; font-size: 0.7rem; min-width: 0; }
.dbv-col code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbv-tag { font-size: 0.56rem; font-weight: 700; border-radius: 3px; padding: 0.02rem 0.26rem; flex: none; }
.dbv-tag-pk { background: rgba(63,217,155,0.16); color: #3fd99b; }
.dbv-tag-fk { background: rgba(179,217,242,0.16); color: #b3d9f2; }
.dbv-tag-tenant { background: rgba(246,196,83,0.14); color: #f6c453; }
/* Extra badge kinds for the architecture boards (/admin/architecture/system + /landscape) —
   same visual formula as the domain-board tags above, reused for component/library/infra facts. */
.dbv-tag-core { background: rgba(63,217,155,0.16); color: #3fd99b; }
.dbv-tag-tech { background: rgba(179,217,242,0.16); color: #b3d9f2; }
.dbv-tag-infra { background: rgba(167,121,255,0.16); color: #a779ff; }
.dbv-tag-lib { background: rgba(246,196,83,0.14); color: #f6c453; }
.dbv-tag-ext { background: rgba(146,146,146,0.18); color: var(--muted, #929292); }
.dbv-tag-gap { background: rgba(248,113,113,0.16); color: #f87171; }
/* SDM board (/admin/data-model, Board view) — reference / PII / required field badges. */
.dbv-tag-ref { background: rgba(179,217,242,0.16); color: #b3d9f2; }
.dbv-tag-pii { background: rgba(246,196,83,0.14); color: #f6c453; }
.dbv-tag-req { background: rgba(146,146,146,0.18); color: var(--muted, #929292); }
.dbv-fk-target { font-size: 0.62rem; color: #b3d9f2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbv-type { font-size: 0.62rem; color: var(--muted, #929292); margin-left: auto; flex: none; }

/* ---- SDM entity layer: what a card IS, and what owns it ------------------------------------
   The kind badge and the owner line are the whole point of the entity layer being data — before
   it existed a card could only say its name and its field count, and the model's spine was
   invisible. Composition is coral (matching the `owns` wire in domain-board.js); references stay
   blue, so the two readings never blur together. */
.dbv-tag-root { background: rgba(255,143,107,0.18); color: #ff8f6b; }
.dbv-tag-record { background: rgba(77,208,225,0.14); color: #4dd0e1; }
.dbv-tag-shared { background: rgba(167,121,255,0.16); color: #a779ff; }
.dbv-tag-owned { background: rgba(146,146,146,0.18); color: var(--muted, #929292); }
.dbv-tag-master { background: rgba(63,217,155,0.16); color: #3fd99b; }
.dbv-tag-value { background: rgba(179,217,242,0.14); color: #b3d9f2; }
/* Field badges for the two pointers that are NOT ordinary references. */
.dbv-tag-owner { background: rgba(255,143,107,0.18); color: #ff8f6b; }
.dbv-tag-lineage { background: rgba(246,196,83,0.18); color: #f6c453; }

.dbv-owner { font-size: 0.64rem; color: #ff8f6b; margin: -0.2rem 0 0.4rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.dbv-owner code { font-size: 0.64rem; color: inherit; background: none; padding: 0; }
.dbv-owner-anchor { color: var(--muted, #929292); }
/* An anchor is what you look for first in a model you don't know — give it an edge you can scan for. */
.dbv-card.dbv-anchor { border-left: 2px solid color-mix(in srgb, #ff8f6b 55%, transparent); }

/* The `owns` wire's key swatch, alongside the existing fk / tenant / inherits keys. */
.dbv-k-owns { color: #ff8f6b; }

/* ---- Schema view: the physical tables with the SDM overlaid ---------------------------------
   The single most important thing a card here communicates is which columns the model can REACH,
   so mapped and unmapped are pulled hard apart: a mapped column is green and shows its path, an
   unmapped one is dimmed to near-background. Scanning a card for "what's missing" should take no
   reading at all. */
.dbv-tag-sdm { background: rgba(63,217,155,0.16); color: #3fd99b; }
.dbv-tag-nosdm { background: rgba(146,146,146,0.14); color: var(--muted, #929292); }
.dbv-tag-bag { background: rgba(167,121,255,0.16); color: #a779ff; }
.dbv-tag-schema { background: rgba(179,217,242,0.14); color: #b3d9f2; font-weight: 600; }
/* Not display:none — an unmodelled column is information, just not the headline. */
.sct-unmapped { opacity: 0.45; }
.sct-unmapped code { color: var(--muted, #929292); }
.sct-card .dbv-fk-target { color: #3fd99b; }
/* Tables carry many more columns than an SDM entity carries key fields, so this board needs its
   cards to be able to run long without the grid forcing every row to the tallest one. */
.sct-card { align-self: start; }

/* ---- Board + Schema: a bit more legible than the shared .dbv-* defaults ----------------------
   Those defaults are tuned for /admin/domain/board's denser card grid; Board and Schema are the
   two views actually read here for real work, so bump them up a notch. Scoped to .sdmx-boardview
   (the wrapper both views share on this page) so /admin/domain/board is untouched. */
.sdmx-boardview .dbv-name { font-size: 1.02rem; }
.sdmx-boardview .dbv-rows { font-size: 0.74rem; }
.sdmx-boardview .dbv-col { font-size: 0.8rem; }
.sdmx-boardview .dbv-tag { font-size: 0.64rem; padding: 0.04rem 0.32rem; }
.sdmx-boardview .dbv-fk-target { font-size: 0.72rem; }
.sdmx-boardview .dbv-type { font-size: 0.72rem; }
.sdmx-boardview .dbv-owner, .sdmx-boardview .dbv-owner code { font-size: 0.74rem; }

/* ---- Schema view sizing ---------------------------------------------------------------------
   A table card carries strictly more text per row than an SDM entity card — a column name AND the
   canonical path claiming it — and the shared 230px track squeezed both onto one nowrap line, so
   each ellipsised into uselessness ("ActionIt… → collectionsAction[].act…"). Wider tracks, and the
   path is allowed to wrap onto its own line rather than fight the column name for the same inch. */
.sdmx-schemaview .dbv-grid { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }

/* The column name is the key and must never truncate; the path wraps beneath it when it can't fit
   alongside, indented past the badge so the two read as one entry. */
.sdmx-schemaview .dbv-col { flex-wrap: wrap; row-gap: 0; }
.sdmx-schemaview .dbv-col code { overflow: visible; text-overflow: clip; white-space: nowrap; flex: 0 0 auto; }
.sdmx-schemaview .dbv-fk-target { white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere; min-width: 55%; padding-left: 0.1rem; }
.sdmx-schemaview .dbv-type { margin-left: auto; padding-left: 0.4rem; }

/* `financial_services` is a long badge next to a long table name. Let the head wrap instead of
   pushing the badge out past the card's edge. */
.sdmx-schemaview .dbv-card-head { flex-wrap: wrap; row-gap: 0.15rem; }
.sdmx-schemaview .dbv-name { min-width: 0; overflow-wrap: anywhere; }
.sdmx-schemaview .dbv-badges { flex-wrap: wrap; justify-content: flex-end; }
.sdmx-schemaview .dbv-tag-schema { overflow-wrap: anywhere; }
/* The "≡ owning entities" line can list several — wrap it rather than clip it. */
.sdmx-schemaview .dbv-owner { white-space: normal; overflow: visible; overflow-wrap: anywhere; }

/* ---- Tree view: the kind chip and bounded-context chip on a composition branch ---- */
.sdmb-kind { font-size: 0.56rem; font-weight: 700; border-radius: 3px; padding: 0.02rem 0.3rem;
    flex: none; background: rgba(146,146,146,0.18); color: var(--muted, #929292); }
.sdmb-kind-root { background: rgba(255,143,107,0.18); color: #ff8f6b; }
.sdmb-kind-record { background: rgba(77,208,225,0.14); color: #4dd0e1; }
.sdmb-kind-shared { background: rgba(167,121,255,0.16); color: #a779ff; }
.sdmb-kind-master { background: rgba(63,217,155,0.16); color: #3fd99b; }
.sdmb-ctx { font-size: 0.62rem; color: var(--muted, #929292); border: 1px solid var(--border, #3a3a3a);
    border-radius: 99px; padding: 0.02rem 0.42rem; white-space: nowrap; flex: none; }

/* Architecture boards (/admin/architecture/system + /landscape) carry far fewer cards than the
   124-entity Domain board, so there's room to size everything up for readability. Scoped to the
   .arch-board page wrapper rather than the shared .dbv-* base sizes, which stay compact for the
   Domain board's much denser grid. */
.arch-board .bp-intro, .arch-board .bp-counts { font-size: 0.95rem; }
.arch-board .dbv-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.1rem 1.7rem; }
.arch-board .dbv-group-title { font-size: 1rem; }

/* ---- Curated narrative boards (planes & fleet, threat model, fleet topology) ----------------
   Same card+wire language as the architecture boards, but the rows carry PROSE rather than
   identifiers — so rows wrap instead of ellipsizing, and note rows read as sentences. The shared
   .dbv-* geometry (grid, wires, hover/pin) is untouched; only text behaviour is loosened. */
.curated-board .dbv-col { align-items: flex-start; }
.curated-board .dbv-col code { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.curated-board .dbv-name { white-space: normal; line-height: 1.25; }
.curated-board .dbv-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.1rem 1.7rem; }
.cb-notes { margin-top: 0.3rem; display: flex; flex-direction: column; gap: 0.25rem; }
.cb-note { font-size: 0.68rem; color: var(--muted, #929292); line-height: 1.35; }
/* Threat-status badges on the exposure board — open red, partial amber, accepted khaki. */
.dbv-tag-open { background: rgba(248,113,113,0.16); color: #f87171; }
.dbv-tag-partial { background: rgba(246,196,83,0.14); color: #f6c453; }
.dbv-tag-accepted { background: rgba(200,200,120,0.14); color: #c8c878; }
.arch-board .dbv-card { padding: 0.9rem 1.05rem; }
.arch-board .dbv-card-head { margin-bottom: 0.55rem; }
.arch-board .dbv-name { font-size: 1.12rem; }
.arch-board .dbv-col { font-size: 0.86rem; gap: 0.45rem; }
.arch-board .dbv-tag { font-size: 0.72rem; padding: 0.08rem 0.4rem; border-radius: 4px; }
.arch-board .dbv-type { font-size: 0.78rem; }
.arch-board .dbv-badge-t { font-size: 0.95rem; }
.arch-board .bb-more { font-size: 0.8rem; }

.dbv-k { white-space: nowrap; }
.dbv-k-fk { color: #b3d9f2; }
.dbv-k-tenant { color: #f6c453; }
.dbv-k-inh { color: #a779ff; }

.dbv-pinbar {
    /* Lock FLUSH under the topbar. The scroll container (.shell) carries 2rem top padding and
       sticky pins to the scrollport's PADDING edge — a plain top:0 stuck the bar 2rem down with
       cards scrolling through the gap above it. top:-2rem cancels the padding exactly (same
       recipe as the old sticky form-editor action bar — see the .page-actionbar comment). Solid
       background: content passes directly beneath, translucency read as clutter. */
    position: sticky; top: -2rem; z-index: 6; display: flex; align-items: center; gap: 0.4rem;
    flex-wrap: wrap; padding: 0.5rem 0.7rem; margin-bottom: 0.8rem;
    border: 1px solid var(--border, #3a3a3a); border-top: none; border-radius: 0 0 10px 10px;
    background: var(--bg, #101010);
}
.dbv-pinbar-chip, .dbv-pinbar-clear {
    font-size: 0.72rem; border: 1px solid var(--border, #3a3a3a); border-radius: 99px;
    background: rgba(179,217,242,0.1); color: inherit; padding: 0.1rem 0.5rem; cursor: pointer;
}
.dbv-pinbar-clear { background: none; color: var(--muted, #929292); }
@media (max-width: 900px) { .dbv-svg { display: none; } .dbv-search { min-width: 10rem; } }

/* ---- Application labels (Jira-style tags: detail header + list chips/filter) ---- */
/* Title row: h1 left, the label chips tucked quietly on the right. The picker's chrome only
   appears on hover — idle, it reads as a faint chip row, not a form control. */
.app-title-row { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
/* The heading does NOT grow: labels belong beside the lead-source chip, as part of the same
   "what is this deal" line, rather than exiled to the far right of a wide screen where the eye
   has to travel to find them. */
.app-title-row h1 { flex: 0 1 auto; min-width: 0; margin-bottom: 0.6rem; }
.app-labels { flex: 0 1 auto; max-width: 380px; }
.app-labels .ms-control {
    min-height: 0; padding: 0.15rem 0.4rem; gap: 0.25rem; justify-content: flex-end;
    border: 1px dashed transparent; border-radius: 3px; background: none; cursor: pointer;
}
.app-labels .ms-control:hover, .app-labels .ms.open .ms-control { border-color: var(--border, #3a3a3a); }
.app-labels .ms-ph { font-size: 0.72rem; opacity: 0.55; white-space: nowrap; }
.app-labels .ms-caret { display: none; }
/* Always-present "add" target. Without it, once a pill exists the shrink-wrapped control is
   nothing BUT pills — whose clicks are deliberately swallowed — so the dropdown could never be
   reopened to add a second label. A ::after is part of the control's hit area, so clicking the
   ＋ opens the menu. */
.app-labels .ms-control::after { content: '＋'; font-size: 0.85rem; line-height: 1; opacity: 0.4; padding: 0 0.1rem; }
.app-labels .ms-control:hover::after { opacity: 0.9; }
.app-labels .ms:has(.ms-ph) .ms-control::after { content: none; }   /* placeholder already invites the click */
.app-labels .ms-pill {
    font-size: 0.66rem; padding: 0.05rem 0.15rem 0.05rem 0.45rem; border-radius: 99px;
    border: 1px solid var(--border, #3a3a3a); background: rgba(179,217,242,0.07); color: #b3d9f2;
}
.app-labels .ms-pill-x { font-size: 0.6rem; opacity: 0; transition: opacity 0.12s; }
.app-labels .ms-pill:hover .ms-pill-x { opacity: 0.8; }
.app-labels .ms-menu { left: 0; right: auto; min-width: 240px; }
.app-label-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.app-label-chip {
    font-size: 0.68rem; padding: 0.1rem 0.5rem; border-radius: 99px;
    border: 1px solid var(--border, #3a3a3a); color: #b3d9f2; text-decoration: none;
    background: rgba(179,217,242,0.07); white-space: nowrap;
}
.app-label-chip:hover { border-color: #b3d9f2; }
.app-label-chip.active { background: #0078d6; border-color: #b3d9f2; color: #b3d9f2; }
.apps-filter-labels { display: flex; flex-direction: column; gap: 0.25rem; min-width: 14rem; }
.apps-filter-labels .ms-control { min-height: 2rem; }

/* ---- Market brand: topbar flag + Admin→Markets theme panel ---- */
.mkt-tint-input { width: 4.5rem; height: 2rem; padding: 0.15rem; border: 1px solid var(--border); border-radius: 2px; background: none; cursor: pointer; }
.mkt-tint-preview {
    margin-top: 0.5rem; border: 1px solid var(--border); border-radius: 3px;
    padding: 1.4rem 1rem; display: flex; align-items: flex-end; min-height: 5.5rem;
}
.mkt-tint-preview span { font-size: 0.74rem; color: var(--muted); }

/* ==== ✨ Enhance with AI (Domain board) — panel + ghost-delta preview =========================
   The panel reuses the multi-model AI-analysis visual language; the tk-* rules this panel
   needs are declared here SCOPED UNDER .dbe. */
.dbe { display: flex; flex-direction: column; gap: 0.7rem; }
.dbe-banner.warn { background: color-mix(in srgb, #d97706 12%, transparent);
    border: 1px solid color-mix(in srgb, #d97706 45%, transparent); border-radius: 3px;
    padding: 0.5rem 0.8rem; font-size: 0.9rem; margin: 0; }
.dbe-toolbar { display: flex; gap: 0.5rem; align-items: center; }
.dbe-toolbar select { flex: 1; max-width: none; }

.dbe-scope { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 3px;
    padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.45rem; }
.dbe-scope-lbl { font-size: 0.85rem; font-weight: 600; }
.dbe-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.dbe-chip { font-size: 0.76rem; font-family: ui-monospace, monospace; padding: 0.1rem 0.5rem;
    border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent); white-space: nowrap; }
.dbe-chip.dim { opacity: 0.55; border-style: dashed; }
.dbe-chip.ghost { border-color: color-mix(in srgb, #34d399 55%, transparent);
    background: color-mix(in srgb, #34d399 12%, transparent); }
.dbe-whole { display: flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; cursor: pointer; }
.dbe-scope .lp-btn { align-self: flex-start; }

.dbe-blast { border: 1px dashed var(--border); border-radius: 3px; padding: 0.45rem 0.7rem; }
.dbe-blast > summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; }
.dbe-blast-body { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.5rem; }
.dbe-blast-row { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.dbe-mono { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--muted); }

.dbe-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.95rem; }
.dbe-field > span { color: var(--muted); font-size: 0.85rem; }
.dbe-request { min-height: 7.5rem; resize: vertical; font: inherit; }
.dbe .ms-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.95rem; }
.dbe .ms-field > span { color: var(--muted); font-size: 0.85rem; }

.dbe-attach-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.3rem; }
.dbe-paste { border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 3px;
    padding: 0.45rem 0.9rem; font-size: 0.85rem; color: var(--muted); cursor: text; user-select: none; }
.dbe-paste:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--fg); }

.dbe-delta { margin: 0.5rem 0; border-top: 1px dashed color-mix(in srgb, #34d399 40%, transparent);
    padding-top: 0.45rem; }
.dbe-delta-hd { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.dbe-bp-hd { background: none; padding: 0; }
.dbe-bp { max-height: 24rem; }

/* -- the tk-* visual language, scoped to the panel -- */
.dbe .tk-field { border: 1px solid var(--border); border-radius: 3px; padding: 0.6rem 0.8rem 0.8rem; margin: 0.2rem 0; }
.dbe .tk-field > legend { font-size: 0.82rem; font-weight: 600; padding: 0 0.35rem; }
.dbe .tk-attach-list { list-style: none; padding: 0; margin: 0.2rem 0; display: flex; flex-direction: column; gap: 0.25rem; }
.dbe .tk-attach-list li { display: flex; align-items: center; gap: 0.5rem; }
.dbe .tk-attach-x { border: 0; background: none; color: var(--muted); cursor: pointer; margin-left: auto; }
.dbe .tk-attach-x:hover { color: #ef4444; }
.dbe .tk-ai-actions { display: flex; align-items: flex-end; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; }
.dbe .tk-ai-mod { display: flex; flex-direction: column; gap: 0.15rem; }
.dbe .tk-consensus-actions { align-items: center; }
.dbe .tk-consensus-actions .tk-ai-mod { flex: 1 1 auto; min-width: 12rem; }
.dbe .tk-consensus-actions .tk-ai-mod select.auth-input.slim { width: 100%; max-width: none; }
.dbe .tk-consensus-btn { font-size: 1rem; font-weight: 700; padding: 0.6rem 1.2rem; }
.dbe .tk-ai-stale { font-size: 0.82rem; color: #d97706; background: color-mix(in srgb, #d97706 12%, transparent);
    border: 1px solid color-mix(in srgb, #d97706 40%, transparent); border-radius: 2px; padding: 0.35rem 0.5rem; margin: 0.4rem 0; }
.dbe .tk-kind { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--border); color: var(--fg); }
.dbe .tk-kind-vibecode { background: color-mix(in srgb, #3395e0 18%, transparent); border-color: color-mix(in srgb, #3395e0 45%, transparent); }
.dbe .tk-kind-inapp { background: color-mix(in srgb, #10b981 16%, transparent); border-color: color-mix(in srgb, #10b981 45%, transparent); }
.dbe .tk-kind-config { background: color-mix(in srgb, #f59e0b 16%, transparent); border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.dbe .tk-kind-investigate { background: color-mix(in srgb, #727272 20%, transparent); }
.dbe .tk-ai-sum { font-weight: 600; margin: 0.2rem 0; }
.dbe .tk-ai-block { margin: 0.4rem 0; }
.dbe .tk-ai-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.dbe .tk-ai-block ul { margin: 0.15rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; }
.dbe .tk-ai-block p { margin: 0.15rem 0 0; }
.dbe .tk-ai-consensus { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 3px; padding: 0.6rem 0.7rem; margin: 0.5rem 0; }
.dbe .dbe-final { border-color: color-mix(in srgb, #10b981 55%, transparent);
    background: color-mix(in srgb, #10b981 8%, transparent); }
.dbe .tk-final-hd { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dbe .tk-final-badge { font-size: 0.98rem; font-weight: 700; color: color-mix(in srgb, #10b981 72%, var(--fg)); }
.dbe .tk-final-mod { margin-left: auto; }
.dbe .tk-ai-phd { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.dbe .tk-ai-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.5rem; margin-top: 0.6rem; align-items: start; }
.dbe .tk-ai-prop { border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.6rem; }
.dbe .tk-ai-prop.err { border-color: color-mix(in srgb, #ef4444 45%, transparent); }
.dbe .tk-ai-conf { margin-left: auto; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums;
    cursor: help; border-bottom: 1px dotted currentColor; }
.dbe .tk-ai-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.3rem 0; }
.dbe .tk-ai-tag { font-size: 0.72rem; font-family: ui-monospace, monospace; background: color-mix(in srgb, var(--fg) 8%, transparent);
    border-radius: 4px; padding: 0.05rem 0.35rem; }
.dbe .tk-ai-foot { font-size: 0.75rem; margin-top: 0.5rem; }
.dbe .tk-sa { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
.dbe .tk-sa-hd { margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.dbe .tk-sa-badge { font-size: 0.82rem; font-weight: 700; color: color-mix(in srgb, var(--accent) 80%, var(--fg)); }
.dbe .tk-sa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.2rem; align-items: start; }
.dbe .tk-sa-steps { margin: 0.2rem 0 0; padding-left: 1.2rem; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.2rem; }
.dbe .tk-sa-script { margin: 0.35rem 0; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; }
.dbe .tk-sa-script-hd { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; background: color-mix(in srgb, var(--fg) 5%, transparent); }
.dbe .tk-sa-lang { font-family: ui-monospace, monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--accent) 75%, var(--fg)); }
.dbe .tk-sa-script-hd .lp-btn { margin-left: auto; }
.dbe .tk-sa-code { margin: 0; padding: 0.5rem 0.6rem; font-family: ui-monospace, monospace; font-size: 0.78rem; line-height: 1.4;
    white-space: pre-wrap; word-break: break-word; background: var(--bg); color: var(--fg); max-height: 18rem; overflow: auto; }
.dbe .tk-sa-diagram { margin: 0.3rem 0; overflow-x: auto; text-align: center; }
.dbe .tk-sa-diagram svg { max-width: 100%; height: auto; }
.dbe .tk-sa-src { margin-top: 0.2rem; }
.dbe .tk-sa-src summary { cursor: pointer; }
.dbe .tk-apply-all-btn { margin-left: auto; font-size: 0.8rem; font-weight: 700; border-radius: 999px;
    padding: 0.3rem 0.85rem; border: 1px solid color-mix(in srgb, #f59e0b 55%, transparent);
    background: color-mix(in srgb, #f59e0b 14%, transparent); color: color-mix(in srgb, #f59e0b 85%, var(--fg));
    cursor: pointer; }
.dbe .tk-apply-all-btn:hover:not(:disabled) { background: color-mix(in srgb, #f59e0b 24%, transparent); }
.dbe .tk-apply-all-btn:disabled { opacity: 0.7; cursor: default; }
.dbe .tk-apply-all-done { margin-left: auto; font-size: 0.78rem; color: color-mix(in srgb, #10b981 75%, var(--fg)); }
.dbe .tk-apply-all-result { margin: 0.3rem 0 0.6rem; padding: 0.5rem 0.7rem; border-radius: 3px; font-size: 0.85rem;
    background: color-mix(in srgb, var(--fg) 5%, transparent); border: 1px solid var(--border); }
.dbe .tk-apply-all-result p { margin: 0 0 0.3rem; }
.dbe .tk-apply-all-list { margin: 0 0 0.4rem; padding-left: 1.2rem; font-size: 0.8rem; color: var(--muted); }

/* ---- IdeaTriagePanel — a self-contained scoped copy of the tk-* triage shapes, not a shared
   definition. Their "canonical" copy is otherwise only
   duplicated per-page under .dbe / .sm-page (see those pages' own comments) — this follows the
   same precedent rather than assuming app.css already covers a page that never asked for it. ---- */
.idea-triage .ms-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.95rem; margin: 0.5rem 0; }
.idea-triage .ms-field > span { color: var(--muted); font-size: 0.85rem; }
.idea-triage .tk-ai-actions { display: flex; align-items: flex-end; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; }
.idea-triage .tk-kind { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--border); color: var(--fg); }
.idea-triage .tk-kind-vibecode { background: color-mix(in srgb, #3395e0 18%, transparent); border-color: color-mix(in srgb, #3395e0 45%, transparent); }
.idea-triage .tk-kind-inapp { background: color-mix(in srgb, #10b981 16%, transparent); border-color: color-mix(in srgb, #10b981 45%, transparent); }
.idea-triage .tk-kind-config { background: color-mix(in srgb, #f59e0b 16%, transparent); border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.idea-triage .tk-kind-investigate { background: color-mix(in srgb, #727272 20%, transparent); }
.idea-triage .tk-ai-sum { font-weight: 600; margin: 0.2rem 0; }
.idea-triage .tk-ai-block { margin: 0.4rem 0; }
.idea-triage .tk-ai-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.idea-triage .tk-ai-block ul { margin: 0.15rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; }
.idea-triage .tk-ai-block p { margin: 0.15rem 0 0; }
.idea-triage .tk-ai-consensus { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 3px; padding: 0.6rem 0.7rem; margin: 0.5rem 0; }
.idea-triage .tk-ai-consensus.tk-final { border-color: color-mix(in srgb, #10b981 55%, transparent);
    background: color-mix(in srgb, #10b981 8%, transparent); }
.idea-triage .tk-final-hd { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.idea-triage .tk-final-badge { font-size: 0.98rem; font-weight: 700; color: color-mix(in srgb, #10b981 72%, var(--fg)); }
.idea-triage .tk-final-mod { margin-left: auto; }
.idea-triage .tk-ai-phd { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.idea-triage .tk-ai-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.5rem; margin-top: 0.6rem; align-items: start; }
.idea-triage .tk-ai-prop { border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.6rem; }
.idea-triage .tk-ai-prop.err { border-color: color-mix(in srgb, #ef4444 45%, transparent); }
.idea-triage .tk-ai-conf { margin-left: auto; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums;
    cursor: help; border-bottom: 1px dotted currentColor; }
.idea-triage .tk-ai-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.3rem 0; }
.idea-triage .tk-ai-tag { font-size: 0.72rem; font-family: ui-monospace, monospace; background: color-mix(in srgb, var(--fg) 8%, transparent);
    border-radius: 4px; padding: 0.05rem 0.35rem; }
.idea-triage .tk-sa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.2rem; align-items: start; }
.idea-triage .tk-ai-vibe { margin-top: 0.5rem; border-top: 1px dashed var(--border); padding-top: 0.4rem; }
.idea-triage .tk-ai-vibe-hd { display: flex; align-items: center; gap: 0.5rem; }
.idea-triage .tk-ai-vibe-hd .lp-btn { margin-left: auto; }
.idea-triage .tk-ai-vibe-txt { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 0.8rem;
    margin-top: 0.3rem; resize: vertical; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 2px; padding: 0.4rem; }

/* -- ghost cards + group on the board itself -- */
.dbv-ghost-group { border: 1px dashed color-mix(in srgb, #34d399 55%, transparent); border-radius: 4px;
    padding: 0.5rem 0.7rem 0.7rem; background: color-mix(in srgb, #34d399 5%, transparent); }
.dbv-ghost-group .dbv-group-title { color: color-mix(in srgb, #34d399 75%, var(--fg)); display: flex;
    align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dbv-ghost-group .dbv-group-title .lp-btn { margin-left: auto; }
.dbv-card.dbv-ghost { border: 1.5px dashed color-mix(in srgb, #34d399 65%, transparent);
    background: color-mix(in srgb, #34d399 7%, var(--panel-bg, var(--bg))); }
.dbv-card.dbv-ghost .dbv-name { color: color-mix(in srgb, #34d399 70%, var(--fg)); }
.dbv-ghost-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.05rem 0.4rem;
    border-radius: 999px; border: 1px solid color-mix(in srgb, #34d399 60%, transparent);
    background: color-mix(in srgb, #34d399 16%, transparent); color: color-mix(in srgb, #34d399 80%, var(--fg)); }
.dbv-ghost-note { font-size: 0.74rem; color: var(--muted); margin: 0.15rem 0 0.25rem; }

/* -- Enhance-with-AI ghost group in the Blueprint board's SDM lane -- */
.bb-ghost-group { border: 1px dashed color-mix(in srgb, #34d399 55%, transparent); border-radius: 4px;
    padding: 0.45rem 0.55rem 0.55rem; margin-bottom: 0.6rem;
    background: color-mix(in srgb, #34d399 5%, transparent); display: flex; flex-direction: column; gap: 0.5rem; }
.bb-ghost-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em;
    color: color-mix(in srgb, #34d399 75%, var(--fg)); display: flex; align-items: center; gap: 0.5rem; }
.bb-ghost-title .lp-btn { margin-left: auto; }
.bb-card.dbv-ghost { border: 1.5px dashed color-mix(in srgb, #34d399 65%, transparent);
    background: color-mix(in srgb, #34d399 7%, var(--panel-bg, var(--bg))); }
.bb-card.dbv-ghost .bb-title { color: color-mix(in srgb, #34d399 70%, var(--fg)); }

/* -- "＋ mark as context" toggles on Blueprint-board cards (whole form / entity / interface) -- */
.bb-ctx-wrap { position: relative; }
.bb-ctx-wrap > .bb-ctx-btn { position: absolute; top: 0.45rem; right: 0.45rem; z-index: 3; }
.bb-ctx-btn { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--muted); cursor: pointer;
    width: 1.35rem; height: 1.35rem; line-height: 1; font-size: 0.8rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; }
.bb-ctx-btn.inline { width: 1.15rem; height: 1.15rem; font-size: 0.72rem; }
.bb-ctx-btn:hover { color: var(--fg); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.bb-ctx-btn.on { background: color-mix(in srgb, #34d399 22%, transparent);
    border-color: color-mix(in srgb, #34d399 60%, transparent); color: color-mix(in srgb, #34d399 85%, var(--fg)); }
.bb-ctx-on > .bb-card, .bb-card.bb-ctx-on { outline: 1.5px solid color-mix(in srgb, #34d399 55%, transparent);
    outline-offset: 2px; border-radius: 4px; }

/* typed scope chips in the Enhance panel */
.dbe-chip-form { border-color: color-mix(in srgb, #b3d9f2 50%, transparent); background: color-mix(in srgb, #b3d9f2 12%, transparent); }
.dbe-chip-iface { border-color: color-mix(in srgb, #f6c453 50%, transparent); background: color-mix(in srgb, #f6c453 12%, transparent); }
.dbe-chip-path { opacity: 0.85; border-style: dotted; }

/* Privilege-ceiling: a role/permission the operator can't grant is shown locked (see RoleAccessStore). */
.mkt-check-locked, .roles-check.mkt-check-locked { opacity: 0.5; cursor: not-allowed; }
.mkt-check-locked input { cursor: not-allowed; }

/* ==== Doc & data check v2 — the required-documents checklist ==== */
.ddc-doclist td { vertical-align: middle; }
.ddc-row-blocking td:first-child { border-left: 3px solid color-mix(in srgb, #ef4444 65%, transparent); }
.ddc-row-upload { font-size: 0.78rem; max-width: 15rem; }
.ddc-inline-reason { display: inline-flex; gap: 0.3rem; align-items: center; margin-left: 0.35rem; }
.ddc-inline-reason .auth-input.sm { width: 13rem; }
.ddc-doclist .lp-btn.xs { margin-left: 0.25rem; }
.pma-doclist input.auth-input.sm { width: 100%; box-sizing: border-box; }
.pma-doclist td { vertical-align: middle; }

/* ==== 🧭 Self-service ceiling (/admin/solution-mix) ==== */
.sm-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1rem 0; }
.sm-candidates { margin-top: 0.5rem; }
.sm-of { font-size: 1.1rem; color: var(--muted); font-weight: 500; }
.sm-foot { margin-top: 0.8rem; }
/* the solution-kind + label chips, page-scoped (canonical copies scoped under .dbe) */
.sm-page .tk-kind { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--border); color: var(--fg); }
.sm-page .tk-kind-vibecode { background: color-mix(in srgb, #3395e0 18%, transparent); border-color: color-mix(in srgb, #3395e0 45%, transparent); }
.sm-page .tk-kind-inapp { background: color-mix(in srgb, #10b981 16%, transparent); border-color: color-mix(in srgb, #10b981 45%, transparent); }
.sm-page .tk-kind-config { background: color-mix(in srgb, #f59e0b 16%, transparent); border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.sm-page .tk-kind-investigate { background: color-mix(in srgb, #727272 20%, transparent); }
.sm-page .tk-label { display: inline-block; padding: 0.05rem 0.4rem; margin-right: 0.2rem; border-radius: 4px; font-size: 0.72rem;
    background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }

/* ==== 🔬 Debug trail (flight recorder) — diagnostics.view only ==== */
.dbt-panel { margin-top: 1rem; }
.dbt-summary { cursor: pointer; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    font-weight: 700; font-size: 0.95rem; }
.dbt-summary .lp-btn { margin-left: auto; }
.dbt-filter { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0.7rem 0 0.4rem; }
.dbt-chip { border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--fg);
    font: inherit; font-size: 0.78rem; padding: 0.15rem 0.6rem; cursor: pointer; }
.dbt-chip.on { background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 600; }
.dbt-chip-label { font-size: 0.78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.3rem; }
.dbt-table td { vertical-align: top; }
.dbt-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dbt-kind { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px;
    border: 1px solid var(--border); white-space: nowrap; }
.dbt-kind-0 { background: color-mix(in srgb, #f6c453 16%, transparent); border-color: color-mix(in srgb, #f6c453 45%, transparent); }
.dbt-kind-1 { background: color-mix(in srgb, #10b981 16%, transparent); border-color: color-mix(in srgb, #10b981 45%, transparent); }
.dbt-kind-2 { background: color-mix(in srgb, #a779ff 16%, transparent); border-color: color-mix(in srgb, #a779ff 45%, transparent); }
.dbt-kind-3 { background: color-mix(in srgb, #b3d9f2 16%, transparent); border-color: color-mix(in srgb, #b3d9f2 45%, transparent); }
.dbt-title { font-size: 0.88rem; }
.dbt-row-failed td:first-child { border-left: 3px solid color-mix(in srgb, #ef4444 65%, transparent); }
.dbt-detail-row td { padding: 0; }
.dbt-detail { margin: 0; padding: 0.6rem 0.8rem; font-family: ui-monospace, monospace; font-size: 0.76rem;
    line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: color-mix(in srgb, var(--fg) 4%, transparent);
    max-height: 22rem; overflow: auto; }

/* ---- /admin/login-activity — sign-in map + heat map (la-*) ------------------------------- */
.la-controls { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin: 0.8rem 0 1rem; }
.la-controls label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--muted); }
.la-controls .auth-input.sm { min-width: 11rem; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
/* The selects sit under a caption label, so the button has to match the SELECT's box — not the
   label's — or it floats a caption's height above the row it belongs to. */
.la-controls > .lp-btn { padding: 0.35rem 0.75rem; font-size: 0.85rem; line-height: 1.35; }

.la-stats { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.la-stat { flex: 1 1 7rem; padding: 0.6rem 0.8rem; border: 1px solid var(--border);
    border-radius: 0.5rem; background: color-mix(in srgb, var(--fg) 2%, transparent); }
.la-stat-n { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.la-stat-l { display: block; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

.la-h { margin: 1.8rem 0 0.3rem; font-size: 1.05rem; }

/* The map scales to its container; height follows from the 2:1 viewBox. */
.la-map-wrap { border: 1px solid var(--border); border-radius: 0.6rem; overflow: hidden;
    background: color-mix(in srgb, var(--fg) 3%, transparent); margin-top: 0.6rem; }
.la-map { display: block; width: 100%; height: auto; }
.la-grid { stroke: color-mix(in srgb, var(--fg) 8%, transparent); stroke-width: 1; }
.la-land { fill: color-mix(in srgb, var(--fg) 13%, transparent);
    stroke: color-mix(in srgb, var(--fg) 22%, transparent); stroke-width: 1; }
/* Volume is carried by fill-opacity (set per dot in the markup), so the fill itself must be the
   solid accent — a colour that is already 75% transparent leaves no range left to darken into. */
.la-dot { fill: var(--accent); stroke: var(--accent); stroke-width: 0.6; }
.la-dot-bad { fill: #e5484d; stroke: #e5484d; }

.la-legend { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.45rem; }
.la-legend-l { font-size: 0.75rem; color: var(--muted); }
.la-legend-scale { width: 150px; height: 22px; flex: 0 0 auto; }
.la-home-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.85; }
.la-home-dot { fill: var(--accent); }

/* Data-flow lines: each login location ⇄ the home region. The dash march SPEED is the data —
   --la-flow-dur is set per route from the same round-trip estimate the region table prints
   (1 s of animation ≈ 50 ms of estimated RTT), so near hums and far trudges. Request marches
   toward the server in the accent colour; the response marches back fainter and offset, so a
   route reads as two-way traffic rather than a barber pole. */
.la-flow-route { fill: none; stroke: color-mix(in srgb, var(--accent) 14%, transparent);
    stroke-width: var(--la-flow-w, 1px); }
.la-flow { fill: none; stroke-width: var(--la-flow-w, 1px); stroke-linecap: round; }
.la-flow-out { stroke: color-mix(in srgb, var(--accent) 65%, transparent);
    stroke-dasharray: 3 9; animation: laFlowOut var(--la-flow-dur, 1.5s) linear infinite; }
.la-flow-back { stroke: color-mix(in srgb, var(--accent) 32%, var(--fg) 10%);
    stroke-dasharray: 2 10; stroke-dashoffset: 6;
    animation: laFlowBack var(--la-flow-dur, 1.5s) linear infinite; }
@keyframes laFlowOut  { to { stroke-dashoffset: -12; } }
@keyframes laFlowBack { from { stroke-dashoffset: 6; } to { stroke-dashoffset: 18; } }
@media (prefers-reduced-motion: reduce) {
    .la-flow-out, .la-flow-back { animation: none; }
}

/* Heat map — scrolls on its own so a narrow screen never scrolls the page sideways. */
.la-heat-wrap { overflow-x: auto; margin-top: 0.6rem; }
.la-heat { border-collapse: collapse; }
.la-heat th { font-weight: 500; font-size: 0.7rem; color: var(--muted); padding: 0 0.2rem; }
.la-heat-d { text-align: right; padding-right: 0.5rem !important; }
.la-heat-h { text-align: center; min-width: 1.1rem; }
.la-heat-c { width: 1.1rem; height: 1.1rem; border: 1px solid var(--bg);
    background: color-mix(in srgb, var(--fg) 5%, transparent); border-radius: 2px; }

.la-table { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.85rem; }
.la-table th, .la-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); }
.la-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 500; }
.la-table td.num, .la-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.la-table .mono { font-family: ui-monospace, monospace; font-size: 0.78rem; }

.la-outcome { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.72rem; }
.la-outcome-ok { background: color-mix(in srgb, #30a46c 22%, transparent); color: #30a46c; }
.la-outcome-bad { background: color-mix(in srgb, #e5484d 20%, transparent); color: #e5484d; }
.la-outcome-pending { background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--muted); }
.la-flag { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.72rem;
    background: color-mix(in srgb, #f5a524 22%, transparent); color: #f5a524; }


/* Documents panel — the required-document checklist shown expanded for the dealer (docs-cl-*).
   Same rows the customer sees on their /docs link, in the dealer's table style. */
.docs-checklist-grid td { vertical-align: top; }
.docs-cl-missing td:first-child strong { color: var(--fg); }
.docs-cl-have td:first-child strong { opacity: 0.85; }

.docs-cl-status { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 0.72rem; white-space: nowrap; }
.docs-cl-missing .docs-cl-status,
.docs-cl-status.docs-cl-missing { background: color-mix(in srgb, #f5a524 20%, transparent); color: #f5a524; }
.docs-cl-status.docs-cl-uploaded { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.docs-cl-status.docs-cl-verified { background: color-mix(in srgb, #30a46c 22%, transparent); color: #30a46c; }
.docs-cl-status.docs-cl-waived   { background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--muted); }
.docs-cl-status.docs-cl-optional { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--muted); }

/* The native file input is replaced by the styled span next to it — same trick as .docs-mgr-upload. */
.docs-cl-upload { position: relative; display: inline-block; cursor: pointer; }
.docs-cl-upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; }
.docs-cl-upload .lp-btn { pointer-events: none; }

.docs-other-h { margin: 1.1rem 0 0.3rem; font-size: 0.9rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }

/* ===== SQL console — one-screen IDE layout (.sqlpage) ==========================================
   Before this the console was a normal document: the page scrolled, the explorer had its own
   sticky scroller, and the result grid grew without limit — so a big result gave you two live
   scrollbars fighting each other and a grid taller than the screen. An IDE shouldn't scroll as a
   page at all: it fills the viewport once, and each PANE scrolls inside itself. */
.sqlpage {
    /* Fill what's left between the fixed topbar and the app's footer strip. dvh (not vh) so mobile
       browser chrome collapsing doesn't leave a dead band at the bottom. */
    height: calc(100dvh - var(--topbar-h, 52px) - 2.2rem);
    display: flex; flex-direction: column; min-height: 0;
    /* auto, NEVER hidden. hidden CLIPS: if the height chain doesn't resolve exactly (a breadcrumb
       row, a banner, a browser that measures dvh differently) the extra rows are simply gone with
       no way to reach them — which is exactly what happened. auto degrades to a scrollbar instead
       of hiding data. Losing a scrollbar is a nuisance; losing rows is a broken tool. */
    overflow: auto;
    /* No horizontal padding: the explorer docks FLUSH to the content edge like a real IDE. The
       header text gets the indent back individually below. */
    padding: 0.6rem 0 0;
    max-width: 100%;
}
/* Header chrome shrinks to content so every remaining pixel goes to the workspace, and carries the
   page indent the container gave up. */
.sqlpage > .back, .sqlpage > .sqlpage-head, .sqlpage > .form-error { flex: 0 0 auto; padding-inline: 1.5rem; }
.sqlpage > .form-error { margin: 0 0 0.35rem; font-size: 0.8rem; }
.sqlpage > .back { margin-bottom: 0.15rem; }
/* Title + the one page-level (not per-tab) action — Database health, which describes the whole
   server, not whichever script tab happens to be active. */
.sqlpage-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.sqlpage-head h1 { margin: 0.1rem 0 0.15rem; font-size: 1.5rem; }
.sqlpage-head-actions { display: flex; align-items: center; gap: 0.45rem; }

.sqlpage .sql-shell {
    flex: 1 1 auto; min-height: 0;    /* min-height:0 or the flex child refuses to shrink */
    display: flex; gap: 0;            /* gap:0 — the explorer is DOCKED, not a floating card */
    margin-top: 0.4rem; overflow: visible;
}

/* The dock: flush left, full height, square inner edge, its own scrollbar. */
.sqlpage .sql-schema {
    position: static; height: auto; max-height: none; align-self: stretch;
    flex: 0 0 auto;
    margin: 0; border-radius: 0;
    border-top: 0; border-bottom: 0; border-left: 0;
    border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--fg) 2.5%, transparent);
    /* Width resize is the .sql-schema-resize handle now (--sql-schema-w), not this border. */
    /* Title and filter are FIXED panes; only the tree scrolls. They were sticky, but the panel's
       background is a translucent color-mix, so the tree scrolled visibly THROUGH them. Making
       them real flex rows removes the overlap by construction instead of hiding it behind an
       opaque colour that would then have to be kept in sync with the theme. */
    display: flex; flex-direction: column; overflow: hidden;
}
.sqlpage .sql-schema .schema-head,
.sqlpage .sql-schema-search,
.sqlpage .sql-schema > p.muted { flex: 0 0 auto; position: static; }
.sqlpage .sql-schema .schema-head { padding-bottom: 0.35rem; }
/* The only scroller in the dock — so nothing in it can ever be clipped out of reach. */
.sqlpage .sqlx-tree { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* The work area: editor pinned at the top, results taking the rest. */
.sqlpage .sql-main {
    flex: 1 1 auto; min-width: 0; min-height: 0;
    display: flex; flex-direction: column; overflow: visible;
    padding: 0 1.1rem 0 1rem;
}
.sqlpage .sqlide { flex: 0 0 auto; }
.sqlpage .sql-actions, .sqlpage .sql-tools, .sqlpage .sql-savebar, .sqlpage .sql-ai, .sqlpage .sql-connector { flex: 0 0 auto; }

/* THE fix for the double scrollbar: the data scrolls here and nowhere else. */
.sqlpage .sql-resultsarea {
    flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 0.2rem;
    /* Belt and braces: flex:1 + min-height:0 only bounds this when EVERY ancestor resolves a
       height. The max-height doesn't depend on that chain, so the grid is scrollable either way —
       the difference between "216 rows, 18 reachable" and a working console. */
    max-height: calc(100dvh - 21rem);
}
.sqlpage .sql-resultsarea:empty { display: none; }
.sqlpage .sql-results { max-height: none; overflow: visible; margin-bottom: 0.8rem; }
/* Header stays put against the results scroller (top:0 is correct for a LOCAL scroller — the
   -2rem trick is only for headers sticking to the page scroller under the topbar). */
.sqlpage .sql-results .datagrid th { position: sticky; top: 0; z-index: 1; }
.sqlpage .sql-results-bar { flex: 0 0 auto; position: sticky; top: 0; }

/* Denser grid — a query result is data to scan, not prose. */
.sqlpage .sql-results .datagrid td,
.sqlpage .sql-results .datagrid th { padding: 0.25rem 0.55rem; font-size: 0.82rem; line-height: 1.35; }
.sqlpage .sql-results .datagrid td { white-space: nowrap; max-width: 32rem;
    overflow: hidden; text-overflow: ellipsis; }

/* Editor: fixed on a roomy screen, but allowed to give way when the viewport is short — unless
   the user has dragged .sqlide-resize, in which case --sqlide-body-h (set inline, persisted to
   localStorage) wins over this responsive default. */
.sqlpage .sqlide-body { height: var(--sqlide-body-h, clamp(150px, 30vh, 320px)); }

/* Narrow screens: the dock stops making sense — let it become a normal scrolling page again. */
@media (max-width: 900px) {
    .sqlpage { height: auto; overflow: visible; padding-bottom: 2rem; }
    .sqlpage .sql-shell { flex-direction: column; overflow: visible; }
    .sqlpage .sql-schema { width: auto !important; max-height: 40vh; border-right: 0;
        border-bottom: 1px solid var(--border); }
    .sqlpage .sql-main { padding-left: 0; overflow: visible; }
    .sqlpage .sql-resultsarea { overflow: visible; }
}

/* ---- Proposal Management: open proposals as tabs (pms-tab*) ---------------------------------
   Only appears once a second proposal is open — one tab is just chrome. */
.pms-tabs { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
    margin: 0 0 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.pms-tab { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
    padding: 0.25rem 0.6rem; border: 1px solid var(--border); border-radius: 3px 8px 0 0;
    font-size: 0.8rem; color: var(--muted); background: color-mix(in srgb, var(--fg) 3%, transparent);
    border-bottom-color: transparent; }
.pms-tab:hover { color: var(--fg); }
.pms-tab.on { color: var(--fg); background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pms-tab-label { font-family: ui-monospace, monospace; font-size: 0.76rem; }
/* The unsaved marker: small, but the one thing that must be noticeable before you close a tab. */
.pms-tab-dot { color: #f5a524; font-size: 0.6rem; line-height: 1; }
.pms-tab-x { opacity: 0.45; font-size: 0.75rem; padding: 0 0.1rem; }
.pms-tab-x:hover { opacity: 1; color: #ff8f8f; }
.pms-tabs-hint { margin-left: auto; }

/* A record number that opens its record. Reads as the strong identifier it already was — not as a
   button — but behaves like the link people instinctively click. */
.rec-open-link {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--fg); text-align: left;
}
.rec-open-link:hover { color: var(--accent); text-decoration: underline; }

/* Corporate-facility banner on the application (the POS lookup) + the facilities page bits. */
.fac-banner { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin: 0.6rem 0;
    padding: 0.55rem 0.9rem; border: 1px solid color-mix(in srgb, #3395e0 40%, transparent);
    border-radius: 3px; font-size: 0.85rem; }
.fac-offer { align-items: end; }
.fac-spread { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem 0.8rem; margin: 0.5rem 0 0.7rem; }
.fac-spread label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; }

/* The changed-fields list on the customer-update banner. */
.cust-update-fields { font-size: 0.78rem; color: #8fd6a3; border: 1px dashed color-mix(in srgb, #8fd6a3 45%, transparent);
    border-radius: 4px; padding: 0.05rem 0.45rem; }

/* Collections suppression panel — the visible do-not-contact record. */
.coll-suppr-list { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.coll-suppr-list li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem; }
.coll-suppr-add { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.coll-suppr-add .auth-input { max-width: 15rem; }

/* ---- collections second wave: escalation track cards ---- */
.esc-card { border: 1px solid var(--border); border-radius: 4px; padding: 0.7rem 0.85rem; margin: 0 0 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; }
.esc-card.esc-overdue { border-color: color-mix(in srgb, #ef6f6f 55%, var(--border)); }
.esc-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.esc-milestones { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.esc-m { font-size: 0.78rem; border: 1px solid var(--border); border-radius: 99px; padding: 0.15rem 0.6rem; color: var(--muted); }
.esc-m-done { border-color: color-mix(in srgb, #34d399 45%, var(--border)); color: color-mix(in srgb, #34d399 75%, var(--fg)); }
.esc-m-cur { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); color: var(--fg); font-weight: 600; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.esc-m-cur.esc-m-done { background: none; }
.esc-milestones .esc-m + .esc-m { position: relative; }
.esc-step { margin: 0; }

/* Market-edit grouping tabs — a display filter over the panel grid; hidden panels stay bound. */
.mkt-tabs { margin-bottom: 1rem; }
.mkt-hide { display: none !important; }
.mkt-used { font-size: 0.72rem; margin: -0.2rem 0 0.6rem; opacity: 0.85; }
.mkt-used::before { content: "↳ "; opacity: 0.7; }
.mkt-rates { margin: 0.4rem 0 0.5rem; }
.mkt-rates input[type="date"] { min-width: 9.5rem; }
.mkt-rate-pct { max-width: 6rem; }
.mkt-rate-series { border: 1px dashed color-mix(in srgb, var(--muted) 35%, transparent);
    border-radius: 2px; padding: 0.6rem 0.75rem; margin: 0.6rem 0; }
.mkt-series-del { align-self: end; }

/* Mermaid class-diagram + generated-C#/YAML/sample-payload viewers shared by the live SDM Diagram,
   C# classes and Contracts tabs (/admin/data-model). */
.sdmsk-diagram { min-height: 420px; height: 62vh; border: 1px solid var(--border); border-radius: 3px; }
.sdmsk-code { width: 100%; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem;
    line-height: 1.5; resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto; }

/* VS-dark syntax colouring for the generated C# reading — the `{ } C# classes` view and the 3D
   class explorer's side panel both render CSharpSyntax.ToHtml output into a pre.cs-code. Colours
   follow Visual Studio dark: keywords blue, types teal, members light blue, comments green. The
   editor chrome (#1e1e1e ground, grey line-number gutter) is deliberately VS's, not the app's —
   it should read as "your model, open in the IDE". */
.cs-code { background: #1e1e1e; border: 1px solid #404040; border-radius: 3px;
    padding: 0.75rem 0; margin: 0; color: #d4d4d4; counter-reset: csline; max-height: 74vh; overflow: auto; }
.cs-code .cs-line { display: block; padding-right: 1rem; }
.cs-code .cs-line::before { counter-increment: csline; content: counter(csline);
    display: inline-block; width: 2.8rem; margin-right: 1rem; text-align: right;
    color: #757575; user-select: none; }
.cs-k { color: #3395e0; }
.cs-t { color: #4ec9b0; }
.cs-p { color: #b3d9f2; }
.cs-c { color: #6a9955; }
.cs-doc { color: #6a9955; }
.cs-doc-tag { color: #5d7a63; }
.cs-s { color: #ce9178; }
.cs-n { color: #b5cea8; }

/* =============================================================================
   Customer Portal (/portal) — the end customer's own surface.

   Deliberately calmer and roomier than the staff shell: one column, larger type,
   generous cards, no dense tables-of-everything. A customer visits a few times a
   year and needs to find one thing, so the layout optimises for scanning rather
   than for operator throughput.
   ========================================================================== */

.portal-shell {
    min-height: 100vh;
    display: flex; flex-direction: column;
}

.portal-top {
    display: flex; align-items: center; gap: 1.1rem;
    padding: 0 1.5rem; min-height: 60px;
    background: #000; border-bottom: 1px solid #1f1f1f;
    position: sticky; top: 0; z-index: 10;
}
.portal-top .spacer { flex: 1; }
.portal-brand {
    display: inline-flex; align-items: center; gap: 0.6rem;
    color: #fff; text-decoration: none;
    font-family: var(--font-display); font-weight: 400; font-size: 1.2rem;
}
.portal-nav { display: flex; gap: 1.15rem; }
.portal-nav a {
    color: rgba(255,255,255,0.76); text-decoration: none; font-size: 0.9rem;
    padding: 0.2rem 0; border-bottom: 2px solid transparent;
}
.portal-nav a:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.35); }
.portal-who { font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.portal-signout {
    background: transparent; border: 1px solid #333; border-radius: 4px;
    color: rgba(255,255,255,0.78); font: inherit; font-size: 0.85rem;
    padding: 0.3rem 0.75rem; cursor: pointer;
}
.portal-signout:hover { color: #fff; border-color: #555; }

.portal-main { flex: 1; display: flex; justify-content: center; padding: 2.25rem 1.5rem 3rem; }
.portal-page { width: 100%; max-width: 62rem; }
.portal-page h1 { font-family: var(--font-display); font-size: 1.9rem; margin: 0 0 0.35rem; }
.portal-h2 { font-size: 1.05rem; margin: 0 0 0.9rem; font-weight: 600; }
.portal-lead { color: var(--muted); margin: 0 0 1.6rem; font-size: 1rem; }
.portal-sub { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.8rem; }
.portal-back { display: inline-block; color: var(--muted); text-decoration: none; margin-bottom: 1rem; font-size: 0.9rem; }
.portal-back:hover { color: var(--fg); }
.portal-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.portal-head > div { flex: 1; }

.portal-card {
    background: rgba(255,255,255,0.028);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.25rem;
}
.portal-empty { text-align: center; color: var(--muted); }
.portal-empty h1 { margin-bottom: 0.6rem; }

/* Contract cards on the overview — the whole card is the link. */
.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.1rem; margin-bottom: 1.6rem; }
.portal-contract-card { display: block; text-decoration: none; color: inherit; transition: border-color var(--dur) var(--ease-standard); }
.portal-contract-card:hover { border-color: var(--accent); }
.pc-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.15rem; }
.pc-asset { font-weight: 600; font-size: 1.02rem; flex: 1; }
.pc-number { color: var(--muted); font-size: 0.82rem; font-family: var(--mono); margin-bottom: 0.9rem; }
.pc-facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; margin: 0 0 1rem; }
.pc-facts dt { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.pc-facts dd { margin: 0.1rem 0 0; font-weight: 600; }
.pc-more { color: var(--accent-2); font-size: 0.88rem; }

.pc-status {
    flex: 0 0 auto; padding: 0.15rem 0.55rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    border: 1px solid transparent;
}
.pc-status-active    { background: color-mix(in srgb, #34d399 16%, transparent); color: #86efac; }
.pc-status-signed    { background: color-mix(in srgb, #3395e0 16%, transparent); color: #b3d9f2; }
.pc-status-sent      { background: color-mix(in srgb, #ffd166 16%, transparent); color: #ffe6b0; }
.pc-status-settled   { background: rgba(255,255,255,0.07); color: var(--muted); }
.pc-status-terminated,
.pc-status-cancelled { background: color-mix(in srgb, #f87171 16%, transparent); color: #fbbcbc; }

.portal-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.9rem 1.6rem; margin: 0; }
.portal-dl dt { color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; }
.portal-dl dd { margin: 0.2rem 0 0; font-weight: 600; }

.portal-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.portal-table th {
    text-align: left; color: var(--muted); font-size: 0.74rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0 0.7rem 0.55rem; border-bottom: 1px solid var(--border);
}
.portal-table td { padding: 0.65rem 0.7rem; border-bottom: 1px solid rgba(255,255,255,0.045); }
.portal-table th.num, .portal-table td.num { text-align: right; }
.portal-table tr:last-child td { border-bottom: 0; }
.portal-table .pp-bad td { color: #fbbcbc; }

.portal-alert {
    display: flex; flex-direction: column; gap: 0.2rem;
    background: color-mix(in srgb, #f87171 12%, transparent);
    border: 1px solid color-mix(in srgb, #f87171 35%, transparent);
    border-radius: 3px; padding: 0.9rem 1.1rem; margin-bottom: 1.25rem;
}
.portal-ok {
    background: color-mix(in srgb, #34d399 12%, transparent);
    border: 1px solid color-mix(in srgb, #34d399 32%, transparent);
    border-radius: 3px; padding: 0.75rem 1rem; margin: 0 0 1rem;
}

.portal-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.2rem; }
.portal-btn {
    /* #0078d6 rather than --accent (#3395e0): white on the lighter blue is 3.7:1, which misses AA
       for text this size. This passes at 5.2:1. */
    display: inline-block; background: #0078d6; color: #fff;
    border: 1px solid #0078d6; border-radius: 2px;
    padding: 0.55rem 1.15rem; font: inherit; font-size: 0.92rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
/* Hover DARKENS. It used to go lighter (--accent-2, #3395e0), which dropped white text to 2.3:1 —
   the button got harder to read exactly when you were pointing at it. */
.portal-btn:hover, .portal-btn:focus-visible { background: #0078d6; border-color: #0078d6; color: #fff; }
.portal-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.portal-btn:visited { color: #fff; }
.portal-btn:disabled { opacity: 0.5; cursor: default; }
.portal-btn.ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.portal-btn.ghost:hover { background: rgba(255,255,255,0.05); border-color: #555; }
.portal-link { color: var(--accent-2); text-decoration: none; }
.portal-link:hover { text-decoration: underline; }

.portal-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.portal-form label, .portal-field { display: flex; flex-direction: column; gap: 0.3rem; }
.portal-form label > span:first-child, .portal-field > span:first-child {
    color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.portal-field { max-width: 32rem; margin: 1rem 0 0; }
.portal-form .hint, .portal-field .hint { color: var(--muted); font-size: 0.78rem; text-transform: none; letter-spacing: 0; }
.portal-form input:disabled { opacity: 0.65; cursor: not-allowed; }

/* Requestable letters — radio cards, because a customer picks one thing from a short list. */
.portal-letters { display: grid; gap: 0.7rem; }
.portal-letter {
    display: flex; align-items: flex-start; gap: 0.75rem;
    border: 1px solid var(--border); border-radius: 3px;
    padding: 0.85rem 1rem; cursor: pointer;
    transition: border-color var(--dur) var(--ease-standard), background var(--dur) var(--ease-standard);
}
.portal-letter:hover { border-color: #555; }
.portal-letter.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.portal-letter .pl-body { display: flex; flex-direction: column; gap: 0.15rem; }
.pl-label { font-weight: 600; }
.pl-desc { color: var(--muted); font-size: 0.86rem; }
.pl-instant {
    align-self: flex-start; margin-top: 0.25rem;
    background: color-mix(in srgb, #34d399 16%, transparent); color: #86efac;
    border-radius: 999px; padding: 0.1rem 0.5rem;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}

.portal-req-list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.5rem; }
.portal-req-list li { display: flex; align-items: baseline; gap: 0.8rem; }
.portal-req-list .pr-title { flex: 1; }
.portal-req-list .pr-when, .portal-req-list .pr-status { color: var(--muted); font-size: 0.84rem; }
.pr-desc { font-size: 0.84rem; margin-top: 0.2rem; }

.portal-doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.portal-doc-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.portal-doc-list .muted { font-size: 0.82rem; }

.portal-foot {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.9rem 1.5rem; border-top: 1px solid var(--border);
    color: var(--muted); font-size: 0.82rem;
}
.portal-foot .spacer { flex: 1; }

/* Portal sign-in — narrow, centred, no marketing split (the customer knows where they are). */
.portal-auth { width: 100%; max-width: 26rem; margin: 2rem auto; }
.portal-auth h1 { font-family: var(--font-display); font-size: 1.75rem; margin: 0 0 0.3rem; }
.portal-auth-sub { color: var(--muted); margin: 0 0 1.6rem; }
.portal-auth .auth-row { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.portal-auth .auth-row label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }

@media (max-width: 720px) {
    .portal-top { flex-wrap: wrap; padding: 0.6rem 1rem; }
    .portal-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 0.2rem; }
    .portal-who { display: none; }
    .portal-main { padding: 1.5rem 1rem 2.5rem; }
}

/* =============================================================================
   /admin/users/{id} — layout only, scoped to this page
   ========================================================================== */
/* The shared .mkt-grid stretches every panel to the tallest in its row. With nine panels of wildly
   different heights that left columns of dead space beside a three-field form, so panels now sit at
   the top of their row and take the height they need. */
.usr-detail .mkt-grid { align-items: start; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* Roles: columns, not one thin list. Sized so each role's name and description stay on one or two
   lines — the descriptions are the point, and they were wrapping to five lines each. */
.usr-roles {
    display: grid !important;
    /* 360 not 300: at 300 you get five columns and every description wraps to three lines, which is
       what the single-column version was already doing wrong. Four wider columns read in one or two. */
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 0.35rem 1.5rem;
    align-items: start;
}
.usr-detail .mkt-check { padding: 0.28rem 0.4rem; border-radius: 2px; align-items: flex-start; }
.usr-detail .mkt-check:hover { background: rgba(140, 150, 170, 0.08); }
.usr-detail .mkt-check span { line-height: 1.35; }

/* The account-action panels (reset, sign-in details, AI) are occasional, not part of the editing
   flow — quieter buttons that don't wrap to two lines. */
.usr-detail .mkt-panel .lp-btn { width: 100%; justify-content: center; }

/* Floating outlets sit INSIDE the scope panel but are a sub-decision of it, so they're set off by a
   rule rather than given a panel of their own — a second panel would read as a second subject. */
.usr-floating {
    margin-top: 0.4rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border, #303030);
}
.usr-outlet-set {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.1rem 1rem;
    margin-top: 0.4rem;
}
/* The one self-editable line on the profile's scope panel — spaced off the read-only table above it. */
.prof-outlet { margin-top: 0.8rem; }

/* Pricing & residual values: the two definitions, and the resolved balloon chain. Both are prose the
   reader is meant to actually read, so they get room and a rule rather than muted-small treatment. */
.rv-glossary {
    margin: 0 0 1.2rem;
    padding: 0.7rem 0.95rem;
    border-left: 3px solid var(--border, #303030);
    border-radius: 0 8px 8px 0;
    background: rgba(140, 150, 170, 0.05);
    line-height: 1.55;
}
.rv-chain {
    margin: 0 0 1rem;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--border, #303030);
    border-left: 3px solid var(--accent-2, #3395e0);
    border-radius: 4px;
    background: rgba(51, 149, 224, 0.06);
    line-height: 1.55;
    font-size: 0.88rem;
}

/* The policy panel lays its fields out as a wrapping flex row, which left the section headings and
   the wide checkboxes sharing a line with a dropdown. Both are their own thought — give them the
   full width so the panel reads top-to-bottom. */
.rv-settings .cf-form-row > h3,
.rv-settings .cf-form-row > .mkt-check,
.rv-settings .cf-form-row > p { flex-basis: 100%; }
.rv-settings .cf-form-row > h3 { margin: 1rem 0 0.2rem; }

/* Calculator: where the balloon came from. The override state is the one that needs to catch the eye
   — it's the case a real deal would have to record against someone's name. */
.calc-guideline {
    margin: 0.4rem 0 0;
    padding: 0.55rem 0.8rem;
    border-radius: 3px;
    background: rgba(51, 149, 224, 0.07);
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}
.calc-guideline-over {
    background: rgba(240, 173, 78, 0.1);
    color: var(--warn, #f0ad4e);
}

/* ---- Affordability waterfall (PMS proposal detail) ---------------------------------------
   The verdict is a tint on the block, not a badge: an underwriter scanning the page should see
   "beyond capacity" from the colour before reading a word of it. */
.pms-afford { border: 1px solid rgba(255,255,255,0.09); border-radius: 4px; padding: 0.7rem 0.85rem; margin-bottom: 0.9rem;
    background: rgba(255,255,255,0.02); }
.pms-afford.pass { border-color: rgba(80,200,140,0.35); background: rgba(80,200,140,0.05); }
.pms-afford.fail { border-color: rgba(230,110,110,0.4); background: rgba(230,110,110,0.06); }
.pms-afford-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.pms-afford-verdict { font-weight: 600; font-size: 0.95rem; }
.pms-afford.pass .pms-afford-verdict { color: #7bd6a6; }
.pms-afford.fail .pms-afford-verdict { color: #f09a9a; }
.pms-afford-flow { display: flex; flex-direction: column; gap: 0.1rem; }
.pms-afford-line { display: grid; grid-template-columns: 1.1rem 1fr auto; gap: 0.5rem; align-items: baseline;
    font-size: 0.82rem; padding: 0.16rem 0; }
.pms-afford-line.sum { border-top: 1px solid rgba(255,255,255,0.09); margin-top: 0.15rem; padding-top: 0.3rem; font-weight: 600; }
.pms-afford-line.proposed { border-top: 1px dashed rgba(255,255,255,0.14); margin-top: 0.25rem; padding-top: 0.35rem; }
.pms-afford-sign { color: var(--muted); text-align: center; }
.pms-afford-amt { font-variant-numeric: tabular-nums; }
.pms-afford-checks { margin-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 0.5rem;
    display: flex; flex-direction: column; gap: 0.2rem; }
.pms-afford-check { display: flex; gap: 0.45rem; align-items: baseline; }
.pms-afford-check.ok > span:first-child { color: #7bd6a6; }
.pms-afford-check.bad > span:first-child { color: #f09a9a; }

/* ---- Parties to the agreement (contract detail, aggregate Phase 2) ---------------------- */
.cm-parties-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0 0.4rem; }
.cm-parties-h { font-size: 0.9rem; margin: 0; }
.cm-parties { width: 100%; margin-bottom: 1rem; }
.cm-parties td { vertical-align: top; }

/* ---- Financed asset (contract detail, aggregate Phase 3) -------------------------------- */
.cm-asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.35rem 1.25rem; margin-bottom: 1rem; }
.cm-asset-grid > div { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.06); padding-top: 0.35rem; }
.cm-asset-grid .muted { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- Proposal Management search bar ------------------------------------------------------
   Its own line with real weight. It used to be a small unlabelled box wedged between the bucket
   chips and Refresh, and people reached for the browser's Ctrl+F instead — which only finds what
   is already painted. */
.pms-searchbar { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0.9rem;
    padding: 0.15rem 0.75rem; border: 1px solid var(--border, #3a3a3a); border-radius: 4px;
    background: rgba(255,255,255,0.025); transition: border-color 0.12s, background 0.12s; }
.pms-searchbar:focus-within, .pms-searchbar.on { border-color: rgba(120,170,255,0.5); background: rgba(120,170,255,0.05); }
.pms-searchbar-ico { opacity: 0.6; font-size: 0.9rem; }
.pms-searchbar-input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none;
    color: inherit; font-size: 0.95rem; padding: 0.55rem 0; }
.pms-searchbar-input::placeholder { opacity: 0.45; }
.pms-searchbar-count { font-size: 0.8rem; white-space: nowrap; }
.pms-searchbar-hint { font-size: 0.75rem; white-space: nowrap; }
.pms-searchbar-hint kbd { border: 1px solid var(--border, #3a3a3a); border-radius: 4px;
    padding: 0.05rem 0.3rem; font-size: 0.7rem; }

/* ---- Proposal Management loading skeleton ------------------------------------------------
   Painted by both the prerendered frame and the circuit's first frame, so a hard load shows
   one steady skeleton until the queue arrives instead of data → blank → data. */
.pms-skel { display: inline-block; border-radius: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.11) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%; animation: pms-skel-shimmer 1.2s ease-in-out infinite; }
.pms-skel-chip { width: 9.5rem; height: 2rem; }
.pms-skel-search { display: block; width: 100%; height: 2.6rem; border-radius: 4px; margin: 0.5rem 0 0.9rem; }
.pms-skel-row { display: block; width: 100%; height: 2.4rem; border-radius: 2px; }
.pms-skel-row + .pms-skel-row { margin-top: 0.55rem; }
@keyframes pms-skel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pms-skel { animation: none; } }

/* An unrated 5-Cs dimension: an absence of information, not a bad result. Grey, hollow bar, and the
   card dimmed — never the red that says "this applicant is weak". */
.pms-5c-grade.g-unrated { color: var(--muted, #939393); border-color: rgba(255,255,255,0.14); background: transparent; }
.pms-5c-card.unrated { opacity: 0.72; }
.pms-5c-bar.unrated { background: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.10) 0 4px, transparent 4px 8px); }

/* ---- PMS chat: which conversation belongs to which tab ----------------------------------
   The application NUMBER leads; the customer name is context. One customer can have several
   proposals in assessment at once, and naming rows by customer made them indistinguishable. */
.pmsinbox-who { display: block; font-size: 0.78rem; opacity: 0.75; }
.pmschat-bar-label { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; overflow: hidden; }
.pmschat-bar-who { font-size: 0.78rem; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmschat-open-tab { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
    border: 1px solid rgba(120,170,255,0.45); color: #b3d9f2; border-radius: 999px;
    padding: 0.02rem 0.35rem; white-space: nowrap; }

/* ---- New-user wizard (/admin/users/new) -------------------------------------------------
   Four steps, one question each. The layout leans on the same panel/lp-btn/auth-input
   vocabulary as the rest of admin; what is new here is the step rail, the persona cards and
   the review list. Cards rather than a <select> because the choice is a paragraph, not a
   word — the summary is the whole point of the step. */
.usr-wizard { max-width: 60rem; }

.wiz-steps { display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; list-style: none;
    margin: 0.4rem 0 1.6rem; padding: 0; }
.wiz-steps li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem;
    color: var(--muted); }
.wiz-step-n { display: inline-flex; align-items: center; justify-content: center;
    width: 1.4rem; height: 1.4rem; border-radius: 999px; font-size: 0.75rem;
    border: 1px solid var(--border); }
.wiz-steps li.current { color: var(--fg); font-weight: 600; }
.wiz-steps li.current .wiz-step-n { border-color: var(--accent); color: var(--accent); }
.wiz-steps li.done .wiz-step-n { border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent); }

.wiz-group-h { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); margin: 1.4rem 0 0.6rem; font-weight: 600; }

.wiz-cards { display: grid; gap: 0.6rem;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.wiz-card { display: flex; flex-direction: column; gap: 0.3rem; text-align: left;
    padding: 0.85rem 0.95rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: transparent; color: inherit; cursor: pointer;
    transition: border-color var(--dur) var(--ease-standard), background var(--dur) var(--ease-standard); }
.wiz-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.wiz-card.picked { border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent); }
.wiz-card-t { font-weight: 600; font-size: 0.95rem; }
.wiz-card-s { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.wiz-card-meta { font-family: var(--mono); font-size: 0.68rem; opacity: 0.45; margin-top: 0.15rem; }

.wiz-panel { display: flex; flex-direction: column; gap: 1.1rem; }
.wiz-sub-h { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.35rem; }

.wiz-scope-choices { display: grid; gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.wiz-chip { display: flex; flex-direction: column; gap: 0.2rem; text-align: left;
    padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: transparent; color: inherit; cursor: pointer; }
.wiz-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.wiz-chip.picked { border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent); }
.wiz-chip-t { font-weight: 600; font-size: 0.88rem; }
.wiz-chip-s { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }
.wiz-chip-tag { align-self: flex-start; margin-top: 0.25rem; font-size: 0.65rem;
    text-transform: uppercase; letter-spacing: 0.05em; border-radius: 999px;
    padding: 0.05rem 0.4rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent-2); }

.wiz-chain { display: grid; gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.wiz-chain label, .wiz-identity label { display: flex; flex-direction: column; gap: 0.25rem;
    font-size: 0.85rem; }
.wiz-identity { display: grid; gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
/* A market the administrator cannot change reads as a fact, not as a disabled control. */
.wiz-fixed { margin: 0; padding: 0.5rem 0.65rem; border: 1px dashed var(--border);
    border-radius: var(--radius); color: var(--muted); font-size: 0.9rem; }

.wiz-review-list { display: grid; gap: 0.5rem; margin: 0; }
.wiz-review-list > div { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: 0.8rem; align-items: baseline; }
.wiz-review-list dt { color: var(--muted); font-size: 0.82rem; }
.wiz-review-list dd { margin: 0; font-size: 0.92rem; }

.wiz-grants { border-top: 1px solid var(--border); padding-top: 0.9rem; }
.wiz-grant-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem;
    font-size: 0.86rem; line-height: 1.45; }

/* The temporary password: shown once, so it gets the weight of a result rather than the
   weight of a form field. Monospace and selectable — it is going to be copied by hand. */
.wiz-done { display: flex; flex-direction: column; gap: 0.9rem; }
.wiz-secret { display: flex; flex-direction: column; gap: 0.25rem;
    padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 6%, transparent); }
.wiz-secret-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); }
.wiz-secret-value { font-family: var(--mono); font-size: 1.15rem; user-select: all;
    word-break: break-all; }

@media (max-width: 620px) {
    .wiz-review-list > div { grid-template-columns: 1fr; gap: 0.1rem; }
    .wiz-steps { gap: 0.3rem 0.7rem; }
    .wiz-steps .wiz-step-t { display: none; }
    .wiz-steps li.current .wiz-step-t { display: inline; }
}

/* Broken backing paths on the Schema view — SDM fields that declare a column and name one that
   doesn't exist. Collapsed by default: it's a defect list, not the headline, but it must be
   reachable from the view that found it. */
.sct-broken { border: 1px solid color-mix(in srgb, #f87171 45%, transparent); border-radius: 3px;
    padding: 0.5rem 0.7rem; margin: 0.4rem 0 0.6rem; }
/* Nothing is actually broken — a column-less backing path that still reads is information, not an
   alarm, and colouring it red taught the exact wrong lesson. */
.sct-broken--none { border-color: var(--border, #3a3a3a); }
.sct-broken-list li.sct-broken-real { color: #ff9a9a; }
.sct-broken summary { cursor: pointer; }
.sct-broken-list { margin: 0.5rem 0 0; padding-left: 1.1rem; max-height: 16rem; overflow-y: auto; }
.sct-broken-list li { margin: 0.1rem 0; }
.sct-broken-list code { font-size: 0.72rem; }

/* ---- Quote variants (multi-quote markets) ----------------------------------------------------
   The same tab idiom as the SQL console, but this strip is not a console: it sits on a form panel,
   so it takes the panel's surface rather than the console's near-black. The primary variant is
   marked with a star and a left accent — "which tab am I on" and "which quote actually counts" are
   different questions, and the strip has to answer both at once or a desk clicking through options
   will assume the one it is looking at is the one credit sees. */
.quote-variants { padding: 0.6rem 0.75rem; }
.qv-strip { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.25rem; }
.qv-tab { display: inline-flex; align-items: baseline; gap: 0.45rem; font-size: 0.82rem;
  background: var(--surface-2, rgba(255,255,255,0.03)); border: 1px solid var(--border);
  border-radius: 3px 8px 0 0; padding: 0.35rem 0.75rem; color: var(--muted);
  cursor: pointer; white-space: nowrap; }
.qv-tab:hover { color: var(--fg); }
.qv-tab-on { background: var(--surface, rgba(255,255,255,0.06)); color: var(--fg);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
/* The star alone is easy to miss on a busy strip; the accent edge is what carries at a glance. */
.qv-tab-primary { border-left: 3px solid var(--accent); }
.qv-tab-fig { font-family: var(--mono); font-size: 0.78rem; }
.qv-pin { color: var(--accent); font-size: 0.7rem; }
.qv-add { background: none; border: 1px dashed var(--border); border-radius: 3px 8px 0 0;
  color: var(--muted); cursor: pointer; font-size: 0.8rem; padding: 0.35rem 0.7rem; }
.qv-add:hover { color: var(--fg); border-color: var(--accent); }
.qv-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.55rem;
  font-size: 0.82rem; color: var(--muted); }

/* ---- SDM 3D explorer (/admin/data-model/3d) ------------------------------------------------- */
.sdm3d-page { display: flex; flex-direction: column; gap: 0.6rem; }
.sdm3d-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.sdm3d-head h1 { margin-bottom: 0.15rem; }
.sdm3d-headctl { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.sdm3d-headctl .auth-input.sm { min-width: 10rem; }
.sdm3d-trace { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sdm3d-trace input.auth-input.sm { min-width: 22rem; flex: 1 1 22rem; max-width: 32rem; }
.sdm3d-error { color: #f87171; font-size: 0.82rem; }
.sdm3d-stage { position: relative; height: 72vh; min-height: 420px; border: 1px solid var(--border);
  border-radius: 5px; overflow: hidden; background: radial-gradient(ellipse at center, #202020 0%, #101010 100%); }
.sdm3d-host { position: absolute; inset: 0; }
.sdm3d-legend { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 0.3rem;
  background: rgba(14, 14, 14, 0.72); border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.7rem;
  font-size: 0.72rem; color: #cecece; pointer-events: none; }
.sdm3d-legend-group { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.sdm3d-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: -0.1rem; }
.sdm3d-line { width: 16px; height: 3px; border-radius: 2px; display: inline-block; margin-right: -0.1rem; }
.sdm3d-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.7rem; font-size: 0.85rem; margin: 0.6rem 0; }
.sdm3d-facts dt { color: var(--muted); }
.sdm3d-facts dd { margin: 0; }
.sdm3d-snippet-hd { font-size: 0.85rem; margin: 0.9rem 0 0.35rem; color: var(--muted); }
.sdm3d-snippet { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.sdm3d-snippet td { padding: 0.2rem 0.4rem 0.2rem 0; vertical-align: top; border-bottom: 1px solid var(--border); }
.sdm3d-snippet code { font-size: 0.78rem; word-break: break-word; }
.sdm3d-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.sdm3d-events code { font-size: 0.78rem; }

/* ---- SDM Map (/admin/data-model, Map view) — composition drawn as CONTAINMENT. What an entity
   owns sits INSIDE its box, a 0..N child is a paper stack, references are jump-chips, and the 🩺
   lens pins the model's findings on the boxes they belong to. Plain 2D on purpose. ------------- */
.sdmx-mapview { display: flex; flex-direction: column; gap: 0.8rem; }
.sdmm-bar { align-items: center; }
.sdmm-bar .spacer { flex: 1; }
.sdmm-traceinput { max-width: 24rem; min-width: 16rem; }
.sdmm-band > h2 { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); margin: 0.9rem 0 0.55rem; font-weight: 600; }
.sdmm-grid, .sdmm-kids { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; }
.sdmm-kids { padding: 0.15rem 0.65rem 0.65rem; }

.sdmm-ent { background: rgba(255, 255, 255, 0.025); border: 1.5px solid var(--border);
    border-left: 4px solid var(--sdmm-kind, #b3d9f2); border-radius: 3px; min-width: 190px;
    scroll-margin-top: 5rem; }
.sdmm-ent .sdmm-ent { background: rgba(255, 255, 255, 0.03); }
.sdmm-ent .sdmm-ent .sdmm-ent { background: rgba(255, 255, 255, 0.045); }
.sdmm-head { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.45rem 0.65rem; flex-wrap: wrap; }
.sdmm-twist { background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted);
    font-size: 0.62rem; width: 0.8rem; }
.sdmm-twist:hover { color: var(--fg); }
.sdmm-name { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.sdmm-name code { font-size: 0.86rem; font-weight: 600; color: var(--sdmm-kind, #b3d9f2); }
.sdmm-name:hover code { text-decoration: underline; }
.sdmm-card { font-family: var(--mono); font-size: 0.7rem; color: var(--muted);
    border: 1px solid var(--border); border-radius: 4px; padding: 0 0.3rem; }
.sdmm-meta { color: var(--muted); font-size: 0.73rem; margin-left: auto; white-space: nowrap; }
.sdmm-closed > .sdmm-kids, .sdmm-closed > .sdmm-refs, .sdmm-closed > .sdmm-vals { display: none; }

/* Kind = the left edge + the name, same hues as every other SDM surface. */
.sdmm-k-root { --sdmm-kind: #ff8f6b; }
.sdmm-k-shared { --sdmm-kind: #f6c453; }
.sdmm-k-master { --sdmm-kind: #a779ff; }
.sdmm-k-owned { --sdmm-kind: #b3d9f2; }
.sdmm-k-value { --sdmm-kind: #3fd99b; }
.sdmm-k-gap { --sdmm-kind: #727272; border-style: dashed; }
.sdmm-k-gap .sdmm-name code { color: var(--muted); font-weight: 500; }

/* A 1..N child literally looks like a stack of paper. */
.sdmm-coll { position: relative; margin-right: 9px; margin-bottom: 9px; }
.sdmm-coll::before, .sdmm-coll::after { content: ""; position: absolute; inset: 0; z-index: -1;
    border: 1.5px solid var(--border); border-left: 4px solid var(--sdmm-kind, #b3d9f2);
    border-radius: 3px; background: var(--bg); }
.sdmm-coll::before { transform: translate(4px, 4px); opacity: 0.55; }
.sdmm-coll::after { transform: translate(8px, 8px); opacity: 0.28; }

.sdmm-refs { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0 0.65rem 0.5rem; }
.sdmm-ref { font-family: var(--mono); font-size: 0.72rem; color: #b3d9f2;
    background: rgba(179, 217, 242, 0.1); border: 1px solid rgba(179, 217, 242, 0.35);
    border-radius: 999px; padding: 0.02rem 0.5rem; text-decoration: none; }
a.sdmm-ref:hover { background: rgba(179, 217, 242, 0.22); text-decoration: none; }
.sdmm-ref-dead { color: #f87171; background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.45); }

/* 🩺 lens: findings stay bright, the healthy structure recedes. */
.sdmm-fbadge { display: none; font-size: 0.7rem; font-weight: 600; border-radius: 999px; padding: 0 0.45rem; }
.sdmm-lens .sdmm-has-err > .sdmm-head .sdmm-fbadge,
.sdmm-lens .sdmm-has-warn > .sdmm-head .sdmm-fbadge { display: inline-block; }
.sdmm-fbadge.sdmm-err { color: #16060b; background: #f87171; }
.sdmm-fbadge.sdmm-warn { color: #211602; background: #fbbf24; }
.sdmm-lens .sdmm-ent { opacity: 0.38; }
.sdmm-lens .sdmm-ent:has(.sdmm-has-err), .sdmm-lens .sdmm-ent:has(.sdmm-has-warn),
.sdmm-lens .sdmm-has-err, .sdmm-lens .sdmm-has-warn { opacity: 1; }
.sdmm-lens .sdmm-has-err { border-color: #f87171; border-left-color: #f87171; }
.sdmm-lens .sdmm-has-warn { border-color: #fbbf24; border-left-color: #fbbf24; }
.sdmm-findings { display: flex; flex-direction: column; gap: 0.3rem; border: 1px solid var(--border);
    border-radius: 4px; padding: 0.6rem 0.7rem; background: rgba(255, 255, 255, 0.02); }
.sdmm-finding { font-size: 0.78rem; color: var(--fg); text-decoration: none;
    border-left: 3px solid var(--border); padding: 0.15rem 0 0.15rem 0.5rem; }
.sdmm-finding:hover { background: rgba(51, 149, 224, 0.08); text-decoration: none; }
.sdmm-finding span { color: var(--muted); }
.sdmm-finding strong { font-family: var(--mono); }
.sdmm-finding.sdmm-err { border-left-color: #f87171; }
.sdmm-finding.sdmm-warn { border-left-color: #fbbf24; }

/* ✨ traced values inline; boxes without data recede while a trace is loaded. */
.sdmm-vals { padding: 0 0.65rem 0.55rem; font-family: var(--mono); font-size: 0.73rem; }
.sdmm-vals > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.08rem 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--border) 80%, transparent); }
.sdmm-vals span { color: var(--muted); font-family: var(--font-sans); }
.sdmm-vals code { color: #34d399; }
.sdmm-traced .sdmm-has-data { border-color: #34d399; border-left-color: #34d399; }
.sdmm-traced .sdmm-ent:not(.sdmm-has-data):not(:has(.sdmm-has-data)) { opacity: 0.4; }

.sdmm-dim { opacity: 0.22 !important; }
.sdmm-ent.sdmm-flash { animation: sdmm-flash 1.8s ease-out; }
@keyframes sdmm-flash { 0%, 55% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .sdmm-ent.sdmm-flash { animation: none; outline: 2px solid var(--accent); } }
/* The findings + ref chips are BUTTONS (a plain #hash anchor runs through Blazor navigation and
   resets the view) — keep the link look. */
button.sdmm-finding { background: none; border-top: 0; border-right: 0; border-bottom: 0; font: inherit;
    text-align: left; cursor: pointer; }
button.sdmm-ref { cursor: pointer; font-family: var(--mono); }
button.sdmm-ref:hover { background: rgba(179, 217, 242, 0.22); }

/* ---- Database schema 3D explorer (/admin/data-model/schema-3d) — the Matrix theme ------------ */
.sch3d-page { display: flex; flex-direction: column; gap: 0.6rem; }
.sch3d-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.sch3d-head h1 { margin-bottom: 0.15rem; }
.sch3d-headctl { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.sch3d-headctl .auth-input.sm { min-width: 10rem; }
.sch3d-trace { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sch3d-trace input.auth-input.sm { min-width: 22rem; flex: 1 1 22rem; max-width: 32rem; }
.sch3d-error { color: #f87171; font-size: 0.82rem; }
.sch3d-stage { position: relative; height: 72vh; min-height: 420px; border: 1px solid var(--border);
  border-radius: 5px; overflow: hidden; background: radial-gradient(ellipse at center, #202020 0%, #101010 100%); }
.sch3d-host { position: absolute; inset: 0; }
.sch3d-legend { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 0.3rem;
  background: rgba(14, 14, 14, 0.72); border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.7rem;
  font-size: 0.72rem; color: #cecece; pointer-events: none; }
.sch3d-legend-group { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.sch3d-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: -0.1rem; }
.sch3d-line { width: 16px; height: 3px; border-radius: 2px; display: inline-block; margin-right: -0.1rem; }
.sch3d-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.7rem; font-size: 0.85rem; margin: 0.6rem 0; }
.sch3d-facts dt { color: var(--muted); }
.sch3d-facts dd { margin: 0; }
.sch3d-snippet-hd { font-size: 0.85rem; margin: 0.9rem 0 0.35rem; color: var(--muted); }
.sch3d-snippet { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.sch3d-snippet td { padding: 0.2rem 0.4rem 0.2rem 0; vertical-align: top; border-bottom: 1px solid var(--border); }
.sch3d-snippet code { font-size: 0.78rem; word-break: break-word; }
.sch3d-col-badge { font-size: 0.62rem; padding: 0.02rem 0.32rem; border-radius: 99px; border: 1px solid var(--border);
  color: var(--muted); margin-right: 0.25rem; white-space: nowrap; }

/* ---- /admin/mcp-server — the switchboard for Aeon's own MCP tool surface ---- */
.mcp-master { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.mcp-endpoint { font-size: 0.95rem; display: inline-block; margin-top: 0.3rem; word-break: break-all; }
.mcp-master-toggle { flex: 0 0 auto; margin: 0; }
.mcp-connect { margin-top: 0.75rem; }
.mcp-snippet { font-size: 0.78rem; background: color-mix(in srgb, var(--border) 18%, transparent);
  border: 1px solid var(--border); border-radius: 3px; padding: 0.6rem 0.75rem; overflow-x: auto; }
.mcp-tool-desc { max-width: 34rem; margin-top: 0.15rem; }
.mcp-perm-note { font-size: 0.72rem; color: var(--muted); font-style: italic; }
.mcp-badge-write { color: #f59e0b; border-color: rgba(245, 158, 11, 0.45); }

/* ---- customer-rating widget (Customer Relations) ---- */
.crat-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.7rem; }
.crat-score { font-size: 1.9rem; font-weight: 700; font-family: var(--font-display, var(--font-sans));
  min-width: 3.2rem; height: 3.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); }
.crat-band { font-weight: 600; }
.crat-band-excellent { border-color: #34d399; color: #34d399; }
.crat-band-good { border-color: #b3d9f2; color: #b3d9f2; }
.crat-band-fair { border-color: #f0b352; color: #f0b352; }
.crat-band-watch { border-color: #fb923c; color: #fb923c; }
.crat-band-risk { border-color: #f87171; color: #f87171; }
.crat-factors { display: flex; flex-direction: column; gap: 0.3rem; }
.crat-factor { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; }
.crat-factor-label { flex: 0 0 11rem; }
.crat-bar { flex: 1; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--border) 45%, transparent);
  overflow: hidden; }
.crat-bar-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent, #b3d9f2); }
.crat-factor-score { flex: 0 0 3.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.crat-factor-unknown { opacity: 0.55; }
.crat-factor-unknown .crat-factor-score { font-size: 0.72rem; }
.crat-note { margin: 0.35rem 0 0; }
.crat-sub { margin: 0.9rem 0 0.35rem; font-size: 0.9rem; }
.crat-suggestions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.crat-when { color: var(--muted); font-size: 0.8rem; }
.crat-ai { margin-top: 0.9rem; }
.crat-ai-steps { margin-top: 0.4rem; }

/* ── Roundtable (/admin/roundtable) + tether Try-it — a room of AI advisors run from Aeon ── */
.rt-grid { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .rt-grid { grid-template-columns: 1fr; } }
.rt-seats-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.rt-seats-head h3 { margin: 0; margin-right: auto; }
.rt-requests-head { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.2rem; margin-bottom: 1rem; }

/* Seat card */
.rt-seat { border: 1px solid var(--border); border-radius: 0.7rem; padding: 0.7rem; margin-bottom: 0.7rem; background: var(--panel-2, rgba(255,255,255,0.02)); transition: opacity 0.15s, border-color 0.15s; }
.rt-seat.is-muted { opacity: 0.5; }
.rt-seat-top { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.55rem; }
.rt-seat-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--seat-c, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seat-c, var(--accent)) 22%, transparent); flex: none; }
.rt-seat-name { flex: 1; font-weight: 600; background: transparent; border: 1px solid transparent; border-radius: 0.4rem; padding: 0.25rem 0.4rem; color: var(--fg); }
.rt-seat-name:hover { border-color: var(--border); }
.rt-seat-name:focus { border-color: var(--accent); background: var(--bg); outline: none; }
/* place-items:center only centres the GLYPH's line box, not its ink — an emoji (🔊/🔇) and a plain
   "✕" character carry different internal line-height metrics, so the pair reads as misaligned even
   though the two buttons are pixel-identical boxes. line-height:1 pins both to the same box. */
.rt-icon-btn { flex: none; width: 1.7rem; height: 1.7rem; padding: 0; box-sizing: border-box; display: grid; place-items: center; border-radius: 0.4rem; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: 0.85rem; line-height: 1; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.rt-icon-btn:hover { background: var(--panel, rgba(255,255,255,0.05)); color: var(--fg); }
.rt-icon-btn.on { border-color: color-mix(in srgb, var(--danger, #f87171) 45%, var(--border)); }
.rt-icon-btn.danger:hover { border-color: var(--danger, #f87171); color: var(--danger, #f87171); }

/* Styled select ("brain" picker) — the whole point of this pass */
.rt-brain { position: relative; display: flex; align-items: center; }
.rt-brain-ico { position: absolute; left: 0.6rem; font-size: 0.95rem; pointer-events: none; opacity: 0.9; }
.rt-select { width: 100%; appearance: none; -webkit-appearance: none; padding: 0.5rem 2rem 0.5rem 2.1rem; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-size: 0.9rem; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%239aa3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 0.7rem center; }
.rt-select:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.rt-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.rt-select:disabled { opacity: 0.5; cursor: not-allowed; }
.rt-select optgroup { font-weight: 700; color: var(--muted); background: var(--panel, #181818); }
.rt-select option { color: var(--fg); background: var(--bg); padding: 0.3rem; }

/* Brain picker v2 — a click-to-open card panel (agents + tool tags, no raw model list) instead
   of a flat <select>, so it reads like the tether card the machine's owner already sees at
   /admin/tethers rather than a bare list of strings. */
.rt-brain-current { width: 100%; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem 0.5rem 2.1rem; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-size: 0.9rem; cursor: pointer; text-align: left; transition: border-color 0.12s, box-shadow 0.12s; }
.rt-brain-current:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.rt-brain-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-brain-caret { color: var(--muted); font-size: 0.75rem; }
.rt-brain-panel { position: absolute; z-index: 20; top: calc(100% + 0.3rem); left: 0; right: 0; max-height: 22rem; overflow-y: auto; padding: 0.6rem; border-radius: 0.6rem; border: 1px solid var(--border); background: var(--panel, #181818); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4); }
.rt-brain-panel .tether-section-label:first-child { margin-top: 0; }
.tether-agent.brain-option { width: 100%; border: 1px solid var(--border); cursor: pointer; text-align: left; font: inherit; color: var(--fg); transition: border-color 0.12s, background 0.12s; }
.tether-agent.brain-option:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--panel-2, rgba(255,255,255,0.04)); }
.tether-agent.brain-option.picked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Seat brain badges */
.rt-seat-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0 0.1rem; }
.rt-tag { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--bg); white-space: nowrap; }
.rt-tag.ghost { opacity: 0.7; font-style: italic; }
.rt-tag.cloud { color: #a78bfa; border-color: color-mix(in srgb, #a78bfa 40%, var(--border)); }
.rt-tag.tether { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.rt-tag.agent { color: #34d399; border-color: color-mix(in srgb, #34d399 40%, var(--border)); }
.rt-tag.tool { color: #fbbf24; border-color: color-mix(in srgb, #fbbf24 35%, var(--border)); background: color-mix(in srgb, #fbbf24 8%, transparent); }
.rt-persona { width: 100%; margin-top: 0.5rem; resize: vertical; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--bg); color: var(--fg); padding: 0.45rem 0.55rem; font-size: 0.85rem; }
.rt-persona:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* Toggles (in-turn / stream) — a real switch, not a bare checkbox */
.rt-toggle { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.6rem 0; }
.rt-toggle-title { font-weight: 600; font-size: 0.9rem; }
.rt-switch { position: relative; flex: none; width: 2.2rem; height: 1.3rem; cursor: pointer; margin-top: 0.1rem; }
.rt-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.rt-switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: background 0.15s; }
.rt-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.3rem - 4px); height: calc(1.3rem - 4px); border-radius: 50%; background: #fff; transition: transform 0.15s; }
.rt-switch input:checked + .rt-switch-track { background: var(--accent); }
.rt-switch input:checked + .rt-switch-track::after { transform: translateX(0.9rem); }
.rt-house { display: block; margin-top: 0.7rem; }
.rt-house textarea { width: 100%; margin-top: 0.25rem; resize: vertical; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--bg); color: var(--fg); padding: 0.4rem 0.5rem; }

/* Conversation */
.rt-convo { display: flex; flex-direction: column; min-height: 62vh; }
.rt-transcript { flex: 1; overflow-y: auto; max-height: 66vh; display: flex; flex-direction: column; gap: 0.7rem; padding-right: 0.3rem; }
.rt-msg { border: 1px solid var(--border); border-radius: 0.7rem; padding: 0.6rem 0.75rem; }
.rt-msg.from-user { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); align-self: flex-end; max-width: 85%; }
.rt-msg.from-agent { background: var(--panel-2, rgba(255,255,255,0.02)); max-width: 92%; align-self: flex-start; }
.rt-msg.is-streaming { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.rt-msg-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.3rem; }
.rt-msg-badge { font-size: 0.7rem; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.45rem; }
.rt-msg-body { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.rt-msg-err { color: var(--danger, #f87171); font-size: 0.9rem; }
.rt-thinking { display: inline-flex; gap: 0.25rem; padding: 0.25rem 0; }
.rt-thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: rt-bounce 1.2s infinite ease-in-out; }
.rt-thinking span:nth-child(2) { animation-delay: 0.15s; }
.rt-thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes rt-bounce { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.rt-compose { margin-top: 0.7rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.rt-compose textarea { width: 100%; resize: vertical; margin-bottom: 0.4rem; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--bg); color: var(--fg); padding: 0.5rem 0.6rem; }
.rt-compose textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* Tether Try-it fields reuse the styled select */
.rt-field-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.rt-field { flex: 1; min-width: 220px; display: block; }
.rt-field-label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.25rem; }
/* The rest of the Try-it panel (system prompt / prompt / run row) was plain unclassed <label>s —
   no block layout, no spacing, so they rendered crammed onto one line. Vertical rhythm between
   each field and the run row. */
.rt-tryit-form { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.8rem; }
/* .form-row had NO rule anywhere (here and on Roundtable's compose bar) — button/text children
   fell back to inline layout and bunched together with no gap. */
.form-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.pill { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.72rem; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }

/* ── Request debate (/admin/request-debate) ── */
.rd-request { margin-top: 0.6rem; border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.6rem; background: var(--bg); }
.rd-request-body { white-space: pre-wrap; word-break: break-word; font-size: 0.85rem; max-height: 12rem; overflow-y: auto; line-height: 1.45; }
.rd-prior { margin-top: 0.5rem; }
.rd-prior summary { cursor: pointer; font-size: 0.8rem; color: var(--muted); }
.rd-verdict { border: 1px solid var(--border); border-radius: 0.7rem; padding: 0.6rem 0.75rem; margin-bottom: 0.7rem; background: var(--panel-2, rgba(255,255,255,0.02)); }
.rd-verdict.is-winner { border-color: color-mix(in srgb, #34d399 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, #34d399 30%, transparent); }
.rd-verdict.is-streaming { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.rd-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; align-items: center; }
/* The table tools (analyse / remark / continue) + the execute-build section under the verdicts */
.rd-tabletools { border-top: 1px solid var(--border); padding-top: 0.7rem; }
.rd-remark { display: flex; gap: 0.4rem; margin-top: 0.5rem; align-items: center; }
.rd-remark input { flex: 1; }
.rd-execute { margin-top: 0.9rem; border-top: 1px solid var(--border); padding-top: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.rd-verdict-pick { padding: 0.3rem 0.5rem; border-radius: 0.4rem; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-size: 0.82rem; }
.rd-msg { margin-top: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 0.5rem; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); font-size: 0.85rem; }
/* The rt-convo panel is a flex column with the transcript at flex:1 — everything above it must
   refuse to shrink, or a tight panel squeezes the actions row to zero height and its buttons
   paint OVER the first verdict card below (seen live 2026-08-11). */
.rt-convo > .rd-msg, .rt-convo > .rd-actions, .rt-convo > .rd-tabletools,
.rt-convo > .rd-remark, .rt-convo > .rd-execute { flex-shrink: 0; }

/* The process stepper — where in the flow this debate stands, derived from state */
.rd-steps { display: flex; align-items: center; gap: 0.35rem; margin: 0.6rem 0 0.9rem; flex-wrap: wrap; }
.rd-step { display: flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem 0.25rem 0.3rem; border-radius: 999px; border: 1px solid var(--border); font-size: 0.78rem; color: var(--muted); background: var(--panel-2, rgba(255,255,255,0.02)); }
.rd-step-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: color-mix(in srgb, var(--muted) 20%, transparent); font-size: 0.7rem; font-weight: 700; }
.rd-step.done { border-color: color-mix(in srgb, #34d399 45%, var(--border)); color: var(--fg); }
.rd-step.done .rd-step-dot { background: color-mix(in srgb, #34d399 30%, transparent); color: #34d399; }
.rd-step.current { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); color: var(--fg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.rd-step.current .rd-step-dot { background: var(--accent); color: #fff; }
.rd-step-line { width: 0.9rem; height: 1px; background: var(--border); flex-shrink: 0; }
.rd-step-line.done { background: color-mix(in srgb, #34d399 55%, var(--border)); }

/* Chat with your machines — the human side-channel of the tether. The trigger sits in page flow;
   the conversation lives in a docked right SidePanel, thread growing to fill it. */
.mchat-trigger { margin: 0 0 0.9rem; display: inline-flex; align-items: center; gap: 0.45rem; }
.mchat-unread { background: var(--accent); color: #fff; border-radius: 999px; font-size: 0.7rem; padding: 0.05rem 0.45rem; font-weight: 700; }
.mchat-body { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; }
.mchat-thread { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; min-height: 6rem; overflow-y: auto; }
.mchat-line { display: flex; flex-direction: column; gap: 0.1rem; max-width: 78%; }
.mchat-line.from-me { align-self: flex-end; align-items: flex-end; }
.mchat-line.from-machine { align-self: flex-start; align-items: flex-start; }
.mchat-from { font-size: 0.7rem; color: var(--muted); font-weight: 600; }
.mchat-text { padding: 0.35rem 0.6rem; border-radius: 0.6rem; font-size: 0.85rem; border: 1px solid var(--border); }
.mchat-line.from-me .mchat-text { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.mchat-line.from-machine .mchat-text { background: var(--panel-2, rgba(255,255,255,0.03)); }
.mchat-compose { display: flex; gap: 0.4rem; align-items: center; }
.mchat-compose input { flex: 1; }

/* Tether page action bar */
.tether-bar { display: flex; align-items: center; gap: 0.6rem; margin: 0.6rem 0 1rem; }

/* ── Client downloads (/admin/tethers "Get the apps") ── */
.tether-downloads { margin-bottom: 1rem; }
.tether-app-icon-hd { width: 1.4rem; height: 1.4rem; vertical-align: -0.3rem; margin-right: 0.35rem; border-radius: 0.32rem; }
.tether-dl-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.6rem 0; }
.tether-dl-row .lp-btn.tether-dl-btn { display: inline-flex; flex-direction: row; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; line-height: 1.25; }
.tether-app-icon { width: 2.1rem; height: 2.1rem; flex: none; border-radius: 0.46rem; }
.tether-dl-label { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; }

/* ── Tether cards (/admin/tethers) + connected strip (roundtable/debate) ── */
.tether-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.tether-card { border: 1px solid var(--border); border-radius: 0.7rem; padding: 0.85rem; background: var(--panel-2, rgba(255,255,255,0.02)); }
.tether-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.tether-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.tether-dot.on { background: #34d399; box-shadow: 0 0 0 3px color-mix(in srgb, #34d399 22%, transparent); }
.tether-id { flex: 1; min-width: 0; }
.tether-machine { font-weight: 700; font-size: 1rem; }
.tether-owner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tether-meta { text-align: right; line-height: 1.35; flex: none; }
.tether-section-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin: 0.5rem 0 0.35rem; }
.tether-agents { display: flex; flex-direction: column; gap: 0.35rem; }
.tether-agent { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--bg); }
.tether-agent-name { font-weight: 600; color: #34d399; }
.tether-models { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* Compact "who's connected" strip for the roundtable + debate pages */
.tether-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--panel-2, rgba(255,255,255,0.02)); margin-bottom: 0.8rem; }
.tether-strip-title { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.tether-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid color-mix(in srgb, #34d399 40%, var(--border)); background: color-mix(in srgb, #34d399 10%, transparent); font-size: 0.8rem; }
.tether-chip .tether-dot { width: 7px; height: 7px; }
.tether-chip-none { font-size: 0.8rem; color: var(--muted); }
.tether-chip-none a { white-space: nowrap; }

/* MetaChipRow — generic metadata pill row (finance product / asset / dealer badges). Each chip
   tints against --mchip-color, set inline per chip (default --accent), same pattern as .form-badge. */
.mchip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.mchip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 999px;
    font-size: 0.78rem; white-space: nowrap;
    color: var(--mchip-color); background: color-mix(in srgb, var(--mchip-color) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--mchip-color) 35%, var(--border)); }
.mchip-icon { line-height: 1; }
.mchip-text { color: var(--fg); }

/* Machine chips — SeatEditor's "pick a topic, add the machines" row (a click both adds and
   removes; .on = already seated). Reuses .tether-chip's pill so it visually matches the same
   connection the owner sees on /admin/tethers, but as a real button. */
.rt-machine-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.machine-chip { cursor: pointer; border: 1px solid color-mix(in srgb, #34d399 40%, var(--border)); font: inherit; transition: transform 0.1s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
.machine-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.35); }
.machine-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 600; }

/* KB Requests list — was a completely unstyled card grid (.kb-request-grid/-card never had a
   CSS rule anywhere), now a proper .records.datagrid table. Just the one addition the table
   convention doesn't already cover: breathing room under the title before the snippet line. */
.kb-request-snippet { margin-top: 0.2rem; }

/* Direct tab (Roundtable → 🎯 Direct) — single-column and mobile-first below 900px (the "I'm on
   my phone, dispatch a build, check whether it shipped" case), but this tab is built for SUSTAINED
   back-and-forth with a tethered model, so above that it earns the same two-column shape as
   .rt-grid: a persistent picker/status sidebar plus a chat area that actually uses the page's own
   full width instead of sitting capped and centred with the rest of the screen empty. */
.dd-shell { display: flex; flex-direction: column; gap: 0.8rem; }
.dd-sidebar, .dd-main { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
@media (min-width: 900px) {
    .dd-shell { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 1.2rem; align-items: start; }
    .dd-sidebar { position: sticky; top: 1rem; }
}
.dd-setup summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; list-style: none; }
.dd-setup summary::-webkit-details-marker { display: none; }
.dd-setup-summary { display: flex; align-items: baseline; gap: 0.35rem; min-width: 0; overflow: hidden; }
.dd-setup-brain { flex: 0 1 auto; min-width: 0; max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-setup-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-caret { flex-shrink: 0; transition: transform 0.15s ease; }
.dd-setup[open] .dd-caret { transform: rotate(180deg); }
.dd-setup-body { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.6rem; }

/* Build/PR status pills — the whole point is answering "did it ship yet" at a glance, from a
   phone, without opening /admin/platform-changes. */
.dd-changes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.dd-change-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2, rgba(255,255,255,0.02)); font-size: 0.8rem; text-decoration: none; color: var(--fg); }
.dd-change-pill:hover { border-color: var(--accent); }
.dd-change-pill code { font-size: 0.75rem; }

/* Direct's brain picker — one named agent (or raw model, for a fresh-install machine with none
   configured) per machine, single-select across the whole list (see SelectedBrainKey/PickBrain). */
.dd-machine-block { margin-bottom: 0.6rem; }
.dd-machine-label { margin-bottom: 0.3rem; font-weight: 600; }
.dd-agent-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dd-agent-chip { cursor: pointer; font: inherit; }
.dd-build-row { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }

.dd-composer { display: flex; flex-direction: column; gap: 0.6rem; }
.dd-attach-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.dd-attach-btn { position: relative; overflow: hidden; cursor: pointer; }
.dd-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dd-paste-zone:focus { outline: none; }
.dd-textarea { width: 100%; min-height: 7rem; resize: vertical; font: inherit; line-height: 1.4; }
.dd-composer-actions { display: flex; justify-content: flex-end; }

@media (max-width: 480px) {
    /* A thumb-width Ask button beats a right-aligned one nobody can miss-tap into on a phone. */
    .dd-composer-actions .lp-btn { width: 100%; text-align: center; }
    .dd-setup-summary { max-width: 68vw; }
}

/* ---- Fleet / control-plane pages (/admin/fleet, /admin/control-plane) ---------------------------
   Two ideas carry the whole design here: an environment's LAST-SEEN band must be readable at a
   glance (a row seen three days ago cannot look like one seen a minute ago), and a market claimed by
   two environments must be impossible to scroll past. Everything else stays quiet. */

.fleet-msg { margin: 0.6rem 0; font-size: 0.85rem; }
.fleet-msg.ok { color: var(--ok, #5dd39e); }
.fleet-msg.bad { color: var(--danger, #f87171); }

/* State of the registration itself — enrolled / awaiting approval / blocked. */
.fleet-state { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.72rem;
    font-weight: 600; border: 1px solid var(--border); }
.fleet-state.ok { background: color-mix(in srgb, #5dd39e 18%, transparent); color: #b3edcb;
    border-color: color-mix(in srgb, #5dd39e 40%, var(--border)); }
.fleet-state.pending { background: color-mix(in srgb, #ffd166 16%, transparent); color: #ffe6b0;
    border-color: color-mix(in srgb, #ffd166 38%, var(--border)); }
.fleet-state.bad { background: color-mix(in srgb, #f87171 20%, transparent); color: #fbbcbc;
    border-color: color-mix(in srgb, #f87171 45%, var(--border)); }

/* Last-seen band. The colour ramp IS the information; the exact timestamp sits beside it. */
.fleet-seen { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.72rem;
    font-weight: 600; border: 1px solid var(--border); white-space: nowrap; }
.fleet-seen.fresh { background: color-mix(in srgb, #5dd39e 18%, transparent); color: #b3edcb;
    border-color: color-mix(in srgb, #5dd39e 40%, var(--border)); }
.fleet-seen.late { background: color-mix(in srgb, #ffd166 14%, transparent); color: #ffe6b0;
    border-color: color-mix(in srgb, #ffd166 34%, var(--border)); }
.fleet-seen.stale { background: color-mix(in srgb, #ff8a4c 20%, transparent); color: #ffc6a4;
    border-color: color-mix(in srgb, #ff8a4c 45%, var(--border)); }
/* Silent is the only one that moves — a fleet member that stopped reporting should catch the eye
   from across the room, and a static red pill does not. */
.fleet-seen.silent { background: color-mix(in srgb, #f87171 24%, transparent); color: #ffdcdc;
    border-color: var(--danger, #f87171); letter-spacing: 0.04em;
    animation: fleet-pulse 2.4s var(--ease-standard) infinite; }
/* Never-seen is DELIBERATELY neutral: with no heartbeat endpoint yet it is the correct state for
   every row, and colouring it red would be the page crying wolf about its own missing plumbing. */
.fleet-seen.never { background: rgba(255,255,255,0.05); color: var(--muted); }

@keyframes fleet-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #f87171 45%, transparent); }
    50%      { box-shadow: 0 0 0 4px color-mix(in srgb, #f87171 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .fleet-seen.silent { animation: none; }
}

/* Market claim chips. .conflict is the split-brain marker. */
.fleet-mkt { display: inline-block; margin: 0 0.25rem 0.2rem 0; padding: 0.05rem 0.4rem; border-radius: 4px;
    font-family: var(--mono); font-size: 0.72rem; border: 1px solid var(--border);
    background: rgba(255,255,255,0.04); }
.fleet-mkt.conflict { border-color: var(--danger, #f87171); color: #fbbcbc;
    background: color-mix(in srgb, #f87171 18%, transparent); font-weight: 700; }

/* The two fleet-problem panels. The split-brain one is meant to be alarming. */
.fleet-alarm { border-color: var(--danger, #f87171);
    background: color-mix(in srgb, #f87171 7%, transparent); }
.fleet-alarm-h { color: #fbbcbc; margin-top: 0; }
.fleet-warn { border-color: color-mix(in srgb, #ffd166 55%, var(--border));
    background: color-mix(in srgb, #ffd166 5%, transparent); }
.fleet-warn-h { color: #ffe6b0; margin-top: 0; }
.fleet-alarm-list { margin: 0.6rem 0 0.4rem; padding-left: 1.1rem; line-height: 1.7; }
.fleet-code { font-family: var(--mono); font-weight: 700; }

/* "You are looking, not acting." Quiet — it is orientation, not an alarm — but a panel rather than
   a footnote, because an operator hunting for a missing Enrol button should hit it first.
   (The once-only credential panel lived here until the Hub took ownership of issuing tokens.) */
.fleet-readonly-note { border-style: dashed; }
.fleet-readonly-note h2 { margin-top: 0; font-size: 1rem; }
.fleet-readonly-note .lp-btn { margin-right: 0.5rem; }

.fleet-empty-note { border-style: dashed; }
.fleet-empty-note h2 { margin-top: 0; font-size: 1rem; }

/* Detail lists shared by both pages. */
/* Capped rather than max-content: one long label ("What version does the control plane expect?")
   would otherwise widen the column for every row and push the values half-way across the page. */
.fleet-dl { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: 0.45rem 1rem;
    margin: 0.6rem 0 0; align-items: baseline; }
.fleet-dl dt { color: var(--muted); font-size: 0.78rem; }
.fleet-dl dd { margin: 0; font-size: 0.86rem; }
.fleet-mono, .fleet-dl dd.fleet-mono { font-family: var(--mono); font-size: 0.78rem; word-break: break-all; }
.fleet-unknown { font-style: italic; color: var(--warn, #f0ad4e); }

/* .row-link assumes an <a>; here the pivot is a <button> (it opens a panel rather than navigating),
   so the button chrome has to be stripped or it renders as a filled primary button in the cell. */
.fleet-name { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.fleet-url { word-break: break-all; }
.fleet-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 1rem; }
.fleet-confirm { font-size: 0.78rem; color: var(--warn, #f0ad4e); flex-basis: 100%; }
.fleet-note { margin-top: 0.9rem; }

@media (max-width: 640px) {
    .fleet-dl { grid-template-columns: 1fr; gap: 0.15rem; }
    .fleet-dl dd { margin-bottom: 0.5rem; }
}

/* ---- Fleet topology panel (FleetTopologyPanel.razor) -----------------------------------------
   Shared by the three architecture boards. The two tabs are load-bearing, not decoration: one
   shows what is DEPLOYED, the other what is PLANNED, and the panel is coloured so a reader cannot
   mistake the second for the first. */
.ftp {
    border: 1px solid var(--border, #333); border-radius: 10px; padding: 0.9rem 1.1rem;
    margin: 0 0 1.4rem; background: rgba(255,255,255,0.02);
}
.ftp-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.ftp-head .spacer { flex: 1 1 auto; }
.ftp-tabs { display: flex; gap: 0.35rem; }
.ftp-note { margin: 0 0 0.7rem; max-width: 90ch; line-height: 1.5; }
.ftp-note-planned { border-left: 3px solid #f6c453; padding-left: 0.7rem; }
.ftp-list { margin: 0 0 0.8rem; padding-left: 1.1rem; line-height: 1.65; }
.ftp-list code { font-size: 0.85em; }
/* The containment recipe, same as .jm-diagram-host and .mj-diagram-host: aeon.renderMermaid wraps
   the SVG in an ABSOLUTELY POSITIONED .er-pan, so the host must be its containing block AND carry a
   real height of its own — an absolutely positioned child contributes nothing to its parent's
   height. This block used to say `min-height: 60px; overflow: auto`, which clipped every fleet
   diagram on all three architecture boards to a 60px sliver of an ~840px drawing. Height is
   viewport-relative so a tall topology stays scannable on a laptop; pan and zoom (wheel, drag,
   double-click to refit) are how you reach the rest. */
.ftp-host {
    height: 64vh; min-height: 380px; overflow: hidden; position: relative;
    touch-action: none; cursor: grab;
    /* _panZoom fits by WIDTH, so a tall topology still runs past the bottom of a 56vh box. Rather
       than pick a taller default that wastes space on the short diagrams, let the reader drag the
       panel open. Works because overflow is hidden rather than visible. */
    resize: vertical;
}
/* NOT `max-width: 100%` — .er-pan svg sets `max-width: none !important` because _panZoom sizes the
   SVG in pixels to zoom it. Constraining it here fought that and squashed the diagram. */
.ftp-host svg { display: block; }

/* ---- Planes & fleet board (AdminArchitecturePlanes.razor) ------------------------------------
   Wide reference tables rather than cards: the value is in reading a row ACROSS — purpose, single
   writer, what it must never do — so the columns stay side by side and the table scrolls inside
   its own wrapper rather than pushing the page sideways. */
.planes-rule {
    border: 1px solid #7a2626; border-left-width: 4px; border-radius: 8px;
    background: rgba(160, 40, 40, 0.12); padding: 0.7rem 1rem; margin: 0 0 1.2rem;
    max-width: 110ch; line-height: 1.55;
}
.planes-panel { margin-bottom: 1.4rem; }
.planes-panel h2 { margin-top: 0; }
.planes-table-wrap { overflow-x: auto; }
.planes-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; line-height: 1.5; }
.planes-table th, .planes-table td {
    text-align: left; vertical-align: top; padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border, #333);
}
.planes-table th { font-weight: 600; white-space: nowrap; color: var(--muted, #9aa); }
.planes-table td:first-child { min-width: 12rem; }
.planes-table code { font-size: 0.85em; }
.planes-never { color: #e0a0a0; }

/* ---- Threat model (AdminThreatModel.razor) ---------------------------------------------------
   The count strip and the per-threat cards are colour-coded by DISPOSITION, not by STRIDE
   category: "is this still open" is the question the page is read for, and it has to survive
   being skimmed. */
.tm-counts { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.tm-count {
    display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
    border: 1px solid var(--border, #333); border-radius: 10px;
    padding: 0.55rem 1.1rem; min-width: 5.5rem;
}
.tm-count strong { font-size: 1.5rem; line-height: 1.1; }
.tm-count span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #9aa); }
.tm-count.tm-open { border-color: #7a2626; background: rgba(160, 40, 40, 0.14); }
.tm-count.tm-partial { border-color: #7a5a26; background: rgba(180, 120, 40, 0.12); }
.tm-count.tm-accepted { border-color: #6a6a30; background: rgba(150, 150, 60, 0.10); }
.tm-count.tm-mitigated { border-color: #2c6a4a; background: rgba(50, 150, 100, 0.10); }

.tm-toolbar { flex-wrap: wrap; }
.tm-nowrap { white-space: nowrap; }

.tm-list { display: flex; flex-direction: column; gap: 0.7rem; }
.tm-threat {
    border: 1px solid var(--border, #333); border-left-width: 4px; border-radius: 8px;
    padding: 0.7rem 0.9rem; background: rgba(255, 255, 255, 0.02);
}
.tm-threat.tm-open { border-left-color: #c04040; }
.tm-threat.tm-partial { border-left-color: #d08a30; }
.tm-threat.tm-accepted { border-left-color: #b0b040; }
.tm-threat.tm-mitigated { border-left-color: #3fd99b; }

.tm-threat-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tm-threat-head .spacer { flex: 1 1 auto; }
.tm-id { font-family: var(--mono, monospace); font-size: 0.82rem; color: var(--muted, #9aa); }
.tm-stride {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%; font-weight: 700; font-size: 0.8rem;
    background: rgba(0, 120, 214, 0.25); border: 1px solid #0078d6; cursor: help;
}
.tm-boundary {
    font-family: var(--mono, monospace); font-size: 0.78rem; padding: 0.1rem 0.4rem;
    border: 1px solid var(--border, #333); border-radius: 4px; cursor: help;
}
.tm-title { line-height: 1.35; }

.tm-badge {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.tm-badge.tm-open { background: rgba(192, 64, 64, 0.25); border-color: #c04040; color: #ffbdbd; }
.tm-badge.tm-partial { background: rgba(208, 138, 48, 0.2); border-color: #d08a30; color: #ffd9a8; }
.tm-badge.tm-accepted { background: rgba(176, 176, 64, 0.18); border-color: #b0b040; color: #eeeeb0; }
.tm-badge.tm-mitigated { background: rgba(63, 217, 155, 0.15); border-color: #3fd99b; color: #b6f3da; }
.tm-badge.tm-ref { border-color: var(--border, #444); color: var(--muted, #9aa); }

.tm-threat-body {
    display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.2rem 0.8rem;
    margin: 0.55rem 0 0; font-size: 0.9rem; line-height: 1.55;
}
.tm-threat-body dt { color: var(--muted, #9aa); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; padding-top: 0.12rem; }
.tm-threat-body dd { margin: 0; }
.tm-evidence { font-size: 0.82em; color: var(--muted, #9aa); word-break: break-word; }

.tm-threat-actions { display: flex; gap: 0.4rem; margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border, #333); }

@media (max-width: 720px) {
    .tm-threat-body { grid-template-columns: 1fr; }
    .tm-threat-body dt { margin-top: 0.4rem; }
}

/* ---- Calculator test harness (/admin/calculator) ---------------------------------------------
   The comparison table is the point of the page, so the only real styling decision here is making
   a divergence impossible to scroll past: a differing cell is tinted AND coloured, never colour
   alone. Everything else reuses the admin panel/grid vocabulary. */
/* Two side-by-side panels: the deal on the left, the engine choices on the right. A grid rather
   than .cf-form-row (which is a FIELD row — panels in it size to content and wrap the moment the
   Pulsar override block appears, which is exactly when you want both halves visible at once).
   minmax(0, …) is what lets the columns actually shrink: without it the inner auto-fill grids
   refuse to go below their content width and push the second column off the row again. */
.hz-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .hz-cols { grid-template-columns: minmax(0, 1fr); } }

.hz-arms { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.9rem; }
.hz-arm { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.55rem; align-items: start;
  font-size: 0.88rem; line-height: 1.45; }
.hz-arm input { margin-top: 0.2rem; }
.hz-arm code { font-size: 0.85em; }

/* The wire table is key/value, not a numeric grid — coc-grid right-aligns its cells, which reads
   as a column of figures and makes a URL hard to scan. */
.hz-kv td { text-align: left; }
.hz-kv td:first-child { color: var(--muted, #9aa); width: 9rem; white-space: nowrap; }
.hz-kv code { word-break: break-all; }

.hz-option-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 0.4rem; margin-bottom: 0.35rem; }

.hz-service-row { display: flex; gap: 1.2rem; align-items: baseline; }
.hz-financed { margin-left: auto; }

/* Flexible: one input per LTV band column, so a banded campaign card grows sideways. */
.camp-rate-row { display: flex; gap: 0.4rem; margin-bottom: 0.35rem; max-width: 40rem; align-items: center; }
.camp-rate-row > input { flex: 1; min-width: 0; }
.camp-rate-row.camp-rate-head > span { flex: 1; }
.camp-rate-row.camp-rate-head > span:last-child { flex: 0 0 2rem; }

/* Host-template roll-out bar (finance products / campaigns). */
.fp-rollout { margin: 0.6rem 0 0.9rem; }
.fp-rollout-marks { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.4rem 0; }

/* ---- Pricing setup (/admin/pricing-setup) — the per-market configuration map ---- */
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 1rem; align-items: start; }
.ps-card p { margin: 0.35rem 0; }
.ps-links { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.55rem; padding-top: 0.5rem; border-top: 1px dashed var(--border, #444); }
.ps-badge { display: inline-block; width: 1.15rem; text-align: center; font-weight: 700; }
.ps-ok { color: #3fd99b; }
.ps-missing { color: #d08a30; }
.ps-prove { border-left: 3px solid #3395e0; }

/* ---- Calculator configuration (/admin/calculator-config) — the product tree ---- */
.ccfg-node { border-left: 2px solid var(--border, #444); padding: 0.35rem 0 0.35rem 0.7rem; margin: 0.45rem 0; }
.ccfg-row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.15rem 0; }
.ccfg-row .lp-btn { margin-left: auto; }
.ccfg-campaign { padding-left: 1.2rem; }
.ccfg-off { opacity: 0.55; }
.ccfg-editor { border: 1px dashed var(--border, #444); border-radius: 0.4rem; padding: 0.6rem 0.7rem; margin: 0.4rem 0; }

.hz-agree { color: #3fd99b; }
.hz-differ { color: #ffd9a8; background: rgba(208, 138, 48, 0.12); font-weight: 600; }
td.hz-differ { border-left: 2px solid #d08a30; }

/* Code-lane approval page (/admin/platform-changes). Scoped `pc-` classes rather than a new generic
   banner primitive: this codebase styles notices per page (.form-edit-scope-pending, .rel-error-text),
   and inventing a shared .callout here would be a design-system decision made in passing. */
.pc-note { border-left: 3px solid color-mix(in srgb, #e2a03f 60%, var(--border)); padding: 0.7rem 0.9rem; margin: 0.9rem 0; font-size: 0.86rem; line-height: 1.55; }
.pc-note code { font-size: 0.82rem; }
.pc-msg { font-size: 0.85rem; margin: 0.6rem 0; }
.pc-msg.ok { color: #7fd6a8; }
.pc-msg.err { color: #ffb4a2; }
.pc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0; }
.pc-reject { padding: 0.9rem; margin: 0.9rem 0; }
.pc-reject .fld { display: block; font-size: 0.85rem; }

/* ============================================================================================
   Vehicle Sales — stock desk, advert builder, test drive diary
   ============================================================================================ */

/* --- shared bits: the stock desk's grids, badges and money summary --- */
.vs-form.vs-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vs-form.vs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vs-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem 1rem; }
.vs-form label { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.vs-form label > span:first-child { font-size: .82rem; color: var(--muted); }
.vs-form small.muted { font-size: .74rem; line-height: 1.35; }
.vs-textarea { min-height: 5.5rem; resize: vertical; width: 100%; }

.vs-chk { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; white-space: nowrap; }
.vs-chk-block { display: flex; margin: .5rem 0; }
.vs-centre { text-align: center; }

.vs-badge {
    display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .7rem;
    line-height: 1.5; font-weight: 600; letter-spacing: .02em; vertical-align: middle;
    border: 1px solid var(--border); color: var(--muted); margin-left: .35rem;
}
.vs-cond-new { border-color: #2f6b45; color: #7ddba3; background: rgba(47, 107, 69, .16); }
.vs-cond-used { border-color: #4a4a4a; color: #c3c3c3; background: rgba(120, 120, 120, .14); }
.vs-cond-demo { border-color: #6b5a2f; color: #e0c987; background: rgba(107, 90, 47, .18); }
.vs-status-instock { border-color: #2f5a6b; color: #8fcfe4; background: rgba(47, 90, 107, .16); }
.vs-status-intransit { border-color: #4a4470; color: #b0a8e8; background: rgba(74, 68, 112, .18); }
.vs-status-reserved { border-color: #6b5a2f; color: #e0c987; background: rgba(107, 90, 47, .18); }
.vs-status-sold, .vs-status-delivered { border-color: #4a4a4a; color: #9f9f9f; }
.vs-badge-online { border-color: #2f6b45; color: #7ddba3; background: rgba(47, 107, 69, .16); text-decoration: none; }
.vs-badge-td { border-color: #2f5a6b; color: #8fcfe4; background: rgba(47, 90, 107, .16); }
.vs-badge-nonbrand { border-color: #6b3f2f; color: #e8ab8f; background: rgba(107, 63, 47, .18); }
.vs-badge-warn { border-color: #6b4a2f; color: #e8b98f; background: rgba(107, 74, 47, .2); }
.vs-adv-draft { border-color: #4a4a4a; color: #b5b5b5; }
.vs-adv-published { border-color: #2f6b45; color: #7ddba3; background: rgba(47, 107, 69, .16); }
.vs-adv-archived { border-color: #4a4a4a; color: #8a8a8a; }

.vs-brand-note { margin: .35rem 0 .75rem; font-size: .85rem; }
.vs-blocker { margin: .35rem 0 .75rem; font-size: .88rem; }
.vs-detail-msg { margin: .25rem 0 .75rem; }

/* --- stock list --- */
.vs-stock-kpis { margin-bottom: .75rem; }
.vs-stock-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .75rem;
}
.vs-stock-filters .auth-input { max-width: 15rem; }
.vs-stock-table td { vertical-align: middle; }
.vs-thumb-cell { width: 4.5rem; }
.vs-thumb {
    width: 4rem; height: 2.6rem; object-fit: cover; border-radius: 4px;
    border: 1px solid var(--border); background: rgba(255, 255, 255, .03); display: block;
}
.vs-thumb-empty {
    display: grid; place-items: center; font-size: 1.1rem; opacity: .45;
}
.vs-stale { color: #e8b98f; font-weight: 600; }
.vs-flags { white-space: nowrap; }
.vs-flag {
    background: none; border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
    padding: .15rem .35rem; font-size: .95rem; opacity: .35; transition: opacity var(--dur) var(--ease-standard);
}
.vs-flag:hover { opacity: .7; }
.vs-flag.on { opacity: 1; border-color: var(--accent); background: rgba(0, 120, 214, .12); }

/* --- stock detail --- */
.vs-detail-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.vs-detail-sub { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.vs-detail-actions { display: flex; gap: .4rem; flex-wrap: wrap; padding-top: .4rem; }

.vs-tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin: .75rem 0 .5rem; border-bottom: 1px solid var(--border); }
.vs-tab {
    background: none; border: 1px solid transparent; border-bottom: none; cursor: pointer;
    padding: .4rem .8rem; color: var(--muted); font-size: .88rem; border-radius: 5px 5px 0 0;
}
.vs-tab:hover { color: var(--fg); }
.vs-tab.on {
    color: var(--fg); border-color: var(--border); background: rgba(255, 255, 255, .04);
    margin-bottom: -1px; border-bottom: 1px solid transparent;
}

.vs-money-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .4rem .9rem;
    margin: .9rem 0 .4rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: rgba(255, 255, 255, .02);
}
.vs-money { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.vs-money-l { color: var(--muted); font-size: .82rem; }
.vs-money-n { font-variant-numeric: tabular-nums; font-weight: 600; }
.vs-money-total { border-top: 1px solid var(--border); padding-top: .4rem; font-size: 1.05rem; }
.vs-money-good .vs-money-n { color: #7ddba3; }
.vs-money-bad .vs-money-n { color: #e88f8f; }

.vs-options-table .vs-opt-code { max-width: 6rem; }
.vs-options-table .vs-opt-price { max-width: 7rem; }
.vs-options-total {
    display: flex; gap: 1.25rem; flex-wrap: wrap; margin: .5rem 0; font-size: .85rem; color: var(--muted);
}
.vs-options-total strong { color: var(--fg); font-variant-numeric: tabular-nums; }

.vs-upload { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem 1.25rem; margin-bottom: .9rem; }
.vs-url-add { display: flex; gap: .4rem; }
.vs-url-add .auth-input { flex: 1 1 auto; min-width: 0; }

.vs-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.vs-gal-item {
    margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
    background: rgba(255, 255, 255, .02);
}
.vs-gal-item.lead { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.vs-gal-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.vs-gal-item figcaption { padding: .4rem; display: flex; flex-direction: column; gap: .35rem; }
.vs-gal-actions { display: flex; gap: .2rem; flex-wrap: wrap; }
.vs-gal-actions .on { border-color: var(--accent); color: var(--accent-2); }

/* --- advert builder --- */
.adv-builder { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .adv-builder { grid-template-columns: 1fr; } }
.adv-builder-preview { position: sticky; top: 1rem; }
.adv-preview-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.adv-builder-config { display: flex; flex-direction: column; gap: .75rem; }
.adv-builder-config .panel { margin: 0; }

.adv-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; margin: .5rem 0; }
.adv-frame-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: rgba(255, 255, 255, .02); }
.adv-frame-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.adv-frame-missing { aspect-ratio: 16 / 9; display: grid; place-items: center; color: var(--muted); font-size: .8rem; }
.adv-frame-cfg { padding: .4rem; display: flex; flex-direction: column; gap: .3rem; }
.adv-frames-pool { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.adv-pool-item {
    position: relative; padding: 0; border: 1px dashed var(--border); border-radius: var(--radius);
    background: none; cursor: pointer; overflow: hidden;
}
.adv-pool-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; opacity: .7; }
.adv-pool-item:hover img { opacity: 1; }
.adv-pool-item > span {
    position: absolute; inset: auto .3rem .3rem auto; background: var(--accent); color: #fff;
    width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: .9rem;
}

/* --- the advert stage itself (shared by the builder preview and /ad/{slug}) --- */
.adv-stage {
    position: relative; width: 100%; overflow: hidden; border-radius: 10px; isolation: isolate;
    background: #08090b; color: #fff; font-family: var(--font-sans);
}
.adv-landscape { aspect-ratio: 16 / 9; }
.adv-square { aspect-ratio: 1 / 1; }
.adv-portrait { aspect-ratio: 9 / 16; max-width: 26rem; margin-inline: auto; }

.adv-frame { position: absolute; inset: 0; opacity: 0; }
.adv-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adv-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 38%, rgba(0,0,0,.78) 100%);
}
.adv-overlay {
    position: absolute; inset: auto 0 0 0; padding: 6% 7%; display: flex; flex-direction: column;
    align-items: flex-start; gap: .25rem; text-align: left;
}
.adv-ov-headline, .adv-ov-calltoaction { justify-content: flex-end; }

.adv-kicker { margin: 0; font-size: clamp(.62rem, 1.35vw, .82rem); letter-spacing: .16em; text-transform: uppercase; opacity: .78; }
.adv-headline { margin: .1rem 0; font-family: var(--font-display); font-weight: 700; line-height: 1.06;
    font-size: clamp(1.25rem, 4.4vw, 2.7rem); text-wrap: balance; }
.adv-sub { margin: 0; font-size: clamp(.75rem, 1.9vw, 1.05rem); opacity: .85; }
.adv-price { margin: .1rem 0; font-family: var(--font-display); font-weight: 700; line-height: 1;
    font-size: clamp(1.5rem, 5.4vw, 3.2rem); font-variant-numeric: tabular-nums; }
.adv-was { margin: 0; opacity: .7; text-decoration: line-through; font-size: clamp(.8rem, 2vw, 1.2rem); }
.adv-saving { margin: .1rem 0 0; font-weight: 600; font-size: clamp(.75rem, 1.9vw, 1.05rem); }
.adv-permonth { margin: 0; opacity: .85; font-size: clamp(.75rem, 1.9vw, 1.05rem); }
.adv-custom { margin: 0; font-size: clamp(.95rem, 3vw, 1.8rem); font-weight: 600; line-height: 1.2; }

.adv-highlights, .adv-fin-terms { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .18rem; }
.adv-fin-terms { flex-direction: row; flex-wrap: wrap; gap: .3rem .9rem; }
.adv-highlights li, .adv-fin-terms li {
    font-size: clamp(.72rem, 1.8vw, 1rem); opacity: .92;
    /* Each item arrives just behind the one before it — the stagger reads as one movement rather
       than four things appearing at once. */
    animation: adv-item-in 460ms var(--ease-emphasized) both;
    animation-delay: calc(var(--adv-i, 0) * 90ms + 260ms);
}
.adv-highlights li::before { content: "— "; opacity: .55; }
@keyframes adv-item-in { from { opacity: 0; transform: translateX(-.5rem); } to { opacity: 1; transform: none; } }

.adv-finance { margin-top: .3rem; }
.adv-fin-monthly { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1;
    font-size: clamp(1.2rem, 4vw, 2.4rem); font-variant-numeric: tabular-nums; }
.adv-fin-monthly span { font-size: .45em; font-weight: 400; opacity: .8; }
.adv-cta {
    display: inline-block; margin-top: .55rem; padding: .45em 1.1em; border-radius: 999px;
    background: #fff; color: #111; font-weight: 700; font-size: clamp(.72rem, 1.8vw, 1rem);
}
.adv-cta-head { font-size: clamp(1rem, 3.2vw, 1.9rem); }
.adv-disclaimer {
    position: absolute; inset: auto 0 0 0; margin: 0; padding: .3rem .8rem;
    background: rgba(0, 0, 0, .62); color: rgba(255, 255, 255, .78);
    font-size: clamp(.52rem, 1.1vw, .68rem); line-height: 1.35; z-index: 2;
}

/* Themes recolour the scrim and the accents; the layout never changes. */
.adv-midnight .adv-scrim { background: linear-gradient(180deg, rgba(4,8,18,.6) 0%, rgba(4,8,18,.1) 40%, rgba(4,8,18,.86) 100%); }
.adv-midnight .adv-saving, .adv-midnight .adv-kicker { color: #7fb2ff; }
.adv-showroom { background: #f3f4f6; color: #14161a; }
.adv-showroom .adv-scrim { background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.35) 46%, rgba(255,255,255,.94) 100%); }
.adv-showroom .adv-overlay { color: #14161a; }
.adv-showroom .adv-cta { background: #14161a; color: #fff; }
.adv-showroom .adv-disclaimer { background: rgba(255,255,255,.85); color: #4a4f57; }
.adv-campaign .adv-scrim { background: linear-gradient(180deg, rgba(28,4,4,.5) 0%, rgba(28,4,4,.08) 38%, rgba(28,4,4,.88) 100%); }
.adv-campaign .adv-price, .adv-campaign .adv-fin-monthly { color: #ff6b5a; }
.adv-campaign .adv-cta { background: #e0392b; color: #fff; }
.adv-heritage .adv-scrim { background: linear-gradient(180deg, rgba(18,17,14,.55) 0%, rgba(18,17,14,.1) 40%, rgba(18,17,14,.85) 100%); }
.adv-heritage .adv-headline, .adv-heritage .adv-price { font-weight: 400; letter-spacing: .01em; }
.adv-heritage .adv-cta { background: #d8cfbc; color: #1b1a17; }

/* The builder freezes the animation while a frame is being edited. */
.adv-paused .adv-frame, .adv-paused .adv-overlay { animation: none !important; }

/* Anyone who has asked their system not to animate gets the first frame, held. Motion here is
   decoration, not information — every word an overlay shows is also in the page beneath it. */
@media (prefers-reduced-motion: reduce) {
    .adv-frame, .adv-overlay, .adv-highlights li, .adv-fin-terms li { animation: none !important; }
    .adv-frame:first-of-type, .adv-frame:first-of-type .adv-overlay { opacity: 1 !important; }
}

/* --- the public advert page --- */
.adv-public { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; color: var(--fg); font-family: var(--font-sans); }
.adv-public-inner { display: flex; flex-direction: column; gap: 1.25rem; }
.adv-public-msg, .adv-public-gone { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.adv-public-meta h1 { font-family: var(--font-display); margin: 0 0 .2rem; font-size: clamp(1.4rem, 4vw, 2.2rem); }
.adv-public-spec { margin: 0 0 1rem; color: var(--muted); }
.adv-public-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem 1.25rem; margin: 0 0 1.25rem; }
.adv-public-facts div { border-top: 1px solid var(--border); padding-top: .35rem; }
.adv-public-facts dt { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.adv-public-facts dd { margin: .1rem 0 0; font-weight: 600; }
.adv-public-desc { line-height: 1.6; margin: 0 0 1.25rem; max-width: 46rem; }
.adv-public-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.adv-public-cta {
    display: inline-block; padding: .7rem 1.5rem; border-radius: 999px; background: var(--accent);
    color: #fff; text-decoration: none; font-weight: 600;
}
.adv-public-cta.ghost { background: none; border: 1px solid var(--border); color: var(--fg); }
.adv-public-outlet { margin: 1rem 0 0; color: var(--muted); font-size: .85rem; }

/* --- test drive diary --- */
.td-weeknav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.td-weeklabel { font-size: .9rem; }
.td-inbox { border-color: #6b5a2f; }
.td-needs-outcome { margin: .35rem 0 .75rem; font-size: .85rem; }

.td-calendar {
    display: grid; grid-template-columns: 3.4rem repeat(7, minmax(0, 1fr)); gap: 1px;
    background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
    --td-row: 3rem;
}
.td-gutter { background: var(--bg); padding-top: 2.1rem; }
.td-hour { height: var(--td-row); position: relative; }
.td-hour span { position: absolute; top: -.5em; right: .35rem; font-size: .68rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.td-day { background: var(--bg); display: flex; flex-direction: column; min-width: 0; }
.td-day-off { background: rgba(255, 255, 255, .022); }
.td-day-today .td-day-head { color: var(--accent-2); }
.td-day-head {
    display: flex; align-items: baseline; gap: .3rem; padding: .35rem .45rem; height: 2.1rem;
    border-bottom: 1px solid var(--border); font-size: .78rem;
}
.td-day-name { text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.td-day-today .td-day-name { color: inherit; }
.td-day-num { font-weight: 700; }
.td-day-count { margin-left: auto; font-size: .68rem; color: var(--muted); }
.td-day-body { position: relative; flex: 1 1 auto; cursor: copy; }
.td-slot { height: var(--td-row); border-bottom: 1px dotted rgba(255, 255, 255, .06); }

.td-booking {
    position: absolute; left: 2px; right: 2px; overflow: hidden; text-align: left; cursor: pointer;
    border: 1px solid var(--border); border-left-width: 3px; border-radius: 4px;
    padding: .12rem .3rem; font-size: .68rem; line-height: 1.25; color: var(--fg);
    background: rgba(20, 20, 24, .92); display: flex; flex-direction: column;
}
.td-booking:hover { z-index: 3; box-shadow: var(--elev-2); }
.td-b-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.td-b-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-b-veh { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-requested { border-left-color: #d6a13a; background: rgba(107, 79, 25, .55); }
.td-confirmed { border-left-color: #3aa06a; background: rgba(24, 82, 55, .55); }
.td-completed { border-left-color: #5a6b7a; background: rgba(38, 48, 58, .6); }
.td-cancelled { border-left-color: #6a6a6a; background: rgba(40, 40, 40, .5); opacity: .55; text-decoration: line-through; }
.td-noshow { border-left-color: #c0564a; background: rgba(92, 32, 26, .55); }

.td-legend { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
.td-key { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; border: 1px solid var(--border); border-left-width: 3px; }
.td-editor { margin-top: .9rem; }
.vs-desk-links { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0 .2rem; }
.vs-picked-stock { display: block; margin-top: .3rem; font-size: .78rem; color: #7ddba3; }
.vs-picked-stock a { margin-left: .4rem; color: var(--accent-2); }

/* A section heading that FOLLOWS a field grid needs air. .ws-h2 carries margin:0 0 .7rem — fine for
   the first heading in a panel, but it left "Drivetrain & body" sitting on the upholstery row above
   it, reading as that row's label rather than a new section. Scoped to the stock editor's grids so
   the app-wide .ws-h2 is untouched. */
.vs-form + .ws-h2,
.vs-money-summary + .ws-h2,
.vs-options-total + .ws-h2 { margin-top: 1.9rem; }
.vs-form + .fld,
.vs-form + label.fld { margin-top: 1.25rem; }
/* The grid's own trailing hint text (`small.muted` under a field) already adds a little height, so
   the gap above is deliberately larger than the gap below a heading — the heading must group
   downward, not float between two sections. */
.vs-form { margin-bottom: .35rem; }
.vs-option-add { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.vs-option-add .fld { flex: 1 1 22rem; min-width: 0; }
.vs-md-note { margin-top: -.35rem; font-size: .88rem; }
.vs-md-kindpick { max-width: 22rem; margin-bottom: .75rem; }
.ai-sub-h { margin-top: 1.5rem; }
.ai-img-suggest { margin: .25rem 0 0; padding-left: 1.1rem; line-height: 1.6; }
.ai-img-suggest code { font-size: .78rem; }

/* ============================================================================================
   Advert composition — background replacement, hotspots, the 3D reveal, anchored copy
   ============================================================================================ */

/* --- layers behind and in front of the vehicle --- */
.adv-bg { position: absolute; inset: 0; overflow: hidden; }
.adv-bg .adv-img { width: 100%; height: 100%; object-fit: cover; }
/* The cut-out sits ON the backdrop and is CONTAINED, not cropped: a car with its roof sliced off by
   an object-fit:cover is the one mistake this whole feature exists to avoid. */
.adv-cutout { position: absolute; inset: 0; object-fit: contain; }
/* Blur treatment: the same photograph twice — blurred to fill the frame, sharp and contained on top.
   No cut-out needed, which is why it is the fallback the builder suggests first. */
.adv-blurred { position: absolute; inset: 0; transform: scale(1.12); }
.adv-blur-front { position: absolute; inset: 0; object-fit: contain; }

/* --- hotspots --- */
.adv-hot {
    position: absolute; width: var(--adv-hot-r); aspect-ratio: 1; translate: -50% -50%;
    border-radius: 50%; pointer-events: none; z-index: 3;
    animation: adv-hot-in 900ms var(--ease-emphasized) both;
}
@keyframes adv-hot-in { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }

.adv-hot-pulse { background: radial-gradient(circle, color-mix(in srgb, var(--adv-hot-c) 55%, transparent) 0%, transparent 70%); }
.adv-hot-pulse::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--adv-hot-c); animation: adv-hot-pulse 2s ease-out infinite;
}
@keyframes adv-hot-pulse { 0% { opacity: .9; scale: .7; } 100% { opacity: 0; scale: 1.6; } }

.adv-hot-glow {
    background: radial-gradient(circle, color-mix(in srgb, var(--adv-hot-c) 80%, transparent) 0%, transparent 65%);
    filter: blur(6px); animation: adv-hot-in 900ms var(--ease-emphasized) both, adv-hot-breathe 2.4s ease-in-out infinite;
}
@keyframes adv-hot-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Spotlight darkens everything EXCEPT the spot — a huge radial shadow, so the "cut-out" is the
   absence of the shadow rather than a second element. */
.adv-hot-spotlight {
    width: var(--adv-hot-r); border-radius: 50%;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .68);
    animation: adv-hot-in 900ms var(--ease-emphasized) both;
}

.adv-hot-ring::after, .adv-hot-ring::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--adv-hot-c); animation: adv-hot-pulse 2.4s ease-out infinite;
}
.adv-hot-ring::before { animation-delay: 1.2s; }

.adv-hot-callout { background: none; overflow: visible; }
.adv-hot-callout::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--adv-hot-c); background: color-mix(in srgb, var(--adv-hot-c) 22%, transparent);
}
.adv-hot-line {
    position: absolute; left: 50%; bottom: 50%; width: 2px; height: 220%;
    background: linear-gradient(to top, var(--adv-hot-c), transparent);
}
.adv-hot-label {
    position: absolute; left: 50%; bottom: 240%; translate: -50% 0; white-space: nowrap;
    background: rgba(8, 10, 14, .82); color: #fff; border: 1px solid var(--adv-hot-c);
    padding: .18em .6em; border-radius: 999px; font-size: clamp(.6rem, 1.4vw, .82rem); font-weight: 600;
}

/* --- the reveal layer: a genuine 3D entrance, not a scale --- */
.adv-reveal {
    position: absolute; width: var(--adv-reveal-w); translate: -50% -50%;
    transform-style: preserve-3d; perspective: 900px; z-index: 4; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.adv-reveal img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.adv-reveal-label {
    background: rgba(8, 10, 14, .8); color: #fff; padding: .2em .7em; border-radius: 999px;
    font-size: clamp(.6rem, 1.5vw, .9rem); font-weight: 600; white-space: nowrap;
}
.adv-reveal-riseout   { animation: adv-rise-out 1400ms var(--ease-emphasized) both; }
.adv-reveal-flytoward { animation: adv-fly-toward 1200ms var(--ease-emphasized) both; }
.adv-reveal-hingeopen { animation: adv-hinge-open 1300ms var(--ease-emphasized) both; transform-origin: bottom center; }
.adv-reveal-turnin    { animation: adv-turn-in 1500ms var(--ease-emphasized) both; }

@keyframes adv-rise-out {
    0%   { opacity: 0; transform: translate3d(-50%, 10%, -220px) rotateX(62deg) scale(.55); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotateX(0deg) scale(1); }
}
@keyframes adv-fly-toward {
    0%   { opacity: 0; transform: translate3d(-50%, -50%, -420px) rotateY(24deg) scale(.4); }
    100% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotateY(0deg) scale(1); }
}
@keyframes adv-hinge-open {
    0%   { opacity: 0; transform: translate3d(-50%, -50%, 0) rotateX(-92deg); }
    100% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotateX(0deg); }
}
@keyframes adv-turn-in {
    0%   { opacity: 0; transform: translate3d(-50%, -50%, -140px) rotate3d(1, 1, 0, 38deg) scale(.8); }
    100% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate3d(1, 1, 0, 0deg) scale(1); }
}

/* --- anchored copy. An anchor + nudge survives a change of aspect; raw coordinates do not. --- */
.adv-overlay [class*="adv-at-"] { position: absolute; margin: 0; }
.adv-at-topleft      { top: 6%;  left: 7%;  translate: var(--adv-dx, 0) var(--adv-dy, 0); }
.adv-at-topcentre    { top: 6%;  left: 50%; translate: calc(-50% + var(--adv-dx, 0%)) var(--adv-dy, 0); text-align: center; }
.adv-at-topright     { top: 6%;  right: 7%; translate: var(--adv-dx, 0) var(--adv-dy, 0); text-align: right; }
.adv-at-middleleft   { top: 50%; left: 7%;  translate: var(--adv-dx, 0) calc(-50% + var(--adv-dy, 0%)); }
.adv-at-centre       { top: 50%; left: 50%; translate: calc(-50% + var(--adv-dx, 0%)) calc(-50% + var(--adv-dy, 0%)); text-align: center; }
.adv-at-middleright  { top: 50%; right: 7%; translate: var(--adv-dx, 0) calc(-50% + var(--adv-dy, 0%)); text-align: right; }
.adv-at-bottomleft   { bottom: 8%; left: 7%;  translate: var(--adv-dx, 0) var(--adv-dy, 0); }
.adv-at-bottomcentre { bottom: 8%; left: 50%; translate: calc(-50% + var(--adv-dx, 0%)) var(--adv-dy, 0); text-align: center; }
.adv-at-bottomright  { bottom: 8%; right: 7%; translate: var(--adv-dx, 0) var(--adv-dy, 0); text-align: right; }

.adv-in-risefade   { animation: adv-in-rise 700ms var(--ease-emphasized) both; animation-delay: var(--adv-panel-delay, 0ms); }
.adv-in-slidein    { animation: adv-in-slide 700ms var(--ease-emphasized) both; animation-delay: var(--adv-panel-delay, 0ms); }
.adv-in-scaleup    { animation: adv-in-scale 700ms var(--ease-emphasized) both; animation-delay: var(--adv-panel-delay, 0ms); }
.adv-in-typewriter { animation: adv-in-type 1100ms steps(30, end) both; animation-delay: var(--adv-panel-delay, 0ms);
                     white-space: nowrap; overflow: hidden; }
.adv-in-none       { animation: none; }
@keyframes adv-in-rise  { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }
@keyframes adv-in-slide { from { opacity: 0; transform: translateX(-1.6rem); } to { opacity: 1; transform: none; } }
@keyframes adv-in-scale { from { opacity: 0; scale: .78; } to { opacity: 1; scale: 1; } }
@keyframes adv-in-type  { from { max-width: 0; } to { max-width: 100%; } }

/* Frozen while the builder holds a frame, and stilled for anyone who asked for less motion. */
.adv-paused .adv-hot, .adv-paused .adv-reveal { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .adv-hot, .adv-reveal, .adv-hot-pulse::after, .adv-hot-ring::after, .adv-hot-ring::before,
    [class*="adv-in-"] { animation: none !important; opacity: 1 !important; }
    .adv-reveal { transform: translate(-50%, -50%) !important; }
}
.adv-scene .ws-h3 { margin-top: 1.6rem; }
.adv-scene-pick { max-width: 22rem; margin-bottom: .5rem; }
.adv-colour { height: 2.2rem; padding: .15rem; cursor: pointer; }
.adv-num { max-width: 6rem; }
.adv-hot-table td { vertical-align: middle; }
.adv-ai-hints { margin: .3rem 0 .5rem; padding-left: 1.1rem; line-height: 1.7; font-style: italic; }

/* --- turntable. Angles stack and hard-cut; the base opacity:0 is load-bearing — see
   SpinAngleStyle for why no fill-mode is used. --- */
.adv-spin { position: absolute; inset: 0; }
.adv-spin-angle { position: absolute; inset: 0; opacity: 0; object-fit: cover; }
.adv-paused .adv-spin-angle { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    /* A rotation is the content here, not decoration — but it should not spin unbidden. Hold angle one. */
    .adv-spin-angle { animation: none !important; opacity: 0 !important; }
    .adv-spin-angle:first-child { opacity: 1 !important; }
}
.adv-spin-pick { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .75rem; }
.adv-spin-thumb { position: relative; padding: 0; width: 6.5rem; border: 2px solid var(--border);
    border-radius: 5px; background: none; cursor: pointer; overflow: hidden; }
.adv-spin-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; opacity: .55; }
.adv-spin-thumb:hover img { opacity: .85; }
.adv-spin-thumb.on { border-color: var(--accent); }
.adv-spin-thumb.on img { opacity: 1; }
.adv-spin-order { position: absolute; top: .25rem; left: .25rem; width: 1.4rem; height: 1.4rem;
    border-radius: 50%; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
    display: grid; place-items: center; }
.adv-spin-tag { position: absolute; bottom: .25rem; right: .25rem; font-size: .7rem; color: #7ddba3;
    background: rgba(8,10,14,.8); border-radius: 999px; padding: 0 .3rem; }