/* Recursive MLS — design system (matches the Recursive handoff tokens).
   Space Grotesk (UI) + Space Mono (all numbers), one deep green over warm paper,
   hairline-inset cards (no drop shadow except elevated overlays), tight radii. */
:root {
  --brand: #006747;
  --brand-press: #00543a;
  /* Solid brand FILL under white text (buttons/badges). DERIVES from --brand so it follows the
     tenant's brand hue in light mode — theme.js overrides --brand inline per tenant, and this token
     tracks it. The dark block overrides it to a darker green so white text clears WCAG AA (§A). */
  --brand-solid: var(--brand);
  --brand-solid-press: var(--brand-press);
  --brand-tint: #eef4f1;
  --brand-badge: #e8f1ec;
  --on-green-soft: #9fe3c2;

  --canvas: #f4f3ef;
  --panel: #ffffff;
  --panel-2: #faf9f6;
  --surface: #f6f5f1;
  --cream: #e7e1d4;

  --ink: #1d241f;
  --body: #4a504a;
  --muted: #8a8e88;
  --label: #a8aca6;
  --faint: #bcbfba;

  --hair: #ececec;
  --hair-2: #f1f0ea;
  --hair-3: #f4f3ee;
  --control-border: #e2e0d8;
  /* Form-control fill + dashed-affordance border — tokenized so dark mode can re-skin them without
     touching light (these light values equal the literals they replaced). */
  --input-bg: #ffffff;
  --dashed-border: #c8c6bc;

  --ok: #1f8a5b;
  --ok-bg: #e8f4ee;
  --warn-ink: #9a6a12;
  --warn-dot: #e0a020;
  --warn-bg: #fbf2dc;
  --warn-border: #ecd9a8;
  --orange: #c0612f;
  --orange-soft: #d97757;
  --orange-bg: #faf0e8;
  --danger: #b3261e;
  --danger-bg: #fbe9e7;
  --danger-border: #e7b3ac;
  /* Info/accent (buy-side, showings, lead-stage, "info" tone) — a distinct teal that was
     hardcoded across the views (#2a6f8a on #e8f0f3); tokenized so dark can re-skin it. */
  --info: #2a6f8a;
  --info-bg: #e8f0f3;
  /* Kanban lane trough (Member On-Boarding boards) — a recessed surface the cards sit ON. It has to
     read darker than --panel in BOTH modes or the cards stop lifting off it, which is the one thing
     a lane has to do. --surface can't serve: it IS the raised-panel tone. */
  --lane: #efeee8;

  --radius: 3px;
  --radius-ctrl: 7px;
  --pill: 999px;
  --hairline: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
  --shadow-float: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-overlay: 0 6px 24px rgba(0, 0, 0, 0.16);

  /* Typography — brand-swappable. Recursive uses Space Grotesk for both; the Nautilent theme
     overrides these at runtime (public/lib/theme.js) to Nunito (body) + DM Serif Display (display). */
  --font-body: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Accessibility text-scale (personal menu "Larger text"): multiplies the rem root size. */
  --font-scale: 1;
  /* Header is independently themeable (brand-green by default; overridable per theme). */
  --header-bg: var(--brand);
  --header-fg: #ffffff;
  /* Product rail = the brand's dark chrome — a distinct surface, deeper than the --brand header.
     Derived from the tenant-themed --brand-press rather than hard-coded so co-brands keep their own
     dark chrome (Recursive #00543a → #004e36 exactly; Nautilent's blue → a deeper navy). */
  --rail-bg: color-mix(in srgb, var(--brand-press) 93%, #000);
}
/* rem root so a rem-based type scale follows the "Larger text" toggle. 16px × scale. */
html { font-size: calc(16px * var(--font-scale, 1)); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 0.875rem/1.55 var(--font-body); /* 14px at scale 1 */
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-press); }
.muted { color: var(--muted); }
.num, .mono { font-family: "Space Mono", ui-monospace, Menlo, monospace; }
h1 { font-family: var(--font-display); font-size: 1.5625rem; font-weight: 600; letter-spacing: -0.6px; margin: 0; } /* 25px */
h2 { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; margin: 0; letter-spacing: -0.2px; } /* 15px */
/* DM Serif Display ships a single weight — under the Nautilent theme, headings render at 400 so the
   serif isn't synthetically bolded. Recursive (Space Grotesk) keeps its 600. */
:root[data-brand="nautilent"] h1,
:root[data-brand="nautilent"] h2 { font-weight: 400; letter-spacing: -0.4px; }

.ic { display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: middle; color: inherit; }
.ic-svg { width: 1.15em; height: 1.15em; display: block; }
.ic.filled .ic-svg { fill: currentColor; }

/* Nautilent sunburst mark — a single SVG asset painted in the surrounding text color via a CSS
   mask (so it goes white on the header, --brand on login, exactly like the inline Recursive Mark).
   Sized by the containing .tb-brand/.login-brand .mark rules. */
.mark-nautilent {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("/brand/nautilent-mark.svg") center / contain no-repeat;
  mask: url("/brand/nautilent-mark.svg") center / contain no-repeat;
}

/* ── App shell ─────────────────────────────────────────────────────────────── */
/* Rail (64px) + feature panel (240px) + content. The rail is the only navigation form, so this is
   the one shell layout; .panel-collapsed drops the feature panel. */
.app { display: grid; grid-template-columns: 64px 240px 1fr; grid-template-rows: 60px 1fr; height: 100vh; }
.app.panel-collapsed { grid-template-columns: 64px 1fr; }
.content { grid-row: 2; grid-column: 2; overflow-y: auto; }
.content.pad { padding: 24px 30px 64px; }
/* Hamburger (mobile only) + drawer backdrop — hidden on desktop. */
.tb-burger { display: none; border: 0; background: transparent; cursor: pointer; color: #fff; padding: 6px; margin-left: -4px; }
.nav-backdrop { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 56px 1fr; }
  .content { grid-column: 1; }
  .content.pad { padding: 18px; }
  .tb-burger { display: inline-flex; align-items: center; }
  /* Sidebar becomes an off-canvas drawer toggled by the hamburger. */
  .nav { position: fixed; top: 0; left: 0; bottom: 0; width: 264px; max-width: 84vw; z-index: 60; padding-top: 14px;
         transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 16px 44px rgba(0,0,0,.24); }
  .app.nav-open .nav { transform: translateX(0); }
  .app.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(20,24,21,.42); }
  .app.nav-open .content { overflow: hidden; } /* lock background scroll while the drawer is open */
}

.topbar { grid-column: 1 / -1; background: var(--header-bg); display: flex; align-items: center; gap: 16px; padding: 0 22px; z-index: 6; box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.tb-brand { display: flex; align-items: center; gap: 11px; width: 214px; flex: none; cursor: pointer; }
.tb-brand .mark { width: 32px; height: 32px; flex: none; color: #fff; }
.tb-brand .brand-img { height: 30px; width: auto; max-width: 150px; flex: none; display: block; }
.tb-brand .name { font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.6px; color: #fff; }
.tb-brand .eyebrow { font-weight: 500; font-size: 0.625rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.6); margin-left: 6px; }
.tb-search { flex: 1; max-width: 440px; display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); border-radius: 7px; padding: 9px 12px; }
.tb-search:focus-within { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.18); }
.tb-search input { flex: 1; border: 0; background: transparent; outline: 0; color: #fff; font: inherit; font-size: 0.8125rem; }
.tb-search input::placeholder { color: rgba(255,255,255,.6); }
.tb-search .ic { color: rgba(255,255,255,.8); }
.tb-search .kbd { font-size: 0.6875rem; color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; padding: 1px 6px; }
.tb-spacer { flex: 1; }
.tb-scope { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); border-radius: 7px; padding: 7px 11px; cursor: pointer; color: #fff; font-size: 0.75rem; font-weight: 500; }
.tb-scope .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.tb-scope .ic { color: rgba(255,255,255,.75); }
.tb-iconbtn { position: relative; border: 0; background: transparent; cursor: pointer; display: flex; padding: 6px; color: rgba(255,255,255,.9); }
.tb-iconbtn .badge-dot { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn-dot); border: 1.5px solid var(--brand); }
.tb-iconbtn .badge-dot.ok { background: var(--ok); }
.tb-iconbtn .badge-dot.danger { background: var(--danger); }
.tb-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--cream); color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.8125rem; cursor: pointer; flex: none; }
/* Narrow-phone topbar reflow: let the brand shrink and cap the profile chip so nothing overflows. */
@media (max-width: 640px) {
  .topbar { gap: 10px; padding: 0 12px; }
  .tb-brand { width: auto; }
  .tb-brand .eyebrow { display: none; }
  .tb-scope { max-width: 38vw; }
  .tb-scope > span:not(.dot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-search .kbd { display: none; }
}

/* ── Responsive utilities ──────────────────────────────────────────────────── */
/* Workspace master/detail split. Each view sets its own desktop ratio via the --wk-cols custom
   property (inline); the mobile rule collapses to a single column (it sets the property directly,
   so it wins over the var-based default — inline only feeds the variable). */
.wk-split { display: grid; grid-template-columns: var(--wk-cols, minmax(300px, .9fr) 1.6fr); min-height: 0; }
@media (max-width: 860px) {
  .wk-split { grid-template-columns: 1fr; }
  /* Full-height master/detail panes (inbox/offers/showings): stack into a scrollable list on top
     and a scrollable detail below, instead of a crushed side-by-side. Each pane scrolls itself. */
  .wk-split.wk-fixed { grid-template-rows: minmax(0, 45vh) minmax(0, 1fr); }
}
/* Wrap a wide table so it scrolls horizontally instead of overflowing the viewport. */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* Header calendar-status dropdown */
.tb-pop-wrap { position: relative; display: flex; }
.tb-pop-back { position: fixed; inset: 0; z-index: 50; }
.tb-pop { position: absolute; top: calc(100% + 9px); right: 0; z-index: 51; width: 252px; background: var(--panel); color: var(--ink); border-radius: 9px; box-shadow: 0 12px 32px rgba(0,0,0,.18), var(--hairline); padding: 8px; }
.tb-pop-head { display: flex; align-items: center; gap: 8px; font-size: 0.78125rem; font-weight: 600; color: var(--ink); padding: 6px 8px 4px; }
.tb-pop-head .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tb-pop-head .dot.ok { background: var(--ok); }
.tb-pop-head .dot.danger { background: var(--danger); }
.tb-pop-sub { font-size: 0.71875rem; color: var(--muted); padding: 0 8px 8px; line-height: 1.45; }
.tb-pop-acct { display: flex; align-items: center; gap: 7px; font-size: 0.75rem; color: var(--ink); padding: 5px 8px; }
.tb-pop-acct .ic { color: var(--ok); width: 14px; height: 14px; flex: none; }
.tb-pop-acct > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-pop-x { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 0.6875rem; font-weight: 600; color: var(--danger); padding: 2px 4px; flex: none; }
.tb-pop-x:hover { text-decoration: underline; }
.tb-pop-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 0.8125rem; color: var(--ink); padding: 8px; border-radius: 6px; }
.tb-pop-item:hover { background: var(--hair-2); }
.tb-pop-item .ic { color: var(--brand); width: 16px; height: 16px; flex: none; }

.nav { grid-row: 2; grid-column: 1; background: var(--panel); border-right: 1px solid var(--hair); padding: 14px 12px; display: flex; flex-direction: column; overflow-y: auto; gap: 2px; }
.nav-group { font-size: 0.625rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--label); padding: 16px 10px 7px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 7px; color: var(--body); font-size: 0.875rem; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; font-family: inherit; }
.nav-item .ic { color: var(--muted); }
.nav-item:hover { background: var(--surface); color: var(--ink); }
.nav-item.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.nav-item.active .ic { color: var(--brand); }
.nav-item.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--brand); }
.nav-item .badge { margin-left: auto; font-size: 0.6875rem; font-weight: 600; color: var(--brand); background: var(--brand-badge); border-radius: 999px; padding: 1px 7px; }
.nav-foot { margin-top: auto; border-top: 1px solid var(--hair); padding-top: 10px; }

/* ── Page header + buttons ─────────────────────────────────────────────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .sub { margin: 5px 0 0; color: var(--muted); font-size: 0.875rem; }
button, .btn { font: inherit; font-weight: 600; cursor: pointer; padding: 10px 16px; border-radius: var(--radius-ctrl); border: 1px solid var(--brand-solid); background: var(--brand-solid); color: #fff; display: inline-flex; align-items: center; gap: 7px; font-size: 0.84375rem; transition: background .15s ease, border-color .15s ease; }
button:hover, .btn:hover { background: var(--brand-solid-press); border-color: var(--brand-solid-press); color: #fff; }
button:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; }
button.secondary, .btn.secondary { background: var(--panel); color: var(--brand); border-color: var(--control-border); }
button.secondary:hover { background: var(--surface); border-color: var(--muted); color: var(--brand-press); }
button.ghost { background: transparent; color: var(--body); border-color: var(--control-border); }
button.ghost:hover { background: var(--surface); color: var(--ink); }
button.danger { background: var(--panel); color: var(--danger); border-color: var(--danger-border); }
button.danger:hover { background: var(--danger-bg); color: var(--danger); }
button.small { padding: 6px 11px; font-size: 0.75rem; border-radius: 6px; }
button.link { background: none; border: 0; color: var(--brand); padding: 0; }
button.link:hover { background: none; color: var(--brand-press); }
.iconbtn { width: 36px; height: 36px; padding: 0; justify-content: center; background: var(--panel); color: var(--body); border: 1px solid var(--control-border); }
.iconbtn:hover { background: var(--surface); color: var(--ink); border-color: var(--muted); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.viewall { border: 0; background: transparent; color: var(--brand); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 0; }

/* ── Cards / panels ────────────────────────────────────────────────────────── */
.card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 18px; }
.panel { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 18px; border-bottom: 1px solid var(--hair-2); }
.panel-head h2 { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.sample-tag { font-size: 0.625rem; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--label); background: var(--surface); border-radius: 999px; padding: 2px 8px; }

/* ── Status pill + compliance chip ─────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; font-weight: 600; letter-spacing: .3px; padding: 4px 9px; border-radius: 999px; line-height: 1; white-space: nowrap; }
.pill.active { background: var(--ok-bg); color: var(--ok); }
.pill.pending { background: var(--warn-bg); color: var(--warn-ink); }
.pill.drop { background: var(--orange-bg); color: var(--orange); }
.pill.new { background: var(--brand-solid); color: #fff; }
.pill.neutral { background: var(--surface); color: var(--muted); }
.cchip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6875rem; font-weight: 600; border-radius: 999px; padding: 3px 8px; }
.cchip.high { color: var(--danger); background: var(--danger-bg); }
.cchip.medium { color: var(--warn-ink); background: var(--warn-bg); }
.cchip.clean { color: var(--ok); }

/* ── KPI / market strip ────────────────────────────────────────────────────── */
.kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 1080px) { .kpi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpi { grid-template-columns: 1fr; } }
.kpi-card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 15px 16px; }
.kpi-card .lbl { font-size: 0.65625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.1px; color: var(--muted); }
.kpi-card .val { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.kpi-card .n { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.8px; color: var(--ink); }
.kpi-card .delta { font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.kpi-card .delta.up { color: var(--ok); }
.kpi-card .delta.down { color: var(--orange); }
.kpi-card .note { font-size: 0.71875rem; color: var(--faint); margin-top: 4px; }

/* ── Dashboard rows ────────────────────────────────────────────────────────── */
.lrow { display: flex; gap: 14px; align-items: center; padding: 13px 18px; cursor: pointer; }
.lrow + .lrow { border-top: 1px solid var(--hair-3); }
.lrow .thumb { width: 84px; height: 60px; border-radius: 3px; background: var(--cream) center/cover; flex: none; }
.lrow .main { flex: 1; min-width: 0; }
.lrow .top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lrow .addr { font-size: 0.90625rem; font-weight: 600; color: var(--ink); }
.lrow .meta { font-size: 0.78125rem; color: var(--muted); margin-top: 3px; }
.lrow .metrics { display: flex; gap: 22px; flex: none; }
.metric { text-align: right; }
.metric .n { font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.metric .n.warn { color: var(--orange); }
.metric .l { font-size: 0.625rem; color: var(--label); text-transform: uppercase; letter-spacing: .4px; }
.lrow .price { width: 120px; text-align: right; flex: none; }
.lrow .price .n { font-size: 1rem; font-weight: 700; color: var(--brand); }
.lrow .price .open { font-size: 0.6875rem; color: var(--warn-ink); margin-top: 2px; }
@media (max-width: 1180px) { .lrow .metrics { display: none; } }

.mrow { display: flex; gap: 14px; align-items: center; padding: 13px 18px; cursor: pointer; }
.mrow + .mrow { border-top: 1px solid var(--hair-3); }
.mrow .thumb { width: 64px; height: 50px; border-radius: 3px; background: var(--cream) center/cover; flex: none; }
.mrow .change { font-size: 0.6875rem; font-weight: 600; }
.mrow .change.down { color: var(--orange); }
.mrow .change.up { color: var(--ok); }

/* timeline / pipeline / messages */
.tl { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 12px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-tint); display: flex; align-items: center; justify-content: center; color: var(--brand); flex: none; }
.tl-line { width: 1.5px; flex: 1; background: var(--hair); margin-top: 4px; }
.tl-body { flex: 1; padding-bottom: 14px; }
.tl-row { display: flex; justify-content: space-between; gap: 8px; }
.tl-time { font-size: 0.78125rem; color: var(--brand); font-weight: 700; }
.tl-sub { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.pl-item .pl-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pl-item .pl-sub { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 0.75rem; color: var(--muted); }
.bar { height: 5px; border-radius: 3px; background: var(--hair-2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); }
.msg { display: flex; gap: 12px; align-items: flex-start; padding: 13px 18px; cursor: pointer; }
.msg + .msg { border-top: 1px solid var(--hair-3); }
.msg .av { width: 34px; height: 34px; border-radius: 50%; background: var(--cream); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; flex: none; }
.msg .av.unread { background: var(--brand-solid); color: #fff; }
.msg .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; margin-top: 6px; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
label { display: block; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 0.71875rem; font-weight: 600; color: var(--body); letter-spacing: .2px; }
.req { color: var(--danger); }
input, select, textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--control-border); border-radius: 7px; padding: 9px 11px; font: inherit; font-size: 0.84375rem; color: var(--ink); background: var(--input-bg); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,103,71,.12); }
input::placeholder { color: var(--faint); }
textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
select { appearance: none; cursor: pointer; }
.selwrap { position: relative; }
.selwrap .chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.fgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 12px; }
@media (max-width: 700px) { .fgrid { grid-template-columns: repeat(4, 1fr); } }

/* ── Add/Edit field inputs (FieldInput, public/lib/field-input.js) ───────────── */
.finput { position: relative; }
.finput.invalid input, .finput.invalid select, .finput.invalid textarea,
.finput.invalid .tristate button, .finput.invalid .menum-add { border-color: var(--danger); }
.lock-note { margin-top: 5px; font-size: 0.6875rem; color: var(--muted); }
/* tri-state boolean */
.tristate { display: inline-flex; }
.tristate button { border: 1px solid var(--control-border); background: var(--panel); color: var(--body); font-size: 0.8125rem; font-weight: 600; padding: 8px 16px; border-radius: 0; }
.tristate button:first-child { border-radius: 7px 0 0 7px; }
.tristate button:last-child { border-radius: 0 7px 7px 0; }
.tristate button + button { border-left: 0; }
.tristate button.clear { padding: 8px 12px; color: var(--muted); }
.tristate button.on { background: var(--brand-solid); border-color: var(--brand-solid); color: #fff; }
.tristate button.clear.on { background: var(--surface); border-color: var(--control-border); color: var(--ink); }
.tristate button:disabled { opacity: .55; cursor: not-allowed; }
/* textarea + char counter */
.tarea { position: relative; }
.tcount { position: absolute; right: 9px; bottom: 8px; font-size: 0.6875rem; color: var(--label); font-family: "Space Mono", monospace; pointer-events: none; }
.tcount.near { color: var(--warn-ink); }
/* multienum chips + popover */
.mchip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 500; color: var(--brand); background: var(--brand-tint); border: 1px solid var(--brand-badge); border-radius: 999px; padding: 4px 6px 4px 11px; }
.mchip-x { border: 0; background: transparent; color: var(--brand); font-size: 0.9375rem; line-height: 1; padding: 0 3px; border-radius: 999px; }
.mchip-x:hover { background: rgba(0,103,71,.14); color: var(--brand-press); }
.menum-add { background: var(--panel); color: var(--body); border: 1px dashed var(--control-border); font-size: 0.8125rem; font-weight: 500; padding: 8px 12px; border-radius: 7px; }
.menum-add:hover { border-color: var(--brand); color: var(--brand); background: var(--panel); }
.menum-add:disabled { opacity: .55; cursor: not-allowed; }
.menum-pop { position: absolute; left: 0; right: 0; z-index: 20; margin-top: 4px; background: var(--panel); border: 1px solid var(--hair-2); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); overflow: hidden; }
.menum-search { border: 0; border-bottom: 1px solid var(--hair-2); border-radius: 0; padding: 9px 11px; }
.menum-search:focus { box-shadow: none; border-color: var(--hair-2); }
.menum-list { max-height: 240px; overflow-y: auto; padding: 4px; }
.menum-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; font-size: 0.8125rem; color: var(--ink); padding: 8px 9px; border-radius: 6px; }
.menum-opt:hover { background: var(--hair-3); }
.menum-opt.on { color: var(--brand); font-weight: 600; }
.menum-opt .tick { width: 15px; height: 15px; display: inline-flex; color: var(--brand); flex: none; }
.menum-empty { padding: 10px; font-size: 0.78125rem; color: var(--muted); text-align: center; }
/* Add/Edit field filter (edit.js header) + section-nav "to-go" badge */
.ffilter { display: inline-flex; border: 1px solid var(--control-border); border-radius: 7px; overflow: hidden; }
.ffilter button { border: 0; border-radius: 0; background: var(--panel); color: var(--body); font: inherit; font-size: 0.75rem; font-weight: 600; padding: 7px 12px; }
.ffilter button + button { border-left: 1px solid var(--control-border); }
.ffilter button.on { background: var(--brand-tint); color: var(--brand); }
.ffilter-counts { font-size: 0.71875rem; color: var(--muted); white-space: nowrap; }
.ed-nav-item .togo { font-size: 0.65625rem; font-weight: 700; color: var(--info); background: var(--info-bg); border-radius: 999px; padding: 1px 6px; }
.saved-ind { font-size: 0.71875rem; color: var(--muted); white-space: nowrap; }
.saved-ind.dirty { color: var(--warn-ink); }
.banner.restore { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--brand-tint); color: var(--ink); }
.restore-actions { display: inline-flex; gap: 14px; white-space: nowrap; }

/* ── Listing card (search result) ──────────────────────────────────────────── */
.lcard { background: var(--panel); border-radius: 4px; cursor: pointer; overflow: hidden; box-shadow: var(--hairline); transition: box-shadow .12s, transform .12s; }
.lcard:hover { box-shadow: var(--hairline), var(--shadow-float); transform: translateY(-1px); }
.lcard.sel { box-shadow: 0 0 0 2px var(--brand), 0 4px 14px rgba(0,0,0,.1); }
.lcard .img { position: relative; aspect-ratio: 3/2; background: var(--cream) center/cover; }
.lcard .img .ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--faint); }
.lcard .pill-tl { position: absolute; top: 9px; left: 9px; }
.lcard .fav { position: absolute; top: 9px; right: 9px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #4a504a; padding: 0; }
.lcard .fav.on { color: var(--orange); }
.lcard .match { position: absolute; bottom: 9px; left: 9px; font-size: 0.65625rem; font-weight: 600; color: #fff; background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 999px; }
/* Stale-listing autopilot pill — a "market cooling" blue, deliberately distinct from the
   deal-fallout risk radar's red/amber (offers.js) so the two detectors read as related but
   not identical at a glance. */
.lcard .pill-br { position: absolute; bottom: 9px; right: 9px; display: inline-flex; align-items: center; gap: 4px; font-size: 0.625rem; font-weight: 700; letter-spacing: .3px; padding: 3px 8px; border-radius: 999px; }
.lcard .pill-br.mild { color: var(--info); background: var(--info-bg); }
.lcard .pill-br.severe { color: var(--info); background: var(--info-bg); }
.lcard .pill-br .ic-svg { width: 11px; height: 11px; }
.lcard .b { padding: 14px; }
.lcard .price { font-size: 1.1875rem; font-weight: 700; color: var(--ink); letter-spacing: -.5px; }
.lcard .facts { display: flex; gap: 11px; font-size: 0.78125rem; color: var(--body); margin: 6px 0 7px; }
.lcard .facts .sep { color: var(--faint); }
.lcard .addr { font-size: 0.84375rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard .city { font-size: 0.78125rem; color: var(--muted); margin-top: 2px; }
.lcard .row2 { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; }
.lcard .typ { font-size: 0.71875rem; color: var(--label); }
.lcard .shared { font-size: 0.6875rem; font-weight: 600; color: var(--orange); display: inline-flex; align-items: center; gap: 4px; }
.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }

/* ── bdrms.com consumer brand (design handoff: Recursive Design System 10) ───────────────────
   Scoped under .bdrms-theme so it only ever applies inside the consumer-facing pages (portal.js,
   portal-listing.js, nationwide.js) — the agent app's own search/listing pages keep their existing
   look untouched, even though they share the same ListingCard component. */
.bdrms-theme { background: #FBF7EA; font-family: 'Public Sans', -apple-system, system-ui, sans-serif; }
.bdrms-theme .lcard { border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08), inset 0 0 0 1px #EDE6CF; }
.bdrms-theme .lcard:hover { box-shadow: 0 1px 3px rgba(0,0,0,.08), inset 0 0 0 1px #EDE6CF, var(--shadow-float); }
.bdrms-theme .lcard .fav.on { color: var(--orange); }
.bdrms-theme .lcard .match { background: #FEDD00; color: var(--ink); font-weight: 700; }
.bdrms-theme .lcard .price { font-family: 'Bricolage Grotesque', sans-serif; }
.bdrms-theme .card, .bdrms-theme .panel { box-shadow: 0 1px 3px rgba(0,0,0,.06), inset 0 0 0 1px #EDE6CF; }
/* headline/price treatment — applied per-element (h1s, price, hero heading), same targeted usage
   as the design reference rather than a blanket heading rule. */
.bdrms-headline { font-family: 'Bricolage Grotesque', sans-serif; }

/* tab bar (Recommended / Favorites / Map / Messages) — underline style with a yellow active
   indicator, matching ConsumerPortal.jsx's tab treatment. */
.bdrms-tabs { display: flex; gap: 4px; border-bottom: 1px solid #EDE6CF; }
.bdrms-tab { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 0.84375rem; font-weight: 700; cursor: pointer; border: 0; background: transparent; padding: 10px 14px; color: #6B7268; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.bdrms-tab.active { color: var(--ink); border-bottom-color: #FEDD00; }
.bdrms-tab .n { font-size: 0.6875rem; color: var(--muted); }

/* Property detail page (portal-listing.js) layout — the sidebar/gallery need to collapse on
   phones; mirrors listing.js's own .ld-body/.ld-gal responsive pattern (900px / 640px) rather
   than a fixed-pixel grid with no mobile override. */
.pl-topbar { padding: 10px 28px; flex-wrap: wrap; row-gap: 8px; }
.pl-body { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.pl-rail { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 16px; }
.pl-gal { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; height: 420px; }
.pl-gal-hero { border-radius: 12px; height: 420px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.pl-gal-side { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 0; }
.pl-facts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--warn-bg); border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px #EDE6CF; }
@media (max-width: 900px) {
  .pl-body { grid-template-columns: 1fr; }
  .pl-rail { position: static; }
}
/* Portal home (portal.js) — main column + 300px right rail (agent card + market snapshot),
   per ConsumerPortal.jsx's grid; collapses like .pl-body on phones (rail drops below). */
.portal-body { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.portal-rail { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) {
  .portal-body { grid-template-columns: 1fr; }
  .portal-rail { position: static; }
}
@media (max-width: 640px) {
  .pl-topbar { padding: 10px 14px; }
  .pl-gal { grid-template-columns: 1fr; height: auto; }
  .pl-gal-hero { height: 52vw; min-height: 200px; }
  .pl-gal-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; height: 26vw; max-height: 140px; }
  .pl-facts { grid-template-columns: 1fr 1fr; }
}

/* ── Misc ──────────────────────────────────────────────────────────────────── */
.empty { padding: 56px 20px; text-align: center; color: var(--muted); }
.empty h2 { color: var(--ink); }
.loading { padding: 56px; text-align: center; color: var(--muted); }
.banner { padding: 10px 14px; border-radius: 7px; margin-bottom: 14px; box-shadow: var(--hairline); background: var(--surface); font-size: 0.8125rem; }
.banner.err { background: var(--danger-bg); color: var(--danger); box-shadow: none; }
.banner.err ul, .banner.err li { margin: 0; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 22px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(28,28,28,.45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modal { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow-overlay); padding: 22px; max-width: min(520px, 94vw); width: 100%; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 8px; box-shadow: var(--shadow-overlay); z-index: 60; font-size: 0.8125rem; }
.toast.err { background: var(--danger); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair-3); font-size: 0.8125rem; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
table.data th, table.data td { text-align: left; padding: 11px 14px; }
table.data th { color: var(--label); font-weight: 600; font-size: 0.65625rem; text-transform: uppercase; letter-spacing: .8px; }
table.data tbody tr { border-top: 1px solid var(--hair-3); cursor: pointer; }
table.data tbody tr:hover td { background: var(--panel-2); }

/* ── Login ─────────────────────────────────────────────────────────────────── */
.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
/* Optional per-tenant login background image (set as --login-bg on <html> by public/lib/theme.js;
   inherited here). Absent → the plain --canvas background stays. */
:root[style*="--login-bg"] .login { background: var(--login-bg) center / cover no-repeat, var(--canvas); }
.login-card { max-width: 388px; width: 100%; }
.login-brand { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 20px; }
.login-brand .mark { width: 42px; height: 42px; color: var(--brand); }
.login-brand .brand-img { height: 46px; width: auto; max-width: 240px; display: block; }
.login-brand .name { font-weight: 600; font-size: 1.4375rem; letter-spacing: -.6px; color: var(--brand); }
.login-brand .eyebrow { font-weight: 500; font-size: 0.625rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); display: block; }
.login-card h1 { font-size: 1.25rem; margin-bottom: 2px; }
.login-card form label { margin-bottom: 12px; font-weight: 600; font-size: 0.8125rem; }
.login-card form label input { margin-top: 6px; }
.login-card button[type="submit"] { width: 100%; justify-content: center; margin-top: 4px; }
.login-foot { margin-top: 14px; text-align: center; font-size: 0.8125rem; }
/* Passkey sign-in, shown only when the provider supports it and the browser can run a ceremony. */
.login-alt { margin-top: 16px; }
.login-alt button { width: 100%; justify-content: center; }
/* "or" divider: a rule either side of the word, drawn with a flex row rather than a pseudo-element
   overlay so it reflows with the card instead of assuming its width. */
.login-or { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

/* ── Listing editor ────────────────────────────────────────────────────────── */
.ed-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.ed-title { display: flex; align-items: center; gap: 12px; }
.ed-title h1 { font-size: 1.375rem; letter-spacing: -0.5px; }
.ed-title .sub { margin: 3px 0 0; font-size: 0.8125rem; color: var(--muted); }
.status-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 0.78125rem; font-weight: 600; }
.status-chip.ok { background: var(--ok-bg); color: var(--ok); }
.status-chip.tips { background: var(--orange-bg); color: var(--orange); }
.status-chip.vios { background: var(--danger-bg); color: var(--danger); }
.ed-grid { display: grid; grid-template-columns: 186px 1fr; gap: 22px; align-items: start; }
.ed-nav { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; }
.ed-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 7px; font-size: 0.84375rem; color: var(--body); background: transparent; border: 0; width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
.ed-nav-item .ic { color: var(--label); }
.ed-nav-item.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.ed-nav-item.active .ic { color: var(--brand); }
.ed-nav-item .flagdot { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; flex: none; }
.flagdot.v { background: var(--danger); }
.flagdot.t { background: var(--orange-soft); }
.ed-split { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 22px; align-items: start; min-width: 0; }
@media (max-width: 1180px) { .ed-grid { grid-template-columns: 1fr; } .ed-nav { position: static; flex-direction: row; flex-wrap: wrap; } .ed-split { grid-template-columns: 1fr; } }
.fcard { background: var(--panel); border-radius: 3px; box-shadow: var(--hairline); scroll-margin-top: 16px; }
.fcard-head { padding: 14px 18px; border-bottom: 1px solid var(--hair-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fcard-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.flags { display: flex; gap: 7px; align-items: center; }
.flag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; font-weight: 600; border-radius: 999px; padding: 3px 9px; }
.flag.v { color: var(--danger); background: var(--danger-bg); }
.flag.t { color: var(--orange); background: var(--orange-bg); }
.flag.ok { color: var(--ok); }
.affix { position: relative; }
.affix .sign { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 0.84375rem; color: var(--muted); font-family: "Space Mono", monospace; }
.affix input { padding-left: 24px; }
.ppsf { font-size: 0.78125rem; color: var(--muted); }
.ppsf strong { color: var(--body); font-family: "Space Mono", monospace; }
.desc-meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--label); }
.ai { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); font-weight: 600; cursor: pointer; }
/* auto-fill + a 140px floor keeps each tile wide enough for the 5-button control row at ANY card
   width — the two-sidebar desktop layout narrows this card well below the viewport. (Copilot review.) */
.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.photo { position: relative; aspect-ratio: 4/3; border-radius: 4px; background: var(--cream) center/cover; }
.photo .cover { position: absolute; top: 6px; left: 6px; font-size: 0.59375rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; background: rgba(0,0,0,.6); color: #fff; padding: 2px 6px; border-radius: 3px; }
/* Photo AI PR4: per-tenant compliance flag on a photo tile — amber warn (medium/low), red block (high). */
/* Top-LEFT, not top-right: the hover/focus controls (.photo-ctl) live top-right, and revealing them
   over a focused badge would obscure it. On the cover tile the "Cover" chip is top-left, so drop the
   badge just below it there. (Copilot review on #307.) */
.photo .photo-flag { position: absolute; top: 6px; left: 6px; z-index: 1; display: inline-flex; align-items: center; gap: 3px; font-size: 0.59375rem; font-weight: 600; background: #b8860b; color: #fff; padding: 2px 6px; border-radius: 3px; cursor: help; }
.photo:first-child .photo-flag { top: 30px; }
.photo .photo-flag.high { background: var(--danger, #c0392b); }
.photo .photo-flag:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.photo .photo-flag svg { width: 11px; height: 11px; }
.photo.add { border: 1.5px dashed var(--control-border); background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--muted); cursor: pointer; font-size: 0.71875rem; }
/* AE E8-C media manager: per-tile controls, caption, and upload-queue states */
.photo[draggable="true"] { cursor: grab; }
.photo .photo-ctl { position: absolute; top: 5px; right: 5px; display: flex; gap: 3px; opacity: 0; transition: opacity .12s; }
.photo:hover .photo-ctl, .photo:focus-within .photo-ctl { opacity: 1; }
.photo .photo-ctl button { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 4px; background: rgba(0,0,0,.62); color: #fff; cursor: pointer; }
.photo .photo-ctl button:hover:not(:disabled) { background: rgba(0,0,0,.82); }
.photo .photo-ctl button:disabled { opacity: .4; cursor: default; }
.photo .photo-ctl button svg { width: 13px; height: 13px; }
.photo .photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 0.65625rem; line-height: 1.3; color: #fff; background: rgba(0,0,0,.6); border-radius: 0 0 4px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Photo AI PR3: the AI-generated caption shown (subtly, italic) when no manual caption is set — a
   one-click hint to adopt it as the real caption. */
.photo .photo-cap-ai { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; border: none; appearance: none; text-align: left; padding: 3px 6px; font-size: 0.65625rem; line-height: 1.3; color: #fff; background: rgba(56,53,120,.62); border-radius: 0 0 4px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.photo .photo-cap-ai:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.photo .photo-cap-ai svg { width: 11px; height: 11px; flex: none; }
.photo .photo-cap-edit { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; gap: 3px; }
.photo .photo-cap-edit input { flex: 1; min-width: 0; font-size: 0.6875rem; padding: 3px 5px; border: 1px solid var(--line, var(--control-border)); border-radius: 4px; }
.photo .photo-cap-edit button { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 4px; background: var(--ink, #2c2c2c); color: #fff; cursor: pointer; }
.photo .photo-cap-edit button svg { width: 13px; height: 13px; }
.photo.up { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid var(--control-border); background: var(--panel-2); color: var(--muted); font-size: 0.6875rem; padding: 8px; text-align: center; }
.photo.up.err { border-color: var(--danger, #c0392b); background: var(--danger-bg); color: var(--danger, #c0392b); }
.photo.up .up-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo.up svg { animation: spin 1s linear infinite; }
.photo.up.err svg { animation: none; }
.photo.up .up-err { font-size: 0.65625rem; line-height: 1.3; }
.photo.up .up-act { display: flex; gap: 6px; }
.photo.up .up-act button { font-size: 0.6875rem; padding: 2px 8px; }
.photo.up .up-wait { font-size: 0.65625rem; opacity: .6; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Touch/no-hover devices never fire :hover, so reveal the per-tile controls persistently there.
   (Column count is handled by the auto-fill grid above, which is container- not viewport-driven.) */
@media (hover: none) { .photo .photo-ctl { opacity: 1; } }
.feat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.feat-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--control-border); background: var(--panel); color: var(--body); }
.feat-chip.on { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }

/* AE E11: photo-vision feature-tagging review tray (Photos & Media section).
   The spinner icon reuses the existing global `.spin` utility (defined below with the shared
   mi-spin keyframes) rather than redefining it. */
.tagtray { margin-top: 14px; border: 1px solid var(--hair-2); border-radius: 8px; padding: 12px 14px; background: var(--panel-2, #faf9f6); }
.tagtray-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tagtray-head .tt-title { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84375rem; color: var(--ink); }
.tagtray-head .tt-title svg { width: 16px; height: 16px; color: var(--brand); }
.tt-intro { font-size: 0.75rem; margin: 6px 0 0; line-height: 1.45; }
.tt-error { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 0; }
.tt-empty { display: flex; align-items: center; gap: 7px; font-size: 0.78125rem; margin-top: 10px; }
.tt-groups { margin-top: 10px; }
.tt-bulk { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.tt-group { margin-top: 12px; }
.tt-group:first-child { margin-top: 0; }
.tt-grouphead { font-size: 0.625rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--label); margin-bottom: 4px; }
.tt-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair-3); }
.tt-item.done { opacity: .68; }
.tt-main { min-width: 0; }
.tt-chip { cursor: default; }
.tt-ev { font-size: 0.71875rem; color: var(--muted); line-height: 1.4; margin-top: 5px; }
.tt-ev.tt-blocked { color: var(--warn-ink); display: inline-flex; align-items: center; gap: 5px; }
.tt-ev.tt-blocked svg { width: 13px; height: 13px; }
.tt-act { display: flex; align-items: center; gap: 6px; flex: none; }
.tt-added { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; color: var(--ok); }
.tt-added svg { width: 14px; height: 14px; }

/* sqft confidence badge */
.sqft { border-radius: 6px; padding: 9px 11px; display: flex; flex-direction: column; gap: 7px; }
.sqft.ok { background: var(--ok-bg); }
.sqft.bad { background: var(--danger-bg); }
.sqft-head { display: flex; align-items: center; gap: 8px; font-size: 0.78125rem; font-weight: 600; }
.sqft.ok .sqft-head { color: var(--ok); }
.sqft.bad .sqft-head { color: var(--danger); }
.sqft-head .pct { margin-left: auto; font-family: "Space Mono", monospace; font-weight: 700; }
.sqft-srcs { display: flex; flex-wrap: wrap; gap: 6px; }
.src { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; color: var(--body); background: var(--panel); border: 1px solid rgba(0,0,0,.08); border-radius: 4px; padding: 2px 7px; }
.src .ic.yes { color: var(--ok); } .src .ic.no { color: var(--orange); }
.certify { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 0.71875rem; color: var(--body); line-height: 1.4; }
.certify input { width: auto; margin-top: 2px; accent-color: var(--brand); }
.certify .warn { color: var(--warn-ink); }

/* compliance panel */
.cpanel { background: var(--panel); border-radius: 3px; box-shadow: var(--hairline); overflow: hidden; }
.cp-head { padding: 14px 16px; border-bottom: 1px solid var(--hair-2); }
.cp-headrow { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.cp-ic { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.cp-ic.ok { background: var(--ok-bg); color: var(--ok); }
.cp-ic.tips { background: var(--orange-bg); color: var(--orange); }
.cp-ic.vios { background: var(--danger-bg); color: var(--danger); }
.cp-head h2 { flex: 1; font-size: 0.90625rem; }
.cp-score { font-family: "Space Mono", monospace; font-size: 0.9375rem; font-weight: 700; }
.cp-bar { height: 6px; border-radius: 3px; background: var(--hair-2); overflow: hidden; }
.cp-bar > span { display: block; height: 100%; transition: width .3s, background .3s; }
.cp-counts { display: flex; gap: 14px; margin-top: 9px; font-size: 0.71875rem; }
.cp-count { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--muted); }
.cp-count .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--control-border); }
.cp-count.v { color: var(--danger); } .cp-count.v .dot { background: var(--danger); }
.cp-count.t { color: var(--orange); } .cp-count.t .dot { background: var(--orange-soft); }
.cp-allclear { padding: 16px; display: flex; align-items: center; gap: 9px; color: var(--ok); font-size: 0.8125rem; }
.cp-grouphead { padding: 9px 16px 7px; font-size: 0.625rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.cp-grouphead.v { color: var(--danger); background: var(--danger-bg); }
.cp-grouphead.t { color: var(--label); background: var(--panel-2); border-top: 1px solid var(--hair-2); }
.cp-item { display: flex; gap: 11px; align-items: flex-start; padding: 11px 16px; cursor: pointer; border-top: 1px solid var(--hair-3); }
.cp-item:hover { background: var(--panel-2); }
.sevchip { font-size: 0.59375rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; border-radius: 4px; padding: 3px 6px; flex: none; min-width: 50px; text-align: center; margin-top: 1px; }
.sevchip.high.v { color: var(--danger); background: var(--danger-bg); }
.sevchip.medium.v { color: var(--warn-ink); background: var(--warn-bg); }
.sevchip.low.v { color: var(--body); background: var(--hair-2); }
.sevchip.high.t { color: var(--orange); background: var(--orange-bg); }
.sevchip.medium.t { color: var(--info); background: var(--info-bg); }
.sevchip.low.t { color: var(--ok); background: var(--ok-bg); }
.cp-item .lbl { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.cp-item .cp-reason { font-size: 0.75rem; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.cp-rules { border-top: 1px solid var(--hair-2); }
.cp-rules > button { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: 0; padding: 11px 16px; cursor: pointer; font-size: 0.75rem; font-weight: 600; color: var(--brand); }
.cp-rules .body { padding: 0 16px 14px; }
.cp-rule { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--hair-3); }

/* live preview */
.pv-eyebrow { font-size: 0.65625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--label); margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
.pv-card { background: var(--panel); border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.06); overflow: hidden; }
.pv-hero { position: relative; aspect-ratio: 3/2; background: var(--cream) center/cover; }
.pv-hero .pill-tl { position: absolute; top: 10px; left: 10px; }
.pv-hero .fav { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; color: #4a504a; }
.pv-hero .count { position: absolute; bottom: 10px; right: 10px; font-size: 0.6875rem; color: #fff; background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 3px; }
.pv-body { padding: 16px; }
.pv-price { font-family: "Space Mono", monospace; font-size: 1.375rem; font-weight: 700; color: var(--ink); letter-spacing: -.5px; }
.pv-facts { display: flex; gap: 14px; font-size: 0.8125rem; color: var(--body); margin: 8px 0 10px; }
.pv-facts .sep { color: var(--faint); }
.pv-addr { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.pv-city { font-size: 0.8125rem; color: var(--muted); margin-top: 2px; }
.pv-desc { font-size: 0.78125rem; color: var(--body); line-height: 1.55; margin: 11px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pv-feats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pv-feats .feat { font-size: 0.71875rem; color: var(--body); background: var(--canvas); border: 1px solid var(--hair); border-radius: 3px; padding: 3px 8px; }
.pv-agent { border-top: 1px solid var(--hair-2); margin-top: 14px; padding-top: 11px; display: flex; align-items: center; gap: 9px; font-size: 0.75rem; color: var(--muted); }
.pv-agent .av { width: 26px; height: 26px; border-radius: 50%; background: var(--cream); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 600; }
.pv-note { font-size: 0.71875rem; color: var(--label); text-align: center; margin-top: 9px; }

/* ── Find homes (buyer search) ─────────────────────────────────────────────── */
.bs { display: flex; flex-direction: column; height: 100%; }
.bs-top { flex: none; border-bottom: 1px solid var(--hair); background: var(--panel); }
.bs-toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 20px; flex-wrap: wrap; }
.bs-client { display: flex; align-items: center; gap: 11px; }
.bs-client .av { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-solid); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; }
.bs-client .name { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.bs-client .sub { font-size: 0.75rem; color: var(--muted); }
.bs-filters { display: flex; align-items: center; gap: 8px; padding: 0 20px 12px; flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 7px; background: var(--canvas); border: 1px solid var(--control-border); border-radius: 7px; padding: 8px 12px; font-size: 0.8125rem; font-weight: 500; color: var(--ink); cursor: pointer; }
.fchip .ic { color: var(--muted); }
.fchip.strong { background: var(--panel); color: var(--brand); font-weight: 600; }
.fchip.strong .ic { color: var(--brand); }
.bs-sort { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.78125rem; color: var(--muted); }
.bs-sort b { color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.bs-split { flex: 1; display: grid; grid-template-columns: minmax(420px, 1.05fr) 1.35fr; min-height: 0; }
@media (max-width: 980px) { .bs-split { grid-template-columns: 1fr; } .bs-map { display: none; } }
.bs-cards { overflow-y: auto; padding: 16px 18px; background: var(--canvas); border-right: 1px solid var(--hair); }
.bs-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.bs-map { min-height: 0; position: relative; background: var(--brand-tint); }
.bs-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Listing price pills (MapKit custom annotation elements) */
.ll-pin { font-family: "Space Mono", monospace; font-weight: 700; font-size: 0.75rem; line-height: 1; padding: 5px 9px; border: 0; border-radius: 999px; white-space: nowrap; cursor: pointer; background: var(--panel); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.22); transition: transform .1s, background .1s, color .1s; }
.ll-pin.on { background: var(--brand-solid); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.3); transform: scale(1.06); z-index: 6; }
.ll-pin.fav { color: var(--orange); outline: 1.5px solid var(--orange); }
.ll-pin.fav.on { color: #fff; outline: none; }

/* Cluster bubbles (brand green) */
.ll-cluster { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-solid); color: #fff; font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 0.8125rem; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 2px 10px rgba(0,0,0,.28); cursor: pointer; }
.ll-cluster.lg { background: var(--brand-press); }

/* Polygon-draw vertex dot */
.ll-vertex { width: 11px; height: 11px; border-radius: 50%; background: var(--brand-solid); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); transform: translate(-50%, -50%); }

/* Floating map controls: "Search this area" + polygon draw (search this area / draw / finish) */
.map-tools { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 28px); flex-wrap: wrap; justify-content: center; }
.map-tool { display: inline-flex; align-items: center; gap: 7px; background: var(--panel); color: var(--brand); border: 1px solid var(--control-border); border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.2); padding: 8px 16px; font-weight: 600; font-size: 0.8125rem; cursor: pointer; }
.map-tool:hover { color: var(--brand-press); }
.map-tool:disabled { opacity: .5; cursor: default; }
.map-tool.ghost { color: var(--body); }
.map-hint { background: rgba(11,59,46,.92); color: #fff; border-radius: 999px; padding: 8px 14px; font-size: 0.78125rem; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.2); }

/* Local Logic Local Content widget stage (listing detail page) */
.ll-stage { height: min(60vh, 520px); border-radius: 10px; overflow: hidden; background: var(--brand-tint); }
.ll-stage > * { width: 100%; height: 100%; }

/* Local Logic Local Demographics panel — flows to its content height (not a fixed map) */
.ll-demographics { width: 100%; border-radius: 10px; overflow: hidden; }
.ll-demographics > * { width: 100%; }

/* ── Listing detail (RDS8 design) ───────────────────────────────────────────── */
.ld { --ld-line: rgba(0,0,0,.07); }
.ld-bar { position: sticky; top: 0; z-index: 12; background: var(--panel); border-bottom: 1px solid var(--hair); display: flex; align-items: center; gap: 12px; padding: 0 4px; height: 56px; margin-bottom: 14px; }
.ld-bar .link { font-size: 0.84375rem; }
.ld-bar-sep { width: 1px; height: 22px; background: var(--hair); }
.ld-bar-mls { font-size: 0.78125rem; color: var(--muted, #8a8e88); }
.ld-bar-mls b { color: var(--brand); font-weight: 600; }
.grow { flex: 1; }
.ld-bar-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ld-actbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 116px; height: 38px; font: inherit; font-size: 0.78125rem; font-weight: 600; color: var(--brand); background: var(--panel); border: 1px solid var(--control-border); border-radius: 7px; cursor: pointer; white-space: nowrap; }
.ld-actbtn:hover { background: var(--brand-tint); }

.ld-wrap { max-width: 1180px; margin: 0 auto; }
.ld-gal { display: grid; grid-template-columns: 2fr 1fr; gap: 9px; height: min(46vh, 392px); }
.ld-gal-hero, .ld-gal-cell { border-radius: 4px; background: var(--cream) center/cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.ld-gal-side { display: grid; grid-template-rows: 1fr 1fr; gap: 9px; min-height: 0; }
.ld-gal-empty { height: 280px; border-radius: 4px; background: var(--brand-tint); display: flex; align-items: center; justify-content: center; color: var(--faint); }
/* On phones the photo gallery stacks: hero on top, the two side thumbs as a short strip below. */
@media (max-width: 640px) {
  .ld-gal { grid-template-columns: 1fr; height: auto; }
  .ld-gal-hero { height: 52vw; min-height: 220px; }
  .ld-gal-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; height: 26vw; max-height: 150px; }
}
.ld-thumbs { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.ld-thumb { width: 60px; height: 44px; border-radius: 4px; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--cream) center/cover no-repeat; }
.ld-thumb.on { border-color: var(--brand); }

.ld-card { background: var(--panel); border-radius: 3px; box-shadow: inset 0 0 0 1px var(--ld-line); padding: 20px; }
.ld-sec { margin-top: 18px; }
.ld-seclabel { font-size: 0.6875rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ld-src { font-size: 0.65625rem; color: var(--faint); margin-top: 12px; }
.ld-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ld-sec-note { font-size: 0.71875rem; color: var(--label); }

.ld-mls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; background: var(--panel); border-radius: 3px; box-shadow: inset 0 0 0 1px var(--ld-line); }
.ld-mls-l, .ld-mls-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ld-kicker { font-size: 0.65625rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--label); }
.ld-mlsno { font-family: "Space Mono", monospace; font-size: 1.125rem; font-weight: 700; color: var(--ink); letter-spacing: .5px; }
.ld-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--control-border); background: var(--panel); cursor: pointer; color: var(--muted); }
.ld-partner { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; color: var(--muted); background: var(--panel); border: 1px solid var(--control-border); border-radius: 6px; cursor: pointer; }
.ld-partner:hover { color: var(--brand); border-color: var(--brand); }

.ld-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 22px 0 4px; }
.ld-price { font-family: "Space Mono", monospace; font-size: 2rem; font-weight: 700; color: var(--ink); letter-spacing: -1px; }
.ld-addr { font-size: 1.125rem; font-weight: 600; color: var(--ink); margin-top: 5px; }
.ld-city { font-size: 0.84375rem; color: var(--muted); margin-top: 2px; }
.ld-specs { display: flex; gap: 20px; font-size: 0.90625rem; color: var(--body); flex-wrap: wrap; }
.ld-specs span { display: inline-flex; align-items: center; gap: 6px; }
.ld-specs .ic { color: var(--muted); }

.ld-body { display: grid; grid-template-columns: 1fr 312px; gap: 26px; align-items: start; margin-top: 18px; }
.ld-remarks { margin: 0; font-size: 0.875rem; color: var(--body); line-height: 1.65; white-space: pre-wrap; }

.ld-facts, .ld-tax { display: grid; gap: 1px; background: var(--hair); border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); }
.ld-facts { grid-template-columns: 1fr 1fr 1fr; }
.ld-tax { grid-template-columns: repeat(3, 1fr); }
.ld-fact { background: var(--panel); padding: 12px 14px; }
.ld-fact .k { font-size: 0.65625rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.ld-fact .v { font-size: 0.84375rem; font-weight: 600; color: var(--ink); margin-top: 3px; }
.ld-fact .v.num { font-family: "Space Mono", monospace; font-size: 0.9375rem; }

.ld-agent { margin-top: 18px; padding: 20px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--brand-badge); background: var(--ok-bg); }
.ld-agent-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--brand); }
.ld-agent-tag { font-size: 0.625rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--brand); background: var(--ok-bg); border-radius: 4px; padding: 2px 7px; }
.ld-agent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 22px; }
.ld-agent-grid .k { font-size: 0.65625rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.ld-agent-grid .v { font-size: 0.84375rem; font-weight: 600; color: var(--ink); margin-top: 2px; }

/* price timeline */
.ld-tl { position: relative; height: 150px; margin: 6px 8px 34px; }
.ld-tl-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--surface); }
.ld-tl-pt { position: absolute; transform: translate(-50%, -50%); text-align: center; }
.ld-tl-pt .p { font-family: "Space Mono", monospace; font-size: 0.71875rem; font-weight: 700; color: var(--ink); white-space: nowrap; margin-bottom: 6px; }
.ld-tl-pt .dot { display: block; width: 13px; height: 13px; border-radius: 50%; margin: 0 auto; border: 2.5px solid var(--ok-bg); box-shadow: 0 0 0 1px currentColor; }
.ld-tl-lbl { position: absolute; bottom: -30px; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.ld-tl-lbl .d { font-size: 0.75rem; font-weight: 600; color: var(--ink); }
.ld-tl-lbl .t { font-size: 0.6875rem; }

.ld-hist { padding: 6px; }
.ld-hist-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-bottom: 1px solid var(--hair-3); }
.ld-hist-row:last-child { border-bottom: 0; }
.ld-hist-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ld-hist-mid { flex: 1; min-width: 0; }
.ld-hist-mid .e { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.ld-hist-mid .d { font-size: 0.71875rem; color: var(--label); }
.ld-hist-price { font-family: "Space Mono", monospace; font-size: 0.78125rem; color: var(--body); text-align: right; }

.ld-demo-h { margin: 0 0 14px; font-size: 1.625rem; font-weight: 600; letter-spacing: -.6px; color: var(--ink); }

.ld-rail { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 16px; }
.ld-rcard { background: var(--panel); border-radius: 3px; box-shadow: inset 0 0 0 1px var(--ld-line); padding: 16px; }
.ld-agentcard { display: flex; align-items: center; gap: 12px; }
.ld-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--brand-solid); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9375rem; flex: none; }
.ld-agentmeta .n { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.ld-agentmeta .o { font-size: 0.75rem; color: var(--muted); }
.ld-railbtn { width: 100%; justify-content: center; margin-top: 14px; }

/* Comparable sales (rail) — one tappable row per comp. */
.ld-comp { display: block; padding: 10px 0; border-top: 1px solid var(--ld-line); cursor: pointer; }
.ld-comp:first-of-type { border-top: 0; padding-top: 4px; }
.ld-comp:hover .ld-comp-addr { color: var(--brand); }
.ld-comp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ld-comp-price { font-family: "Space Mono", monospace; font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.ld-comp-dist { font-size: 0.6875rem; font-weight: 600; color: var(--brand); background: var(--brand-tint); border-radius: 999px; padding: 1px 8px; white-space: nowrap; flex: none; }
.ld-comp-addr { font-size: 0.78125rem; font-weight: 600; color: var(--ink); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-comp-why { font-size: 0.71875rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.ld-comp-meta { font-size: 0.71875rem; color: var(--faint); margin-top: 2px; }

/* Listing activity (rail) — first-party engagement counters. */
.ld-stats { display: flex; gap: 8px; }
.ld-stat { flex: 1; text-align: center; background: var(--surface); border-radius: 6px; padding: 10px 6px; }
.ld-stat .n { font-size: 1.25rem; font-weight: 700; letter-spacing: -.5px; color: var(--ink); }
.ld-stat .l { font-size: 0.65625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-top: 2px; }

/* Stale-listing autopilot callout (rail) — a "market cooling" blue, deliberately distinct from
   the deal-fallout risk radar's red/amber (offers.js) so the two detectors read as related but
   not identical at a glance. */
.ld-stale { box-shadow: none; }
.ld-stale.mild { background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--control-border); }
.ld-stale.severe { background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--control-border); }
.ld-stale-copy { font-size: 0.78125rem; line-height: 1.5; color: var(--ink); margin: 4px 0 0; }
.ld-stale-ctas { display: flex; gap: 8px; margin-top: 14px; }
.ld-stale-ctas .ld-railbtn { width: auto; margin-top: 0; flex: 1; }

/* Flood risk (main column) — neutral by default, amber when in an SFHA. */
.ld-flood { display: flex; align-items: flex-start; gap: 12px; }
.ld-flood-ic { color: var(--brand); flex: none; display: flex; }
.ld-flood-ic svg { width: 22px; height: 22px; }
.ld-flood-zone { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.ld-flood-note { font-size: 0.78125rem; color: var(--body); margin-top: 3px; line-height: 1.45; }
.ld-flood.is-sfha { background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-border); }
.ld-flood.is-sfha .ld-flood-ic { color: var(--warn-ink); }
.ld-flood.is-sfha .ld-flood-zone { color: var(--warn-ink); }

/* AI-estimated badge + grounding citations (parcel/sales history). */
.ld-aibadge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; font-weight: 600; color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.ld-aibadge svg { width: 12px; height: 12px; }
.ld-cites { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ld-line); font-size: 0.71875rem; line-height: 1.7; }
.ld-cites-l { color: var(--muted); margin-right: 6px; }
.ld-cites a { color: var(--brand); margin-right: 10px; word-break: break-word; }

@media (max-width: 900px) {
  .ld-body { grid-template-columns: 1fr; }
  .ld-rail { position: static; }
  .ld-facts { grid-template-columns: 1fr 1fr; }
  .ld-tax { grid-template-columns: 1fr 1fr; }
}

/* Missing-credentials / error placeholder (covers the map pane) */
.map-needkey { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 28px; color: var(--muted); background: var(--brand-tint); }
.map-needkey .ic { color: var(--brand); width: 28px; height: 28px; }
.map-needkey b { color: var(--ink); font-size: 0.9375rem; }
.map-needkey span { max-width: 340px; font-size: 0.8125rem; }
.map-needkey code { font-family: "Space Mono", monospace; background: var(--brand-badge); color: var(--brand-press); padding: 2px 6px; border-radius: 5px; font-size: 0.75rem; }

/* ── Compatibility: listing detail, browse toolbar, misc (secondary views) ───── */
.card { margin-bottom: 16px; }
.toolbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar label { margin: 0; }
.toolbar .grow { flex: 1; min-width: 160px; }
.detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .detail-grid { grid-template-columns: 1fr; } }
.gallery { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); overflow: hidden; }
.gallery .hero { aspect-ratio: 16/10; background: var(--cream) center/cover; position: relative; }
.gallery .hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .hero .ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--faint); }
.gallery .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.9); color: #1d241f; border: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.gallery .nav-btn.l { left: 10px; } .gallery .nav-btn.r { right: 10px; }
.thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; }
.thumbs img { width: 76px; height: 56px; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: .7; }
.thumbs img.on { opacity: 1; box-shadow: 0 0 0 2px var(--brand); }
.spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.spec .s { background: var(--surface); border-radius: var(--radius); padding: 12px 14px; }
.spec .s .n { font-size: 1.125rem; font-weight: 600; }
.spec .s .l { color: var(--muted); font-size: 0.75rem; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; background: var(--surface); color: var(--body); }
.tag.brand { color: var(--brand); background: var(--brand-tint); }
.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }

/* ── Market Insights ─────────────────────────────────────────────────────── */
@keyframes mi-spin { to { transform: rotate(360deg); } }
.mi { padding: 22px 28px 60px; max-width: 1340px; margin: 0 auto; }
.mi .brand { color: var(--brand); }
.mi .mut { color: var(--muted); }
.mi .num { font-family: "Space Mono", monospace; }
.mi-titlerow { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.mi-titlerow h1 { margin: 0; font-size: 1.5625rem; font-weight: 600; letter-spacing: -.6px; color: var(--ink); }
.mi-titlerow .sub { margin: 5px 0 0; font-size: 0.875rem; color: var(--muted); }
.mi-titlerow .actions { display: flex; gap: 10px; }
.mi-livenote { display: flex; align-items: flex-start; gap: 9px; background: var(--brand-tint); border-radius: 8px; padding: 10px 13px; margin-bottom: 14px; font-size: 0.78125rem; color: var(--body); line-height: 1.5; }
.mi-livenote .ic { color: var(--brand); margin-top: 1px; }

.mi-areas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border-radius: 3px; box-shadow: var(--hairline); padding: 12px 14px; margin-bottom: 12px; }
.mi-areas-lbl { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--faint); flex: none; }
.mi-areas-meta { font-size: 0.75rem; color: var(--faint); }
.area-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 9px 7px 11px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--control-border); background: var(--panel); color: var(--body); }
.area-chip:hover { background: var(--panel); border-color: var(--muted); color: var(--body); }
.area-chip.on, .area-chip.on:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
/* .x is a real <button> where it removes something (keyboard-reachable, and announced via aria-label), so
   strip the button chrome to keep it looking like the inline glyph it replaced. */
.area-chip .x { display: inline-flex; opacity: .5; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.area-chip .x:hover { opacity: 1; }
.area-chip .x:focus-visible { opacity: 1; outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.area-add { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; border: 1px dashed var(--dashed-border); background: var(--panel); color: var(--brand); }
.area-add:hover { background: var(--surface); border-color: var(--brand); color: var(--brand); }

.mi-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--panel); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); padding: 3px; }
.seg button { font-size: 0.78125rem; font-weight: 600; border: 0; border-radius: 6px; padding: 6px 13px; background: transparent; color: var(--body); }
.seg button:hover { background: var(--surface); color: var(--ink); }
.seg button.on, .seg button.on:hover { background: var(--brand-solid); color: #fff; }
.mi-pill, .mi-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78125rem; font-weight: 600; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--control-border); background: var(--panel); color: var(--body); }
.mi-pill:hover, .mi-toggle:hover { background: var(--surface); border-color: var(--muted); color: var(--ink); }
.mi-toggle.on, .mi-toggle.on:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.mi-updated { font-size: 0.75rem; color: var(--faint); display: inline-flex; align-items: center; gap: 6px; }

.pop-backdrop { position: fixed; inset: 0; z-index: 30; }
.pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 31; background: var(--panel); border-radius: 8px; box-shadow: var(--shadow-pop), inset 0 0 0 1px rgba(0,0,0,.06); padding: 8px; text-align: left; }
.pop-title { font-size: 0.65625rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); padding: 6px 8px; }
.pop-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: 0.8125rem; color: var(--ink); cursor: pointer; }
.pop-item:hover { background: var(--surface); }
.pop-check { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 6px; font-size: 0.8125rem; color: var(--ink); cursor: pointer; }
.pop-check:hover { background: var(--surface); }
.pop-check input { accent-color: var(--brand); }
.pop-search { display: flex; align-items: center; gap: 8px; background: var(--canvas); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; }
.pop-search input { flex: 1; border: 0; background: transparent; outline: 0; font: inherit; font-size: 0.8125rem; }
.pop-area { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 6px; cursor: pointer; }
.pop-area:hover { background: var(--surface); }
.pop-area .n { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.pop-area .t { font-size: 0.71875rem; color: var(--faint); }

.mi-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.mi-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi { background: var(--panel); border-radius: 3px; box-shadow: var(--hairline); padding: 13px 15px; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-lbl { font-size: 0.65625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.kpi-tag { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 6px; border-radius: 999px; }
.kpi-tag.live { color: var(--brand); background: var(--brand-tint); }
.kpi-tag.est { color: var(--muted); background: var(--hair-2); }
.kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 7px; }
.kpi-val { font-size: 1.4375rem; font-weight: 700; letter-spacing: -.8px; color: var(--ink); line-height: 1; }
.kpi-delta { font-size: 0.71875rem; font-weight: 600; margin-top: 6px; display: inline-flex; align-items: center; gap: 3px; }
.kpi-delta.up { color: var(--ok); }
.kpi-delta.down { color: var(--orange); }
.kpi-delta .yoy { color: var(--faint); font-weight: 400; }

.mi-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chart-card { background: var(--panel); border-radius: 3px; box-shadow: var(--hairline); padding: 15px 18px 12px; min-width: 0; }
.chart-card.full { grid-column: 1 / -1; }
.cc-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.cc-head h3 { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--ink); }

/* ── BI report workspace (Market Insights) ─────────────────────────── */
.area-chip.static { padding-left: 11px; }
.bi-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--panel); border-radius: 3px; box-shadow: var(--hairline); padding: 10px 12px; margin-bottom: 12px; }
.bi-toolbar .danger { color: var(--orange); }
.bi-seed { font-size: 0.75rem; color: var(--faint); }
/* .bi-grid is SHARED (market.js, dashboard.js, cma.js, insights.js) — keep its original auto-fill flow
   so those screens are untouched. The design-handoff 6-column grid is opt-in via `.mi-grid`, used only
   by the Member Insights dashboard, whose cards set `grid-column: span N` inline (N ∈ 2/3/4/6 = S/M/L/
   Full). Under 1180px those insights tiles go full-width so they never crush on narrow screens. */
.bi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.bi-grid.mi-grid { grid-template-columns: repeat(6, 1fr); }
.bi-widget { background: var(--panel); border-radius: 3px; box-shadow: var(--hairline); padding: 14px 16px; min-width: 0; }
.bi-widget.wide { grid-column: 1 / -1; }
/* DASHBOARD ONLY. The agent dashboard shows its BI report as a summary, so the two large charts sit
   side by side instead of each taking a whole row.
   Driven by a CONTAINER query, not a viewport one, and pinned to an EVEN track count. Both of those
   are load-bearing:
     · Viewport breakpoints get the width wrong — the product panel takes 304px, so a 1280px window
       leaves the grid about 210px per track at four columns, under the 240px floor the rest of the
       app keeps. Measuring the grid's own container accounts for the panel automatically.
     · An ODD track count breaks the pairing. Left to the shared auto-fill the grid lands on three
       tracks at common desktop widths, and the seeded order then puts the fourth KPI in row 2
       column 1, one chart beside it and the other alone on row 3 — charts not paired, KPI row split.
       Two or four only, so a `span 2` chart always has a partner.
   Thresholds are the 240px floor plus gaps and the panel's own padding: 4×240 + 3×14 + 32 ≈ 1034,
   2×240 + 14 + 32 ≈ 526. Same container-on-the-ancestor shape as .cma-pricing-tab above.
   On the dashboard a "Full" chart is therefore half the summary row and a "Half" card a quarter of
   it — a deliberate, proportional compaction of this one view. Market Insights shares .bi-grid and
   is untouched: it still renders both at the widths the user chose. */
.dash-bi { container-type: inline-size; }
.bi-grid.dash-grid { grid-template-columns: 1fr; }
.bi-grid.dash-grid > .bi-widget.wide { grid-column: 1 / -1; }
@container (min-width: 530px) {
  .bi-grid.dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* ONE track each, so the pair sits two-up here as well. Leaving `.wide` at 1 / -1 in this state
     was the whole bug: with the product panel open a 1280px window leaves the panel about 916px, so
     this is the branch that viewport actually takes, and the charts went on stacking. */
  .bi-grid.dash-grid > .bi-widget.wide { grid-column: auto; }
}
@container (min-width: 1040px) {
  .bi-grid.dash-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bi-grid.dash-grid > .bi-widget.wide { grid-column: span 2; }
}
@media (max-width: 1180px) { .bi-grid.mi-grid > .bi-widget { grid-column: 1 / -1 !important; } }
.bi-w-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bi-w-title { font-size: 0.78125rem; font-weight: 600; color: var(--ink); }
.bi-w-area { font-size: 0.6875rem; color: var(--faint); margin-top: 2px; }
.bi-w-tools { display: inline-flex; gap: 2px; flex: none; }
.bi-w-tools button { background: none; border: 0; padding: 4px; color: var(--muted); cursor: pointer; border-radius: 4px; }
.bi-w-tools button:hover { background: var(--hair-2); color: var(--ink); }
.bi-w-empty { font-size: 0.78125rem; color: var(--faint); padding: 18px 0; text-align: center; }
.bi-kpi-val { font-size: 1.75rem; font-weight: 700; letter-spacing: -1px; color: var(--ink); line-height: 1.1; padding: 4px 0 2px; }
.bi-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 0.6875rem; color: var(--muted); }
.bi-legend span { display: inline-flex; align-items: center; gap: 5px; }
.bi-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* Widget builder — two-step modal (block picker → configure + width chips + schematic preview) */
.mi-builder { max-width: min(640px, 94vw); max-height: 88vh; overflow-y: auto; }
.mi-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mi-blocks-lbl { font-size: 0.6875rem; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--faint); margin: 16px 0 8px; }
.mi-block { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; background: var(--panel); border: 1px solid rgba(0,0,0,.1); border-radius: 6px; padding: 12px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
/* Keep the card background explicitly (the global `button:hover` rule would otherwise paint it with
   the brand fill while the dark card text stays put). Hover cue is the brand border + inset ring. */
.mi-block:hover { background: var(--panel); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.mi-block-ic { color: var(--brand); margin-bottom: 4px; }
.mi-block-t { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.mi-block-d { font-size: 0.6875rem; color: var(--faint); line-height: 1.3; }
.mi-block.off { cursor: not-allowed; opacity: .55; }
.mi-block.off:hover { background: var(--panel); border-color: rgba(0,0,0,.1); box-shadow: none; }
.mi-builder-body { display: grid; grid-template-columns: 1fr 200px; gap: 18px; align-items: start; }
.mi-builder-cfg { min-width: 0; }
.mi-width { margin-top: 12px; }
.mi-width-lbl { display: block; font-size: 0.71875rem; font-weight: 600; color: var(--body); letter-spacing: .2px; margin-bottom: 6px; }
.mi-widths { display: inline-flex; gap: 6px; }
.mi-wchip { min-width: 40px; padding: 6px 10px; font-size: 0.78125rem; font-weight: 600; background: var(--panel); border: 1px solid rgba(0,0,0,.15); border-radius: 6px; color: var(--muted); cursor: pointer; }
.mi-wchip.on { background: var(--brand-solid); border-color: var(--brand-solid); color: #fff; }
.mi-preview { border-left: 1px solid rgba(0,0,0,.08); padding-left: 16px; }
.mi-preview-lbl { font-size: 0.6875rem; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.mi-preview-card { background: var(--panel); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); padding: 12px; }
.mi-preview-title { font-size: 0.78125rem; font-weight: 600; color: var(--ink); }
.mi-preview-meta { font-size: 0.6875rem; color: var(--faint); margin-top: 2px; }
.mi-preview-body { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.mi-preview-chip { font-size: 0.65625rem; font-weight: 600; text-transform: capitalize; background: var(--panel); border: 1px solid rgba(0,0,0,.1); border-radius: 4px; padding: 2px 7px; color: var(--muted); }
.mi-preview-note { font-size: 0.65625rem; color: var(--faint); margin-top: 10px; }
/* Pinned to the bottom of the scrollable modal so Back/Cancel/Add stay reachable on short viewports. */
.mi-builder-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; position: sticky; bottom: 0; background: var(--panel); padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); }
@media (max-width: 620px) {
  .mi-blocks { grid-template-columns: repeat(2, 1fr); }
  .mi-builder-body { grid-template-columns: 1fr; }
  .mi-preview { border-left: 0; border-top: 1px solid rgba(0,0,0,.08); padding-left: 0; padding-top: 14px; }
}
.cc-sub { font-size: 0.71875rem; color: var(--faint); margin-top: 2px; }
.cc-action { font-size: 0.8125rem; font-weight: 700; color: var(--brand); }
.legend { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.71875rem; color: var(--body); }
.legend .sw { width: 12px; height: 9px; border-radius: 2px; }
.legend .sw.dash { height: 0; border-top: 2px dashed var(--dashed-border); border-radius: 0; }
.gauges { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: center; }
.gauge-cell { text-align: center; }
.gauge-cap { font-size: 0.75rem; font-weight: 600; margin-top: -6px; }
.gauge-cap.mut { color: var(--muted); font-weight: 400; }

.q-bars { display: flex; gap: 10px; align-items: flex-end; height: 132px; }
.q-bar { flex: 1; display: flex; flex-direction: column; align-items: center; background: transparent; border: 0; height: 100%; justify-content: flex-end; padding: 0; }
.q-bar:hover { background: transparent; }
.q-count { font-size: 0.75rem; font-weight: 700; margin-bottom: 4px; }
.q-fill { width: 100%; border-radius: 3px 3px 0 0; transition: all .15s; }
.q-bar.on .q-fill { box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.q-lab { margin-top: 7px; text-align: center; }
.q-q { font-size: 0.75rem; font-weight: 700; color: var(--body); }
.q-q.on { color: var(--ink); }
.q-band { font-size: 0.65625rem; color: var(--faint); margin-top: 1px; }
.q-drill { margin-top: 14px; border-top: 1px solid var(--hair-3); padding-top: 13px; }
.q-drill-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.q-dot { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.q-title { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.mut2 { font-size: 0.75rem; color: var(--faint); }
.q-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.q-stat { background: var(--panel-2); border-radius: 6px; padding: 9px 10px; }
.q-stat .l { font-size: 0.59375rem; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.q-stat .v { font-size: 0.9375rem; font-weight: 700; color: var(--ink); margin-top: 3px; }
.q-stat .sub { font-size: 0.65625rem; color: var(--faint); margin-top: 1px; }

.mi-rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
.mi-card { background: var(--panel); border-radius: 3px; box-shadow: var(--hairline); overflow: hidden; }
.mi-card-head { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border-bottom: 1px solid var(--hair-3); }
.mi-card-head h3 { margin: 0; font-size: 0.90625rem; font-weight: 600; color: var(--ink); flex: 1; }
.ic-circle { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.ic-circle.green { background: var(--brand-tint); color: var(--brand); }
.ic-circle.orange { background: var(--orange-bg); color: var(--orange); }
.mi-active-pill { font-size: 0.71875rem; font-weight: 600; color: var(--ok); background: var(--ok-bg); border-radius: 999px; padding: 2px 8px; }

.ask-input { display: flex; gap: 8px; align-items: flex-end; background: var(--panel-2); border-radius: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--hair); }
.ask-input textarea { flex: 1; border: 0; background: transparent; outline: 0; resize: none; font: inherit; font-size: 0.8125rem; color: var(--ink); line-height: 1.4; min-height: 0; }
.ask-send { width: 32px; height: 32px; border-radius: 7px; border: 0; background: var(--brand-solid); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; padding: 0; }
.ask-sugg { display: flex; flex-direction: column; gap: 6px; margin-top: 11px; }
.ask-sugg button { text-align: left; font-size: 0.78125rem; color: var(--brand); background: var(--surface); border: 1px solid var(--brand-badge); border-radius: 7px; padding: 8px 11px; display: flex; align-items: center; gap: 8px; font-weight: 500; }
.ask-sugg button:hover { background: var(--surface); color: var(--brand); border-color: var(--brand-badge); }
.ask-loading { margin-top: 12px; font-size: 0.78125rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.ask-answer { font-size: 0.8125rem; color: var(--ink); line-height: 1.55; background: var(--panel-2); border-radius: 8px; padding: 12px 13px; border-left: 2.5px solid var(--brand); white-space: pre-wrap; }
.ask-actions { display: flex; gap: 14px; margin-top: 9px; }
.ask-actions button { font-size: 0.75rem; font-weight: 600; color: var(--brand); background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 5px; }
.ask-actions button:hover { background: none; color: var(--brand-press); }
.ask-actions button.mut { color: var(--muted); }
.spin { animation: mi-spin 1s linear infinite; display: inline-flex; }

.digest-prev { padding: 13px 15px; border-bottom: 1px solid var(--hair-3); }
.dp-eyebrow { font-size: 0.6875rem; color: var(--faint); margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.dp-eyebrow strong { color: var(--body); font-weight: 600; }
.dp-card { border-radius: 8px; overflow: hidden; box-shadow: var(--hairline); }
.dp-band { background: var(--brand-solid); padding: 11px 13px; color: #fff; }
.dp-kicker { font-size: 0.59375rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; opacity: .7; }
.dp-title { font-size: 0.9375rem; font-weight: 600; margin-top: 3px; }
.dp-body { padding: 12px 13px; background: var(--panel); }
.dp-copy { font-size: 0.75rem; color: var(--body); line-height: 1.5; }
.dp-copy .up { color: var(--ok); }
.dp-tiles { display: flex; gap: 8px; margin-top: 10px; }
.dp-tile { flex: 1; background: var(--panel-2); border-radius: 6px; padding: 8px 9px; }
.dp-tile .l { font-size: 0.5625rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.dp-tile .v { font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.dp-foot { font-size: 0.6875rem; color: var(--faint); text-align: center; margin-top: 7px; }
.digest-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 15px; border-top: 1px solid var(--hair-2); cursor: pointer; }
.digest-row:first-child { border-top: 0; }
.digest-row.on { background: var(--surface); }
.dr-av { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-solid); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 600; flex: none; margin-top: 1px; }
.dr-av.off { background: var(--surface); }
.dr-top { display: flex; align-items: center; gap: 7px; }
.dr-name { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.dr-deal { font-size: 0.625rem; font-weight: 600; border-radius: 4px; padding: 1px 6px; }
.dr-deal.buy { color: var(--info); background: var(--info-bg); }
.dr-deal.sell { color: var(--orange); background: var(--orange-bg); }
.dr-scope { display: inline-flex; background: var(--hair-2); border-radius: 7px; padding: 2px; margin-top: 6px; }
.dr-scope button { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; font-weight: 600; border: 0; border-radius: 5px; padding: 4px 8px; background: transparent; color: var(--muted); }
.dr-scope button:hover { background: transparent; color: var(--body); }
.dr-scope button.on, .dr-scope button.on:hover { background: var(--panel); color: var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.dr-sub { font-size: 0.71875rem; color: var(--faint); display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.dr-sub .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch { position: relative; width: 34px; height: 20px; border-radius: 999px; border: 0; background: var(--control-border); flex: none; padding: 0; margin-top: 2px; transition: background .15s; }
.switch:hover { background: var(--dashed-border); }
.switch.on, .switch.on:hover { background: var(--brand); }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); transition: left .15s; }
.switch.on .knob { left: 16px; }
.dashed-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 0.8125rem; font-weight: 600; padding: 9px; border-radius: 7px; border: 1px dashed var(--dashed-border); background: var(--panel); color: var(--brand); }
.dashed-btn:hover { background: var(--surface); border-color: var(--brand); color: var(--brand); }

@media (max-width: 1180px) {
  .mi-grid { grid-template-columns: 1fr; }
  .mi-rail { position: static; }
  .mi-charts { grid-template-columns: 1fr; }
  .mi-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ── Market KPI cards (own class to avoid the .kpi dashboard-grid collision) ── */
.mi-kpi { background: var(--panel); border-radius: 3px; box-shadow: var(--hairline); padding: 13px 15px; }
.mi-kpi .kpi-val { margin-top: 7px; }
.kpi-hint { font-size: 0.6875rem; color: var(--faint); margin-top: 5px; }

/* ── Client digests (per-contact saved searches / market updates) ───────────── */
.cd-section { margin: 18px 0 4px; padding-top: 16px; border-top: 1px solid var(--hair-2); }
.cd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cd-head h3 { display: flex; align-items: center; gap: 7px; font-size: 0.875rem; font-weight: 600; color: var(--ink); margin: 0; }
.cd-hint { font-size: 0.71875rem; color: var(--muted); }
.cd-group { margin-bottom: 12px; }
.cd-label { display: flex; align-items: center; gap: 6px; font-size: 0.71875rem; font-weight: 600; color: var(--body); letter-spacing: .2px; margin-bottom: 6px; }
.cd-empty { font-size: 0.78125rem; color: var(--muted); padding: 6px 0; }
.cd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--hair-2); border-radius: 7px; margin-bottom: 6px; }
.cd-row strong { display: block; font-size: 0.84375rem; color: var(--ink); }
.cd-sum { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.cd-check { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--body); margin-top: 12px; }
.cd-check input { width: auto; }

/* ── Clients CRM (master/detail people layer) ──────────────────────────────── */
.cr { display: flex; flex-direction: column; height: 100%; }
.cr-head { flex: none; padding: 18px 24px 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cr-head h1 { margin: 0; font-size: 1.4375rem; font-weight: 600; letter-spacing: -.5px; color: var(--ink); }
.cr-head .sub { margin: 4px 0 0; font-size: 0.84375rem; color: var(--muted); }
.cr-head .acts { display: flex; gap: 10px; }
.cr-grid { flex: 1; display: grid; grid-template-columns: minmax(360px, .9fr) 1.6fr; min-height: 0; padding: 16px 24px 16px; }
@media (max-width: 980px) { .cr-grid { grid-template-columns: 1fr; } }
/* Phone: the CRM list + detail stack into a scrollable list over a scrollable detail. */
@media (max-width: 860px) { .cr-grid { grid-template-rows: minmax(0, 46vh) minmax(0, 1fr); } }

.cr-list { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-radius: 3px 0 0 3px; box-shadow: var(--hairline); }
.cr-filter { padding: 12px 14px; border-bottom: 1px solid var(--hair-2); display: flex; flex-direction: column; gap: 10px; }
.cr-search { display: flex; align-items: center; gap: 8px; background: var(--canvas); border-radius: 7px; padding: 8px 11px; }
.cr-search input { flex: 1; border: 0; background: transparent; outline: 0; font: inherit; font-size: 0.8125rem; }
.cr-seg { display: flex; align-items: center; gap: 6px; }
.cr-seg .segbtn { font: inherit; font-size: 0.78125rem; font-weight: 600; cursor: pointer; border: 0; border-radius: 6px; padding: 5px 11px; background: transparent; color: var(--muted); }
.cr-seg .segbtn.on { background: var(--brand-tint); color: var(--brand); }
.cr-sortbtn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--body); background: transparent; border: 0; cursor: pointer; padding: 0; }
.cr-rows { flex: 1; overflow-y: auto; }
.cr-row { display: flex; gap: 11px; align-items: center; padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--hair-3); border-left: 2.5px solid transparent; }
.cr-row:hover { background: var(--panel-2); }
.cr-row.sel { background: var(--surface); border-left-color: var(--brand); }
.cr-row .nm { display: flex; align-items: center; gap: 7px; }
.cr-row .nm span { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.cr-row .meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.cr-role { font-size: 0.71875rem; color: var(--faint); }
.cr-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.cr-tags .t { font-size: 0.65625rem; color: var(--body); background: var(--canvas); border: 1px solid var(--hair); border-radius: 4px; padding: 1px 6px; }
.cr-tags .more { font-size: 0.65625rem; color: var(--label); }

.cr-avatar { border-radius: 50%; background: var(--cream); color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }
.cr-avatar.sm { width: 38px; height: 38px; font-size: 0.8125rem; }
.cr-avatar.md { width: 36px; height: 36px; font-size: 0.8125rem; }
.cr-avatar.lg { width: 52px; height: 52px; font-size: 1.125rem; background: var(--brand-solid); color: #fff; }

.cr-stage { font-size: 0.6875rem; font-weight: 600; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.cr-band { font-size: 0.59375rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }

.cr-detail { display: flex; flex-direction: column; min-height: 0; background: var(--panel-2); border-radius: 0 3px 3px 0; box-shadow: var(--hairline); }
.cr-dhead { flex: none; padding: 18px 22px 0; border-bottom: 1px solid var(--hair-2); background: var(--panel); border-radius: 0 3px 0 0; }
.cr-dtop { display: flex; align-items: flex-start; gap: 14px; }
.cr-dtop h2 { margin: 0; font-size: 1.1875rem; font-weight: 600; color: var(--ink); }
.cr-contact { display: flex; align-items: center; gap: 14px; margin-top: 5px; font-size: 0.78125rem; color: var(--muted); flex-wrap: wrap; }
.cr-contact span { display: inline-flex; align-items: center; gap: 5px; }
.cr-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.cr-tabs { display: flex; gap: 4px; margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cr-tab { font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; border: 0; background: transparent; padding: 9px 12px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; flex: none; white-space: nowrap; }
.cr-tab.on { color: var(--brand); border-bottom-color: var(--brand); }
.cr-dbody { flex: 1; overflow-y: auto; padding: 20px; }

.cr-card { background: var(--panel); border-radius: 3px; box-shadow: var(--hairline); margin-bottom: 14px; }
.cr-card-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--hair-2); }
.cr-card-h h3 { margin: 0; font-size: 0.84375rem; font-weight: 600; color: var(--ink); }
.cr-card-b { padding: 16px; }
.cr-card-b.flush { padding: 0; }
.cr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .cr-two { grid-template-columns: 1fr; } }

.cr-part { margin-bottom: 11px; }
.cr-part .lbl { display: flex; justify-content: space-between; margin-bottom: 5px; }
.cr-part .lbl .k { font-size: 0.78125rem; color: var(--body); font-weight: 500; }
.cr-part .lbl .k .d { color: var(--faint); font-weight: 400; }
.cr-part .lbl .v { font-size: 0.75rem; font-weight: 700; color: var(--body); font-family: "Space Mono", monospace; }
.cr-track { height: 5px; border-radius: 3px; background: var(--hair-2); overflow: hidden; }
.cr-track > span { display: block; height: 100%; opacity: .85; }
.cr-note { font-size: 0.6875rem; color: var(--label); margin-top: 12px; }

.cr-chiprow { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.cr-tagchip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 500; color: var(--brand); background: var(--brand-tint); border-radius: 999px; padding: 5px 10px; }
.cr-tagchip .x { display: inline-flex; cursor: pointer; opacity: .6; }
.cr-addtag-wrap { position: relative; }
.cr-addtag { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--muted); background: var(--input-bg); border: 1px dashed var(--dashed-border); border-radius: 999px; padding: 5px 10px; cursor: pointer; }
.cr-pop { position: absolute; top: calc(100% + 6px); left: 0; width: 200px; max-height: 200px; overflow-y: auto; background: var(--panel); border-radius: 8px; box-shadow: var(--shadow-overlay); padding: 6px; z-index: 20; }
.cr-pop .opt { padding: 7px 9px; border-radius: 6px; cursor: pointer; font-size: 0.78125rem; color: var(--ink); }
.cr-pop .opt:hover { background: var(--brand-tint); }

.cr-snaprow { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--hair-3); font-size: 0.78125rem; }
.cr-snaprow .k { color: var(--muted); }
.cr-snaprow .v { color: var(--ink); font-weight: 600; }

.cr-freq { display: inline-flex; background: var(--hair-2); border-radius: 7px; padding: 2px; }
.cr-freq button { font: inherit; font-size: 0.71875rem; font-weight: 600; cursor: pointer; border: 0; border-radius: 5px; padding: 4px 10px; background: transparent; color: var(--muted); }
.cr-freq button.on { background: var(--panel); color: var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

.cr-srow { padding: 13px 16px; border-top: 1px solid var(--hair-3); }
.cr-srow:first-child { border-top: 0; }
.cr-srow .top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cr-srow .top .nm { font-size: 0.84375rem; font-weight: 600; color: var(--ink); }
.cr-srow .top .ct { font-size: 0.75rem; color: var(--muted); margin-top: 1px; }
.cr-srow .freqline { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.cr-srow .freqline .albl { font-size: 0.6875rem; color: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }

.cr-homes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .cr-homes { grid-template-columns: 1fr; } }
.cr-home { display: flex; gap: 11px; padding: 11px; border-radius: 6px; box-shadow: var(--hairline); }
.cr-home .ic { width: 44px; height: 44px; border-radius: 5px; background: var(--cream); display: flex; align-items: center; justify-content: center; flex: none; color: var(--brand); }
.cr-home .addr { font-size: 0.8125rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-home .sub { font-size: 0.71875rem; color: var(--muted); margin-top: 2px; }
.cr-home .price { font-family: "Space Mono", monospace; font-size: 0.8125rem; font-weight: 700; color: var(--brand); margin-top: 3px; }

.cr-member { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--hair); margin-bottom: 8px; }
.cr-member.cur { box-shadow: inset 0 0 0 1.5px var(--brand); }
.cr-member .nm { font-size: 0.84375rem; font-weight: 600; color: var(--ink); }
.cr-member .sub { font-size: 0.71875rem; color: var(--muted); }
.cr-dashed { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; font: inherit; font-size: 0.78125rem; font-weight: 600; color: var(--brand); background: var(--input-bg); border: 1px dashed var(--dashed-border); border-radius: 7px; padding: 9px; cursor: pointer; }

.cr-cross-intro { font-size: 0.8125rem; color: var(--ink); line-height: 1.55; margin-bottom: 13px; }
.cr-cross { display: flex; align-items: center; gap: 12px; padding: 11px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--hair); margin-bottom: 8px; }
.cr-cross.both { box-shadow: inset 0 0 0 1.5px var(--brand-badge); background: var(--surface); }
.cr-cross .reason { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 0.6875rem; font-weight: 600; }
.cr-aibadge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; font-weight: 600; color: var(--brand); background: var(--brand-tint); border-radius: 999px; padding: 3px 9px; }

.cr-act { display: flex; gap: 12px; }
.cr-act .rail { display: flex; flex-direction: column; align-items: center; }
.cr-act .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--canvas); display: flex; align-items: center; justify-content: center; flex: none; }
.cr-act .line { width: 1.5px; flex: 1; background: var(--hair); margin-top: 4px; }
.cr-act .body { flex: 1; padding-top: 4px; }
.cr-act .body .tx { font-size: 0.8125rem; color: var(--ink); }
.cr-act .body .ago { font-size: 0.71875rem; color: var(--faint); margin-top: 1px; }

.cr-mini-ring { flex: none; }
.cr-share { margin-top: 6px; font: inherit; font-size: 0.6875rem; font-weight: 600; color: var(--brand); background: var(--brand-tint); border: 0; border-radius: 6px; padding: 4px 9px; cursor: pointer; }

/* ── Offers (offer management) ──────────────────────────────────────────────── */
.of-lab { font-size: 0.71875rem; font-weight: 600; color: var(--body); display: block; margin-bottom: 6px; }
.of-inp { width: 100%; box-sizing: border-box; border: 1px solid var(--control-border); border-radius: 7px; padding: 9px 11px; font-family: inherit; font-size: 0.84375rem; color: var(--ink); background: var(--panel); outline: none; }
.of-inp:focus { border-color: var(--brand); }
.of-section { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--label); margin-bottom: 12px; }
.of-term { background: var(--panel); border-radius: 6px; padding: 10px 12px; box-shadow: var(--hairline); }
.of-term .k { font-size: 0.625rem; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.of-term .v { font-size: 0.84375rem; font-weight: 600; color: var(--ink); margin-top: 3px; }
.of-term .v.strong { font-size: 1rem; font-weight: 700; color: var(--brand); }
.of-rl { padding: 11px 14px; border-bottom: 1px solid var(--hair-2); font-size: 0.75rem; font-weight: 600; color: var(--body); text-transform: uppercase; letter-spacing: .4px; position: sticky; left: 0; background: var(--panel-2); white-space: nowrap; }
.of-rl .of-sub { font-size: 0.625rem; font-weight: 400; color: var(--label); text-transform: none; letter-spacing: 0; margin-top: 1px; }
.of-cell { padding: 11px 14px; border-bottom: 1px solid var(--hair-2); font-size: 0.8125rem; font-weight: 500; color: var(--ink); white-space: nowrap; }

/* consumer reCURSIVE eSign chips */
.sg-chip { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; padding: 9px 14px; border-radius: 9px; border: 1px solid var(--control-border); background: var(--panel); color: var(--body); }

/* ── Knowledgebase / LMS ───────────────────────────────────────────────────── */
.kb-wrap { max-width: 1180px; margin: 0 auto; padding: 26px 28px 64px; }
.kb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.kb-eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.kb-h1 { margin: 0; font-size: 1.6875rem; font-weight: 600; letter-spacing: -.6px; color: var(--ink); }
.kb-sub { margin: 5px 0 0; font-size: 0.875rem; color: var(--muted); }
.kb-searchbox { display: flex; align-items: center; gap: 9px; background: var(--panel); border: 1px solid var(--control-border); border-radius: 8px; padding: 9px 13px; min-width: 280px; }
.kb-searchbox input { flex: 1; border: 0; background: transparent; outline: 0; font: inherit; font-size: 0.8125rem; color: var(--ink); }
.kb-searchbox .ic { color: var(--label); }
.kb-sectitle { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: .4px; color: var(--ink); }
.kb-sectitle .ic { color: var(--brand); }
.kb-soon { font-size: 0.6875rem; font-weight: 600; color: var(--warn-ink); background: var(--warn-bg); border-radius: 4px; padding: 2px 7px; letter-spacing: .3px; }
.kb-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kb-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kb-block { margin-bottom: 30px; }
.kb-path { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.kb-path-top { display: flex; align-items: center; justify-content: space-between; }
.kb-path-ic { width: 38px; height: 38px; border-radius: 8px; background: var(--brand-tint); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; color: var(--brand); }
.kb-path-title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.kb-path-desc { font-size: 0.78125rem; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.kb-ce { font-size: 0.625rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--info); background: var(--info-bg); border-radius: 4px; padding: 2px 7px; }
.kb-bar { height: 6px; border-radius: 4px; background: var(--surface); overflow: hidden; }
.kb-bar > i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.kb-path-foot { display: flex; justify-content: space-between; margin-top: 7px; font-size: 0.71875rem; color: var(--muted); }
.kb-resume { font-weight: 600; color: var(--brand); }
.kb-card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); cursor: pointer; overflow: hidden; transition: box-shadow .15s ease; }
.kb-card:hover { box-shadow: var(--hairline), 0 6px 18px rgba(0,0,0,.08); }
.kb-thumb { height: 132px; border-radius: 3px 3px 0 0; position: relative; overflow: hidden; background: var(--hair-2); display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; }
.kb-thumb.sm { height: 120px; }
.kb-thumb-ph { font-size: 2.125rem; color: var(--faint); }
.kb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,40,28,.28); }
.kb-play > span { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--brand); }
.kb-dur { position: absolute; bottom: 8px; right: 8px; font-family: 'Space Mono', monospace; font-size: 0.65625rem; font-weight: 600; color: #fff; background: rgba(0,0,0,.6); border-radius: 4px; padding: 2px 6px; }
.kb-cardbody { padding: 11px 13px 14px; }
.kb-typebadge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.65625rem; font-weight: 600; letter-spacing: .3px; border-radius: 4px; padding: 3px 7px; }
.kb-typebadge.video { color: var(--orange); background: var(--orange-bg); }
.kb-typebadge.pdf { color: var(--brand); background: var(--brand-tint); }
.kb-typebadge.article { color: var(--info); background: var(--info-bg); }
.kb-cardtitle { font-size: 0.84375rem; font-weight: 600; color: var(--ink); margin-top: 8px; line-height: 1.3; }
.kb-carddesc { font-size: 0.75rem; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.kb-cardmeta { font-size: 0.71875rem; color: var(--label); margin-top: 8px; }
.kb-browse { display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: start; }
.kb-rail-h { font-size: 0.65625rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--label); padding: 0 10px 8px; }
.kb-rail-g { font-size: 0.625rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); padding: 0 10px 5px; margin-top: 14px; }
.kb-rail-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 0.84375rem; color: var(--label); }
.kb-rail-item:hover { background: var(--surface); }
.kb-rail-item.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.kb-rail-item.active .ic { color: var(--brand); }
.kb-types { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.kb-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.78125rem; font-weight: 600; border: 1px solid var(--control-border); background: var(--panel); color: var(--body); border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.kb-chip.active { border-color: var(--brand-solid); background: var(--brand-solid); color: #fff; }
.kb-count { font-size: 0.75rem; color: var(--label); }
.kb-global { display: inline-flex; align-items: center; font-size: 0.59375rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--brand); background: var(--brand-badge); border-radius: 4px; padding: 3px 6px; margin-left: 6px; }
/* article body (block doc) rendering on the reader */
.kb-doc h2 { font-size: 1.25rem; font-weight: 600; color: var(--ink); margin: 18px 0 10px; }
.kb-doc h3 { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 16px 0 8px; }
.kb-doc p { font-size: 0.9375rem; line-height: 1.7; color: var(--body); margin: 0 0 14px; }
.kb-doc ul, .kb-doc ol { font-size: 0.9375rem; line-height: 1.8; color: var(--body); padding-left: 22px; margin: 0 0 14px; }
.kb-doc blockquote { border-left: 3px solid var(--brand); background: var(--surface); padding: 12px 16px; border-radius: 0 6px 6px 0; margin: 0 0 16px; font-size: 0.875rem; color: var(--body); line-height: 1.6; }
.kb-doc pre { background: #1c1c1c; color: #e7e1d4; border-radius: 8px; padding: 14px 16px; overflow-x: auto; font-family: 'Space Mono', monospace; font-size: 0.78125rem; margin: 0 0 16px; }
.kb-doc img { max-width: 100%; border-radius: 6px; margin: 0 0 6px; display: block; }
.kb-doc figcaption { font-size: 0.71875rem; color: var(--label); margin: 0 0 16px; }

/* ── Admin KB manager ──────────────────────────────────────────────────────── */
.ak-wrap { max-width: 1240px; margin: 0 auto; padding: 26px 28px 64px; }
.ak-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.ak-kpi { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 15px 16px; display: flex; align-items: center; gap: 12px; }
.ak-kpi-ic { width: 38px; height: 38px; border-radius: 8px; background: var(--brand-tint); display: flex; align-items: center; justify-content: center; flex: none; color: var(--brand); }
.ak-kpi .n { font-family: 'Space Mono', monospace; font-size: 1.3125rem; font-weight: 700; color: var(--ink); }
.ak-kpi .k { font-size: 0.6875rem; color: var(--label); text-transform: uppercase; letter-spacing: .5px; }
.ak-grid { display: grid; grid-template-columns: 256px 1fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .ak-grid { grid-template-columns: 1fr; } .ak-tree { position: static; } }
.ak-tree { position: sticky; top: 0; background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 12px 10px; }
.ak-tree-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 10px; }
.ak-tree-head .h { font-size: 0.65625rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--label); }
.ak-treerow { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: 0.8125rem; color: var(--body); }
.ak-treerow:hover { background: var(--surface); }
.ak-treerow.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.ak-treerow.active .ic { color: var(--brand); }
.ak-list { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); overflow: hidden; }
.ak-list-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hair-2); }
.ak-irow { display: grid; grid-template-columns: 1fr 120px 90px 120px; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--hair-3); align-items: center; cursor: pointer; }
.ak-irow:hover { background: var(--surface); }
.ak-irow:last-child { border-bottom: 0; }
.ak-mini { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 0.71875rem; font-weight: 600; color: var(--body); background: var(--surface); border: 1px solid var(--hair); border-radius: 6px; padding: 5px 9px; cursor: pointer; }
.ak-crumb { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; font-size: 0.78125rem; color: var(--muted); }
.ak-editor { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 22px; }
.ak-editor-grid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
@media (max-width: 860px) { .ak-editor-grid { grid-template-columns: 1fr; } }
.ak-lbl { display: block; font-size: 0.65625rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--label); margin: 14px 0 7px; }
.ak-lbl:first-child { margin-top: 0; }
.ak-input, .ak-select, .ak-textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--control-border); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 0.84375rem; color: var(--ink); outline: 0; background: var(--panel); }
.ak-textarea { resize: vertical; line-height: 1.5; }
.ak-block { border: 1px solid var(--hair); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.ak-block-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.ak-block-bar select { font: inherit; font-size: 0.75rem; border: 1px solid var(--control-border); border-radius: 6px; padding: 4px 7px; color: var(--body); background: var(--panel); }
.ak-block-x { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--label); display: flex; padding: 2px; }
.ak-rail { border-radius: var(--radius); }
.ak-rail-sect { border: 1px solid var(--hair); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.ak-rail-h { font-size: 0.65625rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--label); margin-bottom: 11px; }
.ak-toggle { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.ak-sw { width: 36px; height: 20px; border-radius: 999px; flex: none; background: var(--surface); position: relative; transition: background .15s; }
.ak-sw.on { background: var(--brand); }
.ak-sw > i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); transition: left .15s; }
.ak-sw.on > i { left: 18px; }
.ak-soon { font-size: 0.625rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--warn-ink); background: var(--warn-bg); border-radius: 4px; padding: 2px 6px; }
.kb-modal-back { position: fixed; inset: 0; background: rgba(20,28,22,.5); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 30px; }
.kb-modal { width: 760px; max-width: 100%; max-height: 100%; background: var(--panel); border-radius: 4px; box-shadow: 0 18px 60px rgba(0,0,0,.3); overflow: hidden; display: flex; flex-direction: column; }
.kb-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--hair); }
.kb-modal-head .ic { color: var(--brand); }
.kb-modal-body { overflow-y: auto; }
.kb-video { height: 380px; background: #1c1c1c; position: relative; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; }
.kb-video .kb-play-lg { position: relative; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: var(--brand); }
.kb-video-scrim { position: absolute; inset: 0; background: rgba(0,40,28,.4); }
.kb-lms-strip { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--hair); background: var(--panel-2); flex-wrap: wrap; }
.kb-x { border: 0; background: none; cursor: pointer; color: var(--muted); display: flex; padding: 0; }
.kb-x:hover { background: none; color: var(--ink); }

/* ── Support / ticketing ───────────────────────────────────────────────────── */
.sp-wrap { max-width: 1100px; margin: 0 auto; padding: 26px 28px 64px; }
.sp-stats { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.sp-stat { flex: 1; min-width: 120px; background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 14px 16px; }
.sp-stat .n { font-family: 'Space Mono', monospace; font-size: 1.375rem; font-weight: 700; }
.sp-stat .k { font-size: 0.71875rem; color: var(--label); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.sp-kbcta { flex: 2; min-width: 240px; background: var(--brand-solid); border-radius: var(--radius); padding: 14px 18px; display: flex; align-items: center; gap: 12px; cursor: pointer; color: #fff; }
.sp-kbcta .ic-wrap { width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; font-size: 1.1875rem; flex: none; }
.sp-kbcta .ic { color: rgba(255,255,255,.85); }
.sp-table { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); overflow: hidden; }
.sp-thead, .sp-trow { display: grid; grid-template-columns: 1fr 130px 120px 110px; gap: 12px; padding: 12px 18px; align-items: center; }
.sp-thead { border-bottom: 1px solid var(--hair-2); font-size: 0.65625rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--label); }
.sp-trow { border-bottom: 1px solid var(--hair-3); cursor: pointer; }
.sp-trow:hover { background: var(--surface); }
.sp-ref { font-family: 'Space Mono', monospace; font-size: 0.71875rem; color: var(--label); }
.sp-subj { font-size: 0.84375rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-tag { font-size: 0.65625rem; color: var(--body); background: var(--hair-2); border-radius: 4px; padding: 2px 7px; }
.sp-chan { display: inline-flex; align-items: center; gap: 5px; font-size: 0.71875rem; color: var(--muted); }
.sp-chan .ic { color: var(--label); }
.sp-form-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
.sp-card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 22px; }
.sp-lbl { display: block; font-size: 0.65625rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--label); margin-bottom: 7px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.sp-chip { font: inherit; font-size: 0.78125rem; font-weight: 600; border: 1px solid var(--control-border); background: var(--panel); color: var(--body); border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.sp-chip.active { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.sp-input, .sp-textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--control-border); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 0.84375rem; color: var(--ink); outline: 0; }
.sp-textarea { resize: vertical; line-height: 1.5; }
.sp-suggest { position: sticky; top: 0; background: var(--brand-tint); border: 1px solid var(--brand-badge); border-radius: 10px; padding: 16px; }
.sp-suggest-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 0.78125rem; font-weight: 600; color: var(--brand); }
.sp-suggest-sub { margin: 0 0 12px; font-size: 0.71875rem; color: var(--body); line-height: 1.45; }
.sp-suggest-list { display: flex; flex-direction: column; gap: 8px; }
.sp-suggest-card { display: flex; gap: 11px; align-items: center; padding: 10px 11px; border: 1px solid var(--control-border); border-radius: 8px; cursor: pointer; background: var(--panel); }
.sp-suggest-card:hover { border-color: var(--brand-badge); }
.sp-suggest-ic { width: 34px; height: 34px; border-radius: 7px; flex: none; background: var(--brand-tint); display: flex; align-items: center; justify-content: center; color: var(--brand); }
.sp-thread { overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.sp-msg-row { display: flex; gap: 11px; }
.sp-msg-row.staff { flex-direction: row-reverse; }
.sp-msg-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.75rem; background: var(--cream); color: var(--brand); }
.sp-msg-row.staff .sp-msg-av { background: var(--brand-solid); color: #fff; }
.sp-msg-bubble { max-width: 78%; }
.sp-msg-body { font-size: 0.8125rem; color: var(--ink); background: var(--surface); border-radius: 10px; padding: 11px 13px; line-height: 1.5; white-space: pre-wrap; }
.sp-msg-row.staff .sp-msg-body { background: var(--brand-tint); }
.sp-msg-meta { font-size: 0.6875rem; color: var(--label); margin-top: 4px; }
.sp-reply { border-top: 1px solid var(--hair); padding: 12px 16px; display: flex; gap: 10px; align-items: center; }
.sp-reply input { flex: 1; border: 1px solid var(--control-border); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 0.8125rem; outline: 0; }

/* ── Global Help (?) menu ──────────────────────────────────────────────────── */
.hm-pop { width: 320px; padding: 0; overflow: hidden; }
.hm-head { padding: 14px 16px; border-bottom: 1px solid var(--hair-2); }
.hm-head .t { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.hm-head .s { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.hm-actions { padding: 8px; }
.hm-item { display: flex; gap: 11px; align-items: center; padding: 10px 11px; border-radius: 8px; cursor: pointer; }
.hm-item:hover { background: var(--surface); }
.hm-item-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--brand-tint); display: flex; align-items: center; justify-content: center; flex: none; color: var(--brand); }
.hm-item .tt { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.hm-item .ss { font-size: 0.6875rem; color: var(--label); line-height: 1.35; }
.hm-foot { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 12px 12px; border-top: 1px solid var(--hair-3); margin-top: 4px; font-size: 0.71875rem; color: var(--muted); min-width: 0; }
.hm-foot span, .hm-foot-link { display: inline-flex; align-items: flex-start; gap: 6px; color: inherit; text-decoration: none; max-width: 100%; min-width: 0; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.hm-foot-link:hover { color: var(--brand); }
.hm-chat { display: flex; flex-direction: column; height: 380px; }
.hm-chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--hair-2); }
.hm-chat-av { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-solid); display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.hm-chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--panel-2); }
.hm-bubble { align-self: flex-start; max-width: 88%; font-size: 0.78125rem; color: var(--ink); background: var(--panel); border: 1px solid var(--hair); border-radius: 10px; padding: 9px 11px; line-height: 1.5; }
.hm-bubble.me { align-self: flex-end; background: var(--brand-tint); border-color: var(--brand-badge); }
.hm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-chip { font-size: 0.71875rem; font-weight: 600; color: var(--brand); background: var(--brand-tint); border: 1px solid var(--brand-badge); border-radius: 999px; padding: 5px 10px; cursor: pointer; }
.hm-scard { display: flex; gap: 9px; align-items: center; background: var(--panel); border: 1px solid var(--hair); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.hm-scard .ic { color: var(--brand); }
.hm-escalate { display: inline-flex; gap: 6px; align-items: center; align-self: flex-start; font-size: 0.71875rem; font-weight: 600; color: var(--brand); background: var(--brand-tint); border: 1px solid var(--brand-badge); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.hm-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--hair-2); }
.hm-input input { flex: 1; border: 1px solid var(--control-border); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 0.78125rem; outline: 0; }
.hm-send { border: 0; background: var(--brand-solid); border-radius: 8px; width: 38px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; padding: 0; }
.hm-back-btn { border: 0; background: none; cursor: pointer; display: flex; padding: 0; color: var(--muted); }

/* ── Admin Support desk (queue · conversation · member context) ─────────────── */
.ds { height: 100%; display: grid; grid-template-columns: 330px 1fr 312px; background: var(--canvas); overflow: hidden; }
@media (max-width: 1100px) { .ds { grid-template-columns: 300px 1fr; } .ds-ctx { display: none; } }
/* Phone: the support desk queue + conversation stack vertically (each scrolls). */
@media (max-width: 820px) { .ds { grid-template-columns: 1fr; grid-template-rows: minmax(0, 42vh) minmax(0, 1fr); } }
.ds-unauth { padding: 56px 20px; text-align: center; color: var(--muted); }
.ds-queue { border-right: 1px solid var(--hair); background: var(--panel); display: flex; flex-direction: column; overflow: hidden; }
.ds-queue-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--hair-2); }
/* GAP IS LOAD-BEARING HERE, not decoration. This row was h1 + count with space-between doing the
   separating; adding the settings cog with `margin-left: auto` made that auto margin absorb ALL the
   free space before space-between could distribute any, so the count ended up flush against the
   heading — measured at a 0.0px gap in the browser harness. The explicit gap separates the pair and the
   auto margin still pushes the cog to the edge. (Copilot, suppressed.) */
.ds-queue-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ds-queue-title h1 { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.ds-open-count { font-size: 0.71875rem; font-weight: 600; color: var(--brand); background: var(--brand-badge); border-radius: 999px; padding: 3px 9px; }
/* The reverse cross-link to Settings → Support. `margin-left:auto` pushes it to the far end of the
   title row so it reads as a chrome affordance rather than part of the open-count badge. */
.ds-cog { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--label); }
.ds-cog:hover { background: var(--hair-2); color: var(--ink); }
.ds-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-fchip { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 0.71875rem; font-weight: 600; border: 1px solid var(--control-border); background: var(--panel); color: var(--body); border-radius: 999px; padding: 5px 10px; cursor: pointer; }
.ds-fchip.active { border-color: var(--brand-solid); background: var(--brand-solid); color: #fff; }
.ds-list { overflow-y: auto; flex: 1; }
.ds-row { display: flex; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--hair-3); cursor: pointer; border-left: 3px solid transparent; }
.ds-row:hover { background: var(--surface); }
.ds-row.active { background: var(--brand-tint); border-left-color: var(--brand); }
.ds-av { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--cream); color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.75rem; }
.ds-row-subj { font-size: 0.8125rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ds-row-sub { font-size: 0.71875rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-row-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.65625rem; color: var(--label); }
.ds-prio { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none; }
.ds-conv { display: flex; flex-direction: column; overflow: hidden; background: var(--canvas); }
.ds-conv-head { background: var(--panel); border-bottom: 1px solid var(--hair); padding: 14px 22px; }
.ds-conv-row { display: flex; align-items: center; gap: 10px; }
.ds-conv-title { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ds-conv-title h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; flex: 1; color: var(--ink); }
.ds-related { display: flex; align-items: center; gap: 10px; margin-top: 11px; background: var(--surface); border: 1px solid var(--control-border); border-radius: 8px; padding: 9px 12px; }
.ds-thread { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.ds-banner { display: flex; align-items: center; gap: 9px; align-self: center; font-size: 0.71875rem; color: var(--muted); background: var(--panel); border: 1px solid var(--hair); border-radius: 999px; padding: 5px 13px; }
.ds-msg { display: flex; gap: 11px; }
.ds-msg.staff { flex-direction: row-reverse; }
.ds-msg-bubble { max-width: 76%; }
.ds-msg-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 0.65625rem; color: var(--label); }
.ds-msg.staff .ds-msg-head { flex-direction: row-reverse; }
.ds-msg-body { font-size: 0.8125rem; color: var(--ink); background: var(--panel); border: 1px solid var(--hair); border-radius: 10px; padding: 12px 14px; line-height: 1.55; white-space: pre-wrap; }
.ds-msg.staff .ds-msg-body { background: var(--brand-tint); border: 0; }
.ds-composer { background: var(--panel); border-top: 1px solid var(--hair); padding: 12px 18px 16px; }
.ds-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.ds-tab { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.78125rem; font-weight: 600; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); padding: 6px 11px; cursor: pointer; }
.ds-tab.active { border-bottom-color: var(--brand); color: var(--brand); }
.ds-reply-box { border: 1px solid var(--control-border); border-radius: 10px; overflow: hidden; }
.ds-reply-box textarea { width: 100%; box-sizing: border-box; border: 0; outline: 0; resize: vertical; font: inherit; font-size: 0.84375rem; color: var(--ink); padding: 12px; line-height: 1.55; }
.ds-reply-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--hair-2); background: var(--panel-2); }
.ds-sig { margin: 0 12px 12px; padding-top: 12px; border-top: 1px solid var(--hair-2); display: flex; align-items: center; gap: 11px; }
.ds-kbpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ds-kbcard { display: flex; gap: 9px; align-items: center; border: 1px solid var(--control-border); border-radius: 8px; padding: 9px 10px; cursor: pointer; }
.ds-kbcard:hover { border-color: var(--brand-badge); }
.ds-kbic { width: 30px; height: 30px; border-radius: 6px; background: var(--brand-tint); display: flex; align-items: center; justify-content: center; flex: none; color: var(--brand); }
.ds-ctx { border-left: 1px solid var(--hair); background: var(--panel); overflow-y: auto; }
.ds-ctx-head { padding: 20px 18px; border-bottom: 1px solid var(--hair-2); text-align: center; }
.ds-ctx-av { width: 56px; height: 56px; border-radius: 50%; background: var(--cream); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.1875rem; }
.ds-sect { padding: 16px 18px; border-bottom: 1px solid var(--hair-2); }
.ds-sect-h { font-size: 0.65625rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--label); margin-bottom: 11px; }
.ds-ctx-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.ds-ctx-k { font-size: 0.75rem; color: var(--muted); }
.ds-ctx-v { font-family: 'Space Mono', monospace; font-size: 0.75rem; font-weight: 600; color: var(--ink); text-align: right; }
.ds-ghost { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--brand); background: var(--panel); border: 1px solid var(--control-border); border-radius: 7px; padding: 7px 11px; cursor: pointer; }
.ds-recent { display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; }

/* ── Support settings, the live section (settings-support-live.js) — email + signature ── */
.st-wrap { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.st-head h1 { margin: 0; font-size: 1.375rem; color: var(--ink); }
.st-head p { margin: 4px 0 0; font-size: 0.875rem; }
.st-card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 20px; }
.st-card-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; }
.st-card-head h2 { margin: 0; font-size: 1rem; color: var(--ink); }
.st-card-head p { margin: 3px 0 0; font-size: 0.78125rem; line-height: 1.45; }
.st-ic { flex: none; width: 38px; height: 38px; border-radius: 9px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.st-field { margin-bottom: 14px; }
.st-field > label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.st-field input, .st-field textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.84375rem; color: var(--ink); background: var(--panel); border: 1px solid var(--control-border); border-radius: var(--radius-ctrl); padding: 9px 11px; }
.st-field input:focus, .st-field textarea:focus { outline: none; border-color: var(--brand); }
.st-field textarea { resize: vertical; line-height: 1.5; }
.st-hint { margin-top: 5px; font-size: 0.71875rem; color: var(--muted); line-height: 1.45; }
.st-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.st-status { background: var(--hair-3); border-radius: 9px; padding: 12px 14px; margin: 4px 0 16px; display: flex; flex-direction: column; gap: 7px; }
.st-status-row { display: flex; align-items: center; gap: 8px; font-size: 0.78125rem; color: var(--body); }
.st-status-row .ic { color: var(--brand); flex: none; }
.st-note { display: flex; align-items: flex-start; gap: 9px; font-size: 0.78125rem; line-height: 1.45; border-radius: 9px; padding: 11px 13px; margin-bottom: 14px; }
.st-note .ic { flex: none; margin-top: 1px; }
.st-note.warn { background: var(--warn-bg); color: var(--warn-ink); }
.st-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.st-ghost { background: transparent; color: var(--body); border: 1px solid var(--control-border); }
.st-ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--muted); }
@media (max-width: 640px) { .st-grid2 { grid-template-columns: 1fr; } }

/* ── LMS video (Cloudflare Stream) — reader player + admin uploader ──────────── */
.kb-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 0; overflow: hidden; }
.kb-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Imported-SCORM runtime: a tall same-origin iframe hosting the package's launch file. */
.kb-scorm-frame { width: 100%; height: 72vh; background: var(--panel); overflow: hidden; }
.kb-scorm-iframe { width: 100%; height: 100%; border: 0; display: block; }
.ak-video-up { background: var(--hair-3); border: 1px solid var(--hair); border-radius: 9px; padding: 12px; margin-bottom: 10px; }
.ak-video-state { display: flex; align-items: center; gap: 7px; font-size: 0.78125rem; font-weight: 600; color: var(--ink); margin-bottom: 9px; }
.ak-video-state .ic { color: var(--brand); }
.ak-bar { height: 6px; border-radius: 999px; background: var(--hair); overflow: hidden; margin-bottom: 9px; }
.ak-bar > i { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s ease; }
.ak-mini.disabled { opacity: .55; pointer-events: none; }
.ak-hint { margin-top: 7px; font-size: 0.6875rem; color: var(--label); line-height: 1.45; }

/* ── LMS quizzes + watch-verification (reader) ──────────────────────────────── */
.kb-quiz { margin: 0 30px 18px; padding: 16px 18px; background: var(--hair-3); border-radius: 12px; }
.kb-quiz-h { display: flex; align-items: center; gap: 7px; font-size: 0.84375rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.kb-q { margin-bottom: 14px; }
.kb-q-prompt { font-size: 0.84375rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.kb-q-choice { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--control-border); border-radius: 8px; margin-bottom: 6px; font-size: 0.8125rem; color: var(--body); cursor: pointer; background: var(--panel); }
.kb-q-choice.on { border-color: var(--brand); background: var(--brand-tint); color: var(--ink); }
.kb-quiz-result { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 13px; border-radius: 9px; font-size: 0.8125rem; font-weight: 600; background: var(--warn-bg); color: var(--warn-ink); }
.kb-quiz-result.pass { background: var(--ok-bg); color: var(--ok); }
.kb-watch-modal { position: absolute; inset: 0; background: rgba(20,28,22,.62); display: flex; align-items: center; justify-content: center; z-index: 5; border-radius: inherit; }
.kb-watch-card { background: var(--panel); border-radius: 14px; padding: 26px 30px; text-align: center; max-width: 320px; box-shadow: 0 18px 48px rgba(0,0,0,.3); }
.kb-watch-card .ic { color: var(--brand); width: 30px; height: 30px; }

/* ── LMS authoring (admin) — quiz editor + path manager ─────────────────────── */
.ak-quiz { margin-top: 18px; padding: 15px; border: 1px dashed var(--control-border); border-radius: 11px; background: var(--hair-3); }
.ak-quiz-h { display: flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.ak-q { padding: 10px; background: var(--panel); border: 1px solid var(--hair); border-radius: 9px; margin-bottom: 9px; }
.ak-iconbtn { width: 30px; height: 30px; padding: 0; flex: none; justify-content: center; background: var(--panel); color: var(--muted); border: 1px solid var(--control-border); border-radius: 7px; }
.ak-iconbtn:hover { color: var(--ink); border-color: var(--muted); }
.ak-paths { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 16px 18px; margin-bottom: 16px; }
.ak-paths-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ak-paths-head .h { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84375rem; font-weight: 700; color: var(--ink); }
.ak-path-edit { background: var(--hair-3); border-radius: 10px; padding: 13px; margin-bottom: 12px; }
.ak-path-items { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; }
.ak-path-item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--control-border); border-radius: 7px; font-size: 0.78125rem; color: var(--body); cursor: pointer; background: var(--panel); }
.ak-path-item.on { border-color: var(--brand); background: var(--brand-tint); color: var(--ink); }
.ak-path-list { display: flex; flex-direction: column; gap: 7px; }
.ak-path-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--hair); border-radius: 9px; }
.ak-path-row .ic { color: var(--brand); }

/* ── Platform console (admin.recursivemls.com — tenant provisioning) ───────────── */
.btn.btn-sm { padding: 6px 11px; font-size: 0.75rem; }
.btn.danger { background: var(--brand); border-color: var(--brand); }
.btn.danger:hover { background: var(--danger); border-color: var(--danger); }
.admin-platform { max-width: 1000px; margin: 0 auto; }
.ap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ap-head h1 { margin: 0 0 2px; }
.ap-head p { margin: 0; }
.ap-pad { padding: 18px 2px; }
.ap-warn { background: var(--warn-bg); color: var(--warn-ink); border-radius: 9px; padding: 10px 13px; margin-bottom: 14px; font-size: 0.8125rem; }
.ap-create, .ap-edit { margin-bottom: 18px; }
.ap-create h3, .ap-edit h3 { margin: 0 0 12px; }
.ap-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ap-form label { display: flex; flex-direction: column; gap: 5px; font-size: 0.78125rem; font-weight: 600; color: var(--muted); }
.ap-form input, .ap-form select { font: inherit; padding: 9px 11px; border: 1px solid var(--control-border); border-radius: var(--radius-ctrl); background: var(--panel); color: var(--ink); }
.ap-host { display: flex; align-items: center; gap: 6px; }
.ap-host input { flex: 1; }
.ap-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.ap-table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); overflow: hidden; }
.ap-table th, .ap-table td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--hair); font-size: 0.8125rem; }
.ap-table th { font-size: 0.6875rem; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }
.ap-table tr.is-selected { background: var(--warn-bg); }
.ap-table tr:last-child td { border-bottom: none; }
.ap-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78125rem; }
.ap-row-actions { text-align: right; }
.ap-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ap-edit h4 { margin: 16px 0 9px; }
/* Feature-flag rollout editor (AdminFeatures) */
.ap-flags-section { margin-top: 18px; border-top: 1px solid var(--hair); padding-top: 14px; }
.ap-flags-section h4 { margin: 0 0 6px; }
.ap-flags-hint { font-size: 0.75rem; margin: 0 0 12px; }
.ap-flags { display: grid; gap: 10px; }
.ap-flag { border: 1px solid var(--hair); border-radius: 10px; padding: 11px 13px; }
.ap-flag-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ap-flag-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-flag-name strong { font-size: 0.84375rem; }
.ap-flag-desc { font-size: 0.71875rem; }
.ap-flag-rollout { font: inherit; font-size: 0.78125rem; padding: 6px 9px; border: 1px solid var(--control-border); border-radius: var(--radius-ctrl); background: var(--panel); color: var(--ink); flex: 0 0 auto; }
.ap-flag-detail { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
.ap-flag-detail:empty { display: none; }
.ap-flag-stage { font: inherit; font-size: 0.78125rem; padding: 7px 10px; border: 1px solid var(--control-border); border-radius: var(--radius-ctrl); background: var(--panel); color: var(--ink); max-width: 320px; }
.ap-flag-chipin { flex: 1; min-width: 160px; border: 1px dashed var(--dashed-border); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 0.75rem; }
/* Chip removal is a real <button> (keyboard-focusable, named) — strip native chrome so it reads as the chip's × */
.cr-tagchip button.x { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; line-height: 0; }
.ap-flag-meta { font-size: 0.71875rem; margin: 0; }
.ap-flag-audit { margin-top: 12px; font-size: 0.75rem; }
.ap-flag-audit summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.ap-flag-audit ul { margin: 8px 0 0; padding-left: 16px; display: grid; gap: 4px; }
.ap-flag-audit li { line-height: 1.5; }
.ap-integ { margin-top: 18px; border-top: 1px solid var(--hair); padding-top: 14px; }
.ap-integ h4 { margin: 0 0 12px; }
.ap-int-block { border: 1px solid var(--hair); border-radius: 10px; padding: 13px; margin-bottom: 12px; }
.ap-int-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.ap-int-block .ap-actions { margin-top: 11px; }
.ap-studio-entry { margin-top: 18px; border-top: 1px solid var(--hair); padding-top: 14px; }
.ap-studio-entry h4 { margin: 0 0 6px; }
.ap-studio-overlay { position: fixed; inset: 0; z-index: 60; background: var(--surface); display: flex; flex-direction: column; overflow: auto; }
.ap-studio-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: var(--panel, #fff); border-bottom: 1px solid var(--control-border); }
.ap-studio-body { flex: 1; }

/* ── Admin console shell (admin.recursivemls.com — its own login + chrome, separate from the app) ── */
.admin-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.admin-bar { display: flex; align-items: center; gap: 16px; padding: 0 20px; height: 56px;
  background: var(--ink); color: #fff; }
.admin-bar-brand { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.admin-bar-brand strong { font-weight: 700; }
.admin-bar-tabs { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-bar-tabs button { font: inherit; font-size: 0.8125rem; color: rgba(255,255,255,.72); background: transparent;
  border: none; padding: 7px 13px; border-radius: 8px; cursor: pointer; flex: none; white-space: nowrap; }
.admin-bar-tabs button:hover { color: #fff; background: rgba(255,255,255,.1); }
.admin-bar-tabs button.active { color: var(--ink); background: var(--panel); font-weight: 600; }
.admin-bar-spacer { flex: 1; }
.admin-bar-who { color: rgba(255,255,255,.72); font-size: 0.78125rem; }
.admin-body { flex: 1; padding: 26px 20px; overflow: auto; }

/* The "forgot password" link under the admin login form. */
.admin-auth-alt { margin: 14px 0 0; text-align: center; font-size: 12.5px; }
.admin-auth-alt a { color: var(--brand); text-decoration: none; }
.admin-auth-alt a:hover { text-decoration: underline; }

/* "Your account" card (Admins tab): change password beside passkey management. Collapses to one
   column below ~700px, where two forms side by side stop being readable. */
.admin-account-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.admin-account h4 { margin: 0 0 8px; font-size: 13.5px; }
.admin-account-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.admin-account-col .ap-form { width: 100%; grid-template-columns: 1fr; }
.admin-account-col p { margin: 2px 0 8px; font-size: 12px; }
/* Sign-in alternatives on the admin login card: passkey button + the "forgot password" link.
   The passkey button sits under the form's full-width submit, so it matches its width. */
.admin-pk-btn { width: 100%; justify-content: center; margin-top: 10px; }
.admin-pk-list { list-style: none; margin: 0 0 10px; padding: 0; width: 100%; display: grid; gap: 8px; }
.admin-pk-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--hair); border-radius: 9px; padding: 9px 11px; font-size: 13px; }
.admin-pk-list li > span:first-child { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.admin-pk-list li > span.muted { font-size: 11.5px; }
.admin-pk-list li > button { margin-left: auto; }
/* Password re-auth above "Add a passkey" — enrolling one is a credential change, so it takes the
   same proof changing a password does. */
.admin-pk-reauth { width: 100%; margin-bottom: 10px; }
.admin-invite-toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
/* Fallback hand-off when this deployment can't send mail — the link has to be selectable and must
   wrap, since it carries a 43-character token. */
.admin-handoff-link { word-break: break-all; background: var(--bg); border: 1px solid var(--hair);
  border-radius: 8px; padding: 10px 12px; user-select: all; }

/* ── CMA & Pricing ─────────────────────────────────────────────────────────── */
.cma-hero{height:140px;border-radius:9px;background-size:cover;background-position:center;background-color:var(--panel-2)}
.cma-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.cma-fact{border:1px solid var(--hair);border-radius:8px;padding:9px 10px;background:var(--panel)}
.cma-fact .l{display:flex;align-items:center;justify-content:space-between;font-size: 0.625rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--label);margin-bottom:4px}
.cma-fact .v{font-size: 0.84375rem}
.src{font-size: 0.5625rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--brand);background:var(--ok-bg);border-radius:4px;padding:1px 5px}
.src.web{color:var(--info);background:var(--info-bg)}
.cma-ai{display:flex;align-items:flex-start;gap:8px;background:var(--brand-tint);border:1px solid var(--brand-badge);border-radius:9px;padding:11px 12px;margin-top:14px;font-size: 0.75rem;color:var(--ink);line-height:1.5}
.cma-ai svg{color:var(--brand);flex:none;margin-top:1px}
.cma-src{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px}
.cma-src a{font-size: 0.6875rem;color:var(--brand);text-decoration:none}
.cma-comp{display:flex;align-items:center;gap:10px;border:1px solid var(--control-border);border-radius:9px;padding:9px 10px;background:var(--panel)}
.cma-comp.off{background:var(--surface);border-color:var(--hair);opacity:.7}
.cma-check{width:22px;height:22px;border-radius:6px;flex:none;border:1.5px solid var(--control-border);background:var(--panel);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff}
.cma-check.on{background:var(--brand);border-color:var(--brand)}
/* Container query, not a viewport media query: .cma-range's Pricing-tab render width is capped at
   ~384px (the config pane's 420px max, minus card padding) no matter how wide the browser window
   gets, once .wk-split's 2-column layout kicks in above its 860px breakpoint — a plain @media
   viewport breakpoint can't express that width-independent-of-viewport ceiling. A container query
   reacting to .cma-range's OWN rendered width handles it directly; a container can't query its own
   size for its own layout, so the container-type lives on the ANCESTOR (.cma-pricing-tab) and the
   @container rule below targets the descendant .cma-range. (Formerly also nested one level deeper
   inside the hand-rolled live-preview pane's .cma-doc-price — removed once the preview pane started
   iframing the real report document instead of duplicating this markup.) */
.cma-pricing-tab{container-type:inline-size}
.cma-range{display:flex;gap:8px;border:1px solid var(--brand-badge);border-radius:11px;padding:10px 6px;background:var(--panel)}
.cma-range-pt{flex:1;min-width:0;text-align:center;padding:8px 4px;border-radius:8px}
.cma-range-pt .lbl{font-size: 0.625rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--label)}
.cma-range-pt .amt{font-size: 1.125rem;font-weight:600;letter-spacing:-0.4px;margin:5px 0 2px;white-space:nowrap}
.cma-range-pt .dom{font-size: 0.65625rem;color:var(--muted)}
.cma-range-pt.on{background:linear-gradient(180deg,var(--brand-tint),var(--panel-2))}
.cma-range-pt.on .lbl{color:var(--brand)}
.cma-range-pt.on .amt{font-size: 1.375rem;font-weight:700;color:var(--brand)}
@container (max-width: 420px) {
  .cma-range { flex-direction: column; gap: 6px; }
  .cma-range-pt { padding: 8px 12px; }
}
.cma-insight{border:1px solid var(--hair);border-radius:10px;background:var(--panel-2);padding:12px 13px;margin-top:14px;font-size: 0.75rem;color:var(--ink);line-height:1.55}
.cma-insight .lbl{display:block;font-size: 0.625rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--body);margin-bottom:6px}
.cma-page{display:flex;align-items:center;gap:11px;border:1px solid var(--control-border);border-radius:8px;padding:9px 11px;background:var(--panel)}
.cma-switch{width:38px;height:21px;border-radius:999px;flex:none;background:var(--surface);position:relative;cursor:pointer;transition:background .15s}
.cma-switch::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.cma-switch.on{background:var(--brand)}
.cma-switch.on::after{left:19px}
.cma-share{border:1px solid var(--brand-badge);border-radius:10px;background:var(--brand-tint);padding:13px}
.cma-linkrow{display:flex;gap:8px;margin-top:8px}
.cma-linkrow input{flex:1;border:1px solid var(--brand-badge);border-radius:7px;padding:8px 10px;font-family:'Space Mono',ui-monospace,monospace;font-size: 0.75rem;background:var(--panel);color:var(--ink)}
.cma-linkrow button{font-weight:600;color:#fff;background:var(--brand-solid);border:0;border-radius:7px;padding:0 14px;cursor:pointer}
.cma-stats{border:1px solid var(--control-border);border-radius:10px;background:var(--panel);padding:13px;margin-top:12px}
.cma-statrow{display:grid;grid-template-columns:repeat(3,1fr);margin-top:8px}
.cma-statrow .num{font-size: 1.25rem}
.cma-statrow .l{font-size: 0.625rem;color:var(--label);text-transform:uppercase;letter-spacing:.5px}
a.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;border-radius:7px;padding:8px 12px;font-size: 0.8125rem}
.cma-preview{background:var(--surface)}
/* The preview pane iframes the actual report document (src/cma/report.ts's fixed 8.5in/816px
   canvas) and only ever shrinks it to fit — never upscales. The wrap's height tracks the scaled
   content height (set inline from JS) so there's no dead space or need to scroll sideways. */
.cma-preview-wrap{position:relative;overflow:hidden;border-radius:4px;box-shadow:0 8px 26px rgba(0,0,0,.12)}
.cma-preview-frame{position:absolute;top:0;left:0;border:0;transform-origin:top left}

/* ── Field Studio (admin-fields.js) — B1 catalog · B2 add · B3 editor · B4 lookups ────────────── */
.fs-wrap { padding-bottom: 84px; } /* room for the sticky draft bar */
.fs-head { display: flex; align-items: flex-start; gap: 18px; }
.fs-conf { display: flex; align-items: center; gap: 12px; background: var(--brand-tint); border-radius: 12px; padding: 12px 16px; flex: none; }
.fs-conf-score { font-family: 'Space Mono', ui-monospace, monospace; font-size: 1.625rem; font-weight: 700; line-height: 1; }
.fs-conf-meta { line-height: 1.3; }
.fs-tabs { display: flex; align-items: center; gap: 6px; margin: 4px 0 14px; border-bottom: 1px solid var(--control-border); }
.fs-tabs button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; font: inherit; font-size: 0.84375rem; font-weight: 600; color: var(--muted); padding: 9px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fs-tabs button .ic { width: 15px; height: 15px; }
.fs-tabs button.on { color: var(--brand); border-bottom-color: var(--brand); }
.fs-soon { margin-left: auto; font-size: 0.71875rem; }
.fs-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.fs-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; background: var(--panel); border: 1px solid var(--control-border); border-radius: 9px; padding: 8px 12px; }
.fs-search .ic { color: var(--muted); width: 16px; height: 16px; flex: none; }
.fs-search input { border: 0; outline: 0; font: inherit; width: 100%; background: transparent; color: var(--ink); }
.fs-seg { display: inline-flex; border: 1px solid var(--control-border); border-radius: 9px; overflow: hidden; }
.fs-seg button { border: 0; background: var(--panel); font: inherit; font-size: 0.78125rem; font-weight: 600; color: var(--muted); padding: 7px 12px; cursor: pointer; border-right: 1px solid var(--control-border); }
.fs-seg button:last-child { border-right: 0; }
.fs-seg button.on { background: var(--brand-tint); color: var(--brand); }
.fs-primary { display: inline-flex; align-items: center; gap: 7px; border: 0; background: var(--brand-solid); color: #fff; font: inherit; font-weight: 600; font-size: 0.8125rem; border-radius: 9px; padding: 9px 14px; cursor: pointer; }
.fs-primary:hover { background: var(--brand-press); }
.fs-primary:disabled { opacity: .5; cursor: not-allowed; }
.fs-table { border: 1px solid var(--control-border); border-radius: 10px; overflow: hidden; }
.fs-tr { display: grid; grid-template-columns: minmax(0, 2.4fr) 78px 96px 108px 120px; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line, var(--hair-2)); }
.fs-tr:last-child { border-bottom: 0; }
.fs-th { font-size: 0.65625rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--label); background: var(--panel-2); }
.fs-row { cursor: pointer; }
.fs-row:hover { background: var(--brand-tint); }
.fs-flabel { font-weight: 600; font-size: 0.84375rem; color: var(--ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fs-fkey { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.71875rem; color: var(--muted); }
.fs-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.625rem; font-weight: 700; letter-spacing: .3px; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.fs-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.fs-life { display: inline-flex; align-items: center; font-size: 0.65625rem; font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.fs-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 0.625rem; font-weight: 600; color: var(--muted); background: var(--hair-2); border-radius: 999px; padding: 1px 7px; }
.fs-tag .ic { width: 11px; height: 11px; }
/* B4 lookups */
.fs-enums { display: grid; grid-template-columns: 236px 1fr; gap: 18px; }
.fs-lk-list { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--control-border); padding-right: 14px; }
.fs-lk-list button { text-align: left; border: 0; background: transparent; font: inherit; padding: 9px 11px; border-radius: 8px; cursor: pointer; color: var(--ink); }
.fs-lk-list button:hover { background: var(--surface); }
.fs-lk-list button.on { background: var(--brand-tint); color: var(--brand); }
.fs-vtable { margin-top: 8px; }
.fs-vtr { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--line, var(--hair-2)); }
.fs-vedit { flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 0.84375rem; padding: 5px 8px; color: var(--ink); background: transparent; }
.fs-vedit:hover, .fs-vedit:focus { border-color: var(--control-border); background: var(--panel); outline: 0; }
.fs-c-key { width: 210px; flex: none; }
.fs-sort { display: inline-flex; gap: 2px; flex: none; }
.fs-sort button, .fs-vactions button { border: 1px solid var(--control-border); background: var(--panel); border-radius: 7px; padding: 5px 8px; cursor: pointer; color: var(--muted); font: inherit; font-size: 0.75rem; display: inline-flex; align-items: center; gap: 4px; }
.fs-sort button .ic, .fs-vactions button .ic { width: 13px; height: 13px; }
.fs-vactions { display: inline-flex; gap: 6px; flex: none; }
.fs-vactions button:hover { color: var(--ink); border-color: var(--muted); }
.fs-addval { display: flex; gap: 8px; margin-top: 12px; }
.fs-addval input { border: 1px solid var(--control-border); border-radius: 8px; font: inherit; padding: 8px 10px; }
.fs-addval input:first-child { font-family: 'Space Mono', ui-monospace, monospace; width: 210px; }
.fs-addval input:nth-child(2) { flex: 1; }
.fs-retired { margin-top: 16px; }
.fs-retired summary { cursor: pointer; font-size: 0.78125rem; color: var(--muted); font-weight: 600; }
/* sticky draft bar */
.fs-draftbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 14px; background: var(--panel, #fff); border-top: 1px solid var(--control-border); box-shadow: 0 -6px 20px rgba(0,0,0,.06); padding: 12px 24px; }
.fs-draft-toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; font: inherit; font-size: 0.84375rem; color: var(--ink); cursor: pointer; }
.fs-draft-toggle .ic { width: 15px; height: 15px; color: var(--brand); }
.fs-oplist { margin-top: 8px; max-height: 180px; overflow-y: auto; }
.fs-opitem { display: flex; align-items: center; gap: 6px; font-size: 0.78125rem; color: var(--muted); padding: 3px 0; }
.fs-opitem .ic { width: 13px; height: 13px; color: var(--brand); }
/* modals + drawer */
.fs-modal-bg, .fs-drawer-bg { position: fixed; inset: 0; z-index: 60; background: rgba(20,26,22,.42); display: flex; }
.fs-modal-bg { align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; }
.fs-drawer-bg { justify-content: flex-end; }
.fs-modal { background: var(--panel, #fff); border-radius: 14px; width: 100%; max-width: 620px; padding: 20px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.28); max-height: 84vh; overflow-y: auto; }
.fs-drawer { background: var(--panel, #fff); width: 100%; max-width: 460px; height: 100%; padding: 20px 22px; overflow-y: auto; box-shadow: -12px 0 40px rgba(0,0,0,.22); }
.fs-modal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.fs-modal-head h2 { margin: 0; font-size: 1.125rem; }
.fs-x { border: 0; background: transparent; font-size: 1.125rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; }
.fs-x:hover { color: var(--ink); }
.fs-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.fs-ddresults { max-height: 46vh; overflow-y: auto; border: 1px solid var(--control-border); border-radius: 10px; margin-top: 10px; }
.fs-ddrow { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--line, var(--hair-2)); }
.fs-ddrow:last-child { border-bottom: 0; }
.fs-mono { font-family: 'Space Mono', ui-monospace, monospace; color: var(--muted); }
.fs-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; background: var(--panel-2); border-radius: 10px; padding: 14px; margin-bottom: 16px; font-size: 0.8125rem; }
.fs-facts .muted { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .4px; display: block; margin-bottom: 1px; }
.fs-toggle { display: flex; align-items: center; gap: 9px; font-size: 0.84375rem; color: var(--ink); padding: 7px 0; cursor: pointer; }
.fs-lifecycle { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--control-border); display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .fs-enums { grid-template-columns: 1fr; }
  .fs-lk-list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--control-border); padding-right: 0; padding-bottom: 10px; }
  .fs-tr { grid-template-columns: minmax(0, 1.6fr) 70px 84px; }
  .fs-tr > div:nth-child(4), .fs-tr > div:nth-child(5) { display: none; }
}

/* ── Field Studio R10 — layout designer (B5) · rules builder (B6) · status editor (B7) ────────── */
/* B5 layout */
.fs-lay-grid { display: grid; grid-template-columns: 1fr 380px; gap: 20px; }
.fs-lay-sec { border: 1px solid var(--control-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.fs-lay-sechead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fs-lay-sechead .fs-vedit { flex: 1; font-weight: 600; }
.fs-lay-field { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 7px; }
.fs-lay-field:hover { background: var(--panel-2); }
.fs-lay-span { font-size: 0.71875rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; flex: none; }
.fs-lay-span select { border: 1px solid var(--control-border); border-radius: 6px; font: inherit; padding: 3px 6px; }
.fs-lay-addfield { margin-top: 6px; }
.fs-lay-addfield select { width: 100%; border: 1px dashed var(--control-border); border-radius: 8px; font: inherit; padding: 8px 10px; color: var(--muted); background: transparent; }
.fs-lay-addsec { display: flex; gap: 8px; margin-top: 6px; }
.fs-lay-addsec input { flex: 1; border: 1px solid var(--control-border); border-radius: 8px; font: inherit; padding: 8px 10px; }
.fs-lay-actions { display: flex; gap: 10px; margin-top: 16px; }
.fs-lay-preview { position: sticky; top: 16px; align-self: start; background: var(--panel-2); border-radius: 12px; padding: 14px; max-height: 76vh; overflow-y: auto; }
.fs-lay-pv-eyebrow { font-size: 0.65625rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--label); margin-bottom: 10px; }
.fs-lay-pv-sec { margin-bottom: 14px; }
.fs-lay-pv-sectitle { font-size: 0.78125rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.fs-lay-pv-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.fs-lay-pv-field { background: var(--panel); border: 1px solid var(--control-border); border-radius: 6px; padding: 8px 9px; font-size: 0.71875rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* B6 rules */
.fs-rules-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
.fs-matrix { border-collapse: collapse; width: 100%; font-size: 0.78125rem; }
.fs-matrix th { text-align: center; font-size: 0.65625rem; font-weight: 700; color: var(--label); padding: 6px 8px; border-bottom: 1px solid var(--control-border); white-space: nowrap; }
.fs-matrix th:first-child, .fs-matrix-f { text-align: left; }
.fs-matrix-f { padding: 7px 8px; border-bottom: 1px solid var(--line, var(--hair-2)); white-space: nowrap; }
.fs-matrix-c { text-align: center; border-bottom: 1px solid var(--line, var(--hair-2)); }
.fs-matrix-cb { width: 16px; height: 16px; margin: 6px auto; cursor: pointer; accent-color: var(--brand); }
.fs-cell { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--control-border); color: #fff; font-size: 0.75rem; }
.fs-cell.on { background: var(--brand); border-color: var(--brand); }
.fs-rulecard { display: flex; align-items: center; gap: 10px; border: 1px solid var(--control-border); border-radius: 9px; padding: 10px 12px; margin-bottom: 8px; }
.fs-sample { background: var(--panel-2); border-radius: 12px; padding: 14px; align-self: start; }
.fs-sample-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.fs-sample-row input { flex: 1; min-width: 0; border: 1px solid var(--control-border); border-radius: 7px; font: inherit; padding: 6px 8px; }
.fs-sample-out { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--control-border); font-size: 0.78125rem; line-height: 1.7; }
.fs-sample-err { color: var(--orange); margin-top: 4px; }
.fs-rule-cond { display: flex; gap: 8px; margin-bottom: 12px; }
.fs-rule-cond select, .fs-rule-cond input { border: 1px solid var(--control-border); border-radius: 8px; font: inherit; padding: 8px 10px; }
.fs-rule-cond select { flex: 1; min-width: 0; }
.fs-rule-cond input { flex: 1; min-width: 0; }
/* B7 statuses */
.fs-status-row { border: 1px solid var(--control-border); border-radius: 10px; margin-bottom: 10px; }
.fs-status-main { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.fs-status-caret { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 2px; display: inline-flex; }
.fs-status-main .fs-vedit { width: 160px; flex: none; font-weight: 600; }
.fs-status-std { min-width: 170px; }
.fs-status-std select { width: 100%; }
.fs-status-exp { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 12px 14px 14px; border-top: 1px solid var(--line, var(--hair-2)); background: var(--panel-2); border-radius: 0 0 10px 10px; }
.fs-status-h { font-size: 0.6875rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--label); margin-bottom: 8px; }
.fs-trans-row { display: flex; align-items: center; gap: 10px; }
.fs-role { display: inline-flex; align-items: center; gap: 4px; font-size: 0.71875rem; color: var(--muted); }
.fs-companion { border: 1px solid var(--control-border) !important; width: 100%; }

/* B8 review → impact → publish + version history */
.fs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--brand-solid); color: #fff; font-size: 0.6875rem; font-weight: 700; }
.fs-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fs-changecards { display: flex; flex-direction: column; gap: 6px; }
.fs-changecard { display: flex; align-items: center; gap: 8px; border: 1px solid var(--control-border); border-radius: 8px; padding: 8px 12px; font-size: 0.8125rem; }
.fs-changecard .ic { width: 14px; height: 14px; color: var(--muted); }
.fs-impact { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.fs-impact-group { border-radius: 10px; padding: 12px 14px; border: 1px solid var(--control-border); }
.fs-impact-group.blocking { background: var(--danger-bg); border-color: var(--danger-border); }
.fs-impact-group.warn { background: var(--warn-bg); border-color: var(--warn-border); }
.fs-impact-group.refs { background: var(--hair-2); }
.fs-impact-h { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.78125rem; margin-bottom: 8px; }
.fs-impact-group.blocking .fs-impact-h { color: var(--danger); }
.fs-impact-group.warn .fs-impact-h { color: var(--warn-ink); }
.fs-impact-h .ic { width: 15px; height: 15px; }
.fs-impact-row { font-size: 0.78125rem; padding: 3px 0; }
.fs-impact-row .fs-fkey { margin-right: 6px; }
.fs-impact-ok { display: flex; align-items: center; gap: 8px; color: var(--ok); font-size: 0.8125rem; font-weight: 600; }
.fs-impact-ok .ic { width: 16px; height: 16px; }
.fs-review-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.fs-published { display: flex; align-items: center; gap: 14px; background: var(--ok-bg); border: 1px solid var(--brand-badge); border-radius: 12px; padding: 16px 18px; }
.fs-published-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ok); color: #fff; }
.fs-published-badge .ic { width: 22px; height: 22px; }
.fs-hist-list { display: flex; flex-direction: column; gap: 8px; }
.fs-hist-item { border: 1px solid var(--control-border); border-radius: 10px; overflow: hidden; }
.fs-hist-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; }
.fs-hist-head:hover { background: var(--panel-2); }
.fs-hist-ver { font-weight: 700; font-size: 0.84375rem; }
.fs-hist-changes { border-top: 1px solid var(--line, var(--hair-2)); padding: 8px 12px; background: var(--panel-2); }
.fs-hist-change { font-size: 0.78125rem; padding: 3px 0; }
@media (max-width: 860px) {
  .fs-lay-grid, .fs-rules-grid { grid-template-columns: 1fr; }
  .fs-status-exp { grid-template-columns: 1fr; }
  .fs-status-main { flex-wrap: wrap; }
  .fs-review-head { flex-direction: column; }
}

/* Search — advanced (registry-driven) filter builder + unsupported banner (Surface C) */
.fchip-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--brand-solid); color: #fff; font-size: 0.6875rem; font-weight: 700; }
.fs-unsupported { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--warn-border); background: var(--warn-bg); border-radius: 8px; color: var(--warn-ink); font-size: 0.8125rem; }
.fs-unsupported .ic { color: var(--warn-ink); flex: none; }
.fs-adv { margin-top: 18px; border-top: 1px solid var(--control-border); padding-top: 14px; }
.fs-adv-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.875rem; color: var(--ink); margin-bottom: 10px; }
.fs-adv-head .ic { color: var(--brand); }
.fs-adv-sub { font-weight: 500; font-size: 0.75rem; color: var(--muted); }
.fs-adv-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.fs-adv-field { flex: 1 1 40%; }
.fs-adv-op { flex: 0 0 130px; }
.fs-adv-val { flex: 1 1 40%; }
.fs-adv-row .selwrap select, .fs-adv-val input:not([type="checkbox"]) { width: 100%; }
.fs-adv-multi { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 10px; border: 1px solid var(--control-border); border-radius: 7px; background: var(--canvas); max-height: 132px; overflow-y: auto; }
.fs-adv-check { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 500; color: var(--ink); cursor: pointer; }
.fs-adv-note { font-size: 0.75rem; color: var(--muted); }
.fs-adv-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--control-border); background: var(--panel); border-radius: 7px; color: var(--muted); cursor: pointer; }
.fs-adv-x:hover { color: var(--danger); border-color: var(--danger-border); }
.fs-adv-add { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; background: var(--canvas); border: 1px dashed var(--dashed-border); border-radius: 7px; padding: 8px 14px; font-size: 0.8125rem; font-weight: 600; color: var(--brand); cursor: pointer; }
.fs-adv-add:hover { background: var(--panel); }
@media (max-width: 640px) {
  .fs-adv-row { flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--control-border); }
  .fs-adv-field, .fs-adv-op, .fs-adv-val { flex: 1 1 100%; }
  .fs-adv-x { width: auto; padding: 0 12px; align-self: flex-start; }
}

/* ── Member Insights (views/insights.js) ─────────────────────────────────────── */
.ins-tabs { display:flex; gap:6px; margin:0 0 16px; border-bottom:1px solid var(--control-border); }
.ins-tabs button { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; background:none; border:none; border-bottom:2px solid transparent; color:var(--body); font-weight:600; font-size: 0.84375rem; cursor:pointer; }
.ins-tabs button.on { color:var(--brand); border-bottom-color:var(--brand); }
.ins-tabs button svg { width:16px; height:16px; }

.ins-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; margin-bottom:12px; }
.selwrap.sm { min-width:150px; }
.selwrap.sm select { padding:7px 26px 7px 10px; font-size: 0.8125rem; }
.ins-search { flex:1; min-width:180px; padding:8px 11px; border:1px solid var(--control-border); border-radius:8px; font-size: 0.84375rem; }

.ins-tablewrap { padding:0; overflow-x:auto; }
.ins-table { width:100%; border-collapse:collapse; font-size: 0.8125rem; }
.ins-table th { text-align:left; padding:10px 12px; color:var(--body); font-weight:600; font-size: 0.71875rem; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--control-border); white-space:nowrap; }
.ins-table th.num, .ins-table td.num { text-align:right; }
.ins-table th.srt { cursor:pointer; user-select:none; }
.ins-table th.srt:hover { color:var(--brand); }
.ins-table th.srt svg { width:13px; height:13px; vertical-align:-2px; }
.ins-table td { padding:10px 12px; border-bottom:1px solid var(--control-border); vertical-align:middle; }
.ins-row { cursor:pointer; }
.ins-row:hover { background:var(--panel-2); }
.ins-mname { font-weight:600; color:var(--ink); }
.ins-msub { font-size: 0.71875rem; color:var(--label); display:flex; align-items:center; gap:6px; }
.ins-empty { text-align:center; color:var(--label); padding:28px 0; }
.pill.warn { background:var(--orange-bg); color:var(--orange); }

.ins-pager { display:flex; align-items:center; gap:10px; margin-top:12px; }

.ins-lb { width:100%; border-collapse:collapse; font-size: 0.8125rem; }
.ins-lb td { padding:6px 8px; border-bottom:1px solid var(--control-border); }
.ins-lb td:first-child { color:var(--label); width:22px; }
.ins-lb td:last-child { text-align:right; font-weight:600; }

/* Horizontal ranked bars (charts.js HBars) */
.hbars { display:flex; flex-direction:column; gap:8px; padding:6px 0; }
.hbar-row { display:grid; grid-template-columns:20px minmax(90px,1.4fr) 2fr auto; align-items:center; gap:9px; font-size: 0.78125rem; }
.hbar-rank { color:var(--label); text-align:right; }
.hbar-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); display:flex; flex-direction:column; }
.hbar-sub { font-size: 0.65625rem; color:var(--label); }
.hbar-track { height:10px; background:var(--panel-2); border-radius:5px; overflow:hidden; }
.hbar-fill { display:block; height:100%; border-radius:5px; }
.hbar-val { font-weight:600; color:var(--ink); white-space:nowrap; }

/* Profile drawer (centered scrollable panel) */
.ins-drawer { position:relative; background:var(--panel); border-radius:14px; width:min(480px,95vw); max-height:90vh; overflow-y:auto; padding:22px; box-shadow:0 24px 60px rgba(20,30,24,.28); }
.ins-drawer-x { position:absolute; top:14px; right:14px; background:none; border:none; color:var(--label); cursor:pointer; padding:4px; }
.ins-drawer-x:hover { color:var(--ink); }
.ins-prof-head { margin-bottom:14px; padding-right:28px; }
.ins-prof-name { font-size: 1.1875rem; font-weight:700; color:var(--ink); }
.ins-prof-sub { font-size: 0.78125rem; color:var(--label); margin-top:2px; }
.ins-prof-contact { display:flex; flex-wrap:wrap; gap:8px 16px; padding:12px 0; border-top:1px solid var(--control-border); border-bottom:1px solid var(--control-border); margin-bottom:14px; }
.ins-prof-contact a { display:inline-flex; align-items:center; gap:6px; color:var(--brand); font-size: 0.8125rem; text-decoration:none; }
.ins-prof-contact a:hover { text-decoration:underline; }
.ins-prof-contact svg { width:15px; height:15px; }
.ins-prof-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
.ins-prof-grid > div { display:flex; flex-direction:column; gap:2px; }
.ins-prof-grid .lbl { font-size: 0.6875rem; color:var(--label); text-transform:uppercase; letter-spacing:.03em; }
.ins-prof-grid .num, .ins-prof-grid > div > span:last-child { font-size: 0.9375rem; font-weight:600; color:var(--ink); }

/* Explorer sort-header + member link buttons (keyboard-accessible affordances) */
.ins-table th .ins-sortbtn { display:inline-flex; align-items:center; gap:3px; background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; }
.ins-table th.num .ins-sortbtn { flex-direction:row-reverse; }
.ins-table th .ins-sortbtn:hover { color:var(--brand); }
.ins-table th .ins-sortbtn svg { width:13px; height:13px; }
.ins-linkbtn { background:none; border:none; padding:0; font:inherit; font-weight:600; color:var(--ink); text-align:left; cursor:pointer; }
.ins-linkbtn:hover { color:var(--brand); text-decoration:underline; }
.ins-sortbtn:focus-visible, .ins-linkbtn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:3px; }

/* ══════════════════════════════════════════════════════════════════════════════
   Modular product navigation (redesign) — rail, product sidebar, command palette,
   personal menu. Token-driven so Phase 2 theming applies for free.
   ══════════════════════════════════════════════════════════════════════════════ */

/* The shell grid lives with .app (see "App shell" above); the topbar spans 1 / -1 and content is
   pinned to the rightmost column so it lands in col 2 (panel collapsed) or col 3 (panel open). */
.app .content { grid-row: 2; grid-column: -2 / -1; isolation: isolate; }

/* ── Product rail ─────────────────────────────────────────────────────────────*/
.rc-rail { grid-row: 2; grid-column: 1; background: var(--rail-bg); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; overflow-y: auto; }
.rc-rail-toggle { width: 48px; height: 34px; padding: 0; border: 0; background: transparent; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(255,255,255,.62); margin-bottom: 2px; }
.rc-rail-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
.rc-rail-btn { position: relative; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(255,255,255,.72); flex: none; }
.rc-rail-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.rc-rail-btn .ic-svg { width: 21px; height: 21px; }
.rc-rail-btn.active { background: rgba(255,255,255,.16); color: #fff; }
.rc-rail-btn .rc-rail-bar { position: absolute; left: -8px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--panel); opacity: 0; }
.rc-rail-btn.active .rc-rail-bar { opacity: 1; }
.rc-rail-btn.active .ic-svg { stroke-width: 2.2; }
.rc-rail-dot { position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn-dot); border: 1.5px solid var(--rail-bg); }
.rc-rail-div { width: 28px; height: 1px; background: rgba(255,255,255,.16); margin: 4px 0; flex: none; }
.rc-rail-spacer { flex: 1; }

/* ── Product / directory sidebar ──────────────────────────────────────────────*/
.rc-sidebar { grid-row: 2; background: var(--panel-2); border-right: 1px solid var(--hair); padding: 12px 12px 10px; display: flex; flex-direction: column; overflow-y: auto; gap: 2px; }
.rc-side-toggle-spacer { height: 6px; flex: none; } /* small top pad; grown to 36px alongside a visible rail to align the first row with the rail's toggle (below) */
.rc-side-headrow { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
/* "All products" — only meaningful where the rail is hidden (the mobile drawer); see the 900px block. */
.rc-side-alldirs { display: none; border: 0; background: transparent; cursor: pointer; padding: 4px; border-radius: 6px; color: var(--label); }
.rc-side-alldirs:hover { background: var(--hair); color: var(--muted); }
.rc-side-head { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; border: 0; background: transparent; flex: 1; min-width: 0; text-align: left; font-family: inherit; }
.rc-side-head:hover { background: var(--hair-2); }
.rc-side-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.rc-side-mark .ic-svg { width: 16px; height: 16px; }
.rc-side-title { flex: 1; font-size: 0.875rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-side-collapse { border: 0; background: transparent; cursor: pointer; padding: 4px; border-radius: 6px; color: var(--label); display: flex; }
.rc-side-collapse:hover { background: var(--hair); color: var(--muted); }
.rc-side-list { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.rc-group { font-size: 0.65625rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--label); padding: 10px 12px 6px; }
/* Menu rows carry no icon (the rail already shows it), so every row — grouped or not — sits at the
   same 12px left padding. The old `.rc-nav-item.indent` rule pushed grouped items to 34px to clear
   a phantom icon column; with the icons gone that indent would just be a ragged left edge. */
.rc-nav-item, .rc-dir-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 7px; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; font-family: inherit; font-size: 0.875rem; color: var(--body); }
.rc-nav-item:hover, .rc-dir-item:hover { background: var(--hair-2); color: var(--ink); }
.rc-nav-item.active, .rc-dir-item.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.rc-nav-bar { position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--brand); opacity: 0; }
.rc-nav-item.active .rc-nav-bar, .rc-dir-item.active .rc-nav-bar { opacity: 1; }
.rc-nav-label, .rc-dir-label { flex: 1; }
.rc-dir-item { height: 48px; padding: 0 12px; flex: none; } /* don't shrink (matches .rc-rail-btn) so rows stay 48px and keep lining up with the rail when the panel overflows a short viewport */
.rc-dir-item .rc-nav-bar { top: 12px; bottom: 12px; }
/* Directory mode (rc-sidebar-dir) reproduces the rail's vertical rhythm so each row lines up with its
   rail icon: a 36px top spacer (= the rail's 34px toggle + 2px margin), a 9px divider-gap
   (≈ .rc-rail-div's 1px + 4px margins), and a flex:1 spacer that bottom-pins Admin/Settings
   (= .rc-rail-spacer). The dividers + spacer default to display:none and are switched on only here,
   so the mobile drawer — where the rail is hidden (see the max-width:900px reset) — collapses back to
   a plain tight "Go to" list with no rail to align against. */
.rc-dir-div, .rc-dir-spacer { display: none; }
.rc-sidebar.rc-sidebar-dir { padding-top: 14px; padding-bottom: 14px; gap: 6px; }
.rc-sidebar-dir .rc-side-toggle-spacer { height: 36px; }
.rc-sidebar-dir .rc-dir-div { display: block; height: 9px; flex: none; }
.rc-sidebar-dir .rc-dir-spacer { display: block; flex: 1; }
.rc-nav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.rc-badge { font-size: 0.6875rem; font-weight: 600; color: var(--brand); background: var(--brand-badge); border-radius: 999px; padding: 1px 7px; }

/* ── Header: command-palette trigger ─────────────────────────────────────────*/
.rc-search-trigger { flex: 1; max-width: 440px; display: flex; align-items: center; gap: 9px; cursor: pointer; text-align: left; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); border-radius: 7px; padding: 9px 12px; color: rgba(255,255,255,.6); font: inherit; font-size: 0.8125rem; }
.rc-search-trigger:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.rc-search-trigger .ic { color: rgba(255,255,255,.8); }
.rc-search-trigger .rc-search-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-search-trigger .rc-kbd { font-size: 0.6875rem; color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; padding: 1px 6px; }

/* Shared small-caps eyebrow — personal menu, command palette, notifications panel, feature stubs. */
.rc-menu-eyebrow { font-size: 0.625rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--label); padding: 12px 14px 6px; }

/* ── Command palette ──────────────────────────────────────────────────────────*/
.rc-palette-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(20,28,24,.34); display: flex; justify-content: center; align-items: flex-start; padding-top: 11vh; backdrop-filter: blur(1.5px); }
.rc-palette { width: 640px; max-width: 92vw; max-height: 72vh; background: var(--panel); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.32), var(--hairline); display: flex; flex-direction: column; overflow: hidden; }
.rc-palette-input { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--hair-2); }
.rc-palette-input .ic { color: var(--muted); }
.rc-palette-input input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 1rem; color: var(--ink); background: transparent; }
.rc-kbd { font-size: 0.6875rem; color: var(--label); border: 1px solid var(--control-border); border-radius: 4px; padding: 2px 7px; }
.rc-palette-body { overflow-y: auto; padding: 8px; }
.rc-palette-empty { padding: 28px 16px; text-align: center; font-size: 0.84375rem; color: var(--label); }
.rc-palette-sec { margin-bottom: 6px; }
.rc-palette-row { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 9px; cursor: pointer; }
.rc-palette-row.sel { background: var(--brand-tint); }
.rc-cmd-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--surface); color: var(--body); display: flex; align-items: center; justify-content: center; flex: none; }
.rc-cmd-ico.sel { background: var(--brand-solid); color: #fff; }
.rc-cmd-text { flex: 1; min-width: 0; }
.rc-cmd-label { display: block; font-size: 0.84375rem; font-weight: 500; color: var(--ink); }
.rc-cmd-sub { display: block; font-size: 0.71875rem; color: var(--label); }
.rc-palette-row > .ic { color: var(--muted); }
.rc-action-pill { font-size: 0.65625rem; font-weight: 600; letter-spacing: .4px; color: var(--brand); background: var(--brand-tint); border-radius: 999px; padding: 3px 9px; }
.rc-palette-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--hair-2); font-size: 0.71875rem; color: var(--label); }
.rc-palette-foot b { color: var(--muted); }
.rc-palette-foot-spacer { flex: 1; }

/* ── Personal menu ────────────────────────────────────────────────────────────*/
.rc-pm-wrap { position: relative; display: flex; }
.tb-avatar.open { box-shadow: 0 0 0 2px var(--brand-solid), 0 0 0 4px #fff; }
.rc-pm { position: absolute; top: calc(100% + 9px); right: 0; z-index: 1201; width: 336px; background: var(--panel); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.24), var(--hairline); overflow: hidden; }
.rc-pm-id { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; }
.rc-pm-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-solid); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex: none; }
.rc-pm-id-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-pm-name { font-size: 0.90625rem; font-weight: 600; color: var(--ink); }
.rc-pm-email { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-pm-role { font-size: 0.625rem; font-weight: 600; color: var(--muted); background: var(--surface); border-radius: 999px; padding: 4px 9px; flex: none; }
.rc-pm-rows { padding: 2px 8px; border-top: 1px solid var(--hair-3); }
.rc-pm-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; font-family: inherit; padding: 10px; border-radius: 10px; }
.rc-pm-row:hover { background: var(--hair-2); }
.rc-pm-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: none; }
.rc-pm-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-pm-row-title { font-size: 0.84375rem; font-weight: 600; color: var(--ink); }
.rc-pm-row-sub { font-size: 0.71875rem; color: var(--label); }
.rc-pm-row > .ic { color: var(--faint); }
.rc-pm-foot { border-top: 1px solid var(--hair-2); padding: 8px; }
.rc-pm-signout { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 0.8125rem; color: var(--body); padding: 9px 8px; border-radius: 8px; }
.rc-pm-signout:hover { background: var(--hair-2); color: var(--ink); }
.rc-pm-signout .ic { color: var(--muted); }

/* ── Mobile: hide the rail, turn the sidebar into the off-canvas drawer ────────*/
@media (max-width: 900px) {
  .app, .app.panel-collapsed { grid-template-columns: 1fr; grid-template-rows: 56px 1fr; }
  .rc-rail { display: none; }
  .rc-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 264px; max-width: 84vw; z-index: 60; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 16px 44px rgba(0,0,0,.24); }
  .app.nav-open .rc-sidebar { transform: translateX(0); }
  /* The rail is hidden here, so the directory drawer has no rail to align to — neutralize the
     rail-mirroring rhythm back to the plain tight list even when rc-sidebar-dir is applied. */
  .rc-sidebar.rc-sidebar-dir { padding-top: 12px; padding-bottom: 10px; gap: 2px; }
  .rc-sidebar-dir .rc-side-toggle-spacer { height: 6px; }
  .rc-sidebar-dir .rc-dir-div, .rc-sidebar-dir .rc-dir-spacer { display: none; }
  /* The rail is hidden here, so this is the drawer's only route back to the other products. */
  .rc-side-alldirs { display: flex; }
  /* The panel is the drawer itself at this width — collapsing it would leave no navigation. */
  .rc-side-collapse { display: none; }
  .app .content { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Member On-Boarding — the applicant pipeline (views/admin-applicants.js).

   Class-driven rather than inline-styled: the design handoff specifies this screen in literal hex,
   and pasting that in would re-introduce exactly the dark-on-dark the F4 migration removed. Every
   colour below resolves through a token, so the board themes with everything else.
   ══════════════════════════════════════════════════════════════════════════════ */

/* 1280 rather than the handoff's 1360 canvas: that figure is the whole browser window, and the rail
   plus the expanded side menu take ~80px of it before the content box starts. */
.onb { max-width: 1280px; margin: 0 auto; }
.onb-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1180px) { .onb-kpis { grid-template-columns: repeat(2, 1fr); } }
.onb-kpi { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 14px 16px; }
.onb-kpi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.onb-kpi-chip { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; font-size: 15px; }
.onb-kpi-label { font-size: 0.65625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); }
.onb-kpi-val { font-family: "Space Mono", monospace; font-size: 1.5rem; font-weight: 700; letter-spacing: -.8px; color: var(--ink); line-height: 1; }
.onb-kpi-sub { font-size: 0.71875rem; color: var(--label); margin-top: 5px; }

/* Tone chips — the lane/owner palette, reused by the KPI icons, step pills and lane headers. */
.onb-t-info { background: var(--info-bg); color: var(--info); }
.onb-t-ok { background: var(--ok-bg); color: var(--ok); }
.onb-t-warn { background: var(--warn-bg); color: var(--warn-ink); }
.onb-t-orange { background: var(--orange-bg); color: var(--orange); }
.onb-t-slate { background: var(--surface); color: var(--body); }

.onb-callout { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border-radius: var(--radius); margin-bottom: 16px; background: var(--orange-bg); box-shadow: inset 0 0 0 1px var(--orange); }
.onb-callout-t { font-size: 0.84375rem; font-weight: 600; color: var(--orange); }
.onb-callout-b { font-size: 0.78125rem; color: var(--body); margin-top: 2px; line-height: 1.5; }
.onb-flash { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: var(--radius); margin-bottom: 14px; background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok); font-size: 0.8125rem; font-weight: 600; color: var(--ok); }

/* Boards. The stage board scrolls horizontally and bleeds to the content padding; the turn board
   is a plain 3-up grid. Both use the same lane trough. */
.onb-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1180px) { .onb-lanes { grid-template-columns: 1fr; } }
.onb-stage-scroll { overflow-x: auto; padding-bottom: 10px; }
.onb-stage-row { display: flex; gap: 12px; align-items: flex-start; width: max-content; }
.onb-stage-col { width: 244px; flex: none; }
.onb-lane { background: var(--lane); border-radius: 4px; padding: 10px; min-height: 200px; }
.onb-stage-col .onb-lane { padding: 9px; min-height: 168px; }
.onb-lane-head { display: flex; align-items: center; gap: 9px; padding: 4px 6px 12px; }
.onb-lane-t { font-size: 0.84375rem; font-weight: 600; color: var(--ink); }
.onb-lane-s { font-size: 0.71875rem; color: var(--label); }
.onb-lane-n { font-family: "Space Mono", monospace; font-size: 0.8125rem; font-weight: 700; }
.onb-lane-empty { padding: 22px 10px; text-align: center; font-size: 0.78125rem; color: var(--faint); }
.onb-lane-body { display: flex; flex-direction: column; gap: 9px; }
.onb-stage-num { font-family: "Space Mono", monospace; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65625rem; font-weight: 700; flex: none; }

.onb-card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 12px 13px; cursor: pointer; text-align: left; width: 100%; border: 0; font: inherit; display: block; }
.onb-card:hover { background: var(--panel-2); }
.onb-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.onb-card-name { font-size: 0.84375rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-card-id { font-family: "Space Mono", monospace; font-size: 0.65625rem; color: var(--label); }
.onb-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 0.71875rem; color: var(--label); }
.onb-card-foot .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-card-hold { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair-3); font-size: 0.71875rem; color: var(--orange); line-height: 1.4; }
.onb-days-late { color: var(--orange); font-weight: 600; }
.onb-steppill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.71875rem; font-weight: 600; padding: 4px 9px; border-radius: var(--pill); }

/* Eight-segment progress bar. Three tones, all tokenized — the handoff's #9dc4b3 "current" has no
   dark counterpart, so it resolves to the brand tint over the empty track instead. */
.onb-prog { display: flex; gap: 2px; }
.onb-prog span { flex: 1; height: 4px; border-radius: 1px; background: var(--hair); }
.onb-prog span.done { background: var(--brand-solid); }
.onb-prog span.cur { background: var(--brand); opacity: .45; }

.onb-avatar { border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }

/* List view */
.onb-list-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hair-2); flex-wrap: wrap; }
.onb-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr 1fr .9fr; gap: 12px; align-items: center; }
.onb-list-head { padding: 10px 16px; background: var(--panel-2); border-bottom: 1px solid var(--hair-2); font-size: 0.65625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; color: var(--label); }
.onb-list-row { padding: 13px 16px; border-bottom: 1px solid var(--hair-3); cursor: pointer; width: 100%; border-left: 0; border-right: 0; border-top: 0; background: var(--panel); font: inherit; text-align: left; }
.onb-list-row:hover { background: var(--panel-2); }

/* ── Join-request triage ─────────────────────────────────────────────────────── */
.onb-triage { max-width: 980px; }
.onb-pending { font-size: 0.8125rem; font-weight: 700; color: var(--brand); background: var(--brand-tint); border-radius: var(--pill); padding: 6px 13px; }
.onb-req { padding: 16px 18px; }
.onb-avatar-neutral { background: var(--surface); color: var(--body); }
/* The lookup verdict. Tinted by .onb-t-* — which sets BOTH background and colour — so the label and
   detail inherit the tone rather than restating it. */
.onb-lookup { display: flex; align-items: flex-start; gap: 9px; margin-top: 11px; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.onb-lookup-t { font-size: 0.65625rem; font-weight: 700; letter-spacing: .6px; }
.onb-lookup-b { font-size: 0.75rem; margin-top: 3px; line-height: 1.45; opacity: .85; }

/* ── Applicant record ────────────────────────────────────────────────────────── */
.onb-rec { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 1180px) { .onb-rec { grid-template-columns: 1fr; } }
.onb-banner { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: var(--radius); margin-bottom: 16px; }
.onb-banner.lock { background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok); }
.onb-banner.hold { background: var(--orange-bg); box-shadow: inset 0 0 0 1px var(--orange); }
.onb-banner-t { font-size: 0.84375rem; font-weight: 600; }
.onb-banner-b { font-size: 0.78125rem; margin-top: 3px; line-height: 1.5; color: var(--body); }
.onb-banner-m { font-size: 0.71875rem; margin-top: 5px; color: var(--muted); }

/* Stepper. The connector is a pseudo-element on the rail cell so it spans the real row height
   rather than needing a hard-coded min-height per step. */
.onb-step { display: flex; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--hair-3); }
.onb-step:last-child { border-bottom: 0; }
.onb-step.is-current { background: var(--panel-2); }
.onb-step.is-held { background: var(--orange-bg); }
.onb-step-rail { display: flex; flex-direction: column; align-items: center; flex: none; width: 28px; }
.onb-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; font-family: "Space Mono", monospace; font-size: 0.75rem; font-weight: 700; background: var(--hair-2); color: var(--faint); }
.onb-dot.done { background: var(--brand-solid); color: #fff; }
.onb-dot.cur { background: var(--panel); color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.onb-dot.held { background: var(--panel); color: var(--orange); box-shadow: inset 0 0 0 2px var(--orange); }
.onb-conn { flex: 1; width: 2px; background: var(--hair-2); margin-top: 6px; min-height: 12px; }
.onb-conn.done { background: var(--brand); opacity: .4; }
.onb-step-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.onb-step-label { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.onb-step.is-locked .onb-step-label { color: var(--faint); }
.onb-ownerpill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.65625rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; padding: 3px 8px; border-radius: var(--pill); }
.onb-step-meta { font-size: 0.71875rem; color: var(--label); }
.onb-step-note { font-size: 0.78125rem; color: var(--body); margin-top: 5px; line-height: 1.5; }
.onb-step.is-locked .onb-step-note { color: var(--faint); }
.onb-action { margin-top: 12px; background: var(--panel); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--control-border); padding: 13px 14px; }
.onb-action-note { display: flex; gap: 9px; margin-bottom: 11px; font-size: 0.75rem; color: var(--muted); line-height: 1.5; }
.onb-action-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.onb-rail-card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 15px 17px; }
.onb-rail-t { font-size: 0.84375rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.onb-kv { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair-3); }
.onb-kv:last-child { border-bottom: 0; }
.onb-kv dt { font-size: 0.75rem; color: var(--label); width: 108px; flex: none; }
.onb-kv dd { font-size: 0.78125rem; color: var(--ink); text-align: right; flex: 1; margin: 0; }
.onb-note-card { background: var(--panel-2); border-radius: var(--radius); box-shadow: var(--hairline); padding: 15px 17px; display: flex; gap: 9px; }
.onb-activity { display: flex; gap: 10px; }
.onb-activity .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .4; margin-top: 6px; flex: none; }

/* ── Settings → On-Boarding (views/settings-onboarding.js) ──────────────────────
   Sub-nav + one section card, per canvas frames B11–B14. Every colour resolves through a token, so
   the screen themes with the rest of the app rather than pasting the handoff's literal hexes.
   1100 rather than the handoff's 1180 wrapper for the same reason .onb uses 1280 for its 1360: that
   figure is the whole browser window, and the rail plus the expanded side menu take ~80px of it
   before the content box starts. */
.onbset { max-width: 1100px; margin: 0 auto; }
.onbset-back { padding: 4px 0; margin-bottom: 10px; }
.onbset-body { display: grid; grid-template-columns: 244px 1fr; gap: 18px; align-items: start; }
/* THE BREAKPOINT IS AGAINST THE VIEWPORT, SO THE ARITHMETIC HAS TO BE TOO. The first version was
   computed from the 1100px wrapper and ignored the app shell — .app is `64px 240px 1fr` and
   .content.pad adds 30px each side, so 364px is gone before the wrapper starts. At a 981px viewport
   the two-column card body is 981 − 364 − 244 − 18 − 40 = 315px against a fee row needing 392px of
   fixed width: guaranteed overflow immediately above the old 980px stop. (Copilot on #369.)

   1040 is the round number above where a stacked panel is comfortably usable; below it the sub-nav
   and the panel stop coexisting. The fee row itself no longer depends on this — see the auto-fit
   note below — so this now decides only whether the sub-nav sits beside the panel or above it. */
@media (max-width: 1040px) { .onbset-body { grid-template-columns: 1fr; } }

/* A GRID ITEM DEFAULTS TO min-width:auto, WHICH IS NOT ZERO — it refuses to shrink below its own
   min-content width. Here that is the 680px document table, so the panel stayed 720px wide inside a
   narrower grid column, the card overflowed it, and below roughly 700px THE WHOLE PAGE scrolled
   sideways. The horizontal scroll on .onbset-docscroll never engaged at any width, because its
   container was never the thing being constrained.

   That is the exact opposite of the documented behaviour ("the table scrolls in its own container
   rather than reflowing"), and it shipped. Nothing could see it: `overflow-x` computes to `auto`
   whether or not there is anything to scroll, so both the source-text pin and the computed-style
   assertion that replaced it passed against a table that never scrolled. It took measuring
   scrollWidth against clientWidth in a real browser.
   (Codex P2 on #370 asked for that measurement; the defect it exposed is ours.) */
.onbset-panel { min-width: 0; }

/* Overrides .card's 18px padding and 16px bottom margin — the rows carry their own padding, and a
   grid child that is `position: sticky` has no use for a trailing margin. */
.onbset-nav { padding: 8px; margin-bottom: 0; position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 1040px) { .onbset-nav { position: static; } }
.onbset-navrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 11px; border: 0; border-radius: var(--radius-ctrl); background: none; color: var(--body); cursor: pointer; font: inherit; }
.onbset-navrow:hover { background: var(--panel-2); }
.onbset-navrow.on { background: var(--brand-tint); }
.onbset-navrow .ic { color: var(--label); }
.onbset-navrow.on .ic { color: var(--brand); }
.onbset-navtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.onbset-navlabel { font-size: 0.8125rem; font-weight: 600; color: var(--body); }
.onbset-navrow.on .onbset-navlabel { color: var(--brand); }
.onbset-navsub { font-size: 0.71875rem; color: var(--label); }
/* Unsaved-changes marker. The screen keeps one dirty model across a section switch, so without this
   a half-edited section is indistinguishable from a saved one once you have navigated away from it. */
.onbset-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--warn-dot); flex: none; }

.onbset-card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); }
.onbset-card > header { padding: 16px 20px 14px; border-bottom: 1px solid var(--hair-2); }
.onbset-card > header h2 { margin: 0; font-size: 0.96875rem; font-weight: 600; color: var(--ink); }
.onbset-card > header p { margin: 4px 0 0; font-size: 0.78125rem; color: var(--muted); max-width: 620px; line-height: 1.5; }
.onbset-cardbody { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.onbset-card > footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 20px 18px; }
.onbset-meta { font-size: 0.71875rem; color: var(--label); margin-right: auto; }
.onbset-loading { font-size: 0.8125rem; color: var(--muted); padding: 6px 0; }

.onbset-cardbody label { display: flex; flex-direction: column; gap: 5px; font-size: 0.71875rem; font-weight: 600; color: var(--muted); }
.onbset-cardbody input, .onbset-cardbody select, .onbset-cardbody textarea { font: inherit; font-size: 0.8125rem; font-weight: 400; padding: 9px 11px; border: 1px solid var(--control-border); border-radius: var(--radius-ctrl); background: var(--input-bg); color: var(--ink); width: 100%; }
.onbset-cardbody textarea { resize: vertical; line-height: 1.55; }
/* Every control in a section is disabled while that section's save is in flight — the working model
   is replaced by the response, so an edit made in the gap would vanish. Read as "busy", not "broken":
   the state lasts one request. */
.onbset-cardbody input:disabled, .onbset-cardbody select:disabled, .onbset-cardbody textarea:disabled { opacity: .55; cursor: not-allowed; }
.onbset-full { width: 100%; }

/* auto-fit rather than the handoff's literal `200px 160px 1fr`, and rather than a second breakpoint.
   Fixed tracks made the row's fitness a function of the shell, the wrapper cap, the sub-nav and the
   card padding all at once — five numbers to keep in agreement across two media queries, which is
   what went wrong above. This adapts on its own: three columns when the body is wide, two when it is
   not, one when it is narrow, and never overflowing. Same house pattern as .ap-form. */
.onbset-feegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; align-items: end; }
/* The `$` sits inside the field rather than beside it, so the amount reads as money at a glance.
   Padded left by 26px so a five-figure fee never slides under the prefix. */
.onbset-money { position: relative; display: block; }
.onbset-money-pre { position: absolute; left: 12px; top: 9px; font-family: "Space Mono", monospace; font-size: 0.9375rem; color: var(--label); pointer-events: none; }
.onbset-money input { font-family: "Space Mono", monospace; font-size: 1rem; font-weight: 700; padding: 9px 12px 9px 26px; }

/* A SIBLING of the fee grid inside the flex-column card body, not a grid child — so it gets the full
   width without needing a span, and the message about the amount is never squeezed into the 200px
   column the amount itself occupies. The negative top margin tucks it under the grid against the
   body's 16px gap. `.bad` is the unreadable-amount state; it also drives aria-invalid on the input,
   so the error is never carried by colour alone. */
.onbset-fieldhelp { margin: -6px 0 0; font-size: 0.71875rem; color: var(--label); line-height: 1.5; }
.onbset-fieldhelp.bad { color: var(--orange); font-weight: 600; }

/* Terms of Service. The version label is a short identifier, so the field is sized to one — a
   full-width input for "v4.2" invites a sentence, which is exactly what the 40-character ceiling
   exists to refuse. Capped rather than fixed so it still shrinks on a narrow panel. */
.onbset-tosver { max-width: 200px; }
.onbset-tosver input { font-weight: 700; }
/* Tall by default because the content is a document, not a note: the fee's waiver textarea is two
   rows and this one opens at fourteen, so a full set of terms is readable without scrolling a box
   inside a page. Still user-resizable (textarea resize: vertical, inherited above). min-height
   rather than only `rows`, so a browser that computes rows differently still gets a document-sized
   field. */
.onbset-tosbody { min-height: 260px; }

/* The version somebody else published while this draft was open. Deliberately loud — it sits above
   the editor and holds text the operator has not read yet, and the Publish button is disabled until
   it is dismissed. Bounded height with its own scroll: a full set of terms must not push the form
   they are still editing off the screen. */
.onbset-tosdiff { background: var(--orange-bg); box-shadow: inset 0 0 0 1px var(--orange); border-radius: var(--radius); padding: 13px 16px; display: flex; flex-direction: column; gap: 10px; }
.onbset-tosdiff-h { display: flex; align-items: flex-start; gap: 12px; }
.onbset-tosdiff-h .ic { color: var(--orange); flex: none; }
/* pre-wrap, because these are terms: paragraph breaks are part of the text being compared, and
   collapsing them would make two versions look more alike than they are. */
.onbset-tosdiff-b { white-space: pre-wrap; max-height: 220px; overflow-y: auto; background: var(--panel); border-radius: 8px; padding: 11px 13px; font-size: 0.78125rem; line-height: 1.55; color: var(--body); }
.onbset-tosdiff button { align-self: flex-start; }

/* Shown INSTEAD of the editor when the load failed — see `loaded` in the view. The controls are
   withheld rather than disabled because the danger is specific: the document save is a whole-set
   PUT, and an empty in-memory set after a failed GET is indistinguishable from a real empty one. */
.onbset-loadfail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--orange-bg); border-radius: 8px; padding: 13px 15px; font-size: 0.78125rem; color: var(--body); line-height: 1.5; }
.onbset-loadfail .ic { color: var(--orange); }
.onbset-loadfail button { margin-left: auto; }

.onbset-info { display: flex; align-items: flex-start; gap: 10px; background: var(--surface); border-radius: 8px; padding: 12px 14px; font-size: 0.75rem; color: var(--body); line-height: 1.5; }
.onbset-info .ic { color: var(--muted); margin-top: 1px; }

/* The table SCROLLS rather than reflowing. Collapsing six columns into two hid the header row —
   the only visible column labels — leaving six identical text boxes whose placeholders disappear the
   moment they hold values, so Version and Signers became indistinguishable to a sighted user. The
   aria-labels covered a screen reader and nothing covered the eye. Scrolling keeps every cell under
   its own heading at any width, and matches .onb-stage-scroll on the applicants board.
   (Copilot on #369.)

   THIS ONLY BECAME TRUE ON #370. Both declarations below were correct and the scroll still never
   engaged, because the PANEL above would not shrink — see the min-width note on .onbset-panel. The
   claim in this comment was false for the whole of #369 and nothing detected it, which is why the
   browser test now measures scrollWidth against clientWidth rather than reading these properties
   back. Do not weaken .onbset-panel { min-width: 0 } without re-reading that. */
.onbset-docscroll { overflow-x: auto; min-width: 0; }
.onbset-doctable { display: flex; flex-direction: column; min-width: 680px; }
.onbset-docrow { display: grid; grid-template-columns: 1fr 90px 1.1fr 76px 90px 34px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hair-3); }
.onbset-docrow:last-child { border-bottom: 0; }
.onbset-dochead { padding-bottom: 8px; border-bottom: 1px solid var(--hair-2); font-size: 0.65625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; color: var(--label); }

.onbset-docname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.onbset-docname .ic { color: var(--label); }
.onbset-docname input { font-weight: 600; }
.onbset-mono, .onbset-doctable input.onbset-mono { font-family: "Space Mono", monospace; font-size: 0.75rem; }
.onbset-docpages { color: var(--muted); }
.onbset-docempty { font-size: 0.78125rem; color: var(--muted); padding: 14px 0; }
/* The required/optional pill is a TOGGLE, not a status chip — it carries aria-pressed and reads as
   pressable, which a bare .pill would not. */
.onbset-req { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 0; border-radius: var(--pill); font: inherit; font-size: 0.6875rem; font-weight: 600; cursor: pointer; background: var(--hair-3); color: var(--label); }
.onbset-req.on { background: var(--ok-bg); color: var(--ok); }
.onbset-del { border: 0; background: none; padding: 4px; border-radius: var(--radius-ctrl); color: var(--faint); cursor: pointer; }
.onbset-del:hover { color: var(--orange); background: var(--orange-bg); }

.onbset-add { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 20px 16px; border: 1.5px dashed var(--dashed-border); border-radius: 8px; background: none; color: var(--body); cursor: pointer; font: inherit; }
.onbset-add:hover { background: var(--panel-2); }
.onbset-add .ic { color: var(--muted); }
.onbset-add-t { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.onbset-add-s { font-size: 0.71875rem; color: var(--label); text-align: center; }

.onbset-soon { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 0 4px; }
.onbset-soon p { margin: 0; font-size: 0.8125rem; color: var(--body); line-height: 1.55; max-width: 620px; }

/* ══════════════════════════════════════════════════════════════════════════════
   Theming & accessibility (Phase 2) — a true high-contrast token set + reduce-motion
   + a text-scale, all token overrides (no filter hacks). a11y.js stamps
   data-contrast / data-reduce + --font-scale on <html>.

   DARK MODE IS ACTIVE: the :root[data-theme="dark"] palette below themes the whole app.
   a11y.js applies data-theme="dark" (seeded from prefers-color-scheme, user-overridable via
   the personal-menu "Dark mode" toggle) now that the per-view inline-hex migration is complete,
   so foreground/background theme in lockstep (no dark-on-dark). Consumer/public pages opt out
   via the .rc-consumer scoped-light wrapper. See docs/DESIGN-SYSTEM-FOLLOWUPS.md §A.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Dark palette (active — see note above) ───────────────────────────────────*/
:root[data-theme="dark"] {
  --canvas: #101310;
  --panel: #191c17;
  --panel-2: #20241d;
  --surface: #23271f;
  --cream: #33352b;

  --ink: #f2f1ea;
  --body: #d0d2c8;
  --muted: #9a9d93;
  /* Raised for WCAG-AA (§A.5): audited ≥4.5:1 on every dark surface — tightest is --faint on
     --surface at 4.60:1; --ink/--body/--muted/--label and all status tones clear AA on
     canvas/panel/surface too. */
  --label: #9a9e93;
  --faint: #8b8f84;

  --hair: #2c2f27;
  --hair-2: #262922;
  --hair-3: #222620;
  --control-border: #34372e;
  --input-bg: #20241d;
  --dashed-border: #34372e;

  --brand: #37a479;        /* lightened so it stays legible AS ACCENT TEXT on the dark canvas (~7.9:1) */
  --brand-press: #2c8a64;
  /* Solid fill under WHITE text: the lightened accent --brand is only ~3.1:1 under #fff, so buttons/
     badges use a darker green here — #1f8250 gives white text ≥4.5:1 (WCAG AA). §A. */
  --brand-solid: #1f8250;
  --brand-solid-press: #18683f;
  --brand-tint: #15251d;   /* active-nav / selection bg on dark */
  --brand-badge: #182a20;
  --on-green-soft: #9fe3c2;

  --ok: #49bd86;   --ok-bg: #14271d;
  --warn-ink: #e7b64d; --warn-dot: #e0a020; --warn-bg: #2e2716; --warn-border: #57471f;
  --orange: #e08a5a; --orange-soft: #d97757; --orange-bg: #2c1c13;
  --danger: #e2685e; --danger-bg: #2c1512; --danger-border: #5a2a25;
  --info: #63aecb; --info-bg: #12262f;
  /* Darker than --panel, as in light (see there). Sits just above --canvas so the lane still reads
     as its own well against the page rather than dissolving into it. */
  --lane: #14170f;

  --hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-float: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 2px 12px rgba(0, 0, 0, 0.5);
  --shadow-overlay: 0 6px 24px rgba(0, 0, 0, 0.55);

  /* Keep the header brand-green in dark (brand-forward), just a touch deeper. */
  --header-bg: #06331f;
  --header-fg: #ffffff;
  /* Explicit in dark: the derived light-mode mix would key off the lightened dark --brand-press and
     read far too bright for a full-height chrome surface (and mint under white icons in
     dark+contrast, where --brand-press is #46c187). Deeper than --header-bg, as in light. */
  --rail-bg: #052a1a;
}
/* (No prefers-color-scheme hook while dark is deferred — nothing reacts to OS dark yet.) */

/* ── Consumer scoped-light (§A.3) ─────────────────────────────────────────────
   The public consumer pages (portal / sign / nationwide / verify) are fixed-light "paper"
   surfaces and must NOT inherit the dark palette when an agent has dark on in the same browser.
   Wrapping their render in .rc-consumer re-declares the themeable tokens to their LIGHT values for
   that subtree, and paints a light canvas backdrop so the (possibly-dark) <body> behind never
   shows through. These pages keep their own brand palette; this only pins the shared tokens. */
.rc-consumer {
  --brand: #006747; --brand-press: #00543a; --brand-solid: var(--brand); --brand-solid-press: var(--brand-press); --brand-tint: #eef4f1; --brand-badge: #e8f1ec; --on-green-soft: #9fe3c2;
  --canvas: #f4f3ef; --panel: #ffffff; --panel-2: #faf9f6; --surface: #f6f5f1; --cream: #e7e1d4;
  --ink: #1d241f; --body: #4a504a; --muted: #8a8e88; --label: #a8aca6; --faint: #bcbfba;
  --hair: #ececec; --hair-2: #f1f0ea; --hair-3: #f4f3ee; --control-border: #e2e0d8; --input-bg: #ffffff; --dashed-border: #c8c6bc;
  --ok: #1f8a5b; --ok-bg: #e8f4ee; --warn-ink: #9a6a12; --warn-dot: #e0a020; --warn-bg: #fbf2dc; --warn-border: #ecd9a8;
  --orange: #c0612f; --orange-soft: #d97757; --orange-bg: #faf0e8; --danger: #b3261e; --danger-bg: #fbe9e7; --danger-border: #e7b3ac;
  --info: #2a6f8a; --info-bg: #e8f0f3;
  --header-bg: var(--brand-solid); --header-fg: #ffffff;
  --hairline: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
  --shadow-float: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-pop: 0 2px 12px rgba(0, 0, 0, 0.08); --shadow-overlay: 0 6px 24px rgba(0, 0, 0, 0.16);
  /* Re-declare color (not just the token): body{color:var(--ink)} computed on <body> would otherwise
     inherit the DARK --ink into this fixed-light subtree, leaving plain text light-on-light. */
  color: var(--ink);
  background: var(--canvas);
}

/* ── High contrast (token override, not a filter) ─────────────────────────────*/
:root[data-contrast] {
  --ink: #000000; --body: #1c211d; --muted: #454a44; --label: #4a4f49; --faint: #5b605a;
  --hair: #9a9a9a; --hair-2: #b4b4b4; --hair-3: #c6c6c6; --control-border: #767b72;
  /* --brand-solid stays CONCRETE here (not var(--brand)): high-contrast intentionally replaces tenant
     brand with an accessible default, and — because this rule is later in the file with the same
     specificity as :root[data-theme="dark"] — a var(--brand) here would leak into the dark+contrast
     combo (where --brand is the LIGHT accent #5ad39a) and drop white-on-solid buttons to ~1.9:1.
     Concrete #00432f gives white text ~11.4:1 (WCAG) in both light- and dark-contrast. (Codex/Gemini/Copilot.) */
  --brand: #00432f; --brand-press: #00351f; --brand-solid: #00432f; --brand-solid-press: #00351f;
  --hairline: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"][data-contrast] {
  --ink: #ffffff; --body: #e9eae3; --muted: #c2c5bb; --label: #b0b3a9; --faint: #9a9d93;
  --hair: #5a5e53; --hair-2: #4c5047; --hair-3: #44483f; --control-border: #6f7469;
  --brand: #5ad39a; --brand-press: #46c187;
  --hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
:root[data-contrast] *:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Reduce motion (toggle + OS preference) ───────────────────────────────────*/
:root[data-reduce] *, :root[data-reduce] *::before, :root[data-reduce] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* Accessibility switch (personal menu) — 40×23 pill toggle. */
.a11y-switch { width: 40px; height: 23px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; flex: none; background: var(--control-border); position: relative; transition: background .15s; }
.a11y-switch.on { background: var(--brand); }
.a11y-switch .a11y-knob { position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.a11y-switch.on .a11y-knob { left: 19px; }

/* Personal-menu onboarding preview */
.rc-pm-onboard { margin: 0 12px 12px; border: 1px solid var(--hair-2); border-radius: 10px; padding: 12px 13px; background: var(--panel-2); }
.rc-pm-ob-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rc-pm-ob-head .ic { color: var(--brand); }
.rc-pm-ob-title { flex: 1; font-size: 0.78125rem; font-weight: 600; color: var(--ink); }
.rc-pm-ob-pct { font-size: 0.6875rem; font-weight: 600; color: var(--brand); }
.rc-pm-ob-row { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--body); margin-bottom: 4px; }
.rc-pm-ob-bar { height: 5px; border-radius: 999px; background: var(--hair); overflow: hidden; margin-bottom: 8px; }
.rc-pm-ob-fill { height: 100%; background: var(--brand); border-radius: 999px; }
.rc-pm-ob-cta { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; border: 0; border-top: 1px solid var(--hair-2); background: transparent; cursor: pointer; font-family: inherit; font-size: 0.78125rem; font-weight: 600; color: var(--brand); padding: 10px 0 2px; margin-top: 2px; }
.rc-pm-ob-cta .ic { color: var(--brand); }

/* Personal-menu accessibility group */
.rc-pm-a11y { padding: 2px 8px 6px; border-top: 1px solid var(--hair-3); }
.rc-pm-a11y-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.rc-pm-a11y-row:hover { background: var(--hair-2); }
.rc-pm-a11y-ico { width: 28px; height: 28px; border-radius: 7px; background: var(--surface); color: var(--muted); display: flex; align-items: center; justify-content: center; flex: none; }
.rc-pm-a11y-ico.on { background: var(--brand-tint); color: var(--brand); }
.rc-pm-a11y-label { flex: 1; font-size: 0.78125rem; color: var(--body); }

/* ── Notifications panel (bell) ───────────────────────────────────────────────*/
.rc-notifs { position: fixed; top: 58px; right: 16px; width: 404px; max-height: 78vh; z-index: 56; background: var(--panel); border-radius: 14px; box-shadow: var(--shadow-overlay), var(--hairline); display: flex; flex-direction: column; overflow: hidden; }
.rc-notifs-head { display: flex; align-items: center; gap: 10px; padding: 15px 16px; border-bottom: 1px solid var(--hair-2); }
.rc-notifs-title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.rc-notifs-mark { border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 600; color: var(--brand); padding: 5px 8px; border-radius: 7px; }
.rc-notifs-mark:hover { background: var(--hair-2); }
.rc-notifs-body { overflow-y: auto; padding: 8px; }
.rc-notif-row { display: flex; gap: 12px; padding: 11px 10px; border-radius: 10px; cursor: pointer; }
.rc-notif-row:hover { background: var(--hair-2); }
.rc-notif-chip { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; }
.rc-notif-text { flex: 1; min-width: 0; }
.rc-notif-title { font-size: 0.84375rem; font-weight: 600; color: var(--ink); }
.rc-notif-desc { font-size: 0.78125rem; color: var(--body); margin-top: 2px; line-height: 1.45; }
.rc-notif-time { font-size: 0.6875rem; color: var(--label); margin-top: 4px; }
.rc-notifs-foot { border: 0; border-top: 1px solid var(--hair-2); background: transparent; cursor: pointer; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--brand); padding: 12px; }
.rc-notifs-foot:hover { background: var(--hair-2); }
.rc-notifs-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 22px 26px; gap: 4px; }
.rc-notifs-empty-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.rc-notifs-empty-title { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.rc-notifs-empty-sub { font-size: 0.78125rem; color: var(--muted); line-height: 1.45; max-width: 260px; }
.rc-notifs-cta { margin-top: 12px; border: 0; background: var(--brand-solid); color: #fff; border-radius: 8px; padding: 9px 16px; font-family: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.rc-notifs-cta:hover { background: var(--brand-press); }
/* Real-records feed (follow-up §D): head action, loading state, per-item icon + unread state. */
.rc-notifs-head-spacer { flex: 1; }
.rc-notifs-mark[disabled] { opacity: .55; cursor: default; }
.rc-notifs-loading { padding: 22px; text-align: center; color: var(--muted); font-size: 0.8125rem; }
.rc-notif-row { display: flex; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; font-family: inherit; align-items: flex-start; }
/* Stack title/body/time with real gaps — they're inline <span>s, so vertical margins wouldn't apply. */
.rc-notif-text { display: flex; flex-direction: column; gap: 2px; }
.rc-notif-ico { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--body); }
.rc-notif-ico .ic-svg { width: 17px; height: 17px; }
.rc-notif-row.unread { background: var(--brand-tint); }
.rc-notif-row.unread:hover { background: var(--brand-tint); }
.rc-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; align-self: center; }

/* ── Onboarding modal ─────────────────────────────────────────────────────────*/
.rc-ob-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(20,28,24,.42); display: flex; justify-content: center; align-items: center; padding: 24px; backdrop-filter: blur(2px); }
.rc-ob { width: 760px; max-width: 96vw; max-height: 90vh; background: var(--panel); border-radius: 16px; box-shadow: 0 28px 80px rgba(0,0,0,.36); overflow: hidden; display: flex; flex-direction: column; }
.rc-ob-head { background: var(--brand-solid); color: #fff; padding: 22px 26px; display: flex; align-items: center; gap: 18px; }
.rc-ob-ring { position: relative; width: 68px; height: 68px; flex: none; }
.rc-ob-ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.0625rem; font-weight: 700; }
.rc-ob-head-text { flex: 1; }
.rc-ob-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.4px; }
.rc-ob-sub { font-size: 0.84375rem; color: rgba(255,255,255,.82); margin-top: 3px; }
.rc-ob-x { border: 0; background: rgba(255,255,255,.14); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.rc-ob-body { display: grid; grid-template-columns: 1fr 1fr; overflow-y: auto; }
.rc-ob-col { padding: 22px 24px; }
.rc-ob-col-divider { border-right: 1px solid var(--hair-2); }
.rc-ob-col-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.rc-ob-col-head .ic { color: var(--brand); }
.rc-ob-col-title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); flex: 1; }
.rc-ob-col-pct { font-size: 0.75rem; font-weight: 600; color: var(--brand); }
.rc-ob-col-sub { font-size: 0.78125rem; color: var(--muted); margin-bottom: 16px; line-height: 1.5; }
.rc-ob-items { display: flex; flex-direction: column; gap: 8px; }
.rc-ob-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hair-2); background: var(--panel); width: 100%; text-align: left; font-family: inherit; font-size: inherit; color: inherit; }
.rc-ob-item.done { border-color: var(--brand-badge); background: var(--brand-tint); }
.rc-ob-item.clickable { cursor: pointer; }
.rc-ob-item.clickable:hover { background: var(--hair-2); }
.rc-ob-check { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--panel); border: 1.5px solid var(--control-border); }
.rc-ob-check.done { background: var(--brand-solid); border: 0; color: #fff; }
.rc-ob-check .ic-svg { width: 13px; height: 13px; }
.rc-ob-step { font-size: 0.6875rem; font-weight: 700; color: var(--label); }
.rc-ob-item-label { flex: 1; font-size: 0.84375rem; color: var(--ink); }
.rc-ob-item.done .rc-ob-item-label { color: var(--body); }
.rc-ob-add { font-size: 0.75rem; font-weight: 600; color: var(--brand); }
.rc-ob-item .ic { color: var(--brand); }
.rc-ob-foot { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--hair-2); background: var(--panel-2); }
.rc-ob-foot .ic { color: var(--label); }
.rc-ob-foot-note { flex: 1; font-size: 0.78125rem; color: var(--muted); }
.rc-ob-later { border: 1px solid var(--control-border); background: var(--panel); border-radius: 8px; padding: 9px 16px; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--body); cursor: pointer; }
.rc-ob-got { border: 0; background: var(--brand-solid); color: #fff; border-radius: 8px; padding: 9px 18px; font-family: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
@media (max-width: 640px) { .rc-ob-body { grid-template-columns: 1fr; } .rc-ob-col-divider { border-right: 0; border-bottom: 1px solid var(--hair-2); } }

/* ── Phase 3: net-new pages (product dashboards, Settings hub, Roles, FeatureStub) ─────────────
   Authored in tokens/rem so they inherit the accessibility (text-scale/contrast) work and are
   dark-ready when that toggle ships. The mark uses --ink bg + --panel glyph so it stays high-
   contrast in both light and dark. */

/* PageHead (components.js PageHead) */
.rc-pagehead { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.rc-ph-mark { width: 44px; height: 44px; border-radius: 11px; background: var(--ink); color: var(--panel); display: flex; align-items: center; justify-content: center; flex: none; }
.rc-ph-mark .ic-svg { width: 22px; height: 22px; }
.rc-ph-text { min-width: 0; flex: 1; }
.rc-ph-eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.rc-ph-lead { margin: 5px 0 0; color: var(--muted); font-size: 0.875rem; line-height: 1.5; max-width: 62ch; } /* 14px */
.rc-ph-right { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; }

/* Seg (components.js Seg) */
.rc-seg-ctl { display: inline-flex; border: 1px solid var(--control-border); border-radius: 8px; overflow: hidden; background: var(--panel); }
.rc-seg-ctl-btn { border: 0; border-radius: 0; background: transparent; color: var(--body); font: inherit; font-size: 0.78125rem; font-weight: 600; padding: 7px 14px; cursor: pointer; }
.rc-seg-ctl-btn + .rc-seg-ctl-btn { border-left: 1px solid var(--control-border); }
.rc-seg-ctl-btn.on { background: var(--brand-tint); color: var(--brand); }

/* Product dashboard (views/product-dashboard.js) */
.rc-dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.rc-kpi { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 16px; }
.rc-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rc-kpi-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.rc-kpi-ico .ic-svg { width: 17px; height: 17px; }
.rc-kpi-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rc-kpi-value { font-family: var(--font-display); font-size: 1.625rem; font-weight: 600; letter-spacing: -0.8px; color: var(--ink); line-height: 1.1; } /* 26px */
.rc-kpi-label { font-size: 0.78125rem; font-weight: 600; color: var(--ink); margin-top: 6px; }
.rc-kpi-sub { font-size: 0.71875rem; color: var(--muted); margin-top: 2px; }
.rc-dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.rc-dash-cols .panel-head h2 { flex: 1; }
.rc-attn-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; font: inherit; padding: 13px 18px; border-bottom: 1px solid var(--hair-2); }
.rc-attn-row:last-child { border-bottom: 0; }
.rc-attn-row:hover { background: var(--hair-3); }
.rc-attn-chip { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; }
.rc-attn-chip .ic-svg { width: 16px; height: 16px; }
.rc-attn-text { flex: 1; font-size: 0.8125rem; color: var(--ink); line-height: 1.4; }
.rc-attn-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 600; color: var(--brand); white-space: nowrap; }
.rc-attn-cta .ic-svg { width: 14px; height: 14px; }
.rc-jump-list { padding: 8px; }
.rc-jump-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; font: inherit; padding: 10px 12px; border-radius: 8px; }
.rc-jump-row:hover { background: var(--hair-3); }
.rc-jump-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--surface); color: var(--body); display: flex; align-items: center; justify-content: center; flex: none; }
.rc-jump-ico .ic-svg { width: 16px; height: 16px; }
.rc-jump-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-jump-label { font-size: 0.84375rem; font-weight: 600; color: var(--ink); }
.rc-jump-group { font-size: 0.6875rem; color: var(--muted); }
.rc-jump-row > .ic { color: var(--label); }

/* Settings overview (views/settings.js) */
.rc-set-summary { display: flex; align-items: flex-start; gap: 11px; background: var(--surface); border-radius: 10px; padding: 13px 16px; margin-bottom: 22px; font-size: 0.78125rem; color: var(--body); line-height: 1.55; }
.rc-set-summary .ic { color: var(--label); flex: none; margin-top: 1px; }
.rc-set-summary strong { color: var(--ink); font-weight: 600; }
.rc-set-section { margin-bottom: 26px; }
.rc-set-head { margin-bottom: 12px; }
.rc-set-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--ink); letter-spacing: -0.2px; } /* 17px */
.rc-set-sub { font-size: 0.78125rem; color: var(--muted); margin-top: 2px; }
.rc-set-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rc-set-card { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; border: 1px solid var(--hair-2); background: var(--panel); border-radius: 11px; padding: 15px 16px; cursor: pointer; font: inherit; }
.rc-set-card:hover { border-color: var(--control-border); background: var(--panel-2); }
.rc-set-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: none; }
.rc-set-ico .ic-svg { width: 18px; height: 18px; }
.rc-set-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-set-card-title { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.rc-set-card-sub { font-size: 0.75rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.rc-set-card > .ic { color: var(--label); flex: none; }
.rc-set-locked { display: flex; align-items: center; gap: 9px; font-size: 0.78125rem; color: var(--muted); background: var(--surface); border-radius: 10px; padding: 13px 16px; }
.rc-set-locked .ic { color: var(--label); }

/* Roles & Permissions reference (views/admin-roles.js) */
.rc-roles-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 4px; }
.rc-role-card { padding: 14px 16px; }
.rc-role-name { font-size: 0.84375rem; font-weight: 600; color: var(--ink); }
.rc-role-desc { font-size: 0.71875rem; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.rc-roles-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.rc-roles-table th, .rc-roles-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--hair-2); }
.rc-roles-table thead th { font-size: 0.6875rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.rc-roles-table tbody tr:last-child td { border-bottom: 0; }
.rc-cap-label { font-weight: 600; color: var(--ink); }
.rc-cap-cell { text-align: center; }
.rc-cap-cell .ic { color: var(--brand); }
.rc-cap-dash { color: var(--label); }
.rc-roles-note { display: flex; align-items: center; gap: 9px; font-size: 0.78125rem; color: var(--muted); margin-top: 16px; }
.rc-roles-note .ic { color: var(--label); }

/* FeatureStub (views/soon.js) */
.rc-stub-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.rc-stub-cap { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; font-size: 0.8125rem; color: var(--ink); line-height: 1.45; }
.rc-stub-cap .ic { flex: none; margin-top: 1px; }
.rc-stub-preview { padding: 0; }
.rc-stub-preview-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px 0; }
.rc-stub-rule { flex: 1; height: 1px; background: var(--hair-2); }
.rc-stub-foot { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.rc-skel-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 18px 20px; }
.rc-skel-col { background: var(--surface); border-radius: 10px; padding: 10px; }
.rc-skel-coltitle { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 2px 4px 8px; }
.rc-skel-card { background: var(--panel); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.rc-skel-card + .rc-skel-card { margin-top: 8px; }
.rc-skel-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px 18px 20px; }
.rc-skel-tile { display: flex; flex-direction: column; gap: 7px; }
.rc-skel-img { height: 92px; border-radius: 8px; background: var(--surface); }
.rc-skel-list { padding: 8px 18px 18px; }
.rc-skel-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair-2); }
.rc-skel-row:last-child { border-bottom: 0; }
.rc-skel-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); flex: none; }
.rc-skel-bar { height: 9px; border-radius: 5px; background: var(--surface); display: block; }
.rc-skel-row .rc-skel-bar:first-of-type { flex: 1; }
.rc-skel-bar.w30 { width: 30%; } .rc-skel-bar.w45 { width: 45%; } .rc-skel-bar.w50 { width: 50%; }
.rc-skel-bar.w60 { width: 60%; } .rc-skel-bar.w70 { width: 70%; } .rc-skel-bar.w80 { width: 80%; }

@media (max-width: 1000px) {
  .rc-dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .rc-dash-cols { grid-template-columns: 1fr; }
  .rc-set-grid { grid-template-columns: 1fr; }
  .rc-roles-cards { grid-template-columns: repeat(2, 1fr); }
  .rc-stub-caps { grid-template-columns: 1fr; }
  /* The kanban/gallery previews keep intrinsic-width columns; at phone widths four columns force
     the preview card (and the page) to scroll horizontally. Collapse to two shrinkable columns. */
  .rc-skel-kanban, .rc-skel-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Visually-hidden but screen-reader-available (accessible names for icon-only cells etc.). */
.rc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Admin — Agents & Users roster (views/admin-users.js). Tokens only, both themes; borrows
   .rc-roles-table for the grid rather than declaring a second table style. */
.rc-users-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.rc-users-search { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; min-width: 0; background: var(--input-bg); border: 1px solid var(--control-border); border-radius: 9px; padding: 0 12px; }
.rc-users-search .ic { color: var(--muted); flex: none; }
.rc-users-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 0; font-family: inherit; font-size: 0.8125rem; color: var(--ink); }
.rc-users-search input:focus { outline: none; }
.rc-users-search:focus-within { border-color: var(--brand); }
.rc-users-sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.rc-users-sort:hover { color: var(--ink); }
.rc-users-sort .ic-svg { width: 13px; height: 13px; opacity: .75; }
.rc-users-sub { font-size: 0.75rem; margin-top: 1px; }
.rc-users-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--hair-2); font-size: 0.8125rem; }
.rc-users-pager { display: flex; align-items: center; gap: 10px; }
.rc-users .rc-roles-table tbody tr:hover { background: var(--hair-3); }

/* Admin Compliance overview (derived roll-up — views/admin-compliance.js) */
.rc-cmp-note { display: flex; align-items: flex-start; gap: 10px; font-size: 0.8125rem; color: var(--muted); background: var(--surface); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; line-height: 1.5; }
.rc-cmp-note .ic { color: var(--label); flex: none; margin-top: 1px; }
.rc-cmp .rc-roles-table tbody tr:hover { background: var(--hair-3); }
.rc-cmp-open { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--control-border); background: var(--panel); color: var(--brand); border-radius: 7px; padding: 5px 10px; font-family: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rc-cmp-open:hover { background: var(--surface); border-color: var(--muted); }
.rc-cmp-open .ic-svg { width: 14px; height: 14px; }
.rc-cmp-clear { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 22px; gap: 4px; }
/* Agent Compliance: one card per flagged listing, each issue with its severity + plain-language fix.
   The admin roll-up stays a table (scanning many listings); the agent page reads its own few. */
.rc-cmp-list { display: flex; flex-direction: column; gap: 12px; }
.rc-cmp-card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 16px; }
.rc-cmp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rc-cmp-card-addr .muted { font-size: 0.75rem; margin-top: 2px; }
.rc-cmp-card-meta { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.rc-cmp-issues { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rc-cmp-issues > li { display: flex; align-items: flex-start; gap: 10px; padding-top: 10px; border-top: 1px solid var(--hair-2); }
.rc-cmp-issues > li .pill { flex: none; margin-top: 1px; }
.rc-cmp-issue-body { min-width: 0; }
.rc-cmp-issue-label { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.rc-cmp-issue-fix { font-size: 0.78125rem; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.rc-cmp-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
@media (max-width: 700px) {
  .rc-cmp-card-head { flex-direction: column; }
  .rc-cmp-card-meta { justify-content: flex-start; }
}

/* ── Saved searches: one card per stored criteria set ─────────────────────── */
.rc-saved-list { display: flex; flex-direction: column; gap: 10px; }
.rc-saved-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); padding: 15px 16px; }
.rc-saved-main { min-width: 0; }
.rc-saved-name { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.rc-saved-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rc-saved-chip { font-size: 0.71875rem; font-weight: 600; color: var(--brand); background: var(--brand-tint); border-radius: 999px; padding: 3px 9px; }
.rc-saved-meta { font-size: 0.71875rem; color: var(--muted); margin-top: 8px; }
.rc-saved-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.rc-saved-del { background: none; border: 0; padding: 6px; color: var(--label); cursor: pointer; }
.rc-saved-del:hover { color: var(--danger); }
@media (max-width: 700px) {
  .rc-saved-card { flex-direction: column; }
  .rc-saved-actions { width: 100%; }
}

/* ── Follow-ups: Overdue / Today / Upcoming groups ────────────────────────── */
.rc-fu-group { margin-bottom: 22px; }
.rc-fu-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rc-fu-head h2 { font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin: 0; }
.rc-fu-none { font-size: 0.8125rem; color: var(--muted); margin: 0 0 4px; }
.rc-fu-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--hair-2); }
.rc-fu-row:last-child { border-bottom: 0; }
.rc-fu-row > input[type="checkbox"] { flex: none; width: 16px; height: 16px; cursor: pointer; }
.rc-fu-body { flex: 1; min-width: 0; }
.rc-fu-title { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.rc-fu-title.done { color: var(--label); text-decoration: line-through; }
.rc-fu-desc { font-size: 0.78125rem; color: var(--muted); margin-top: 1px; }
.rc-fu-client { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; background: none; border: 0; padding: 0; font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--brand); cursor: pointer; }
.rc-fu-client:hover { text-decoration: underline; }
.rc-fu-client .ic-svg { width: 13px; height: 13px; }
.rc-fu-due { flex: none; font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.rc-fu-due.late { color: var(--danger); font-weight: 600; }
.rc-fu-del { flex: none; background: none; border: 0; padding: 4px; color: var(--label); cursor: pointer; }
.rc-fu-del:hover { color: var(--danger); }
@media (max-width: 700px) {
  .rc-fu-row { flex-wrap: wrap; }
  .rc-fu-due { order: 3; }
}

/* ── COACH drawer ─────────────────────────────────────────────────────────── */
.coach-trigger {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--control-border));
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
  color: var(--brand); border-radius: 999px; padding: 6px 12px 6px 10px;
  font-family: inherit; font-size: 0.78125rem; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer; white-space: nowrap;
}
.coach-trigger:hover { background: color-mix(in srgb, var(--brand) 16%, var(--panel)); }
.coach-trigger .ic-svg { width: 15px; height: 15px; }
.coach-trigger-glow {
  position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent),
              0 0 18px color-mix(in srgb, var(--brand) 22%, transparent);
  opacity: 0.85;
}
.coach-kbd { font-size: 0.625rem; opacity: 0.75; margin-left: 2px; }
@media (max-width: 720px) {
  .coach-trigger-label, .coach-kbd { display: none; }
  .coach-trigger { padding: 8px; border-radius: 10px; }
}

.coach-root { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; }
.coach-backdrop { position: absolute; inset: 0; background: rgba(10, 14, 12, 0.35); backdrop-filter: blur(2px); }
.coach-drawer {
  position: relative; width: min(420px, 100vw); height: 100%;
  background: var(--panel); border-left: 1px solid var(--hair);
  display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(0,0,0,0.12);
}
.coach-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--hair);
}
.coach-head-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.coach-title { font-weight: 800; letter-spacing: 0.06em; font-size: 0.875rem; color: var(--brand); }
.coach-sub { font-size: 0.75rem; }
.coach-tabs {
  display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--hair);
}
.coach-tabs button {
  flex: 1; border: 0; background: transparent; color: var(--muted);
  font-family: inherit; font-size: 0.8125rem; font-weight: 600; padding: 8px;
  border-radius: 8px; cursor: pointer;
}
.coach-tabs button.on { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.coach-body { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.coach-err { margin: 8px 12px 0; padding: 8px 10px; border-radius: 8px; background: var(--danger-bg); color: var(--danger); font-size: 0.8125rem; }
.coach-loading { padding: 24px; text-align: center; color: var(--muted); }
.coach-card {
  border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px;
  background: var(--surface, var(--panel));
}
.coach-card-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.78125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin-bottom: 8px;
}
.coach-brief { white-space: pre-wrap; font-size: 0.84375rem; line-height: 1.45; }
.coach-primary {
  border: 0; border-radius: 9px; background: var(--brand-solid); color: #fff;
  font-family: inherit; font-weight: 600; font-size: 0.8125rem; padding: 8px 14px; cursor: pointer;
}
.coach-primary:disabled { opacity: 0.5; cursor: default; }
.coach-primary:hover:not(:disabled) { filter: brightness(1.05); }
.coach-54321 { display: flex; flex-direction: column; gap: 8px; }
.coach-metric { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: 0.8125rem; }
.coach-metric-c { display: inline-flex; align-items: center; gap: 6px; }
.coach-metric-c button {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--control-border);
  background: var(--panel); cursor: pointer; font-size: 1rem; line-height: 1;
}
.coach-metric-c .num { min-width: 1.5em; text-align: center; font-weight: 700; }
.coach-list { margin: 0; padding-left: 18px; font-size: 0.84375rem; line-height: 1.5; }
.coach-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.coach-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.coach-form label.full { grid-column: 1 / -1; }
.coach-form input, .coach-form textarea, .coach-compose input {
  border: 1px solid var(--control-border); border-radius: 8px; padding: 7px 9px;
  font-family: inherit; font-size: 0.8125rem; background: var(--panel); color: inherit;
}
.coach-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.coach-chip {
  border: 1px solid var(--control-border); background: var(--panel); color: inherit;
  border-radius: 999px; padding: 5px 10px; font-size: 0.75rem; font-family: inherit; cursor: pointer;
}
.coach-chip.on, .coach-chip:hover { border-color: var(--brand); color: var(--brand); }
.coach-chat { min-height: 0; }
.coach-chat-log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.coach-msg { display: flex; }
.coach-msg.user { justify-content: flex-end; }
.coach-msg-b {
  max-width: 92%; padding: 8px 11px; border-radius: 12px; font-size: 0.84375rem; line-height: 1.4;
  white-space: pre-wrap; background: var(--hair-3, #f0f2ef);
}
.coach-msg.user .coach-msg-b { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.coach-compose { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.coach-compose input { flex: 1; }
.coach-compose .tb-iconbtn.on { color: var(--brand); }
.coach-voice-tog { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
.coach-empty { padding: 20px 8px; text-align: center; font-size: 0.8125rem; }

/* ── Settings → System Administration: the shared configuration-page shell ──────────────────────────
   The 244px sticky section rail + 1fr panel used by System Branding, MLS Configuration and Audit Log,
   plus the Add-client page's form styling.

   WHY THIS IS NOT `.onbset-*`. Settings → On-Boarding (#369) built the same shell first, under names
   specific to that page. Renaming its classes to share them would touch a file another change is
   actively editing, so this is a separate, generically-named block instead. The duplication is
   deliberate and tracked in docs/DESIGN-SYSTEM-FOLLOWUPS.md §F.6: On-Boarding should fold into
   `.setcfg-*` once its remaining four sections land, and the two must not drift apart in the meantime.

   Every colour here is a token. No literal hex, so dark mode and high contrast come for free — see
   docs/DESIGN-SYSTEM-FOLLOWUPS.md §A. */
.setcfg { max-width: 1180px; margin: 0 auto; }
.setcfg-back { padding: 4px 0; margin-bottom: 10px; }
.setcfg-body { display: grid; grid-template-columns: 244px 1fr; gap: 18px; align-items: start; }
/* Below 1040px the rail stacks above the panel and stops sticking: a sticky rail on a narrow screen
   pins a tall list over the content it is meant to navigate. Same breakpoint as .onbset-body. */
@media (max-width: 1040px) { .setcfg-body { grid-template-columns: 1fr; } }
/* min-width:0 is load-bearing. Without it a grid item refuses to shrink below its content's intrinsic
   width, so a wide table inside the panel pushes the whole page sideways instead of scrolling inside
   its own container — and .setcfg-scroll's overflow never engages. */
.setcfg-panel { min-width: 0; }
.setcfg-nav { padding: 8px; position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 1040px) { .setcfg-nav { position: static; } }
.setcfg-navrow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 11px;
  border: 0; border-radius: var(--radius-ctrl); background: none; color: var(--body); cursor: pointer; font: inherit;
}
.setcfg-navrow:hover { background: var(--panel-2); }
.setcfg-navrow.on { background: var(--brand-tint); }
.setcfg-navrow .ic { color: var(--label); }
.setcfg-navrow.on .ic { color: var(--brand); }
.setcfg-navtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.setcfg-navlabel { font-size: 0.8125rem; font-weight: 600; color: var(--body); }
.setcfg-navrow.on .setcfg-navlabel { color: var(--brand); }
.setcfg-navsub { font-size: 0.71875rem; color: var(--label); }
.setcfg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn-dot, var(--orange)); flex: none; }
.setcfg-navfoot {
  border-top: 1px solid var(--hair-2); margin: 8px 4px 0; padding: 11px 7px 8px;
  font-size: 0.71875rem; color: var(--label); line-height: 1.5;
}

.setcfg-card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--hairline); }
.setcfg-card > header { padding: 16px 20px 14px; border-bottom: 1px solid var(--hair-2); }
.setcfg-card > header h2 { margin: 0; font-size: 0.96875rem; font-weight: 600; color: var(--ink); }
.setcfg-card > header p { margin: 4px 0 0; font-size: 0.78125rem; color: var(--muted); max-width: 620px; line-height: 1.5; }
.setcfg-cardbody { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.setcfg-card > footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 20px 18px; }
.setcfg-meta { font-size: 0.71875rem; color: var(--label); margin-right: auto; }
.setcfg-loading { font-size: 0.8125rem; color: var(--muted); padding: 6px 0; }

.setcfg-cardbody label { display: flex; flex-direction: column; gap: 5px; font-size: 0.71875rem; font-weight: 600; color: var(--muted); }
.setcfg-cardbody input, .setcfg-cardbody select, .setcfg-cardbody textarea {
  font: inherit; font-size: 0.8125rem; font-weight: 400; padding: 9px 11px;
  border: 1px solid var(--control-border); border-radius: var(--radius-ctrl);
  background: var(--input-bg); color: var(--ink); width: 100%;
}
.setcfg-cardbody textarea { resize: vertical; line-height: 1.55; }
.setcfg-cardbody input:disabled, .setcfg-cardbody select:disabled, .setcfg-cardbody textarea:disabled { opacity: .55; cursor: not-allowed; }
.setcfg-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; align-items: start; }
.setcfg-fieldhelp { margin: 0; font-size: 0.71875rem; color: var(--label); line-height: 1.5; }
.setcfg-fieldhelp.bad { color: var(--orange); font-weight: 600; }

/* One setting per row: label + description on the left, the control on the right. */
.setcfg-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair-3); }
.setcfg-row:last-child { border-bottom: 0; }
.setcfg-rowtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.setcfg-rowlabel { font-size: 0.84375rem; font-weight: 600; color: var(--ink); }
.setcfg-rowsub { font-size: 0.75rem; color: var(--muted); line-height: 1.5; max-width: 560px; }
.setcfg-rowctl { flex: none; }

.setcfg-info, .setcfg-warn, .setcfg-ok {
  display: flex; align-items: flex-start; gap: 10px; border-radius: 8px; padding: 12px 14px;
  font-size: 0.75rem; line-height: 1.5;
}
.setcfg-info { background: var(--surface); color: var(--body); }
.setcfg-info .ic { color: var(--muted); margin-top: 1px; }
.setcfg-warn { background: var(--orange-bg); color: var(--body); }
.setcfg-warn .ic { color: var(--orange); margin-top: 1px; }
.setcfg-ok { background: var(--ok-bg); color: var(--body); }
.setcfg-ok .ic { color: var(--ok); margin-top: 1px; }
.setcfg-flash {
  display: flex; align-items: center; gap: 9px; background: var(--ok-bg); color: var(--ok);
  border-radius: 8px; padding: 11px 15px; margin-bottom: 14px; font-size: 0.8125rem; font-weight: 600;
}
.setcfg-soon { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 0 4px; }
.setcfg-soon p { margin: 0; font-size: 0.8125rem; color: var(--body); line-height: 1.55; max-width: 620px; }

/* Tables. The wrapper scrolls, not the page — see the min-width note on .setcfg-panel. */
.setcfg-scroll { overflow-x: auto; min-width: 0; }
.setcfg-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.setcfg-table th {
  text-align: left; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .6px; color: var(--label); padding: 0 10px 8px 0; border-bottom: 1px solid var(--hair-2);
}
.setcfg-table td { font-size: 0.8125rem; color: var(--ink); padding: 11px 10px 11px 0; border-top: 1px solid var(--hair-3); vertical-align: top; }
.setcfg-table td.num, .setcfg-mono { font-family: "Space Mono", monospace; font-size: 0.75rem; }
.setcfg-tdnote { font-size: 0.75rem; color: var(--muted); margin-top: 3px; line-height: 1.5; max-width: 460px; }
.setcfg-badge {
  display: inline-block; font-size: 0.65625rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  border-radius: var(--pill); padding: 3px 9px; background: var(--hair-3); color: var(--label); white-space: nowrap;
}
.setcfg-badge.block { background: var(--orange-bg); color: var(--orange); }
.setcfg-badge.ok { background: var(--ok-bg); color: var(--ok); }
.setcfg-badge.off { background: var(--hair-3); color: var(--label); }

/* Branding: colour fields + the live contrast read-out. */
.setcfg-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.setcfg-swatch { display: flex; flex-direction: column; gap: 5px; }
.setcfg-swatch-ctl {
  display: flex; align-items: center; gap: 9px; border: 1px solid var(--control-border);
  border-radius: var(--radius-ctrl); padding: 6px 9px 6px 6px; background: var(--input-bg);
}
.setcfg-swatch-chip { width: 30px; height: 30px; border-radius: 5px; flex: none; box-shadow: inset 0 0 0 1px var(--hair-2); }
.setcfg-swatch-ctl input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 0;
  font-family: "Space Mono", monospace; font-size: 0.8125rem; color: var(--ink);
}
.setcfg-contrast { display: flex; flex-direction: column; gap: 0; }
.setcfg-contrast-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hair-3); font-size: 0.78125rem; }
.setcfg-contrast-row:first-child { border-top: 0; }
.setcfg-contrast-label { flex: 1; min-width: 0; color: var(--body); }
.setcfg-assets .setcfg-table { min-width: 560px; }
.setcfg-inherit { font-size: 0.71875rem; color: var(--label); }

/* Audit Log: tab row + the table/detail split. */
.setcfg-tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.setcfg-tab {
  border: 0; background: none; color: var(--muted); border-radius: var(--radius-ctrl);
  padding: 8px 15px; font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.setcfg-tab:hover { background: var(--panel-2); }
.setcfg-tab.on { background: var(--brand-tint); color: var(--brand); }
.setcfg-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; }
.setcfg-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; background: var(--surface); border-radius: var(--radius-ctrl); padding: 7px 11px; }
.setcfg-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.8125rem; color: var(--ink); }
.setcfg-filters select { font: inherit; font-size: 0.8125rem; padding: 8px 10px; border: 1px solid var(--control-border); border-radius: var(--radius-ctrl); background: var(--input-bg); color: var(--ink); }
.setcfg-audit { display: grid; grid-template-columns: 1fr 390px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .setcfg-audit { grid-template-columns: 1fr; } }
.setcfg-eventrow:hover td { background: var(--panel-2); }
.setcfg-eventrow.on td { background: var(--brand-tint); }
/* The selection affordance is a BUTTON inside the cell, not a click handler on the row — a <tr> is not
   focusable and has no keyboard activation path. Styled to fill the cell so it still reads as a row
   click, with a visible focus ring for the keyboard path the row could never offer. */
.setcfg-eventbtn {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 0; font: inherit; color: inherit; cursor: pointer;
}
.setcfg-eventbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.setcfg-catdot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.setcfg-detail { padding: 18px 20px 20px; position: sticky; top: 0; }
@media (max-width: 1100px) { .setcfg-detail { position: static; } }
.setcfg-diff { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--hair-3); font-size: 0.78125rem; }
.setcfg-diff:first-of-type { border-top: 0; }
.setcfg-diff-field { flex: 1; min-width: 0; color: var(--body); }
.setcfg-diff-from { font-family: "Space Mono", monospace; font-size: 0.75rem; color: var(--faint); text-decoration: line-through; }
.setcfg-diff-to { font-family: "Space Mono", monospace; font-size: 0.75rem; color: var(--brand); font-weight: 700; }
.setcfg-consequence { background: var(--surface); border-radius: 8px; padding: 12px 14px; }
.setcfg-prov { display: flex; gap: 12px; padding: 7px 0; border-top: 1px solid var(--hair-3); font-size: 0.78125rem; }
.setcfg-prov-k { width: 120px; flex: none; color: var(--label); font-size: 0.75rem; }
.setcfg-prov-v { color: var(--ink); word-break: break-all; }
.setcfg-empty { padding: 34px 0; text-align: center; font-size: 0.8125rem; color: var(--muted); }

/* ── CRM → Add a Client (views/client-new.js) ─────────────────────────────────────────────────────── */
.ncl { max-width: 760px; margin: 0 auto; }
.ncl-back { padding: 4px 0; margin-bottom: 10px; }
.ncl-card { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 18px; }
.ncl-card label { display: flex; flex-direction: column; gap: 5px; font-size: 0.71875rem; font-weight: 600; color: var(--muted); }
.ncl-card input, .ncl-card select, .ncl-card textarea {
  font: inherit; font-size: 0.8125rem; font-weight: 400; padding: 9px 11px;
  border: 1px solid var(--control-border); border-radius: var(--radius-ctrl);
  background: var(--input-bg); color: var(--ink); width: 100%;
}
.ncl-card textarea { resize: vertical; line-height: 1.55; }
.ncl-card input:disabled, .ncl-card select:disabled, .ncl-card textarea:disabled { opacity: .55; cursor: not-allowed; }
.ncl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ncl-row { display: flex; flex-direction: column; gap: 6px; }
.ncl-field { display: flex; flex-direction: column; gap: 5px; }
.ncl-lbl { font-size: 0.71875rem; font-weight: 600; color: var(--muted); }
.ncl-help { display: flex; align-items: center; gap: 6px; font-size: 0.71875rem; color: var(--label); line-height: 1.5; }
.ncl-help .ic { color: var(--muted); }
.ncl-typeahead { position: relative; }
.ncl-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; padding: 4px; border-radius: var(--radius-ctrl); color: var(--faint); cursor: pointer;
}
.ncl-clear:hover { color: var(--orange); background: var(--orange-bg); }
.ncl-suggest {
  position: absolute; left: 0; right: 0; z-index: 10; margin-top: 2px; background: var(--panel);
  border: 1px solid var(--hair-2); border-radius: var(--radius-ctrl); overflow: hidden; box-shadow: var(--shadow-pop);
}
.ncl-suggest-row {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0;
  background: none; padding: 8px 11px; font: inherit; cursor: pointer; border-bottom: 1px solid var(--hair-3);
}
.ncl-suggest-row:last-child { border-bottom: 0; }
.ncl-suggest-row:hover { background: var(--brand-tint); }
/* The ARROW-highlighted row. Same tint as :hover deliberately — the keyboard and pointer models point
   at one active option, so showing them differently would suggest two. Paired with aria-activedescendant
   on the input; without a visible counterpart the keyboard model is announced but invisible. */
.ncl-suggest-row.on { background: var(--brand-tint); }
.ncl-suggest-name { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.ncl-suggest-sub { font-size: 0.71875rem; color: var(--label); }
.ncl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ncl-tag {
  border: 1px solid var(--control-border); background: var(--panel); color: var(--body);
  border-radius: var(--pill); padding: 5px 11px; font: inherit; font-size: 0.75rem; cursor: pointer;
}
.ncl-tag:hover { border-color: var(--brand); color: var(--brand); }
.ncl-tag.on { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.ncl-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--hair-2); }
.ncl-meta { font-size: 0.71875rem; color: var(--label); margin-right: auto; }

/* ── Support settings (settings-support.js) ─────────────────────────────────────
   The shell — wrapper, 244px rail, cards — is .onbset-* from Settings → On-Boarding,
   reused rather than forked: the design specifies the same shell and says so. Only the
   controls this screen has and that one does not are declared here. */
.onbset-flash { min-height: 20px; font-size: 0.8125rem; font-weight: 600; color: var(--ok); margin: 0 0 8px; }
.onbset-lead { margin: 4px 0 16px; font-size: 0.8125rem; color: var(--muted); max-width: 620px; line-height: 1.5; }
/* SCOPED TO .sup-card. Unscoped, this padded every Settings → On-Boarding card too, whose header,
   body and footer already carry their own (styles.css:2403-2408) — double outer padding on a page
   this change has no business touching. (Copilot.) */
.sup-card { padding: 20px 24px 22px; }
.sup-card > h2 { margin: 0; font-size: 1.03125rem; font-weight: 600; color: var(--ink); }

/* Rail footer: the cross-link to the desk, with its live open count. */
.sup-railfoot { border-top: 1px solid var(--hair-2); margin: 8px 4px 0; padding-top: 11px; }
.sup-railfoot p { margin: 0 0 6px; font-size: 0.71875rem; line-height: 1.5; padding: 0 7px; }
.sup-railfoot strong { color: var(--body); font-weight: 600; }
.sup-count { font-size: 0.6875rem; font-weight: 700; color: var(--brand); background: var(--brand-tint); border-radius: 999px; padding: 2px 7px; }

/* A labelled field. `bad` marks a value that could not be parsed — it is HELD and not saved, so the
   marker has to be visible rather than the field silently reverting. */
.sup-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.71875rem; font-weight: 600; color: var(--muted); }
.sup-field > span { display: block; }
.sup-field input, .sup-field textarea, .sup-field select { font: inherit; font-size: 0.84375rem; font-weight: 400; padding: 9px 11px; border: 1px solid var(--control-border); border-radius: var(--radius-ctrl); background: var(--input-bg); color: var(--ink); width: 100%; }
.sup-field textarea { resize: vertical; line-height: 1.55; }
.sup-field.bad input { border-color: var(--danger); }
.sup-block { margin-top: 16px; }
.sup-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 4px; }
.sup-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin: 10px 0 6px; }
.sup-hint { margin: 6px 0 0; font-size: 0.71875rem; color: var(--label); }
.sup-hint code { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.6875rem; }
.sup-bad { margin: 6px 0 0; font-size: 0.71875rem; color: var(--danger); }

/* One setting per row: label + explanation on the left, the control on the right. */
.sup-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair-2); }
.sup-row:last-of-type { border-bottom: 0; }
.sup-rowtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sup-rowlabel { font-size: 0.84375rem; font-weight: 600; color: var(--ink); }
.sup-rowsub { font-size: 0.75rem; color: var(--label); line-height: 1.5; max-width: 560px; }
.sup-row select, .sup-inline { font: inherit; font-size: 0.8125rem; padding: 8px 10px; border: 1px solid var(--control-border); border-radius: var(--radius-ctrl); background: var(--input-bg); color: var(--ink); flex: none; }
.sup-inline { width: 240px; }

.sup-toggle { position: relative; flex: none; width: 38px; height: 22px; }
.sup-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.sup-toggle span { position: absolute; inset: 0; border-radius: 999px; background: var(--control-border); transition: background .15s; pointer-events: none; }
.sup-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.sup-toggle input:checked + span { background: var(--brand); }
.sup-toggle input:checked + span::after { transform: translateX(16px); }
.sup-toggle input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Channel rows — not a table: each is an icon tile, a name/detail/note stack, and a toggle or lock. */
.sup-chan { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--hair-2); }
.sup-chanic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--panel-2); color: var(--label); flex: none; }
.sup-chanic.on { background: var(--brand-tint); color: var(--brand); }
.sup-chantext { flex: 1; min-width: 0; }
.sup-chanhead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sup-channame { font-size: 0.84375rem; font-weight: 600; color: var(--ink); }
.sup-chandetail { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.75rem; color: var(--muted); }
.sup-always { font-size: 0.65625rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); background: var(--hair-2); border-radius: 999px; padding: 2px 8px; }
.sup-channote { margin: 3px 0 0; font-size: 0.75rem; color: var(--label); line-height: 1.5; max-width: 520px; }
.sup-lock { color: var(--control-border); flex: none; }

.sup-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.sup-table th { font-size: 0.6875rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--label); text-align: left; padding: 0 10px 8px 0; }
.sup-table td { font-size: 0.8125rem; color: var(--ink); padding: 10px 10px 10px 0; border-top: 1px solid var(--hair-2); vertical-align: middle; }
.sup-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: var(--muted); }
.sup-dot.warn { background: var(--orange); }
.sup-dot.faint { background: var(--control-border); }
.sup-target { font: inherit; font-size: 0.8125rem; padding: 7px 9px; border: 1px solid var(--control-border); border-radius: var(--radius-ctrl); background: var(--input-bg); color: var(--ink); width: 170px; max-width: 100%; }
.sup-target.bad { border-color: var(--danger); }

/* NARROW SCREENS. The response-target table carries two 170px inputs beside a priority column, which
   on a phone exceeds the panel and pushes the whole PAGE into horizontal scroll — the body must
   never scroll sideways. The table scrolls inside its own box instead, and the inputs stop insisting
   on 170px so most tenants never reach the scroll at all. (Copilot, suppressed.) */
.sup-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .sup-target { width: 110px; }
  .sup-table th, .sup-table td { padding-right: 8px; }
}

/* The MLS signature block. Line 2 is recomposed from the contact fields, exactly as the design does. */
.sup-sig { display: flex; align-items: center; gap: 13px; background: var(--panel-2); border-radius: 8px; padding: 14px 16px; box-shadow: var(--hairline); margin-top: 10px; }
.sup-sigmark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--brand); border: 2px solid var(--brand); flex: none; }
.sup-sigtext { border-left: 2px solid var(--hair-2); padding-left: 12px; min-width: 0; }
.sup-sigline1 { font-size: 0.78125rem; font-weight: 600; color: var(--ink); }
.sup-sigline2 { font-size: 0.71875rem; color: var(--muted); margin-top: 2px; }

.sup-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
/* What a section does not do yet. Deliberately not a danger tone — nothing is broken; the settings
   save. It is a scope note, and it sits above the controls so it is read before they are changed. */
.sup-notyet { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-ctrl); background: var(--info-bg); color: var(--info); font-size: 0.75rem; line-height: 1.5; }
.sup-notyet .ic { flex: none; margin-top: 1px; }

/* ── Groups (committees directory, committee detail, board of directors) ─────────────────────────
   design_handoff_groups/Groups.jsx. Font sizes are the design's px values expressed in rem (÷16),
   the same conversion every other handoff section here made. */

.rc-grp { max-width: 1360px; margin: 0 auto; }

/* back link above the detail */
.rc-grp-back { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; padding: 0; font: inherit; font-size: 0.78125rem; color: var(--muted); cursor: pointer; margin-bottom: 14px; }
.rc-grp-back:hover { color: var(--ink); }

/* detail header */
.rc-grp-dhead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.rc-grp-dhead-text { flex: 1; min-width: 0; }
.rc-grp-dmeta { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; font-size: 0.75rem; }
.rc-grp-typepill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 0.65625rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; flex: none; }
.rc-grp-dissolves { color: #c0612f; font-size: 0.75rem; }
.rc-grp-title { font-size: 1.5625rem; font-weight: 600; letter-spacing: -0.6px; color: var(--ink); margin: 0; }
.rc-grp-charter { font-size: 0.84375rem; color: var(--body); margin: 7px 0 0; max-width: 720px; line-height: 1.6; }
.rc-grp-dhead-actions { display: flex; gap: 9px; flex: none; }

/* open-seats callout + my-application strips */
.rc-grp-callout { display: flex; align-items: center; gap: 12px; background: #faece3; box-shadow: inset 0 0 0 1px rgba(192, 97, 47, 0.22); border-radius: 4px; padding: 13px 17px; margin-bottom: 16px; font-size: 0.8125rem; color: #7a3f18; line-height: 1.5; }
.rc-grp-callout .ic { flex: none; color: #c0612f; }
.rc-grp-myapp { display: flex; align-items: center; gap: 10px; background: var(--info-bg); border-radius: 4px; padding: 11px 15px; margin-bottom: 16px; font-size: 0.78125rem; color: var(--info); }
.rc-grp-myapp .ic { flex: none; }
.rc-grp-myapp.declined { background: var(--panel-2); color: var(--muted); }

/* detail layout: roster + facts rail */
.rc-grp-detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .rc-grp-detail-grid { grid-template-columns: 1fr; } }

.rc-grp-tabs { display: flex; align-items: center; gap: 4px; padding: 12px 18px 0; }
.rc-grp-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 6px 4px 9px; margin-right: 18px; font: inherit; font-size: 0.8125rem; color: var(--muted); cursor: pointer; }
.rc-grp-tabs button.on { border-bottom-color: var(--brand); font-weight: 600; color: var(--ink); }

.rc-grp-roster-head, .rc-grp-roster-row { display: grid; grid-template-columns: 1.7fr 1fr 1.1fr 0.8fr 0.8fr; gap: 14px; align-items: center; padding: 11px 18px; }
.rc-grp-roster-head { background: var(--panel-2); font-size: 0.65625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--label); }
.rc-grp-roster-row { border-top: 1px solid var(--hair-3); padding: 12px 18px; }
.rc-grp-roster-band { padding: 12px 18px 4px; font-size: 0.65625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--label); background: var(--panel-2); border-top: 1px solid var(--hair-2); }
/* NO `:first-of-type` RULE HERE, deliberately, and the reason is now LIVE rather than hypothetical.
   One used to sit at this line intending to drop the top border from the band directly under the
   switcher — and it never applied, because `.rc-grp-tabs` was the first div child of
   `.rc-grp-roster`, so no band was ever the first of its type. The roster is now wrapped in a
   labelled `role="region"` div, which makes the first band first-of-type INSIDE that wrapper: the
   rule would match today and would quietly remove a border that has shipped visible from the start.
   Rendering is preserved instead — every band keeps its top border. Whether the first one SHOULD
   have it is an aesthetic call that needs eyes on it, not a selector accident, and any further
   nesting (§I.10's roster table) hits the same trap: docs/DESIGN-SYSTEM-FOLLOWUPS.md §I.10. */
.rc-grp-member { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rc-grp-member-text { min-width: 0; }
.rc-grp-face { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex: none; }
.rc-grp-face.small { width: 26px; height: 26px; font-size: 0.59375rem; border: 2px solid var(--panel); }
.rc-grp-name { font-size: 0.84375rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.rc-grp-sub { font-size: 0.71875rem; }
.rc-grp-pos { font-size: 0.8125rem; color: var(--body); }
.rc-grp-electedby { display: block; margin-top: 2px; background: transparent; border: 0; padding: 0; font: inherit; font-size: 0.71875rem; color: var(--brand); font-weight: 600; cursor: pointer; text-align: left; }
.rc-grp-pos.officer { font-weight: 600; color: var(--ink); }
.rc-grp-mono { font-family: var(--mono, "Space Mono", monospace); font-size: 0.75rem; color: var(--body); }
.rc-grp-service { font-size: 0.75rem; }
.rc-grp-empty-rows { padding: 26px 18px; text-align: center; font-size: 0.8125rem; }

.rc-grp-side { display: flex; flex-direction: column; gap: 14px; }
.rc-grp-facts { padding: 15px 17px; }
.rc-grp-facts-title { font-size: 0.78125rem; font-weight: 600; color: var(--ink); margin-bottom: 11px; }
.rc-grp-fact { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 0.78125rem; }
.rc-grp-fact span:last-child { color: var(--ink); text-align: right; }

/* Your service */
.rc-grp-service-card { margin-bottom: 18px; }
.rc-grp-service-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--hair-2); }
.rc-grp-service-head .ic { color: var(--brand); }
.rc-grp-service-title { flex: 1; font-size: 0.90625rem; font-weight: 600; color: var(--ink); }
.rc-grp-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .rc-grp-service-grid { grid-template-columns: 1fr; } }
.rc-grp-service-tile { padding: 14px 18px; border-right: 1px solid var(--hair-3); cursor: pointer; }
.rc-grp-service-tile:nth-child(3n) { border-right: 0; }
.rc-grp-service-tile:hover { background: var(--panel-2); }
.rc-grp-service-name { font-size: 0.84375rem; font-weight: 600; color: var(--ink); }
.rc-grp-service-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.rc-grp-service-past { padding: 11px 18px; border-top: 1px solid var(--hair-3); background: var(--panel-2); font-size: 0.75rem; }

/* directory filters + sections */
.rc-grp-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.rc-grp-search { display: flex; align-items: center; gap: 8px; background: var(--panel); border-radius: 7px; box-shadow: var(--hairline); padding: 7px 11px; flex: 1; min-width: 220px; max-width: 320px; }
.rc-grp-search .ic { color: var(--label); flex: none; }
.rc-grp-search input { border: 0; outline: none; font: inherit; font-size: 0.8125rem; color: var(--ink); background: transparent; flex: 1; min-width: 0; }
.rc-grp-filters select { padding: 7px 11px; border-radius: 7px; border: 1px solid var(--control-border); font: inherit; font-size: 0.78125rem; color: var(--ink); background: var(--panel); }
.rc-grp-openonly { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78125rem; color: var(--body); cursor: pointer; }
.rc-grp-spacer { flex: 1; }
.rc-grp-count { font-size: 0.75rem; }

.rc-grp-section { margin-bottom: 26px; }
.rc-grp-section-head { display: flex; align-items: baseline; gap: 11px; margin-bottom: 11px; }
.rc-grp-section-label { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.rc-grp-section-head .muted { font-size: 0.78125rem; }

.rc-grp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1100px) { .rc-grp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .rc-grp-cards { grid-template-columns: 1fr; } }
.rc-grp-card { padding: 15px 17px; cursor: pointer; display: flex; flex-direction: column; gap: 11px; }
.rc-grp-card:hover { background: var(--panel-2); }
.rc-grp-card-top { display: flex; align-items: flex-start; gap: 10px; }
.rc-grp-card-text { flex: 1; min-width: 0; }
.rc-grp-card-name { font-size: 0.875rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.rc-grp-card-faces { display: flex; align-items: center; }
.rc-grp-card-foot { border-top: 1px solid var(--hair-3); padding-top: 10px; display: flex; align-items: center; gap: 8px; }
.rc-grp-card-foot .ic { color: var(--faint); }
.rc-grp-chair { font-size: 0.78125rem; color: var(--ink); font-weight: 500; }

/* board header right slot */
.rc-grp-bod-right { text-align: right; flex: none; }
.rc-grp-bod-term { font-size: 0.8125rem; font-weight: 700; color: var(--ink); }

/* apply modal */
.rc-grp-scrim { position: fixed; inset: 0; background: rgba(20, 24, 21, 0.42); display: flex; align-items: center; justify-content: center; z-index: 60; }
.rc-grp-modal { width: min(520px, calc(100vw - 32px)); background: var(--panel); border-radius: 5px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); overflow: hidden; }
.rc-grp-modal-head { padding: 20px 24px 0; }
.rc-grp-modal-title { font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.rc-grp-modal-body { padding: 18px 24px 4px; display: flex; flex-direction: column; gap: 14px; }
.rc-grp-modal-body label { display: block; }
.rc-grp-modal-body label > span { display: block; font-size: 0.71875rem; font-weight: 600; color: var(--body); margin-bottom: 5px; }
.rc-grp-modal-body select, .rc-grp-modal-body textarea { width: 100%; padding: 9px 11px; border-radius: 7px; border: 1px solid var(--control-border); font: inherit; font-size: 0.84375rem; color: var(--ink); background: var(--panel); box-sizing: border-box; }
.rc-grp-modal-body textarea { resize: vertical; line-height: 1.55; }
.rc-grp-modal-note { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border-radius: 7px; padding: 11px 13px; font-size: 0.75rem; color: var(--body); line-height: 1.5; }
.rc-grp-modal-note .ic { flex: none; margin-top: 1px; color: var(--muted); }
.rc-grp-modal-error { font-size: 0.75rem; color: var(--danger, #b0413e); }
.rc-grp-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px 20px; }
.rc-grp-modal-done { padding: 34px 30px; text-align: center; }
.rc-grp-modal-done p { margin: 7px auto 0; max-width: 380px; font-size: 0.8125rem; line-height: 1.6; }
.rc-grp-modal-done .btn { margin-top: 20px; }
.rc-grp-done-mark { width: 46px; height: 46px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }

/* The committee cards and Your-service tiles are BUTTONS (they navigate, so keyboard users must be
   able to reach and fire them); these undo the UA button chrome the div-based first draft never
   needed, without touching the classes' own layout rules above. */
button.rc-grp-card, button.rc-grp-service-tile { font: inherit; text-align: left; border: 0; width: 100%; color: inherit; }
button.rc-grp-service-tile { background: transparent; display: block; }

/* ── Meetings & attendance (groups-meetings.js) ──────────────────────────────────────────────── */
.rc-grp-mtg-card { display: block; padding: 15px 17px; text-decoration: none; color: inherit; transition: box-shadow .12s; }
.rc-grp-mtg-card:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.rc-grp-mtg-card-row { display: flex; align-items: center; gap: 12px; }
.rc-grp-mtg-card-row > svg { color: var(--brand); flex: none; }
.rc-grp-mtg-card-title { font-size: 0.78125rem; font-weight: 600; color: var(--ink); }
.rc-grp-mtg-card-arrow { margin-left: auto; color: var(--label); font-size: 1.1rem; }

.rc-mtg-err { margin-bottom: 14px; }
.rc-mtg-back { font-size: 0.8125rem; }

.rc-mtg-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 900px) { .rc-mtg-kpis { grid-template-columns: repeat(2, 1fr); } }
.rc-mtg-tile { padding: 13px 15px; }
.rc-mtg-tile.warn { box-shadow: inset 0 0 0 1px #e7c98a; background: #fdf6e7; }
.rc-mtg-tile-label { font-size: 0.65625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--label); }
.rc-mtg-tile-value { font-size: 1.35rem; font-weight: 600; color: var(--ink); margin-top: 4px; }

.rc-mtg-tabs { margin-bottom: 4px; }

.rc-mtg-next { padding: 18px 20px; margin-bottom: 18px; }
.rc-mtg-next-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.rc-mtg-quorum-bar { padding: 10px 14px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-mtg-quorum-bar.green { background: #e9f4ee; color: #1f6f49; }
.rc-mtg-quorum-bar.amber { background: #fdf6e7; color: #9a6a12; }
.rc-mtg-quorum-bar.red { background: #fbecec; color: #b0413e; }
.rc-mtg-quorum-verdict { margin-left: auto; font-weight: 600; }
.rc-mtg-rsvp-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; }

.rc-mtg-section-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.9px; color: var(--label); margin: 20px 2px 8px; }

.rc-mtg-hist-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 8px; width: 100%; text-align: left; font: inherit; color: inherit; border: 0; cursor: pointer; }
.rc-mtg-hist-row:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.rc-mtg-hist-date { flex: none; width: 74px; color: var(--label); }
.rc-mtg-hist-title { flex: 1; font-weight: 600; color: var(--ink); }

.rc-mtg-atrisk { display: flex; gap: 12px; padding: 14px 16px; background: #fdf6e7; border-radius: 5px; margin-bottom: 16px; color: #7a5410; }
.rc-mtg-atrisk > svg { color: #9a6a12; flex: none; margin-top: 2px; }

.rc-mtg-matrix { padding: 4px 0; overflow-x: auto; }
.rc-mtg-matrix-head, .rc-mtg-matrix-row { display: grid; grid-template-columns: 1.5fr repeat(var(--mtg-cols, 6), 40px) 70px 60px 66px; gap: 8px; align-items: center; padding: 9px 16px; min-width: 640px; }
.rc-mtg-matrix-head { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--label); background: var(--panel-2); }
.rc-mtg-matrix-row { border-top: 1px solid var(--hair-3); font-size: 0.82rem; }
.rc-mtg-matrix-row.forfeit { background: #fbecec; }
.rc-mtg-matrix-row.warn { background: #fdf6e7; }
.rc-mtg-matrix-name { font-weight: 600; color: var(--ink); }
.rc-mtg-col { text-align: center; }
.rc-mtg-col-next { opacity: 0.75; }
.rc-mtg-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--hair-2); }
.rc-mtg-dot.present, .rc-mtg-dot.remote { background: #2f9e63; }
.rc-mtg-dot.remote { box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #2f9e63; }
.rc-mtg-dot.excused { background: #c9b26a; }
.rc-mtg-dot.absent { background: #cf6b68; }
.rc-mtg-dot.none { background: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); }
.rc-mtg-rsvp-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px dashed var(--label); }
.rc-mtg-rsvp-dot.yes { border-color: #2f9e63; background: #e9f4ee; }
.rc-mtg-rsvp-dot.no { border-color: #cf6b68; background: #fbecec; }
.rc-mtg-legend { font-size: 0.8rem; margin: 14px 2px; line-height: 1.5; }

.rc-mtg-minutes-lead { font-size: 0.85rem; margin-bottom: 6px; line-height: 1.5; }

.rc-mtg-record { padding: 20px 22px; }
.rc-mtg-record-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.rc-mtg-cancel-note { padding: 12px 14px; background: #fbecec; color: #8a3330; border-radius: 4px; font-size: 0.875rem; line-height: 1.5; }
.rc-mtg-cap { font-size: 0.9rem; color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--hair-3); }
.rc-mtg-agenda-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hair-3); font-size: 0.85rem; }
.rc-mtg-agenda-item { color: var(--ink); }
.rc-mtg-motion-tag, .rc-mtg-result { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.6px; padding: 1px 6px; border-radius: 3px; margin-left: 8px; }
.rc-mtg-motion-tag { background: var(--brand-tint); color: var(--brand); }
.rc-mtg-result.carried { color: #1f7a4f; }
.rc-mtg-result.failed { color: #b0413e; }
.rc-mtg-motion-row { padding: 9px 0; border-bottom: 1px solid var(--hair-3); }
.rc-mtg-motion-text { font-size: 0.875rem; color: var(--ink); font-weight: 500; }
.rc-mtg-roll-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 0.85rem; }
.rc-mtg-att { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 3px; text-align: center; }
.rc-mtg-att.present, .rc-mtg-att.remote { background: #e9f4ee; color: #1f7a4f; }
.rc-mtg-att.excused { background: #f6efd7; color: #7a5410; }
.rc-mtg-att.absent { background: #fbecec; color: #b0413e; }
.rc-mtg-att.unset { background: var(--panel-2); color: var(--label); }
.rc-mtg-minutes-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; background: var(--panel-2); border-radius: 4px; font-size: 0.85rem; color: var(--ink); }
.rc-mtg-minutes-box > svg { color: var(--brand); flex: none; }

/* roll-call drawer — right-docked, because the chair is looking at the room */
.rc-mtg-scrim { position: fixed; inset: 0; background: rgba(20, 24, 21, 0.42); display: flex; justify-content: flex-end; z-index: 60; }
.rc-mtg-drawer { width: 400px; max-width: 92vw; height: 100%; background: var(--panel); display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,.16); }
.rc-mtg-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--hair-3); }
.rc-mtg-drawer-quorum { padding: 12px 20px; font-size: 0.85rem; background: #fbecec; color: #8a3330; }
.rc-mtg-drawer-quorum.met { background: #e9f4ee; color: #1f7a4f; }
.rc-mtg-drawer-list { flex: 1; overflow-y: auto; padding: 8px 12px; }
.rc-mtg-drawer-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border: 0; border-radius: 5px; background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.rc-mtg-drawer-row:hover { background: var(--panel-2); }
.rc-mtg-drawer-name { flex: 1; font-weight: 500; color: var(--ink); }
.rc-mtg-drawer-foot { padding: 16px 20px; border-top: 1px solid var(--hair-3); display: flex; flex-direction: column; gap: 10px; }
.rc-mtg-drawer-foot .btn { width: 100%; }

/* ── Groups: Elections (read-only record, step 3) ─────────────────────────────────────────────── */
.rc-el-back { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; padding: 0; font: inherit; font-size: 0.78125rem; color: var(--muted); cursor: pointer; margin-bottom: 14px; }
.rc-el-muted { color: var(--muted); font-size: 0.875rem; padding: 8px 0; }
.rc-el-denied { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.rc-el-empty { padding: 18px 20px; color: var(--muted); font-size: 0.875rem; text-align: center; }
.rc-el-pill-closed { background: #eef2f0; color: #5b6b62; }
.rc-el-pill-upcoming { background: #fbf2dc; color: #9a6a12; }
.rc-el-pill-elected { background: var(--brand-tint); color: var(--brand); margin-left: 8px; }

/* list */
.rc-el-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.rc-el-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 7px 4px; font: inherit; font-size: 0.8125rem; color: var(--muted); cursor: pointer; }
.rc-el-tab.on { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; }
.rc-el-listcard { display: flex; align-items: center; gap: 14px; padding: 15px 18px; margin-bottom: 10px; cursor: pointer; }
button.rc-el-listcard { font: inherit; text-align: left; border: 0; width: 100%; color: inherit; }
.rc-el-listcard:hover { box-shadow: inset 0 0 0 1px var(--brand-tint); }
.rc-el-listcard-main { flex: 1; min-width: 0; }
.rc-el-listcard-name { font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin-top: 4px; }
.rc-el-listcard-cert { text-align: right; flex: none; }
.rc-el-listcard-by { font-size: 0.75rem; }

/* detail */
.rc-el-detail-head { margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.rc-el-detail-head .rc-el-title { flex-basis: 100%; margin: 6px 0 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.4px; color: var(--ink); }
.rc-el-detail-head > .rc-grp-sub { flex-basis: 100%; }
.rc-el-detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.rc-el-card-head { padding: 14px 20px; border-bottom: 1px solid var(--hair-3); font-size: 0.90625rem; font-weight: 600; color: var(--ink); }
.rc-el-contest { border-top: 1px solid var(--hair-3); }
.rc-el-contest-label { padding: 11px 20px 4px; font-size: 0.65625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); }
.rc-el-row { display: grid; grid-template-columns: 1.6fr 1fr 84px; gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--hair-3); }
.rc-el-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-el-cand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rc-el-name { display: inline-flex; align-items: center; font-size: 0.84375rem; color: var(--muted); }
.rc-el-row.won .rc-el-name { font-weight: 600; color: var(--ink); }
.rc-el-seatlink { background: transparent; border: 0; padding: 0; margin-top: 1px; font: inherit; font-size: 0.71875rem; color: var(--brand); font-weight: 600; cursor: pointer; text-align: left; }
.rc-el-bar { height: 6px; border-radius: 3px; background: var(--hair-3); overflow: hidden; }
.rc-el-bar-fill { height: 100%; background: #cfd4ce; }
.rc-el-bar-fill.won { background: var(--brand); }
.rc-el-votes { font-family: 'Space Mono', monospace; font-size: 0.8125rem; color: var(--muted); text-align: right; }
.rc-el-votes.won { font-weight: 700; color: var(--ink); }
.rc-el-upcoming-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-top: 1px solid var(--hair-3); font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }
.rc-el-aside { display: flex; flex-direction: column; gap: 14px; }
.rc-el-record { padding: 15px 17px; }
.rc-el-record-head, .rc-el-vis-head { font-size: 0.78125rem; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.rc-el-vis-head { display: flex; align-items: center; gap: 8px; }
.rc-el-record-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 0.78125rem; color: var(--ink); }
.rc-el-vis { padding: 15px 17px; }
@media (max-width: 860px) { .rc-el-detail-grid { grid-template-columns: 1fr; } }