/* ═══════════════════════════════════════════════════════════════════════════
   ARGOS COMPASS — Design System v2  ·  "The Observatory"
   Web 3.0 glassmorphic dark theme · one visual language for the whole app.
   Built for the redesign (R0). Supersedes the D1 "minimal layout system":
   keeps every legacy class working (no page regresses) and layers the full
   component library on top. Documentation that writes itself — and looks it.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

[x-cloak] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   1 · TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
:root {

  /* ARGOS PAGE STANDARD v1 — names the templates already use that were never
     declared, so 105 declarations were invalid at computed-value time and
     silently dropped (54 --text-primary in client_detail alone). Aliases onto
     this app's own ramp; no new colour introduced. */
  --text-primary:   var(--text);
  --text-secondary: var(--text-muted);
  --accent-blue:    var(--blue);
  --accent-cyan:    var(--cyan);
  --accent-purple:  var(--purple);
  --font-sans:      var(--font-body);
  --surface:        var(--bg-card);
  --page-max:       1680px;

  /* ── Surfaces (floor → canopy) ─────────────────────────────── */
  --bg-primary:    #030912;
  --bg-secondary:  #06101e;
  --bg-card:       #0a1628;
  --bg-elevated:   #0e2040;
  --bg-inset:      #05101c;

  /* ── Glass ─────────────────────────────────────────────────── */
  --glass-bg:       rgba(9, 20, 42, 0.72);
  --glass-bg-hover: rgba(14, 32, 64, 0.85);
  --glass-border:   rgba(0, 112, 243, 0.18);
  --glass-border-h: rgba(0, 212, 255, 0.35);
  --glass-blur:     20px;

  /* ── Brand ─────────────────────────────────────────────────── */
  --blue:#0070f3; --blue-mid:#0090f0; --blue-lite:#3db8ff; --blue-dim:#0050c8;
  --purple:#7c3aed; --purple-mid:#9f67ff; --purple-lite:#c4b5fd;
  --cyan:#00d4ff;
  --grad-brand: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  --grad-cyan:  linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%);

  /* ── Status / data-viz ─────────────────────────────────────── */
  --green:#4ade80; --orange:#fb923c; --red:#f87171; --yellow:#fbbf24;
  --gray-health:#3a4660;          /* "unknown" in the Stack */
  --blue-standard:#3db8ff;        /* "approved/standard" software state */

  /* ── Text tiers (canonical — replaces ad-hoc literals) ─────── */
  --text-strong:#f0f6ff;
  --text:       #e2eaf8;
  --text-muted: #9aa7bd;
  --text-dim:   #6a7388;
  --text-faint: #5a6678;

  /* ── Borders (canonical) ───────────────────────────────────── */
  --border:        rgba(162, 184, 220, 0.10);
  --border-strong: rgba(162, 184, 220, 0.18);
  --border-focus:  rgba(0, 212, 255, 0.45);

  /* ── Type ──────────────────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-heading: var(--font-display);              /* legacy alias */
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Radii ─────────────────────────────────────────────────── */
  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-sm:8px; --r-xs:4px; --r-pill:999px;

  /* ── Spacing (4px base) ────────────────────────────────────── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-8:48px; --s-10:64px;

  /* ── Elevation & glow ──────────────────────────────────────── */
  --shadow-card: 0 8px 32px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.05) inset;
  --shadow-pop:  0 16px 48px rgba(0,0,0,.55);
  --glow-blue:   0 0 20px rgba(0,112,243,.35), 0 0 60px rgba(0,112,243,.15);
  --glow-purple: 0 0 20px rgba(124,58,237,.35), 0 0 60px rgba(124,58,237,.15);
  --glow-cyan:   0 0 20px rgba(0,212,255,.35);

  /* ── Motion ────────────────────────────────────────────────── */
  --t-fast:80ms; --t-base:160ms; --t-slow:320ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  /* ── Sensitivity (data classification) ─────────────────────── */
  --label-public:var(--green); --label-internal:var(--blue-lite);
  --label-confidential:var(--orange); --label-restricted:var(--red);

  /* ── Z-index ───────────────────────────────────────────────── */
  --z-sidebar:50; --z-topbar:60; --z-dropdown:100; --z-drawer:150;
  --z-modal:200; --z-toast:300; --z-cmdk:400;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,112,243,.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(124,58,237,.08), transparent 55%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

h1,h2,h3,h4,h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.18; color: var(--text-strong); letter-spacing: -0.01em; }

a { color: var(--blue-lite); text-decoration: none; transition: color var(--t-fast) ease; }
a:hover { color: var(--cyan); }

code, pre, .mono, .data { font-family: var(--font-mono); }

::selection { background: rgba(0,112,243,.35); color: #fff; }

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(162,184,220,.14); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(162,184,220,.28); background-clip: padding-box; }

/* ── Typography utilities (the ladder) ─────────────────────────────────── */
.t-display-1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem,6vw,4rem); line-height: 1.04; letter-spacing: -.02em; }
.t-display-2 { font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; line-height: 1.1; letter-spacing: -.02em; }
.t-h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; }
.t-h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.t-h3 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.t-body { font-size: .9375rem; }
.t-small { font-size: .8125rem; }
.t-micro { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.t-data  { font-family: var(--font-mono); font-size: .85rem; }
.t-grad  { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.muted   { color: var(--text-muted); }
.dim     { color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   3 · APP SHELL  (sidebar | main | optional right-rail)
   ═══════════════════════════════════════════════════════════════════════════ */
.compass-app { display: grid; grid-template-columns: 68px 1fr; min-height: 100vh; }
.compass-app.has-rail { grid-template-columns: 68px 1fr; }

/* min-width:0 is load-bearing. .compass-main is a GRID ITEM, and a grid
   item defaults to min-width:auto — it refuses to shrink below its own
   min-content. At phone width the track is 1fr, i.e. minmax(auto, 1fr),
   so that auto floor let a wide table stretch the column to 542px inside
   a 390px viewport and pushed the whole page — topbar, waffle and all —
   sideways. Measured 2026-08-21 on a reconstructed dashboard.
   Harmless above the breakpoints: max-width still caps the measure. */
.compass-main { padding: var(--s-6) var(--s-8); padding-top: calc(var(--s-6) + 64px); max-width: 1480px; width: 100%; min-width: 0; animation: reveal var(--t-slow) var(--ease-out) both; margin-inline: auto; }
.compass-main.narrow { max-width: 1100px; }

/* three-column content grid (content + right rail) */
.rail-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: var(--s-5); align-items: start; }
@media (max-width: 1180px){ .rail-grid { grid-template-columns: 1fr; } }

/* Page header */
.compass-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.compass-page-title, .page-title { font-size: 1.75rem; margin: 0 0 .25rem; }
.compass-page-sub, .page-sub { color: var(--text-muted); margin: 0; font-size: .9375rem; }
.compass-page-sub code, .page-sub code { background: rgba(0,112,243,.12); color: var(--blue-lite); padding: .1rem .45rem; border-radius: var(--r-xs); font-size: .8rem; font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════════════════
   4 · SIDEBAR  (global nav + per-client tree)
   ═══════════════════════════════════════════════════════════════════════════ */
.compass-sidebar {
  position: sticky; top: 0; height: 100vh; z-index: var(--z-sidebar);
  background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary) 130%);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: var(--s-4) 0;
  /* backdrop-filter REMOVED 2026-08-19 (round 11) -- this was the reason
     clicking a rail icon appeared to "do nothing". Per spec, backdrop-filter
     (like filter/transform) establishes a CONTAINING BLOCK for position:fixed
     descendants. .flyouts is position:fixed with left:68px and lives INSIDE
     this <aside>, so instead of resolving against the viewport it resolved
     against this 68px-wide element -- the flyout genuinely opened (Alpine
     state flipped, .open class applied) but rendered mispositioned/clipped
     and was therefore invisible. Exactly the same trap already documented for
     .compass-topbar in round 5, which was solved by moving that element out
     of this aside; .flyouts was left inside (it was moved there in round 1 so
     it could inherit the rail's Alpine scope), so it kept hitting it. Dropping
     the blur is visually free here: this element already paints an opaque
     gradient background, so there is nothing behind it to blur. */
}
.compass-brand { display: flex; align-items: center; gap: .7rem; padding: 0 var(--s-5) var(--s-4); border-bottom: 1px solid var(--border); }
.compass-brand-mark, .brand-mark {
  font-size: 1.45rem; color: var(--cyan);
  filter: drop-shadow(0 0 10px rgba(0,212,255,.55));
  animation: pulse-glow 4s ease-in-out infinite;
}
.compass-brand-name, .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.compass-brand-tag, .brand-tag { color: var(--text-dim); font-size: .68rem; letter-spacing: .02em; }

/* overflow-y:auto removed 2026-08-19 (round 4): this was a SECOND, nested
   scroll container inside .icon-rail (which now owns overflow-y:auto
   itself, matching Service's flatter structure) -- having it here too
   silently clipped .rail-btn's own .rail-tip tooltip (position:absolute,
   escapes to the right via left:calc(100% + 10px)) because CSS coerces
   overflow-x to 'auto' whenever overflow-y isn't 'visible', clipping any
   horizontal overflow regardless of whether this container ever actually
   needs to scroll. Still used standalone (non-rail nav lists) elsewhere,
   so the rule itself stays -- just without the property that broke rail
   tooltips. */
.compass-nav { display: flex; flex-direction: column; padding: var(--s-3) var(--s-2); flex: 1; gap: 1px; }
.compass-nav-group, .nav-group { font-size: .65rem; color: var(--text-faint); letter-spacing: .1em; text-transform: uppercase; padding: var(--s-4) var(--s-3) var(--s-2); font-weight: 700; }
.compass-nav-item, .nav-item {
  position: relative; display: flex; align-items: center; gap: .65rem;
  padding: .55rem .8rem; border-radius: var(--r-sm); color: var(--text); font-size: .9rem; font-weight: 500;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.compass-nav-item:hover, .nav-item:hover { background: rgba(0,112,243,.10); color: var(--blue-lite); }
.compass-nav-item.active, .nav-item.active { background: rgba(0,112,243,.14); color: #fff; }
.compass-nav-item.active::before, .nav-item.active::before {
  content:''; position:absolute; left:0; top:18%; bottom:18%; width:3px; border-radius:0 3px 3px 0;
  background: var(--grad-cyan); box-shadow: var(--glow-cyan);
}
.compass-nav-icon, .nav-icon { color: var(--blue-mid); font-size: 1rem; width: 1.1rem; text-align: center; flex-shrink: 0; }
.compass-nav-search {
  display: flex; align-items: center; gap: .55rem; width: calc(100% - var(--s-3));
  margin: var(--s-3) auto 0; padding: .5rem .7rem;
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-dim); font-size: .85rem; font-family: var(--font-body); cursor: pointer; text-align: left;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.compass-nav-search:hover { border-color: var(--border-focus); color: var(--text); }
.compass-nav-search .nav-icon { color: var(--blue-mid); }
.compass-nav-search .kbd { margin-left: auto; }
.nav-item.active .nav-icon, .compass-nav-item.active .nav-icon { color: var(--cyan); }
.nav-count { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--text-dim); background: rgba(162,184,220,.08); padding: .05rem .4rem; border-radius: var(--r-pill); }

.compass-sidebar-foot { padding: var(--s-2); border-top: 1px solid var(--border); }
.compass-nav-logout, .nav-logout { color: var(--text-muted); }

/* ── Icon rail + flyout nav (2026-08-19, Phase 5 of the suite-wide icon-rail
   rollout, Daniel-approved per NAV_LOCKED.md). .icon-rail is layered onto
   .compass-sidebar (same element, both classes) -- named .icon-rail, NOT
   the bare .rail this originally shipped as, because .rail was already a
   real, load-bearing class for a completely different component (§13
   below, the right-rail content accordion on client/record/vendor detail
   pages) and the two silently fought over shared properties (gap, most
   visibly) on every page that has this sidebar, i.e. all of them.
   .compass-nav-group/.nav-group are now only used inside flyouts (still
   real, not dead). .compass-sidebar-foot is UNCHANGED and load-bearing:
   shell.js's runtime theme-toggle injector still targets it via
   querySelector, unmodified. */
.icon-rail {
  /* 68px + 46x46 buttons + 40x40 mark match Argos Service's own .rail
     exactly (2026-08-19, round 4 -- David: "should be the same size and
     attributes as in Service"; the 60px/40px sizing below was Compass's
     own original, smaller icon-rail dimensions, never actually matched to
     Service's). overflow-y:auto moved here (was on .compass-nav, a NESTED
     child) to match Service's structure, where .rail-btn are direct
     children of the single scrolling .rail container -- Compass's old
     nested .compass-nav{overflow-y:auto} was an EXTRA overflow container
     with no Service equivalent, and per the CSS overflow spec, setting
     overflow-y to anything but 'visible' implicitly coerces overflow-x to
     'auto' too, silently CLIPPING .rail-tip's horizontal
     left:calc(100% + 10px) escape -- this is the concrete reason hover
     tooltips never appeared, not merely a smaller/cosmetic issue. */
  width: 68px;
  padding: var(--s-4) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* NO overflow here. Round 4 correctly identified that an overflow-y on an
     ANCESTOR clips .rail-tip (which is position:absolute and deliberately
     escapes sideways via left:calc(100% + 10px), well beyond this 68px box,
     because CSS coerces overflow-x to a clipping value whenever overflow-y is
     not 'visible'). That round then "fixed" it by MOVING overflow-y:auto off
     .compass-nav and onto this element -- but this is equally an ancestor of
     the tooltip, so the clipping was relocated, not removed, and hover tips
     stayed invisible. Removed outright in round 11. The rail holds ~9 fixed
     46px controls (~500px) inside a 100vh column, so it does not need to
     scroll; if it ever grows enough to matter, the tooltips must move to a
     non-clipped layer (e.g. rendered next to .flyouts) rather than
     reintroducing overflow here. */
}
/* (.icon-rail::-webkit-scrollbar rule removed with the overflow above — the
   rail no longer scrolls, so there is no scrollbar to hide.) */
/* Persistent brand strip (2026-08-19) -- Compass had no equivalent of Argos
   Service's topbar (IA badge + product wordmark, always visible); the only
   product identification anywhere was each page's own <h1 class="page-title">
   ("Dashboard", "Clients", etc.), no company/product chrome around it.
   Fixed so it doesn't need threading through the ~60 separately-templated
   pages -- same reasoning as .flyouts. Uses --z-topbar, which already
   existed in the z-index scale below (between --z-sidebar and --z-dropdown)
   but had no consumer until now. */
.compass-topbar {
  position: fixed; top: 0; left: 68px; right: 0; height: 64px;
  z-index: var(--z-topbar);
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--s-8);
  background: rgba(3,9,18,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-ia-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
  text-decoration: none;
}
.topbar-ia-mark:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.topbar-ia-mark img { width: 30px; height: 30px; display: block; }
.topbar-brand { display: inline-flex; align-items: baseline; gap: .35rem; text-decoration: none; }
.topbar-brand-word {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.4rem;
  letter-spacing: -.01em; color: var(--text-strong);
}
.topbar-brand-suffix {
  font-family: var(--font-body); font-weight: 700; font-size: .74rem;
  letter-spacing: .14em; color: var(--text-dim);
}
:root[data-theme="light"] .topbar-brand-word { color: #0a1628; }
/* Waffle trigger added to the topbar (2026-08-19): pushed to the far right
   of the bar via margin-left:auto (it's the last flex child). Reuses
   .rail-btn as-is for the button/icon/hover-highlight look, but its
   inherited .rail-tip (positioned left:calc(100% + 10px), i.e. popping out
   to the right of the button) would run off-screen this close to the
   right edge -- flip it to open leftward here instead. */
/* 2026-08-19 (round 6): the waffle button was reusing .rail-btn, whose
   fully-transparent resting state (background:transparent; border:1px
   solid transparent;) is correct for the RAIL's own dense icon column
   (Service's own .rail-btn does the same) but reads as invisible/broken in
   a sparse horizontal topbar with nothing else nearby -- David: "wrong
   version... too small... does not work." Service's own topbar waffle
   trigger uses a DIFFERENT, dedicated style (.topbar-icon-btn) with a
   visible resting border specifically for this context. Added that same
   pattern here instead of stretching .rail-btn to cover both. */
.topbar-icon-btn {
  position: relative;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
/* Only the first control in the right-hand group takes the auto margin that
   pushes the group to the far right; the rest simply follow it, separated by
   .compass-topbar's own 12px gap. Applying margin-left:auto to every
   .topbar-icon-btn would insert a second auto gap and split them apart. */
.topbar-theme-btn { margin-left: auto; }
.topbar-theme-glyph { font-size: 1.25rem; line-height: 1; display: block; }
.topbar-icon-btn:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--text-strong); }
.topbar-icon-btn svg { width: 22px; height: 22px; display: block; }
.topbar-icon-btn .rail-tip { left: auto; right: calc(100% + 10px); }
:root[data-theme="light"] .topbar-icon-btn { border-color: rgba(0,20,60,.12); }
:root[data-theme="light"] .topbar-icon-btn:hover { background: rgba(0,20,60,.05); border-color: rgba(0,20,60,.18); }

.rail-mark {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: var(--s-2);
  font-size: 1.6rem; color: var(--cyan);
  filter: drop-shadow(0 0 10px rgba(0,212,255,.55));
  text-decoration: none;
}
.rail-btn {
  position: relative;
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--t-fast) ease, background var(--t-fast) ease;
}
/* Unicode glyphs, not SVGs (Compass's existing icon set) -- sized up from
   the original 1.1rem to read at a visual weight comparable to Service's
   20x20px SVG icons inside the same now-46x46 button box. */
.rail-btn .nav-icon { color: inherit; font-size: 1.35rem; }
.rail-btn:hover, .rail-btn.on, .rail-btn[aria-expanded="true"] {
  color: var(--blue-lite);
  background: rgba(0,112,243,.10);
}
.rail-btn.on { box-shadow: inset 2px 0 0 var(--cyan); }
.rail-spacer { flex: 1; }
.rail-tip {
  position: absolute;
  left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border-h);
  color: var(--text-strong);
  font-size: .78rem; font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-xs);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease, visibility .12s;
  transition-delay: .35s;
  z-index: var(--z-dropdown);
}
.rail-btn:hover .rail-tip { opacity: 1; visibility: visible; }
.flyouts { position: fixed; top: 0; left: 68px; height: 100vh; z-index: var(--z-dropdown); pointer-events: none; }
.flyout {
  position: absolute; top: 0; left: 0; height: 100vh; width: 236px;
  background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary) 130%);
  border-right: 1px solid var(--border);
  box-shadow: 12px 0 32px rgba(0,0,0,.35);
  overflow-y: auto;
  padding: var(--s-3) var(--s-2);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-8px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.flyout.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
.waffle-panel { width: 320px; padding: var(--s-4); }

/* Waffle panel anchoring (2026-08-19, round 12 — David: "The Waffle opens up on
   the left side of the screen. It should pop out next to and to the bottom left
   of the actual waffle on the top right"). Every other .flyout is a full-height
   panel pinned beside the 68px rail, which is correct for the rail's own groups
   but wrong for a control that now lives in the top-right corner. These rules
   override that geometry for the waffle only: fixed to the viewport, tucked just
   under the topbar and flush to its right edge, sized to its content, and
   animating downward instead of sideways. .flyouts (its parent) is position:fixed
   but that does NOT create a containing block for a fixed child, so `right` here
   resolves against the viewport as intended — see the round 11 notes on the
   backdrop-filter containing-block trap for why that distinction matters. */
.flyout.waffle-panel {
  position: fixed;
  top: 70px;
  right: 14px;
  left: auto;
  width: 340px;
  height: auto;
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  padding: var(--s-4);
  border-right: none;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  transform: translateY(-8px);
}
.flyout.waffle-panel.open { transform: translateY(0); }
@media (max-width: 900px) {
  .flyout.waffle-panel { right: 8px; left: auto; width: min(92vw, 340px); }
}

.waffle-panel-hdr { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.waffle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.waffle-tile { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--text); border: 1px solid transparent; transition: background var(--t-fast) ease; }
.waffle-tile:hover { background: rgba(0,112,243,.10); border-color: rgba(0,112,243,.32); }
.waffle-tile.current { background: rgba(124,58,237,.14); border-color: rgba(124,58,237,.40); }
.waffle-tile-ico { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.waffle-tile-name { font-weight: 600; font-size: 13px; color: var(--text-strong); }
.waffle-tile-tag { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.waffle-panel-ftr { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 10px; display: flex; justify-content: space-between; }

/* Mobile rail layout tweaks only — .compass-sidebar's own existing mobile
   rule (further down this file, same 900px breakpoint) already handles the
   slide-in mechanics (position/left/width/transition) for this same
   element; redeclaring those here would just lose the cascade to that
   later rule, so this block only touches what's rail-specific. */
@media (max-width: 900px) {
  .icon-rail { align-items: stretch; padding: var(--s-4) var(--s-3); }
  .rail-mark { align-self: center; }
  .rail-btn { width: 100%; height: auto; justify-content: flex-start; gap: .65rem; padding: .55rem .8rem; font-size: .9rem; font-weight: 500; }
  .rail-tip { position: static; transform: none; background: none; border: none; box-shadow: none; padding: 0; opacity: 1; visibility: visible; transition: none; color: inherit; font-size: inherit; font-weight: inherit; white-space: normal; }
  .flyouts { left: 0; width: 100%; }
  .flyout { width: min(84vw, 280px); left: 0; z-index: calc(var(--z-sidebar) + 1); }
  /* .compass-sidebar becomes an off-canvas drawer at this width (see the
     .compass-sidebar mobile rule further down) — a bar fixed at left:60px
     would float unanchored once the rail itself slides off-screen, so hide
     it here and let .compass-main's padding fall back to its own base
     rule (no bar to compensate for). */
  .compass-topbar { display: none; }
}
.compass-nav-logout:hover, .nav-logout:hover { background: rgba(248,113,113,.10); color: var(--red); }

/* Per-client header inside the tree */
.client-rail-head { padding: var(--s-3) var(--s-5) var(--s-4); border-bottom: 1px solid var(--border); }
.client-rail-back { font-size: .78rem; color: var(--text-dim); display:inline-flex; align-items:center; gap:.3rem; margin-bottom:.5rem; }
.client-rail-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--text-strong); }
.client-rail-scores { display:flex; gap:.4rem; margin-top:.5rem; }

/* Hide-empty toggle */
.tree-toggle { display:flex; align-items:center; gap:.4rem; padding:.4rem var(--s-3); font-size:.72rem; color:var(--text-dim); cursor:pointer; user-select:none; }
.tree-toggle input { accent-color: var(--blue); }

/* Per-client sidebar tree items */
.tree-group { font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:700; padding: var(--s-4) var(--s-3) var(--s-2); }
.tree-group:first-of-type { padding-top: var(--s-3); }
.tree-item { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.4rem .6rem; margin: 0 .35rem; border-radius: var(--r-xs); color: var(--text); text-decoration:none; font-size:.86rem; transition: background var(--t-fast) ease, color var(--t-fast) ease; }
.tree-item:hover { background: rgba(0,112,243,.10); color: var(--blue-lite); }
.tree-item.active { background: rgba(0,212,255,.10); color: var(--cyan); }
.tree-item .lbl { display:flex; align-items:center; gap:.55rem; flex:1; min-width:0; }
.tree-item .lbl .ico { width:1.2rem; display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; color: var(--blue-mid); }
.tree-item:hover .ico { color: var(--cyan); }
.tree-item .lbl .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tree-item .cnt { font-family: var(--font-mono); font-size:.7rem; color: var(--text-muted); background: rgba(162,184,220,.08); padding: 0 .45rem; border-radius: var(--r-pill); flex-shrink:0; line-height: 1.5; }
.tree-item.zero { color: var(--text-dim); }
.tree-item.zero .ico { color: var(--text-faint); }
.tree-item.zero .cnt { background: transparent; color: var(--text-faint); }
body.hide-empty .tree-item.zero { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   11.6 · RECORDS SHELL — list + detail + edit
   ═══════════════════════════════════════════════════════════════════════════ */

/* Records-list: bulk-action floating bar (appears when ≥1 row checked) */
.bulk-bar { display: none; position: sticky; top: 0; z-index: 90; align-items: center; justify-content: space-between; gap: var(--s-4); padding: .65rem 1rem; margin-bottom: var(--s-3); background: linear-gradient(90deg, rgba(0,112,243,.18), rgba(124,58,237,.14)); border:1px solid var(--border-focus); border-radius: var(--r-md); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-pop); }
.bulk-bar.show { display: flex; }
.bulk-bar .count { font-weight: 600; color: var(--cyan); font-family: var(--font-mono); font-size: .88rem; }
.bulk-bar .actions { display:flex; gap:.4rem; }

/* Records-list: row checkbox column */
.data-table td.cb, .data-table th.cb { width: 2.2rem; padding-right: 0; }
.data-table td.cb input, .data-table th.cb input { accent-color: var(--cyan); }
.data-table .name-link { color: var(--text-strong); font-weight: 600; }
.data-table .name-link:hover { color: var(--cyan); }
.data-table .sub-meta { color: var(--text-dim); font-size: .76rem; margin-top:.15rem; font-family: var(--font-mono); }

/* Pagination row */
.paging { display:flex; justify-content:space-between; align-items:center; margin-top: var(--s-4); font-size: .85rem; color: var(--text-muted); }
.paging .pg-info { font-family: var(--font-mono); }
.paging .pg-buttons { display:flex; gap:.4rem; }

/* ─── Record-detail shell: main + right rail ────────────────────────── */
.record-shell { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: var(--s-5); align-items: start; }
@media (max-width: 1100px) { .record-shell { grid-template-columns: 1fr; } }

/* Record meta header (sensitivity chips, version, schema/client tags) */
.record-head { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.record-head .titlebox h1 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; margin: 0; line-height: 1.15; color: var(--text-strong); }
.record-head .titlebox .subtitle { color: var(--text-muted); font-size: .92rem; margin-top: .3rem; }
.record-head .titlebox .tags { margin-top: .65rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.record-head .actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Sectioned field blocks ("From NinjaRMM", "Vault refs", etc.) */
.field-section { background: var(--bg-card); border:1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); margin-bottom: var(--s-4); }
.field-section + .field-section { margin-top: 0; }
.field-section h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin: 0 0 var(--s-4); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: .5rem; }
.field-section h2 .src-pill { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; padding: .12rem .55rem; border-radius: var(--r-pill); background: rgba(0,112,243,.10); color: var(--blue-lite); text-transform: none; letter-spacing: 0; }

/* Field grid: label column (220px) + value column (1fr) */
.field-grid { display: grid; grid-template-columns: 220px 1fr; gap: .55rem 1.2rem; align-items: baseline; }
@media (max-width: 680px) { .field-grid { grid-template-columns: 1fr; gap: .15rem 0; } }
.field-grid .k { color: var(--text-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.field-grid .v { font-family: var(--font-mono); font-size: .9rem; word-break: break-word; max-height: 12em; overflow-y: auto; padding-right: .25rem; color: var(--text); }
.field-grid .v.empty { color: var(--text-faint); font-style: italic; font-family: var(--font-body); }
.field-grid .v.import-key { color: var(--text-dim); font-style: italic; }
/* Secret (is_secret) field: masked dots + Reveal/Copy affordances. */
.field-grid .v.secret-field { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.field-grid .v.secret-field .secret-mask { letter-spacing: .12em; color: var(--text-dim); }
.field-grid .v.secret-field .secret-mask.secret-revealed { color: var(--text); letter-spacing: normal; }
.field-grid .v.secret-field .secret-error { color: var(--label-restricted, #ff6b6b); font-size: .78rem; font-family: var(--font-body); }

/* ─── Right-rail accordion (Related / Passwords / Photos / Files / Comments / Activity) ─── */
.right-rail { position: sticky; top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); max-height: calc(100vh - 2rem); overflow-y: auto; }
@media (max-width: 1100px) { .right-rail { position: static; max-height: none; } }
.rail-section { background: var(--bg-card); border:1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.rail-head { display:flex; align-items:center; justify-content: space-between; padding: .75rem var(--s-4); cursor: pointer; user-select: none; }
.rail-head:hover { background: rgba(0,112,243,.04); }
.rail-head h3 { font-family: var(--font-display); font-size: .95rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: .55rem; }
.rail-head .rail-ico { width: 1.4rem; height: 1.4rem; border-radius: var(--r-xs); display:grid; place-items:center; font-size: .85rem; background: rgba(0,112,243,.10); color: var(--blue-lite); }
.rail-head .rail-count { font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); background: rgba(162,184,220,.08); padding: 0 .45rem; border-radius: var(--r-pill); line-height: 1.5; }
.rail-head .rail-toggle { color: var(--text-faint); font-family: var(--font-mono); font-size: .85rem; transition: transform var(--t-fast) var(--ease-out); }
.rail-section.open .rail-toggle { transform: rotate(90deg); }
.rail-body { padding: 0 var(--s-4) var(--s-4); display: none; }
.rail-section.open .rail-body { display: block; }
.rail-empty { padding: .65rem .85rem; color: var(--text-dim); font-size: .82rem; line-height: 1.5; background: rgba(255,255,255,.02); border-radius: var(--r-sm); border: 1px dashed var(--border); }
.rail-empty strong { color: var(--text-muted); }
.rail-soon { font-size: .65rem; padding: .1rem .4rem; border-radius: var(--r-xs); background: rgba(124,58,237,.12); color: var(--purple-mid); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-left: auto; }

/* Smart-Relate edge cards */
.sr-edge { display: block; padding: .6rem .75rem; border-radius: var(--r-sm); border:1px solid var(--border); margin-bottom: .45rem; text-decoration:none; color: inherit; transition: background var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out); }
.sr-edge:hover { background: rgba(0,112,243,.06); border-color: var(--border-focus); transform: translateY(-1px); color: inherit; }
.sr-edge .sr-row { display:flex; justify-content:space-between; align-items:baseline; gap: .5rem; }
.sr-edge .sr-name { font-weight: 600; font-size: .9rem; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-edge .sr-score { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); background: var(--bg-inset); padding: 0 .42rem; border-radius: var(--r-xs); flex-shrink: 0; }
.sr-edge .sr-meta { font-size: .72rem; color: var(--text-dim); margin-top: .2rem; }
.sr-edge .sr-meta .schema { color: var(--blue-lite); }
.sr-edge .sr-meta .client { color: var(--cyan); }
.sr-edge .sr-reasons { margin-top: .3rem; display: flex; gap: .25rem; flex-wrap: wrap; }
.reason-pill { font-size: .62rem; padding: .08rem .42rem; border-radius: var(--r-pill); background: rgba(124,58,237,.10); color: var(--purple-lite); font-weight: 500; }

/* ─── Live device panel (living documentation — RMM telemetry) ─────────── */
.device-panel { border-color: rgba(0,212,255,.22); box-shadow: 0 0 0 1px rgba(0,212,255,.04) inset; }
.device-panel h2 { text-transform: none; letter-spacing: 0; color: var(--text-strong); font-size: 1.05rem; }
.dev-status { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .02em; padding: .12rem .5rem; border-radius: var(--r-pill); text-transform: none; }
.dev-status .dev-dot { width: .5rem; height: .5rem; border-radius: 50%; }
.dev-status.live { background: rgba(74,222,128,.10); color: var(--green); }
.dev-status.live .dev-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(74,222,128,.18); }
.dev-status.stale { background: rgba(251,146,60,.10); color: var(--orange); }
.dev-status.stale .dev-dot { background: var(--orange); box-shadow: 0 0 0 3px rgba(251,146,60,.16); }
.dev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: var(--s-3) var(--s-4); }
.dev-cell { min-width: 0; }
.dev-cell .dev-k { color: var(--text-dim); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: .15rem; }
.dev-cell .dev-v { font-size: .92rem; color: var(--text); word-break: break-word; line-height: 1.35; }
.dev-cell .dev-v.mono { font-family: var(--font-mono); font-size: .85rem; }
.dev-cell .dev-sub { color: var(--text-dim); font-size: .74rem; font-family: var(--font-mono); }
.dev-disks { margin-top: var(--s-4); display: flex; flex-direction: column; gap: .55rem; }
.dev-disk { font-size: .8rem; }
.dev-disk-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .25rem; }
.dev-disk-name { color: var(--text-muted); font-weight: 600; }
.dev-disk-cap { color: var(--text-dim); font-size: .72rem; }
.dev-disk-bar { height: 7px; border-radius: var(--r-pill); background: rgba(162,184,220,.10); overflow: hidden; }
.dev-disk-fill { height: 100%; border-radius: var(--r-pill); background: var(--blue-mid); transition: width var(--t-slow) var(--ease-out); }
.dev-disk-fill.warn { background: var(--orange); }
.dev-disk-fill.crit { background: var(--red); }
.dev-raw { margin-top: var(--s-4); border-top: 1px solid var(--border); padding-top: var(--s-3); }
.dev-raw summary { cursor: pointer; font-size: .76rem; color: var(--text-dim); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; user-select: none; }
.dev-raw summary:hover { color: var(--blue-lite); }
.dev-raw-pre { margin-top: var(--s-3); max-height: 22em; overflow: auto; font-family: var(--font-mono); font-size: .72rem; line-height: 1.5; color: var(--text-muted); background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-3); white-space: pre; }

/* ─── Universal integration humanizer (record_detail _cards panels) ─────────
   Additive only — reuses .field-section / .dev-grid / .dev-cell / .src-pill.
   Renders any integrator's nested payload via the recursive `hnode` partial. */
.integ-panel h2 .integ-link { color: var(--cyan); font-size: .85rem; margin-left: .35rem; text-decoration: none; }
.integ-panel h2 .integ-link:hover { color: var(--blue-lite); }
.integ-hero { padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); margin-bottom: var(--s-3); }

/* Status badges (hero + scalar + table cells) */
.hbadge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .03em; padding: .1rem .5rem; border-radius: var(--r-pill); text-transform: uppercase; }
.hbadge-ok   { background: rgba(74,222,128,.12);  color: var(--green);  border: 1px solid rgba(74,222,128,.25); }
.hbadge-bad  { background: rgba(248,113,113,.12); color: var(--red);    border: 1px solid rgba(248,113,113,.25); }
.hbadge-warn { background: rgba(251,191,36,.12);  color: var(--yellow); border: 1px solid rgba(251,191,36,.25); }

/* "All fields" collapsible */
.integ-all { margin-top: var(--s-2); }
.integ-all > summary { cursor: pointer; font-size: .74rem; color: var(--text-dim); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; user-select: none; padding: .2rem 0; list-style: none; }
.integ-all > summary::-webkit-details-marker { display: none; }
.integ-all > summary::before { content: "▸"; display: inline-block; margin-right: .4rem; transition: transform var(--t-fast) ease; color: var(--text-faint); }
.integ-all[open] > summary::before { transform: rotate(90deg); }
.integ-all > summary:hover { color: var(--blue-lite); }
.integ-empty-note { font-family: var(--font-mono); font-size: .64rem; color: var(--text-faint); text-transform: none; letter-spacing: 0; margin-left: .35rem; }

/* hnode tree — definition rows, nested groups, chips, tables */
.hnode-root { margin-top: var(--s-3); }
.hnode-root > .hn-row, .hnode-root > .hn-group, .hn-grid > .hn-row, .hn-grid > .hn-group { }
.hn-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: var(--s-4); padding: .3rem 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.hn-row:last-child { border-bottom: 0; }
.hn-k { color: var(--text-dim); font-size: .72rem; font-weight: 600; letter-spacing: .02em; word-break: break-word; }
.hn-v { color: var(--text); font-size: .86rem; word-break: break-word; line-height: 1.4; min-width: 0; }
.hn-v.mono { font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted); }
.hn-dim { color: var(--text-faint); }

.hn-group { margin: var(--s-3) 0; padding: var(--s-3); background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-sm); }
.hn-group-head { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blue-lite); margin-bottom: .4rem; display: flex; align-items: center; gap: .4rem; }
.hn-count { font-family: var(--font-mono); font-size: .62rem; font-weight: 500; color: var(--text-faint); background: rgba(162,184,220,.08); padding: .04rem .4rem; border-radius: var(--r-pill); }
.hn-grid { display: flex; flex-direction: column; }

.hn-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.hn-chip { display: inline-flex; font-family: var(--font-mono); font-size: .72rem; padding: .12rem .5rem; border-radius: var(--r-pill); background: rgba(0,112,243,.10); color: var(--blue-lite); border: 1px solid rgba(0,112,243,.18); }

.hn-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-sm); }
.hn-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.hn-table th { text-align: left; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); padding: .4rem .55rem; background: rgba(162,184,220,.05); border-bottom: 1px solid var(--border); white-space: nowrap; }
.hn-table td { padding: .35rem .55rem; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: top; }
.hn-table tr:last-child td { border-bottom: 0; }
.hn-table td .mono { font-family: var(--font-mono); font-size: .74rem; }

/* Inline humanized value inside the plain Fields grid (non-_cards nested vals) */
.hnode-inline { display: flex; flex-direction: column; gap: .1rem; }
.hnode-inline .hn-row { grid-template-columns: minmax(90px,160px) 1fr; gap: var(--s-3); padding: .2rem 0; }

/* Bottom debug-only Raw JSON */
.integ-rawjson { margin-top: var(--s-4); }
.integ-rawjson > summary { cursor: pointer; font-size: .72rem; color: var(--text-faint); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; user-select: none; }
.integ-rawjson > summary:hover { color: var(--blue-lite); }

/* ─── Linked records (explicit record_links) in the Related rail ───────── */
.sr-linked { margin-bottom: .65rem; padding-bottom: .55rem; border-bottom: 1px solid var(--border); }
.sr-linked-head { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cyan); margin-bottom: .4rem; }
.sr-edge.linked { border-color: rgba(0,212,255,.22); }
.sr-edge.linked:hover { border-color: var(--border-focus); }
.sr-edge .sr-score.linked-pill { color: var(--cyan); background: rgba(0,212,255,.10); white-space: nowrap; }
.sr-edge .sr-note { font-size: .68rem; color: var(--text-dim); margin-top: .25rem; line-height: 1.4; }

/* Comments thread */
.comment { padding: .55rem .65rem; border-radius: var(--r-sm); background: rgba(255,255,255,.02); border: 1px solid var(--border); margin-bottom: .45rem; }
.comment.mine { border-color: rgba(0,112,243,.25); background: rgba(0,112,243,.04); }
.comment .c-head { display:flex; justify-content:space-between; align-items:baseline; font-size: .72rem; color: var(--text-dim); margin-bottom: .35rem; }
.comment .c-head strong { color: var(--text-muted); font-weight: 600; }
.comment .c-body { font-size: .85rem; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-wrap: break-word; }
.comment .c-actions { display: flex; gap: .25rem; margin-top: .35rem; }
.comment .c-actions button, .comment .c-actions a { font-size: .68rem; padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--text-dim); }
.comment .c-actions button:hover, .comment .c-actions a:hover { color: var(--red); }
.comment-composer { margin-top: var(--s-3); }
.comment-composer textarea { min-height: 4.5rem; font-size: .87rem; }
.comment-composer .c-foot { display: flex; justify-content: flex-end; margin-top: .4rem; }

/* Activity timeline (reuses .timeline + .timeline-item from R1) — small variant for rail */
.activity-list { padding-left: var(--s-4); border-left: 1px solid var(--border-strong); }
.activity-list .act-item { padding: 0 0 .65rem 0; position: relative; font-size: .82rem; }
.activity-list .act-item::before { content:''; position:absolute; left: calc(-1 * var(--s-4) - 4px); top: .35rem; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-mid); box-shadow: 0 0 0 3px rgba(0,112,243,.12); }
.activity-list .act-kind { display: inline-block; font-size: .6rem; font-family: var(--font-mono); padding: 0 .35rem; border-radius: var(--r-xs); background: rgba(0,112,243,.08); color: var(--blue-lite); margin-right: .35rem; vertical-align: middle; text-transform: uppercase; letter-spacing: .04em; }
.activity-list .act-meta { font-size: .68rem; color: var(--text-dim); font-family: var(--font-mono); margin-top: .15rem; }

/* ─── Sensitivity selector (chip-radio) ──────────────────────────────── */
.sens-selector { display: flex; gap: .35rem; flex-wrap: wrap; }
.sens-selector input { position: absolute; opacity: 0; pointer-events: none; }
.sens-selector label { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: var(--r-pill); background: rgba(255,255,255,.04); border: 1px solid var(--border); cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--text-muted); transition: all var(--t-fast) ease; user-select: none; }
.sens-selector label::before { content:''; width:.45rem; height:.45rem; border-radius:50%; background: currentColor; }
.sens-selector input:checked + label { background: color-mix(in srgb, var(--sc, var(--blue)) 14%, transparent); color: var(--sc, var(--blue-lite)); border-color: color-mix(in srgb, var(--sc, var(--blue)) 38%, transparent); }
.sens-selector .opt-public      { --sc: var(--label-public); }
.sens-selector .opt-internal    { --sc: var(--label-internal); }
.sens-selector .opt-confidential{ --sc: var(--label-confidential); }
.sens-selector .opt-restricted  { --sc: var(--label-restricted); }

/* Form-card (for record-edit/new) — same look as field-section but for forms */
.form-card { background: var(--bg-card); border:1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); margin-bottom: var(--s-4); }
.form-card h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin: 0 0 var(--s-4); color: var(--text-strong); }
.field-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 680px) { .field-cols-2 { grid-template-columns: 1fr; } }
.field .req { color: var(--red); }

/* ─── Rich-text editor (R2.6) — native contenteditable + toolbar ─────── */
.rt-wrap { background: var(--bg-inset); border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; }
.rt-wrap:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(0,212,255,.12); }
.rt-toolbar { display:flex; flex-wrap:wrap; gap: .15rem; padding: .35rem .45rem; background: rgba(0,0,0,.18); border-bottom: 1px solid var(--border); }
.rt-toolbar button { background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; padding: .25rem .5rem; border-radius: var(--r-xs); font-family: var(--font-body); font-size: .85rem; min-width: 1.85rem; transition: background var(--t-fast) ease, color var(--t-fast) ease; }
.rt-toolbar button:hover { background: rgba(0,112,243,.10); color: var(--blue-lite); }
.rt-toolbar button.active { background: rgba(0,212,255,.12); color: var(--cyan); border-color: rgba(0,212,255,.25); }
.rt-toolbar button.rt-icon { font-family: var(--font-mono); font-weight: 700; }
.rt-toolbar .rt-sep { width: 1px; background: var(--border); margin: .15rem .25rem; }
.rt-surface { padding: .7rem .85rem; min-height: 8rem; max-height: 32rem; overflow-y: auto; color: var(--text); font-family: var(--font-body); font-size: .92rem; line-height: 1.6; outline: none; }
.rt-surface:empty::before { content: attr(data-placeholder); color: var(--text-faint); pointer-events: none; }
.rt-surface h1 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: 1rem 0 .5rem; color: var(--text-strong); }
.rt-surface h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin: .85rem 0 .4rem; color: var(--text-strong); }
.rt-surface h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin: .7rem 0 .35rem; color: var(--text-strong); }
.rt-surface p { margin: 0 0 .65rem; }
.rt-surface ul, .rt-surface ol { margin: 0 0 .7rem 1.5rem; }
.rt-surface li { margin-bottom: .2rem; }
.rt-surface a { color: var(--cyan); text-decoration: underline; }
.rt-surface code { background: rgba(255,255,255,.06); padding: .1rem .35rem; border-radius: var(--r-xs); font-family: var(--font-mono); font-size: .85rem; }
.rt-surface blockquote { border-left: 3px solid var(--border-strong); padding-left: 1rem; color: var(--text-muted); margin: .5rem 0; }
.rt-hint { font-size: .72rem; color: var(--text-dim); padding: .35rem .65rem; border-top: 1px solid var(--border); background: rgba(0,0,0,.1); }

/* ─── Schema designer (R2.4) ─────────────────────────────────────────── */
.sf-fields { display:flex; flex-direction:column; gap: .8rem; }
.sf-field { background: var(--bg-inset); border:1px solid var(--border); border-radius: var(--r-sm); padding: .9rem 1rem; position: relative; transition: border-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out), opacity var(--t-fast) ease; }
.sf-field.dragging { opacity: .35; border-color: var(--border-focus); transform: scale(.99); }
.sf-field-head { display:flex; align-items:center; gap:.55rem; margin-bottom:.55rem; }
.sf-field-handle { cursor: grab; color: var(--text-faint); font-family: var(--font-mono); font-size: 1rem; user-select: none; padding: 0 .25rem; }
.sf-field-handle:active { cursor: grabbing; }
.sf-field-num { font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); background: rgba(162,184,220,.06); padding: 0 .45rem; border-radius: var(--r-xs); }
.sf-field-rm { margin-left: auto; background: transparent; border: none; color: var(--red); cursor: pointer; font-size: .85rem; padding: .15rem .45rem; border-radius: var(--r-xs); }
.sf-field-rm:hover { background: rgba(248,113,113,.12); }
.sf-cols-3 { display: grid; grid-template-columns: 2fr 1.5fr 1fr; gap: .8rem; }
@media (max-width: 760px) { .sf-cols-3 { grid-template-columns: 1fr; } }
.sf-checks { display:flex; gap: 1rem; font-size: .82rem; color: var(--text-muted); margin-top:.35rem; }
.sf-checks label { display:flex; align-items:center; gap: .35rem; cursor: pointer; color: var(--text); }
.sf-checks input { accent-color: var(--blue); }
.sf-add-btn { background: rgba(0,112,243,.10); border: 1px dashed rgba(0,112,243,.4); color: var(--blue-lite); padding: .65rem .9rem; border-radius: var(--r-sm); cursor: pointer; font-family: var(--font-body); font-weight: 600; width: 100%; font-size: .9rem; transition: background var(--t-fast) ease; }
.sf-add-btn:hover { background: rgba(0,112,243,.18); }

/* Schema grid (list page) */
.schema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); }
.schema-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.55rem; transition: border-color var(--t-base) ease, transform var(--t-fast) var(--ease-out); }
.schema-card:hover { border-color: var(--border-focus); transform: translateY(-2px); }
.schema-card.archived { opacity: .55; }
.schema-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: 0; display:flex; align-items:center; gap: .55rem; color: var(--text-strong); }
.schema-card .schema-ico { width: 32px; height: 32px; border-radius: var(--r-xs); display: inline-flex; align-items:center; justify-content:center; font-size: 1rem; background: var(--grad-brand); flex-shrink:0; color:#fff; }
.schema-card .schema-desc { font-size: .85rem; color: var(--text-muted); line-height: 1.45; min-height: 2.5em; }
.schema-card .schema-meta { display:flex; justify-content:space-between; align-items:center; font-size: .76rem; color: var(--text-dim); font-family: var(--font-mono); margin-top: auto; padding-top: .35rem; border-top: 1px solid var(--border); }
.schema-card .schema-actions { display:flex; gap: .4rem; flex-wrap: wrap; }

/* Per-client header score chips (composite scores) */
.score-chip { display:inline-flex; align-items:center; gap:.3rem; padding: .2rem .55rem; border-radius: var(--r-pill); font-size:.7rem; font-weight:700; font-family: var(--font-mono); background: rgba(162,184,220,.08); color: var(--text-muted); }
.score-chip .lbl { font-family: var(--font-body); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; font-size: .62rem; opacity: .8; }
.score-chip.health-good   { background: rgba(74,222,128,.10); color: var(--green); }
.score-chip.health-warn   { background: rgba(251,146,60,.10); color: var(--orange); }
.score-chip.health-crit   { background: rgba(248,113,113,.10); color: var(--red); }
.score-chip.health-unknown{ background: rgba(90,102,120,.18); color: var(--gray-health); }

/* ═══════════════════════════════════════════════════════════════════════════
   5 · TOPBAR / BREADCRUMB / USER CHIP
   ═══════════════════════════════════════════════════════════════════════════ */
.breadcrumb { display:flex; align-items:center; gap:.45rem; font-size:.82rem; color:var(--text-dim); margin-bottom:.75rem; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb .sep { color: var(--text-faint); }

.compass-user-chip, .user-chip { display:flex; align-items:center; gap:.55rem; padding:.4rem .8rem; background: rgba(255,255,255,.04); border:1px solid var(--border); border-radius: var(--r-pill); font-size:.85rem; color:var(--text); }
.avatar { width:1.85rem; height:1.85rem; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.75rem; color:#fff; background: var(--grad-brand); flex-shrink:0; }
.avatar.sm { width:1.4rem; height:1.4rem; font-size:.62rem; }
.avatar.lg { width:2.6rem; height:2.6rem; font-size:1rem; }

/* cmd-K trigger pill */
.cmdk-trigger { display:flex; align-items:center; gap:.5rem; padding:.45rem .8rem; background: var(--bg-inset); border:1px solid var(--border); border-radius: var(--r-sm); color:var(--text-dim); font-size:.85rem; cursor:pointer; min-width:240px; transition: border-color var(--t-fast) ease; }
.cmdk-trigger:hover { border-color: var(--border-focus); }
.cmdk-trigger .kbd { margin-left:auto; }
.kbd { font-family: var(--font-mono); font-size:.7rem; padding:.1rem .4rem; background: rgba(255,255,255,.06); border:1px solid var(--border); border-radius: var(--r-xs); color:var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   6 · BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.compass-btn, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1.15rem; border-radius: var(--r-sm); font-weight:600;
  font-family: var(--font-body); font-size:.9rem; cursor:pointer; border:1px solid transparent;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) ease, background var(--t-base) ease, border-color var(--t-base) ease;
  text-decoration:none; white-space:nowrap;
}
.compass-btn:active, .btn:active { transform: translateY(0) scale(.98); }
.compass-btn:hover, .btn:hover { transform: translateY(-1px); }

.compass-btn-primary, .btn-primary { background: var(--grad-brand); color:#fff; box-shadow: 0 6px 22px rgba(0,112,243,.32); }
.compass-btn-primary:hover, .btn-primary:hover { box-shadow: 0 10px 30px rgba(0,112,243,.5); color:#fff; }

.compass-btn-ghost, .btn-ghost { background: rgba(255,255,255,.04); color: var(--blue-lite); border-color: var(--border-strong); }
.compass-btn-ghost:hover, .btn-ghost:hover { background: rgba(255,255,255,.08); color: var(--cyan); border-color: var(--border-focus); }

.btn-danger { background: rgba(248,113,113,.12); color: var(--red); border-color: rgba(248,113,113,.3); }
.btn-danger:hover { background: rgba(248,113,113,.2); }

.btn-icon { padding:.5rem; width:2.2rem; height:2.2rem; }
.btn-sm { padding:.4rem .8rem; font-size:.82rem; }
.btn-lg { padding:.8rem 1.6rem; font-size:1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   7 · FORMS
   ═══════════════════════════════════════════════════════════════════════════ */
.field { display:flex; flex-direction:column; gap:.4rem; margin-bottom: var(--s-4); }
.field label, .label { font-size:.78rem; font-weight:600; color:var(--text-muted); letter-spacing:.02em; }
.field .hint { font-size:.74rem; color:var(--text-dim); }
.input, .select, .textarea,
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], textarea, select {
  width:100%; padding:.6rem .75rem; background: var(--bg-inset); border:1px solid var(--border-strong);
  border-radius: var(--r-sm); color: var(--text); font-family: var(--font-body); font-size:.9rem;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.input:focus, .select:focus, .textarea:focus,
input:focus, textarea:focus, select:focus { outline:none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(0,212,255,.12); }
.input::placeholder, textarea::placeholder { color: var(--text-faint); }
textarea { resize: vertical; min-height: 6rem; }
.input.mono, input.mono { font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════════════════
   8 · CARDS / SECTIONS / STAT TILES
   ═══════════════════════════════════════════════════════════════════════════ */
.compass-cards, .stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: var(--s-4); margin-bottom: var(--s-6); }

.compass-card, .card {
  display:block; padding: var(--s-5); background: var(--bg-card);
  border:1px solid var(--border); border-radius: var(--r-md); color: var(--text);
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-base) ease, transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) ease;
}
a.compass-card:hover, a.card:hover, .card.interactive:hover { border-color: var(--border-focus); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.5); color: var(--text); }

/* stat tile */
.stat { position:relative; overflow:hidden; }
.stat::after { content:''; position:absolute; inset:0; background: radial-gradient(circle at 85% 0%, rgba(0,212,255,.10), transparent 50%); pointer-events:none; }
.compass-card-icon, .stat-icon { font-size:1.4rem; color: var(--cyan); margin-bottom:.5rem; }
.compass-card-label, .stat-label { color: var(--text-muted); font-size:.82rem; margin-bottom:.2rem; }
.compass-card-num, .stat-num { font-family: var(--font-display); font-size:2rem; font-weight:700; color:#fff; line-height:1; margin-bottom:.3rem; }
.compass-card-sub, .stat-sub { color: var(--text-dim); font-size:.74rem; }
.stat-delta { font-size:.74rem; font-weight:600; }
.stat-delta.up { color: var(--green); } .stat-delta.down { color: var(--red); }

.compass-section, .section { background: var(--bg-card); border:1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); margin-bottom: var(--s-5); box-shadow: var(--shadow-card); }
.compass-section-title, .section-title { font-size:1.05rem; margin:0 0 var(--s-4); color: var(--text-strong); display:flex; align-items:center; justify-content:space-between; gap:.5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   9 · SCORE RINGS  (Health / Security / Efficiency)
   ═══════════════════════════════════════════════════════════════════════════ */
.score-ring { --val:0; --ring:var(--green); width:84px; height:84px; border-radius:50%; display:grid; place-items:center; position:relative;
  background: conic-gradient(var(--ring) calc(var(--val)*1%), rgba(162,184,220,.10) 0); }
.score-ring::before { content:''; position:absolute; inset:7px; border-radius:50%; background: var(--bg-card); }
.score-ring .val { position:relative; font-family: var(--font-display); font-weight:700; font-size:1.25rem; color:#fff; }
.score-ring.warn { --ring: var(--orange); } .score-ring.bad { --ring: var(--red); }
.score-ring.lg { width:120px; height:120px; } .score-ring.lg .val { font-size:1.9rem; }
.score-trio { display:flex; gap: var(--s-5); flex-wrap:wrap; }
.score-cell { display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.score-cell .cap { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); font-weight:600; }

/* ═══════════════════════════════════════════════════════════════════════════
   10 · DATA TABLE
   ═══════════════════════════════════════════════════════════════════════════ */
.dt-wrap { background: var(--bg-card); border:1px solid var(--border); border-radius: var(--r-md); overflow:hidden; box-shadow: var(--shadow-card); }
.dt-toolbar { display:flex; align-items:center; gap:.6rem; padding: var(--s-3) var(--s-4); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.dt-toolbar .grow { flex:1; }
.data-table, .compass-table { width:100%; border-collapse:collapse; }
.data-table thead th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); font-weight:700; padding:.7rem var(--s-4); background: var(--bg-inset); position:sticky; top:0; }
.data-table tbody td { padding:.7rem var(--s-4); border-bottom:1px solid var(--border); font-size:.875rem; }
.data-table tbody tr { transition: background var(--t-fast) ease; }
.data-table tbody tr:hover { background: rgba(0,112,243,.06); }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table td.num, .data-table th.num { text-align:right; font-family: var(--font-mono); }

/* legacy compact table (dashboard build-status etc.) */
.compass-table td { padding:.6rem 0; border-bottom:1px solid var(--border); }
.compass-table tr:last-child td { border-bottom:none; }
.compass-table td:last-child { text-align:right; }

/* ═══════════════════════════════════════════════════════════════════════════
   11 · TAGS / PILLS / BADGES / SENSITIVITY
   ═══════════════════════════════════════════════════════════════════════════ */
.tag, .compass-tag { display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .6rem; border-radius: var(--r-pill); font-size:.72rem; font-weight:600; letter-spacing:.02em; background: rgba(162,184,220,.10); color: var(--text-muted); border:1px solid transparent; }
a.tag:hover { border-color: var(--border-focus); }
/* user-defined tag colors (set --tc inline) */
.tag.color { background: color-mix(in srgb, var(--tc) 16%, transparent); color: var(--tc); }
.compass-tag-done { background: rgba(74,222,128,.12); color: var(--green); }
.compass-tag-now  { background: rgba(0,112,243,.12); color: var(--blue-lite); }

.badge, .compass-badge { padding:.12rem .5rem; border-radius: var(--r-pill); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.compass-badge-admin, .badge-admin { background: var(--grad-brand); color:#fff; }
.badge-new { background: rgba(0,212,255,.16); color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════════════════
   11.4 · FILTER TOOLBAR + EMPTY STATE + INFO ALERT
   ═══════════════════════════════════════════════════════════════════════════ */
.filter-toolbar { display:flex; gap:.6rem; align-items:center; padding: .7rem .85rem; background: var(--bg-card); border:1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--s-4); flex-wrap: wrap; }
.filter-toolbar .field { margin:0; flex:0 1 auto; }
.filter-toolbar .field.grow { flex:1 1 240px; min-width: 240px; }
.filter-toolbar input[type=search] { padding-left: .75rem; }

.empty-state { padding: 3rem 1.5rem; text-align:center; background: var(--bg-card); border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.empty-state .empty-ico { font-size: 2.4rem; line-height: 1; margin-bottom: .8rem; color: var(--blue-mid); opacity: .9; }
.empty-state .empty-title { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 .35rem; font-weight: 600; color: var(--text-strong); }
.empty-state .empty-sub { color: var(--text-muted); font-size: .92rem; max-width: 42rem; margin: 0 auto; line-height: 1.55; }

.compass-alert-info { background: rgba(0,212,255,.06); border:1px solid rgba(0,212,255,.25); color: var(--blue-lite); padding: .7rem 1rem; border-radius: var(--r-sm); margin-bottom: var(--s-4); font-size:.9rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   11.5 · CLIENT-LIST-SPECIFIC (alphabet bar, client avatar tile, archive pill)
   Used by /clients and the client home header.
   ═══════════════════════════════════════════════════════════════════════════ */
.alpha-bar { display:flex; flex-wrap:wrap; gap:.2rem; align-items:center; padding: .55rem var(--s-4); background: var(--bg-inset); border:1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--s-4); }
.alpha-bar .alpha-label { font-size:.72rem; color: var(--text-dim); padding: .15rem .5rem; }
.alpha-bar a { font-family: var(--font-mono); font-size:.78rem; padding:.18rem .55rem; border-radius: var(--r-xs); color: var(--blue-lite); text-decoration:none; transition: background var(--t-fast) ease; }
.alpha-bar a:hover { background: rgba(0,112,243,.14); color: var(--cyan); }

.client-tile { display:flex; align-items:center; gap:.7rem; }
.client-tile .ct-avatar { width:2.2rem; height:2.2rem; border-radius: var(--r-sm); display:grid; place-items:center; font-family: var(--font-display); font-weight:700; font-size:.95rem; color:#fff; background: var(--grad-brand); flex-shrink:0; }
.client-tile .ct-meta { min-width:0; }
.client-tile .ct-name { font-weight:600; font-size:.95rem; color: var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.client-tile .ct-name a { color: var(--text-strong); }
.client-tile .ct-name a:hover { color: var(--cyan); }
.client-tile .ct-sub { font-size:.74rem; color: var(--text-dim); margin-top:.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.bucket-row td { background: var(--bg-inset); font-family: var(--font-mono); font-size:.7rem; color: var(--text-muted); text-transform:uppercase; letter-spacing:.04em; padding: .3rem var(--s-4); font-weight:700; }
tr.archived td { opacity: .55; }
.pill-archived { font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; background: rgba(248,113,113,.14); color: var(--red); padding: .1rem .45rem; border-radius: var(--r-xs); margin-left:.4rem; font-weight:700; }

/* Tabs (Active / Leads / Archived) */
.tabs { display:flex; gap:.2rem; border-bottom:1px solid var(--border); margin-bottom: var(--s-4); }
.tabs a { padding:.55rem 1rem; font-size:.85rem; font-weight:600; color: var(--text-muted); border-bottom: 2px solid transparent; text-decoration:none; transition: color var(--t-fast) ease, border-color var(--t-fast) ease; }
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--cyan); border-bottom-color: var(--cyan); }

/* Client-home layout (per-client shell) */
.client-shell { display:grid; grid-template-columns: 260px minmax(0, 1fr) 320px; gap: var(--s-5); align-items: start; min-height: calc(100vh - 4rem); }
@media (max-width: 1280px) { .client-shell { grid-template-columns: 240px minmax(0,1fr); } .client-shell > .client-context-rail { display: none; } }
@media (max-width: 880px)  { .client-shell { grid-template-columns: 1fr; } .client-shell > .client-tree { display: none; } }
.client-tree { background: var(--bg-card); border:1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3) 0; position: sticky; top: var(--s-4); max-height: calc(100vh - 2rem); overflow-y: auto; }
.client-tree-foot { padding: var(--s-2) var(--s-3); border-top: 1px dashed var(--border); margin-top: var(--s-3); }

.client-hero { background: var(--bg-card); border:1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); margin-bottom: var(--s-5); position: relative; overflow: hidden; }
.client-hero::before { content:''; position:absolute; inset:0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--blue-lite), transparent); opacity: .35; }
.client-hero-top { display:flex; gap: var(--s-4); align-items:flex-start; justify-content: space-between; flex-wrap: wrap; }
.client-hero-name { font-family: var(--font-display); font-size: 1.9rem; font-weight:700; line-height: 1.1; margin: 0; color: var(--text-strong); }
.client-hero-sub { font-size: .85rem; color: var(--text-muted); margin-top: .35rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.client-hero-sub code { font-family: var(--font-mono); font-size:.78rem; background: var(--bg-inset); padding:.1rem .45rem; border-radius: var(--r-xs); color: var(--text-dim); }
.client-hero-scores { display:flex; gap:.5rem; margin-top: var(--s-4); flex-wrap:wrap; }

.client-quicknotes { background: rgba(124,58,237,.04); border:1px solid rgba(124,58,237,.22); border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-5); }
.client-quicknotes h3 { font-family: var(--font-display); font-size: .9rem; font-weight:600; margin: 0 0 .5rem; color: var(--purple-lite); display:flex; align-items:center; gap:.4rem; }
.client-quicknotes textarea { background: rgba(0,0,0,.18); min-height: 3.5rem; border-color: rgba(124,58,237,.25); font-size:.88rem; }

/* Activity timeline */
.timeline { position: relative; padding-left: var(--s-5); }
.timeline::before { content:''; position:absolute; left: var(--s-3); top: .3rem; bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--border-strong), transparent); }
.timeline-item { position: relative; padding: 0 0 var(--s-4) 0; font-size: .85rem; color: var(--text); }
.timeline-item::before { content:''; position:absolute; left: calc(-1 * var(--s-5) + var(--s-3) - 4px); top: .35rem; width: 9px; height: 9px; border-radius:50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(0,112,243,.15); }
.timeline-item .t-meta { font-size: .72rem; color: var(--text-dim); margin-top: .15rem; font-family: var(--font-mono); }
.timeline-item .t-kind { display:inline-block; font-size:.66rem; font-family: var(--font-mono); padding: 0 .4rem; border-radius: var(--r-xs); background: rgba(0,112,243,.10); color: var(--blue-lite); margin-right: .4rem; vertical-align: middle; }

/* sensitivity chips — single canonical source */
.sens { display:inline-flex; align-items:center; gap:.32rem; padding:.16rem .55rem; border-radius: var(--r-pill); font-size:.7rem; font-weight:600; text-transform:capitalize; }
.sens::before { content:''; width:.45rem; height:.45rem; border-radius:50%; background: currentColor; }
.sens-public       { background: rgba(74,222,128,.10);  color: var(--label-public); }
.sens-internal     { background: rgba(61,184,255,.10);  color: var(--label-internal); }
.sens-confidential { background: rgba(251,146,60,.10);  color: var(--label-confidential); }
.sens-restricted   { background: rgba(248,113,113,.10); color: var(--label-restricted); }

/* status pills */
.status { display:inline-flex; align-items:center; gap:.32rem; padding:.16rem .55rem; border-radius: var(--r-pill); font-size:.72rem; font-weight:600; }
.status-open { background: rgba(0,112,243,.12); color: var(--blue-lite); }
.status-progress { background: rgba(0,212,255,.12); color: var(--cyan); }
.status-done { background: rgba(74,222,128,.12); color: var(--green); }
.status-warn { background: rgba(251,146,60,.12); color: var(--orange); }

.compass-chips, .chips { display:flex; gap:.5rem; flex-wrap:wrap; }
.compass-chip, .chip { padding:.3rem .7rem; border-radius: var(--r-pill); background: rgba(0,112,243,.10); color: var(--blue-lite); font-size:.8rem; font-family: var(--font-mono); }
.compass-muted { color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   12 · HEALTH BAR + THE STACK
   ═══════════════════════════════════════════════════════════════════════════ */
.health-bar { display:flex; height:10px; border-radius: var(--r-pill); overflow:hidden; background: var(--gray-health); }
.health-bar > span { display:block; height:100%; }
.health-bar .h-green { background: var(--green); }
.health-bar .h-orange { background: var(--orange); }
.health-bar .h-red { background: var(--red); }
.health-bar .h-gray { background: var(--gray-health); }
.health-bar .h-blue { background: var(--blue-standard); }

.stack-row { display:grid; grid-template-columns: 180px 1fr 90px 90px; align-items:center; gap: var(--s-4); padding:.7rem var(--s-4); border-bottom:1px solid var(--border); transition: background var(--t-fast) ease; }
.stack-row:hover { background: rgba(0,112,243,.05); }
.stack-row.head { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); font-weight:700; border-bottom:1px solid var(--border-strong); }
.stack-row .cat { font-weight:600; font-size:.9rem; }
.stack-row .spend { font-family: var(--font-mono); font-size:.82rem; text-align:right; color: var(--text-muted); }
.stack-row.all { background: rgba(0,112,243,.06); font-weight:700; }

/* ── 12b · THE STACK — hero presentation (flex-based, N-year spend) ───────── */
.stk-legend { display:flex; gap: var(--s-5); flex-wrap:wrap; align-items:center; margin-bottom: var(--s-4); }
.stk-legend .key { display:flex; align-items:center; gap:.4rem; font-size:.76rem; color: var(--text-muted); }
.stk-legend .dot { width:11px; height:11px; border-radius:3px; }
.stk-legend .dot.g{background:var(--green);} .stk-legend .dot.a{background:var(--orange);}
.stk-legend .dot.r{background:var(--red);} .stk-legend .dot.u{background:var(--gray-health);}

.stk-sample { display:flex; align-items:center; gap:.6rem; padding:.7rem var(--s-4); margin-bottom: var(--s-4);
  background: rgba(251,191,36,.07); border:1px solid rgba(251,191,36,.25); border-radius: var(--r-md); color: var(--yellow); font-size:.85rem; }
.stk-sample b { color:#fde68a; }

.stk-board { background: var(--bg-card); border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow:hidden; }
.stk-row { display:flex; align-items:center; gap: var(--s-4); padding: var(--s-4); border-bottom:1px solid var(--border); transition: background var(--t-fast) ease; }
.stk-row:last-child { border-bottom:none; }
.stk-row:hover { background: rgba(0,112,243,.05); }
.stk-row.head { padding:.6rem var(--s-4); }
.stk-row.head span { font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-dim); font-weight:700; }
.stk-row.all { background: linear-gradient(90deg, rgba(0,112,243,.10), rgba(124,58,237,.06)); }
.stk-row.all .stk-name { font-family: var(--font-display); }

.stk-cat { flex:0 0 210px; display:flex; align-items:center; gap:.7rem; min-width:0; }
.stk-ico { width:34px; height:34px; border-radius: var(--r-sm); display:grid; place-items:center; font-size:1rem;
  background: rgba(0,112,243,.12); border:1px solid var(--glass-border); flex-shrink:0; }
.stk-cat .stk-name { font-weight:600; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stk-cat .stk-count { font-size:.72rem; color: var(--text-dim); font-family: var(--font-mono); }

.stk-bar-wrap { flex:1 1 auto; min-width:160px; }
.stk-bar { display:flex; height:26px; border-radius: var(--r-sm); overflow:hidden; background: var(--gray-health); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.stk-bar .seg { display:flex; align-items:center; justify-content:center; height:100%; font-size:.68rem; font-weight:700; color:#04121f;
  font-family: var(--font-mono); transition: filter var(--t-fast) ease; min-width:0; overflow:hidden; }
.stk-bar .seg:hover { filter: brightness(1.12); }
.stk-bar .seg.g{background:var(--green);} .stk-bar .seg.a{background:var(--orange);}
.stk-bar .seg.r{background:var(--red); color:#fff;} .stk-bar .seg.u{background:var(--gray-health); color:var(--text-muted);}

.stk-right { flex:0 0 auto; display:flex; align-items:center; gap: var(--s-3); }
.stk-run { flex:0 0 96px; text-align:right; font-family: var(--font-mono); font-size:.85rem; color: var(--cyan); font-weight:600; }
.stk-spend { flex:0 0 72px; text-align:right; font-family: var(--font-mono); font-size:.78rem; color: var(--text-muted); }
.stk-spend.head, .stk-run.head { color:var(--text-dim); }

@media (max-width: 900px) {
  .stk-cat { flex-basis:140px; }
  .stk-spend { display:none; }
  .stk-run { flex-basis:72px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   13 · RIGHT RAIL (accordion: Related / Passwords / Files / Comments / Activity)
   ═══════════════════════════════════════════════════════════════════════════ */
.rail { position:sticky; top: var(--s-4); display:flex; flex-direction:column; gap: var(--s-4); }
.rail-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border:1px solid var(--glass-border); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); }
.rail-card h3 { font-size:.95rem; display:flex; align-items:center; gap:.5rem; margin:0 0 .15rem; }
.rail-sub { color: var(--text-dim); font-size:.76rem; margin:0 0 .75rem; }
.winston-dot { width:16px; height:16px; border-radius:50%; background: var(--grad-brand); box-shadow: var(--glow-blue); flex-shrink:0; animation: pulse-glow 3s ease-in-out infinite; }

.rail-empty { padding: var(--s-4); text-align:center; color:var(--text-dim); font-size:.85rem; background: rgba(0,0,0,.15); border-radius: var(--r-sm); }

.edge { display:block; padding:.6rem .75rem; border-radius: var(--r-sm); border:1px solid var(--border); margin-bottom:.5rem; color:inherit; transition: background var(--t-fast) ease, border-color var(--t-fast) ease; }
.edge:hover { background: rgba(0,112,243,.06); border-color: var(--border-focus); color:inherit; }
.edge .row-1 { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; }
.edge .name { font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.edge .score { font-family: var(--font-mono); font-size:.7rem; color:var(--text-dim); background: rgba(255,255,255,.06); padding:.08rem .4rem; border-radius: var(--r-xs); flex-shrink:0; }
.edge .meta { font-size:.72rem; color:var(--text-dim); margin-top:.25rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.reason-pill { font-size:.66rem; padding:.06rem .42rem; border-radius: var(--r-pill); background: rgba(124,58,237,.10); color: var(--purple-lite); }

/* ═══════════════════════════════════════════════════════════════════════════
   14 · DRAWER / MODAL / TABS
   ═══════════════════════════════════════════════════════════════════════════ */
.scrim { position:fixed; inset:0; background: rgba(2,6,14,.6); backdrop-filter: blur(2px); z-index: var(--z-modal); }
.modal { position:fixed; left:50%; top:14vh; transform:translateX(-50%); width:min(560px,92vw); z-index: calc(var(--z-modal)+1);
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border:1px solid var(--glass-border-h); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); padding: var(--s-6); animation: reveal var(--t-base) var(--ease-out) both; }
.modal h2 { font-size:1.2rem; margin-bottom:.4rem; }

.drawer { position:fixed; right:0; top:0; height:100vh; width:min(440px,94vw); z-index: var(--z-drawer);
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border-left:1px solid var(--glass-border-h);
  box-shadow: var(--shadow-pop); padding: var(--s-6); overflow-y:auto; animation: slide-in var(--t-base) var(--ease-out) both; }

.tabs { display:flex; gap:.2rem; border-bottom:1px solid var(--border); margin-bottom: var(--s-4); }
.tab { padding:.5rem .9rem; font-size:.85rem; font-weight:600; color:var(--text-muted); border-bottom:2px solid transparent; cursor:pointer; transition: color var(--t-fast) ease, border-color var(--t-fast) ease; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text-strong); border-bottom-color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════════════════
   15 · CMD-K PALETTE
   ═══════════════════════════════════════════════════════════════════════════ */
.cmdk { position:fixed; left:50%; top:12vh; transform:translateX(-50%); width:min(620px,94vw); z-index: var(--z-cmdk);
  background: var(--glass-bg); backdrop-filter: blur(28px); border:1px solid var(--glass-border-h); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); overflow:hidden; animation: reveal var(--t-base) var(--ease-out) both; }
.cmdk-input { width:100%; padding: var(--s-4) var(--s-5); background:transparent; border:none; color:var(--text-strong); font-size:1.05rem; font-family: var(--font-body); border-bottom:1px solid var(--border); }
.cmdk-input:focus { outline:none; box-shadow:none; border-color: var(--border); }
.cmdk-results { max-height:50vh; overflow-y:auto; padding:.4rem; }
.cmdk-item { display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius: var(--r-sm); cursor:pointer; font-size:.9rem; }
.cmdk-item:hover, .cmdk-item.active { background: rgba(0,112,243,.14); }
.cmdk-item .ic { color: var(--blue-mid); width:1.2rem; text-align:center; }
.cmdk-item .kind { margin-left:auto; font-size:.7rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.04em; }
.cmdk-item .lbl { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.cmdk-item .lbl .sub { font-size:.72rem; color: var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-group { padding:.55rem .8rem .25rem; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color: var(--text-faint); }
.cmdk-hint { padding:.45rem .9rem; border-top:1px solid var(--border); font-size:.72rem; color: var(--text-faint); min-height:1.1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   16 · EMPTY STATE / SKELETON / TOAST / ALERTS
   ═══════════════════════════════════════════════════════════════════════════ */
.empty { text-align:center; padding: var(--s-10) var(--s-5); }
.empty .ic { font-size:2.4rem; color: var(--blue-mid); filter: drop-shadow(0 0 16px rgba(0,112,243,.4)); margin-bottom: var(--s-3); }
.empty h3 { font-size:1.15rem; margin-bottom:.4rem; }
.empty p { color: var(--text-muted); max-width:34rem; margin:0 auto var(--s-4); }

.skeleton { position:relative; overflow:hidden; background: rgba(162,184,220,.07); border-radius: var(--r-sm); }
.skeleton::after { content:''; position:absolute; inset:0; transform:translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: shimmer 1.4s infinite; }
.sk-line { height:.9rem; margin:.4rem 0; } .sk-line.w-60{width:60%;} .sk-line.w-40{width:40%;} .sk-line.w-80{width:80%;}
.sk-card { height:104px; }

.toast { position:fixed; right: var(--s-5); bottom: var(--s-5); z-index: var(--z-toast); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border:1px solid var(--glass-border-h); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-pop); animation: slide-in var(--t-base) var(--ease-out) both; }

.compass-alert, .alert { padding: var(--s-4) var(--s-5); border-radius: var(--r-sm); margin-bottom: var(--s-5); }
.compass-alert ul { margin:.5rem 0 0; padding-left:1.25rem; }
.compass-alert-warn, .alert-warn { background: rgba(251,146,60,.08); border:1px solid rgba(251,146,60,.3); color: var(--orange); }
.alert-info { background: rgba(0,112,243,.08); border:1px solid rgba(0,112,243,.3); color: var(--blue-lite); }
.alert-ok { background: rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.3); color: var(--green); }

/* ═══════════════════════════════════════════════════════════════════════════
   17 · MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes reveal { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
@keyframes slide-in { from { opacity:0; transform: translateX(16px); } to { opacity:1; transform:none; } }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes pulse-glow { 0%,100% { filter: drop-shadow(0 0 8px rgba(0,212,255,.45)); } 50% { filter: drop-shadow(0 0 16px rgba(0,212,255,.8)); } }
@keyframes count-fade { from { opacity:0; } to { opacity:1; } }

/* staggered list/card entry: add .stagger to a parent, children cascade */
.stagger > * { animation: reveal var(--t-base) var(--ease-out) both; }
.stagger > *:nth-child(1){animation-delay:.02s} .stagger > *:nth-child(2){animation-delay:.05s}
.stagger > *:nth-child(3){animation-delay:.08s} .stagger > *:nth-child(4){animation-delay:.11s}
.stagger > *:nth-child(5){animation-delay:.14s} .stagger > *:nth-child(6){animation-delay:.17s}
.stagger > *:nth-child(7){animation-delay:.20s} .stagger > *:nth-child(8){animation-delay:.23s}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18 · PUBLIC LANDING  (hero — kept + refined)
   ═══════════════════════════════════════════════════════════════════════════ */
body.compass-public { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:2rem;
  background: radial-gradient(ellipse at top, #0a1628 0%, var(--bg-primary) 60%); }
.compass-hero { max-width:720px; text-align:center; animation: reveal var(--t-slow) var(--ease-out) both; }
.compass-hero-mark { font-size:3rem; color: var(--cyan); margin-bottom:.5rem; text-shadow: 0 0 24px rgba(0,212,255,.45); }
.compass-hero-title { font-family: var(--font-display); font-size: clamp(2.5rem,6vw,4rem); background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:0 0 .5rem; }
.compass-hero-tag { font-size:1.25rem; color: var(--blue-lite); margin:0 0 1.5rem; }
.compass-hero-blurb { color:#9aa7bd; line-height:1.65; margin:0 0 2rem; font-size:1rem; max-width:56rem; }
.compass-hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.compass-hero-foot { margin-top:2.5rem; color:#5a6678; font-size:.85rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   19 · RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .compass-app { grid-template-columns: 1fr; }
  .compass-sidebar { position:fixed; left:-280px; width:260px; transition: left var(--t-base) var(--ease-out); }
  .compass-sidebar.open { left:0; }
  .compass-main { padding: var(--s-4); }
  .stack-row { grid-template-columns: 120px 1fr 70px; }
  .stack-row .spend:nth-child(4){ display:none; }
}

/* utility */
.flex { display:flex; } .col { flex-direction:column; } .between { justify-content:space-between; } .center { align-items:center; }
.gap-2 { gap:var(--s-2);} .gap-3 { gap:var(--s-3);} .gap-4 { gap:var(--s-4);}
.mt-2 { margin-top:var(--s-2);} .mt-4 { margin-top:var(--s-4);}
.mb-1 { margin-bottom:var(--s-1);} .mb-2 { margin-bottom:var(--s-2);} .mb-4 { margin-bottom:var(--s-4);} .mb-6{margin-bottom:var(--s-6);}
.grow { flex:1; } .wrap { flex-wrap:wrap; } .right { text-align:right; } .nowrap { white-space:nowrap; }
.cyan { color: var(--cyan); } .mw-34 { max-width: 34rem; }

/* dashboard helpers (keeps Go html/template style attrs simple — no ZgotmplZ) */
.hero-winston {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(124,58,237,.16), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(0,112,243,.14), transparent 50%),
    var(--bg-card);
}

/* ═══════════════════════════════════════════════════════════════════════════
   20 · R5 — AUTO-QBR BUILDER
   ═══════════════════════════════════════════════════════════════════════════ */
.qbr-builder { background: var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg, 14px);
  padding:1rem 1.25rem; margin:0 0 1.5rem; }
.qbr-form { display:flex; align-items:flex-end; gap:1rem; flex-wrap:wrap; }
.qbr-field { display:flex; flex-direction:column; gap:.3rem; }
.qbr-field label { font-size:.78rem; color:#9aa7bd; text-transform:uppercase; letter-spacing:.04em; }
.qbr-field select { background:#0a1422; border:1px solid var(--border); color:var(--text,#e6edf6);
  border-radius:10px; padding:.55rem .8rem; font-size:.9rem; min-width:200px; }
.qbr-demo { display:flex; align-items:center; gap:.4rem; font-size:.85rem; color:#9aa7bd; padding-bottom:.55rem; }

.qbr-report { background:
    radial-gradient(ellipse at 100% 0%, rgba(124,58,237,.10), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(0,112,243,.09), transparent 50%),
    var(--bg-card);
  border:1px solid var(--border); border-radius:var(--r-lg,14px); padding:1.5rem 1.6rem; margin:0 0 1.5rem;
  animation: reveal var(--t-base) var(--ease-out) both; }
.qbr-report-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.qbr-eyebrow { font-family:var(--font-mono); font-size:.74rem; color:var(--cyan); letter-spacing:.05em; text-transform:uppercase; }
.qbr-client { font-family:var(--font-display); font-size:1.9rem; margin:.2rem 0 0; color:var(--text,#e9eef7); }
.qbr-demo-tag { color:#f59e0b; }
.qbr-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.qbr-banner { background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.35); color:#f4c772;
  border-radius:10px; padding:.6rem .9rem; font-size:.82rem; margin:1rem 0 0; }

.qbr-kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem; margin:1.25rem 0; }
.qbr-kpi { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px; padding:.8rem .6rem; text-align:center; }
.qbr-kpi .k-val { font-family:var(--font-display); font-size:1.5rem; color:var(--text,#eef3fb); line-height:1.1; }
.qbr-kpi .k-lbl { font-size:.7rem; color:#8a98ae; margin-top:.25rem; text-transform:uppercase; letter-spacing:.03em; }

.qbr-h3 { font-family:var(--font-display); font-size:1.05rem; margin:1.4rem 0 .6rem; color:var(--blue-lite,#7fb2f5); }
.qbr-findings { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.qbr-finding { display:flex; align-items:flex-start; gap:.6rem; background:rgba(255,255,255,.025);
  border:1px solid var(--border); border-left-width:3px; border-radius:8px; padding:.55rem .8rem; font-size:.88rem; color:#cdd6e4; }
.qf-dot { width:8px; height:8px; border-radius:50%; margin-top:.45rem; flex:0 0 auto; }
.qf-red { border-left-color:#ef4444; } .qf-red .qf-dot { background:#ef4444; }
.qf-amber { border-left-color:#f59e0b; } .qf-amber .qf-dot { background:#f59e0b; }
.qf-green { border-left-color:#22c55e; } .qf-green .qf-dot { background:#22c55e; }

.qbr-tables { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:.6rem; }
.qbr-tbl table { width:100%; border-collapse:collapse; font-size:.86rem; }
.qbr-tbl td { padding:.45rem .2rem; border-bottom:1px solid var(--border); color:#c4cedd; }
.qbr-tbl td:last-child { text-align:right; color:var(--text,#e9eef7); font-variant-numeric:tabular-nums; white-space:nowrap; }
.qbr-sub { color:#7d8ba1; font-size:.78rem; }
.qbr-pill { display:inline-block; font-size:.66rem; padding:.12rem .45rem; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.qbr-pill.ok { background:rgba(34,197,94,.15); color:#5fe39a; }
.qbr-pill.warn { background:rgba(245,158,11,.15); color:#f4c772; }
.qbr-pill.bad { background:rgba(239,68,68,.15); color:#f59a9a; }
.qbr-pill.neutral { background:rgba(255,255,255,.07); color:#9aa7bd; }
.qbr-foot { margin-top:1.25rem; font-size:.76rem; }

.qbr-history { margin-top:.5rem; }
.qbr-hist-list { display:flex; flex-direction:column; gap:.4rem; }
.qbr-hist { display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:.7rem 1rem;
  text-decoration:none; color:var(--text,#e6edf6); transition:border-color var(--t-fast,.12s); }
.qbr-hist:hover { border-color:var(--cyan); }
.qbr-hist-title { font-size:.9rem; }
.qbr-hist-meta { font-size:.78rem; color:#8a98ae; display:flex; align-items:center; gap:.4rem; }

@media (max-width: 960px) {
  .qbr-kpis { grid-template-columns:repeat(3,1fr); }
  .qbr-tables { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   21 · R5b — LIVE AUTO-DOCUMENT CHOREOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */
.ad-hero { text-align:center; max-width:640px; margin:1.5rem auto; padding:2rem 1.5rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.16), transparent 60%),
    var(--bg-card);
  border:1px solid var(--border); border-radius:18px; animation: reveal var(--t-base) var(--ease-out) both; }
.ad-hero-mark { font-size:2.4rem; color:var(--cyan); text-shadow:0 0 22px rgba(0,212,255,.45); }
.ad-hero-title { font-family:var(--font-display); font-size:1.8rem; margin:.4rem 0 .5rem; color:var(--text,#eef3fb); }
.ad-hero-sub { color:#9aa7bd; line-height:1.6; margin:0 auto 1.2rem; max-width:34rem; font-size:.92rem; }
.ad-sources { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-bottom:1.4rem; }
.ad-chip { font-size:.74rem; color:#9fb4d6; background:rgba(0,112,243,.10); border:1px solid rgba(0,112,243,.25);
  padding:.25rem .65rem; border-radius:999px; }
.ad-go { font-size:1rem; padding:.7rem 1.4rem; }

.ad-progress { max-width:640px; margin:1.5rem auto; }
.ad-bar { height:5px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.ad-bar-fill { height:100%; width:0; background:linear-gradient(90deg, var(--blue,#0070f3), var(--purple,#7c3aed), var(--cyan,#00d4ff));
  transition: width .5s var(--ease-out); }
.ad-status { text-align:center; color:var(--cyan); font-family:var(--font-mono); font-size:.8rem; margin:.8rem 0 1rem; letter-spacing:.04em; }
.ad-stages { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.ad-stage { display:flex; align-items:center; gap:.8rem; padding:.65rem .9rem; border-radius:10px;
  background:rgba(255,255,255,.02); border:1px solid var(--border); opacity:.4; transition:opacity .35s, border-color .35s, background .35s; }
.ad-stage.active { opacity:1; border-color:rgba(0,212,255,.45); background:rgba(0,212,255,.06); }
.ad-stage.done { opacity:1; border-color:rgba(34,197,94,.35); }
.ad-stage-glyph { width:26px; height:26px; display:grid; place-items:center; border-radius:7px; flex:0 0 auto;
  background:rgba(255,255,255,.05); color:#9fb4d6; font-size:.95rem; }
.ad-stage.active .ad-stage-glyph { color:var(--cyan); animation: adpulse 1s ease-in-out infinite; }
.ad-stage.done .ad-stage-glyph { color:#5fe39a; }
.ad-stage.done .ad-stage-glyph::after { content:'✓'; position:absolute; }
.ad-stage-label { flex:1; font-size:.9rem; color:#cdd6e4; }
.ad-stage-count { font-family:var(--font-mono); font-size:.95rem; color:var(--text,#eef3fb); min-width:2rem; text-align:right; font-variant-numeric:tabular-nums; }
@keyframes adpulse { 0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.12); opacity:.7;} }

.ad-result { max-width:680px; margin:1.5rem auto; text-align:center; animation: reveal var(--t-base) var(--ease-out) both; }
.ad-done-mark { width:54px; height:54px; margin:0 auto .6rem; display:grid; place-items:center; border-radius:50%;
  background:rgba(34,197,94,.15); color:#5fe39a; font-size:1.6rem; border:1px solid rgba(34,197,94,.4); }
.ad-headline { font-family:var(--font-display); font-size:1.9rem; margin:0; color:var(--text,#eef3fb); }
.ad-subhead { color:#9aa7bd; margin:.4rem 0 1.4rem; font-size:.95rem; }
.ad-kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:.55rem; margin:0 0 1.6rem; }
.ad-kpi { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px; padding:.8rem .4rem; }
.ad-kpi .k-val { font-family:var(--font-display); font-size:1.45rem; color:var(--text,#eef3fb); }
.ad-kpi .k-lbl { font-size:.66rem; color:#8a98ae; margin-top:.2rem; text-transform:uppercase; letter-spacing:.03em; }
.ad-h3 { font-family:var(--font-display); font-size:1.05rem; color:var(--blue-lite,#7fb2f5); margin:0 0 .6rem; text-align:left; }
.ad-articles { display:flex; flex-direction:column; gap:.4rem; text-align:left; margin-bottom:1.5rem; }
.ad-article { display:flex; align-items:center; gap:.7rem; background:var(--bg-card); border:1px solid var(--border);
  border-radius:10px; padding:.7rem 1rem; text-decoration:none; color:var(--text,#e6edf6); transition:border-color var(--t-fast,.12s); }
.ad-article:hover { border-color:var(--cyan); }
.ad-article-ico { color:var(--purple,#a78bfa); }
.ad-article-go { margin-left:auto; font-size:.78rem; color:#8a98ae; }
.ad-actions { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
@media (max-width:960px){ .ad-kpis { grid-template-columns:repeat(3,1fr); } }

/* ═══════════════════════════════════════════════════════════════════════════
   22 · GENERIC RESOURCE LIST (inventory pages)
   ═══════════════════════════════════════════════════════════════════════════ */
.res-meta { color:#8a98ae; font-size:.8rem; margin:0 0 .7rem; font-family:var(--font-mono); }
.res-tbl-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:var(--bg-card); }
.res-tbl { width:100%; border-collapse:collapse; font-size:.86rem; }
.res-tbl th { text-align:left; padding:.7rem .9rem; color:#8a98ae; font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); white-space:nowrap; }
.res-tbl td { padding:.65rem .9rem; border-bottom:1px solid rgba(255,255,255,.04); color:#cdd6e4; vertical-align:top; }
.res-tbl tbody tr:last-child td { border-bottom:none; }
.res-tbl tbody tr:hover { background:rgba(255,255,255,.02); }
.res-tbl tr.clickable { cursor:pointer; }
.res-dim { color:#5a6678; }
.res-yes { color:#5fe39a; }

/* ═══════════════════════════════════════════════════════════════════════════
   23 · WINSTON CHAT
   ═══════════════════════════════════════════════════════════════════════════ */
.wn { display:flex; flex-direction:column; height:calc(100vh - 170px); min-height:420px; }
.wn-thread { flex:1; overflow-y:auto; padding:.5rem 0 1rem; display:flex; flex-direction:column; gap:1rem; }
.wn-empty { text-align:center; margin:auto; max-width:34rem; }
.wn-empty-mark { font-size:2rem; color:var(--cyan); text-shadow:0 0 20px rgba(0,212,255,.4); }
.wn-empty-title { font-family:var(--font-display); font-size:1.3rem; color:var(--text,#eef3fb); margin:.4rem 0 1rem; }
.wn-suggest { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.wn-chip { background:rgba(0,112,243,.08); border:1px solid rgba(0,112,243,.25); color:#9fb4d6;
  border-radius:999px; padding:.45rem .9rem; font-size:.82rem; cursor:pointer; transition:border-color var(--t-fast,.12s); }
.wn-chip:hover { border-color:var(--cyan); color:#cfe2ff; }
.wn-msg { display:flex; gap:.8rem; align-items:flex-start; }
.wn-avatar { width:30px; height:30px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center;
  font-size:.72rem; font-weight:600; }
.wn-user .wn-avatar { background:rgba(255,255,255,.06); color:#9aa7bd; }
.wn-asst .wn-avatar { background:rgba(124,58,237,.18); color:#c4b5fd; }
.wn-body { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:.7rem 1rem;
  font-size:.92rem; line-height:1.6; color:#dbe3ef; max-width:46rem; overflow-wrap:anywhere; }
.wn-user .wn-body { background:rgba(0,112,243,.07); border-color:rgba(0,112,243,.18); }
.wn-typing { color:#8a98ae; font-style:italic; }
.wn-err { color:#f59a9a; }
.wn-tools { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.6rem; }
.wn-tool { font-family:var(--font-mono); font-size:.68rem; background:rgba(34,197,94,.12); color:#7fe0a8;
  border:1px solid rgba(34,197,94,.25); border-radius:6px; padding:.1rem .45rem; }
.wn-tool.err { background:rgba(239,68,68,.12); color:#f3a3a3; border-color:rgba(239,68,68,.3); }
.wn-meta { font-family:var(--font-mono); font-size:.68rem; color:#6b7891; margin-top:.5rem; }
.wn-bar { display:flex; flex-wrap:nowrap; gap:.6rem; align-items:flex-end; padding-top:.8rem; border-top:1px solid var(--border); }
/* min-width:0 + width:100% are REQUIRED so the textarea grows to fill the bar
   instead of collapsing to a vertical sliver — flex items default to
   min-width:auto, which a <textarea>'s intrinsic min-content size breaks. */
.wn-input { flex:1 1 auto; min-width:0; width:100%; box-sizing:border-box; resize:none; background:#0a1422; border:1px solid var(--border); color:var(--text,#e6edf6);
  border-radius:12px; padding:.7rem .9rem; font-size:.92rem; font-family:inherit; line-height:1.5; max-height:160px; }
.wn-input:focus { outline:none; border-color:var(--cyan); }
/* The effort/model tier is a SMALL fixed-width selector, never the wide field. */
.wn-tier { flex:0 0 auto; width:auto; max-width:9.5rem; background:#0a1422; border:1px solid var(--border); color:#9aa7bd; border-radius:10px; padding:.6rem .5rem; font-size:.82rem; }
.wn-bar > #wn-send { flex:0 0 auto; }

/* ── R6b audit chain viewer ────────────────────────────────────────────── */
.aud-verify { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border-radius:12px;
  border:1px solid var(--border); background:var(--bg-card); margin:0 0 1.3rem; }
.aud-verify-mark { width:42px; height:42px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:1.3rem; }
.aud-ok { border-color:rgba(34,197,94,.4); } .aud-ok .aud-verify-mark { background:rgba(34,197,94,.15); color:#5fe39a; }
.aud-bad { border-color:rgba(239,68,68,.5); } .aud-bad .aud-verify-mark { background:rgba(239,68,68,.15); color:#f59a9a; }
.aud-neutral .aud-verify-mark { background:rgba(255,255,255,.05); color:#9aa7bd; }
.aud-verify-title { font-family:var(--font-display); font-size:1.1rem; color:var(--text,#eef3fb); }
.aud-verify-sub { font-size:.82rem; color:#8a98ae; margin-top:.15rem; }
.aud-seq { font-family:var(--font-mono); color:#6b7891; }
.aud-kind { font-size:.78rem; color:#9fb4d6; }
.aud-hash { font-size:.74rem; color:#7c8aa3; }

/* ── R7 portal admin ───────────────────────────────────────────────────── */
.ptl-form { display:flex; align-items:flex-end; gap:.9rem; flex-wrap:wrap; }
.qbr-field input { background:#0a1422; border:1px solid var(--border); color:var(--text,#e6edf6);
  border-radius:10px; padding:.55rem .8rem; font-size:.9rem; min-width:190px; font-family:inherit; }
.qbr-field input:focus { outline:none; border-color:var(--cyan); }
.ptl-opt { color:#5a6678; text-transform:none; letter-spacing:0; }

/* ── B2 stack mapping ──────────────────────────────────────────────────── */
.qbr-field-sel { background:#0a1422; border:1px solid var(--border); color:var(--text,#e6edf6);
  border-radius:8px; padding:.4rem .6rem; font-size:.85rem; min-width:170px; }
.qbr-field-sel:focus { outline:none; border-color:var(--cyan); }
.smap-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.1rem; }
.smap-cat { background:#0a1422; border:1px solid var(--border); color:var(--text,#e6edf6);
  border-radius:10px; padding:.5rem .8rem; font-size:.9rem; min-width:200px; font-family:inherit; }
.smap-cat:focus { outline:none; border-color:var(--cyan); }

/* ═══════════════════════════════════════════════════════════════════════════
   24 · CLIENT PORTAL (public, magic-link — calm + trustworthy)
   ═══════════════════════════════════════════════════════════════════════════ */
.cp-body { margin:0; min-height:100vh; color:#e6edf6; font-family:var(--font-body,'Manrope',sans-serif);
  background: radial-gradient(ellipse at top, #0a1628 0%, var(--bg-primary,#030912) 60%); }
.cp-body.cp-app { display:block; }
body.cp-body:not(.cp-app) { display:flex; align-items:center; justify-content:center; padding:2rem; }
.cp-card { width:100%; max-width:420px; background:var(--bg-card,#0a1422); border:1px solid var(--border,rgba(255,255,255,.08));
  border-radius:18px; padding:2.2rem 2rem; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.4); }
.cp-mark { font-size:2.2rem; color:var(--cyan,#00d4ff); text-shadow:0 0 22px rgba(0,212,255,.45); }
.cp-mark.sm { font-size:1.2rem; }
.cp-title { font-family:var(--font-display,'Fraunces',serif); font-size:1.7rem; margin:.5rem 0 .3rem; }
.cp-sub { color:#9aa7bd; font-size:.92rem; line-height:1.55; margin:0 0 1.5rem; }
.cp-form { display:flex; flex-direction:column; gap:.6rem; text-align:left; }
.cp-label { font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:#8a98ae; }
.cp-input { background:#070f1b; border:1px solid var(--border,rgba(255,255,255,.1)); color:#e6edf6;
  border-radius:11px; padding:.8rem .9rem; font-size:1rem; font-family:inherit; }
.cp-input:focus { outline:none; border-color:var(--cyan,#00d4ff); }
.cp-btn { background:linear-gradient(90deg,var(--blue,#0070f3),var(--purple,#7c3aed)); color:#fff; border:none;
  border-radius:11px; padding:.8rem 1rem; font-size:.98rem; font-weight:600; cursor:pointer; margin-top:.4rem; font-family:inherit; }
.cp-btn:hover { filter:brightness(1.08); }
.cp-btn:disabled { opacity:.6; cursor:default; }
.cp-btn-go { display:block; text-decoration:none; text-align:center; margin-top:1rem; }
.cp-sent { margin-top:.4rem; }
.cp-ok { color:#5fe39a; font-weight:600; font-size:1.05rem; margin-bottom:.3rem; }
.cp-mini { color:#9aa7bd; font-size:.84rem; line-height:1.5; }
.cp-foot { color:#5a6678; font-size:.76rem; margin:1.6rem 0 0; }
.cp-alert { border-radius:10px; padding:.6rem .85rem; font-size:.86rem; margin:0 0 1rem; text-align:left; }
.cp-err { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); color:#f4b0b0; }

/* portal app (home + record) */
.cp-topbar { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.4rem;
  border-bottom:1px solid var(--border,rgba(255,255,255,.08)); position:sticky; top:0; backdrop-filter:blur(8px);
  background:rgba(3,9,18,.7); }
.cp-brand { display:flex; align-items:center; gap:.5rem; font-weight:600; }
.cp-back { color:#9fb4d6; text-decoration:none; font-size:.9rem; }
.cp-back:hover { color:var(--cyan,#00d4ff); }
.cp-topright { display:flex; align-items:center; gap:1rem; }
.cp-who { color:#9aa7bd; font-size:.85rem; }
.cp-link-btn { background:none; border:1px solid var(--border,rgba(255,255,255,.12)); color:#cdd6e4;
  border-radius:8px; padding:.4rem .8rem; font-size:.82rem; cursor:pointer; font-family:inherit; }
.cp-link-btn:hover { border-color:var(--cyan,#00d4ff); }
.cp-main { max-width:760px; margin:0 auto; padding:2rem 1.4rem 4rem; }
.cp-h1 { font-family:var(--font-display,'Fraunces',serif); font-size:1.8rem; margin:.2rem 0; }
.cp-lead { color:#9aa7bd; margin:.2rem 0 1.6rem; }
.cp-loading { color:#8a98ae; padding:1.5rem 0; }
.cp-records { display:flex; flex-direction:column; gap:.55rem; }
.cp-rec { display:flex; align-items:center; gap:.9rem; background:var(--bg-card,#0a1422); border:1px solid var(--border,rgba(255,255,255,.08));
  border-radius:12px; padding:.9rem 1.1rem; text-decoration:none; color:#e6edf6; transition:border-color .12s; }
.cp-rec:hover { border-color:var(--cyan,#00d4ff); }
.cp-rec-ico { color:var(--purple,#a78bfa); font-size:1.1rem; }
.cp-rec-body { display:flex; flex-direction:column; min-width:0; flex:1; }
.cp-rec-name { font-weight:600; }
.cp-rec-meta { color:#8a98ae; font-size:.8rem; margin-top:.1rem; }
.cp-rec-go { color:#5a6678; }
.cp-empty { text-align:center; color:#9aa7bd; padding:3rem 1rem; }
.cp-empty-ico { font-size:2rem; color:#3a4658; margin-bottom:.5rem; }
.cp-rec-head { margin-bottom:1.2rem; }
.cp-pill { display:inline-block; font-size:.72rem; background:rgba(0,112,243,.14); color:#7fb2f5;
  border:1px solid rgba(0,112,243,.3); border-radius:999px; padding:.15rem .6rem; }
.cp-table { width:100%; border-collapse:collapse; }
.cp-table td { padding:.65rem .2rem; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:top; font-size:.92rem; }
.cp-k { color:#9aa7bd; width:38%; }
.cp-v { color:#e6edf6; overflow-wrap:anywhere; }
.cp-dim { color:#5a6678; }
@media print {
  .no-print, .compass-sidebar, .compass-page-head .compass-btn { display:none !important; }
  body, .compass-app, .compass-main { background:#fff !important; color:#111 !important; display:block !important; }
  .qbr-report { background:#fff !important; border:none; color:#111; padding:0; }
  .qbr-client, .qbr-h3, .qbr-kpi .k-val { color:#0a1422 !important; }
  .qbr-kpi, .qbr-finding, .qbr-tbl td { border-color:#ccc !important; }
  .qbr-kpi .k-lbl, .qbr-tbl td, .qbr-finding { color:#222 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   N · CLIENT OVERVIEW COCKPIT  (Phase-1 5-second briefing)
   Additive — reuses .card / .stat-grid / tokens. Category tiles at top, then a
   main column + identity/notes side rail that collapses to one column on narrow.
   ═══════════════════════════════════════════════════════════════════════════ */
.cockpit-cats { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.cat-tile {
  display:flex; align-items:center; gap:.7rem; padding:.7rem .85rem;
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); text-decoration:none;
  transition: border-color var(--t-base) ease, transform var(--t-fast) var(--ease-out);
}
.cat-tile:hover { border-color: var(--border-focus); transform: translateY(-2px); color: var(--text); }
.cat-ico { font-size:1.35rem; line-height:1; color: var(--cyan); flex:0 0 auto; }
.cat-meta { display:flex; flex-direction:column; min-width:0; }
.cat-count { font-family: var(--font-display); font-size:1.25rem; font-weight:700; color:#fff; line-height:1.05; }
.cat-name { font-size:.74rem; color: var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cockpit-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0, 22rem); gap: var(--s-5); align-items:start; }
.cockpit-main { min-width:0; }
.cockpit-side { min-width:0; }
@media (max-width: 980px) { .cockpit-grid { grid-template-columns: 1fr; } }

/* Recently-updated list */
.recent-list, .contact-list { list-style:none; margin:0; padding:0; }
.recent-item {
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  padding:.55rem 0; border-bottom:1px solid var(--border);
}
.recent-item:last-child { border-bottom:none; }
.recent-name { color: var(--text-strong); font-weight:600; font-size:.9rem; text-decoration:none; }
.recent-name:hover { color: var(--blue-lite); text-decoration:underline; }
.recent-type {
  font-size:.66rem; font-family: var(--font-mono); padding:0 .4rem; border-radius: var(--r-xs);
  background: rgba(0,112,243,.10); color: var(--blue-lite);
}
.recent-when { margin-left:auto; font-size:.72rem; color: var(--text-dim); font-family: var(--font-mono); white-space:nowrap; }

/* Key people / contacts list */
.contact-item {
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  padding:.55rem 0; border-bottom:1px solid var(--border);
}
.contact-item:last-child { border-bottom:none; }
.contact-name { color: var(--text-strong); font-weight:600; font-size:.9rem; text-decoration:none; }
.contact-name:hover { color: var(--blue-lite); text-decoration:underline; }
.contact-role { font-size:.74rem; color: var(--text-muted); }
.contact-email { margin-left:auto; font-size:.78rem; color: var(--blue); text-decoration:none; white-space:nowrap; }
.contact-email:hover { text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD OVERHAUL (2026-06-22) — light theme · customizable widget grid ·
   compact KPI tiles · VIP + recent-activity widgets.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Light theme: a token override set. The whole app reads :root variables,
   so redefining them under [data-theme="light"] re-skins every page. Applied
   pre-paint by theme-init.js from the compass_theme cookie (no FOUC). ──────── */
:root[data-theme="light"] {
  --bg-primary:    #f4f7fb;
  --bg-secondary:  #eef2f8;
  --bg-card:       #ffffff;
  --bg-elevated:   #ffffff;
  --bg-inset:      #eef2f8;

  --glass-bg:       rgba(255, 255, 255, 0.82);
  --glass-bg-hover: rgba(255, 255, 255, 0.95);
  --glass-border:   rgba(0, 112, 243, 0.20);
  --glass-border-h: rgba(0, 112, 243, 0.40);

  --text-strong: #0a1628;
  --text:        #18243b;
  --text-muted:  #51607a;
  --text-dim:    #6a7388;
  --text-faint:  #8a93a8;

  --border:        rgba(10, 22, 40, 0.10);
  --border-strong: rgba(10, 22, 40, 0.16);
  --border-focus:  rgba(0, 112, 243, 0.45);

  --shadow-card: 0 4px 18px rgba(13,38,76,.10), 0 1px 0 rgba(255,255,255,.6) inset;
  --shadow-pop:  0 16px 48px rgba(13,38,76,.18);
}
:root[data-theme="light"] body {
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,112,243,.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(124,58,237,.05), transparent 55%);
}
/* A few components hardcode white text (designed for the dark canvas); restore
   contrast on light. The Winston hero keeps its dark brand gradient, so its
   white text stays correct and is intentionally not overridden. */
:root[data-theme="light"] .stat-num,
:root[data-theme="light"] .compass-card-num { color: var(--text-strong); }
/* .score-ring .val hardcodes white text (designed for the dark canvas) but
   its own ::before sits on var(--bg-card), which is white in light mode —
   white-on-white without this override (client_detail.html). */
:root[data-theme="light"] .score-ring .val { color: var(--text-strong); }
/* These form inputs hardcode a dark background (#0a1422/#070f1b) designed
   for the dark canvas, while their text uses var(--text) — which flips dark
   in light mode, giving dark-on-dark illegible fields without this override. */
:root[data-theme="light"] .qbr-field select,
:root[data-theme="light"] .qbr-field input,
:root[data-theme="light"] .qbr-field-sel,
:root[data-theme="light"] .wn-input,
:root[data-theme="light"] .wn-tier,
:root[data-theme="light"] .smap-cat,
:root[data-theme="light"] .cp-input {
  background: var(--bg-card);
  color: var(--text);
}

/* ── Theme toggle + small button ─────────────────────────────────────────── */
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius: var(--r-md);
  background: var(--glass-bg); border:1px solid var(--glass-border);
  color: var(--text); cursor:pointer; font-size:1.1rem; line-height:1;
  transition: border-color var(--t-base) ease, background var(--t-base) ease;
}
.icon-btn:hover { border-color: var(--border-focus); background: var(--glass-bg-hover); }
.btn-sm { padding:.42rem .7rem; font-size:.82rem; }

/* ── Customizable widget grid ────────────────────────────────────────────── */
.dash-grid {
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--s-5); align-items:start;
}
@media (max-width:1180px){ .dash-grid { grid-template-columns: 1fr; } }
.widget { position:relative; min-width:0; }
.widget-wide { grid-column: 1 / -1; }
/* Default layout (2026-08-19, David's request): "Your workspace" and "Ask
   Winston" stacked on the left below VIP Customers, with Recent activity
   filling the right side -- more efficient use of the space than the
   previous flat alternating pairs, since activity's list is naturally
   taller than a single compact card. Achieved with ONE rule (grid-row:
   span on activity) rather than hardcoding grid position on every widget:
   CSS grid's default (sparse, row-major) auto-placement, given the
   existing order vip -> activity -> workspace -> ask-winston (see
   defaultWidgetOrder in main.go, unchanged), naturally places activity
   beside vip spanning 3 rows, then backfills workspace/ask-winston into
   the now-only-available column-1 cells below vip -- no change needed to
   the drag-reorder system itself, which still only deals in one flat
   order per widget; a user who drags things around loses this specific
   spanning effect for their custom order, which is expected/fine (they've
   opted into a different layout). @media (max-width:1180px) already
   collapses to a single column, where this span has no visible effect. */
.dash-grid .widget[data-widget="activity"] { grid-row: span 3; }
.dash-grid .widget[data-widget="activity"] .widget-card { height: 100%; }
.widget-card { height:100%; }
.widget-grip {
  position:absolute; top:10px; right:10px; z-index:2; display:none;
  width:26px; height:26px; align-items:center; justify-content:center;
  border-radius: var(--r-sm); background: var(--glass-bg);
  border:1px solid var(--glass-border); color: var(--text-muted);
  cursor:grab; font-size:.9rem; line-height:1;
}
.dash-grid.editing .widget { outline:1px dashed var(--border-focus); outline-offset:4px; border-radius: var(--r-md); }
.dash-grid.editing .widget, .dash-grid.editing .widget * { cursor:grab; }
.dash-grid.editing .widget-grip { display:flex; }
.widget.dragging { opacity:.45; }
.widget.drop-before { box-shadow:-4px 0 0 0 var(--cyan); }
.widget.drop-after  { box-shadow: 4px 0 0 0 var(--cyan); }
/* Cross-row (vertical) drop targets, added 2026-08-19 alongside the
   pointer-based drag rewrite -- previously ALWAYS showed a left/right glow
   even when dragging a widget to a different row, misleading feedback for
   the exact direction David reported as "unreliable." */
.widget.drop-top    { box-shadow: 0 -4px 0 0 var(--cyan); }
.widget.drop-bottom { box-shadow: 0  4px 0 0 var(--cyan); }
/* Widget hide/show. A hidden widget vanishes in normal view; in edit mode it
   reappears dimmed so it can be restored in place via its toggle. */
.widget-hidden { display:none; }
.dash-grid.editing .widget-hidden { display:block; opacity:.4; }
.widget-hide-btn {
  position:absolute; top:8px; right:8px; z-index:3; display:none;
  width:22px; height:22px; line-height:20px; text-align:center; padding:0;
  border:1px solid var(--border); border-radius:6px; background:var(--surface);
  color:var(--text-muted); cursor:pointer; font-size:13px;
}
.dash-grid.editing .widget-hide-btn { display:block; }
.widget-hide-btn:hover { color:var(--text); border-color:var(--border-focus); }
.dash-edit-hint {
  margin:0 0 var(--s-4); padding:.6rem .9rem; border-radius: var(--r-md);
  background: var(--glass-bg); border:1px solid var(--glass-border-h);
  color: var(--text-muted); font-size:.84rem;
}
.dash-edit-hint[hidden] { display:none; }

/* ── KPI tiles 20% more compact (scoped to the dashboard stats widget so the
   shared .stat/.stat-grid used on other pages is untouched) ───────────────── */
.stat-grid-compact { margin-bottom:0; grid-template-columns: repeat(auto-fit, minmax(168px,1fr)); }
.stat-grid-compact .stat { padding: calc(var(--s-5) * .8); }
.stat-grid-compact .stat-icon { font-size:1.12rem; margin-bottom:.4rem; }
.stat-grid-compact .stat-num  { font-size:1.6rem; }
.stat-grid-compact .stat-label{ font-size:.74rem; }
.stat-grid-compact .stat-sub  { font-size:.66rem; }

/* ── Recent-activity widget list ─────────────────────────────────────────── */
.activity-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.activity-row {
  display:flex; align-items:baseline; justify-content:space-between; gap: var(--s-3);
  padding:.5rem .25rem; border-bottom:1px solid var(--border); color: var(--text);
}
.activity-list li:last-child .activity-row { border-bottom:0; }
.activity-row:hover { color: var(--cyan); }
.activity-label { font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.activity-time { font-size:.72rem; color: var(--text-dim); white-space:nowrap; flex-shrink:0; }

/* ── VIP toggle (client hero) ────────────────────────────────────────────── */
.vip-toggle {
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  padding:.3rem .7rem; border-radius: var(--r-pill); font-size:.8rem; font-weight:600;
  background: var(--glass-bg); border:1px solid var(--border-strong); color: var(--text-muted);
  transition: border-color var(--t-base) ease, color var(--t-base) ease, background var(--t-base) ease;
}
.vip-toggle:hover { border-color: var(--border-focus); color: var(--text); }
.vip-toggle .vip-star { color: var(--text-faint); transition: color var(--t-base) ease; }
.vip-toggle.is-vip { color: #1b1205; border-color: var(--yellow); background: linear-gradient(135deg, var(--yellow), var(--orange)); }
.vip-toggle.is-vip .vip-star { color: #1b1205; }
.vip-toggle:disabled { opacity:.6; cursor:default; }

/* Readable native dropdown option popups — dark text on white system bg. */
select option, select optgroup { background:#ffffff !important; color:#111111 !important; }

/* ── Company footer (ported verbatim from Argos Service's app.css
   .ia-footer block, 2026-08-19 round 12, David's request to reuse
   Service's company-info footer on the Compass dashboard). Kept
   value-for-value rather than restyled, so the two apps match exactly;
   every custom property it references (--bg-secondary, --glass-border,
   --font-heading, --font-body, --r-sm) was verified to exist in
   Compass's own token set before porting. ─────────────────────────── */
.ia-footer {
  margin-top: auto;
  padding: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 28px) clamp(20px, 3vw, 28px);
  background: var(--bg-secondary);
  border-top: 1px solid var(--glass-border);
  color: #71717A;
  font-size: 0.85rem;
}

.ia-footer-inner {
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
}

@media (max-width: 1024px) {
  .ia-footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .ia-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 539px) {
  .ia-footer-inner { grid-template-columns: 1fr; }
}

.ia-footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 10px;
}
.ia-footer-mark img {
  flex-shrink: 0;
  border-radius: 5px;
  opacity: 0.75;
}
.ia-footer-mark small {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: #52525B;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.ia-footer-mark strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: #D4D4D8;
  letter-spacing: -0.01em;
}

.ia-footer-tagline {
  font-size: 0.8rem;
  line-height: 1.6;
  color: #52525B;
  max-width: 44ch;
  margin: 0;
}

.ia-footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #A1A1AA;
  margin: 0 0 10px 0;
}
.ia-footer-col a {
  display: block;
  font-size: 0.8rem;
  color: #71717A;
  padding: 3px 0;
  text-decoration: none;
  transition: color 0.12s;
}
.ia-footer-col a:hover { color: #D4D4D8; }

.ia-footer-bottom {
  max-width: 1280px;
  margin: clamp(18px, 3vw, 28px) auto 0;
  padding-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.76rem;
  color: #3F3F46;
}

.ia-footer-social {
  display: inline-flex;
  gap: 6px;
}
.ia-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  color: #52525B;
  transition: all 0.15s;
}
.ia-footer-social a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #A1A1AA;
  border-color: rgba(255, 255, 255, 0.1);
}

@media (pointer: coarse) {
  .ia-footer-social a { width: 40px; height: 40px; }
}

@media print { .ia-footer { display: none; } }

/* Compass-specific placement tweak: Service renders .ia-footer from a flex
   column shell where `margin-top:auto` pushes it to the bottom. Compass's
   .compass-main is not a flex column, so that auto resolves to 0 — give it
   explicit breathing room under the dashboard grid instead. */
.compass-main .ia-footer { margin-top: var(--s-8); }

/* ═══════════════════════════════════════════════════════════════════════════
   19b · RESPONSIVE — mobile navigation repair (2026-08-20)

   Compass had NO usable navigation on a phone. Three rules combined to do it:
     - @media (max-width:960px) put .compass-sidebar off-canvas at left:-280px
     - @media (max-width:900px) set .compass-topbar { display:none }
     - the drawer's only opener is [data-sidebar-toggle], which shell.js listens
       for but which NO template has ever rendered (grep: 1 hit, in shell.js
       itself; 0 hits across all 62 templates)
   So the rail slid off-screen with nothing able to bring it back, and the
   topbar carrying the waffle and theme toggle was hidden. Page content only.

   The display:none was added in this rollout on the reasoning that a bar fixed
   at left:68px would float unanchored once the rail slid away. That reasoning
   was right about the bar and wrong about the conclusion — the fix is to stop
   the rail sliding away, not to remove the last affordance.

   Same pattern already shipped on Concierge and Counsel: side rail on tablets,
   bottom tab bar on phones, topbar always reachable.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet: undo the off-canvas drawer entirely ─────────────────────────── */
@media (max-width: 960px) {
  .compass-app, .compass-app.has-rail { grid-template-columns: 68px 1fr; }
  .compass-sidebar {
    position: sticky; top: 0; left: auto; width: 68px;
    transition: none;
  }
  /* The 900px block restyles rail buttons into full-width drawer rows with
     inline labels. That only made sense for a 260px drawer; back to icons. */
  .icon-rail { align-items: center; padding: var(--s-4) 0; }
  .rail-btn { width: 46px; height: 46px; justify-content: center; gap: 0; padding: 0; }
  .rail-tip {
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    white-space: nowrap; opacity: 0; visibility: hidden;
  }
  .rail-btn:hover .rail-tip { opacity: 1; visibility: visible; }
  .compass-topbar { display: flex; left: 68px; }
}

/* ── Phone: rail becomes a bottom tab bar ────────────────────────────────── */
@media (max-width: 640px) {
  /* .has-rail is included deliberately. It is unused today (0 of 63 templates)
     but it is a real rule at 0,2,0 specificity, so a bare .compass-app
     override would lose to it and leave .main — by then the only in-flow grid
     item — sitting inside a 68px first track. */
  .compass-app, .compass-app.has-rail { grid-template-columns: 1fr; }
  .compass-sidebar {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    width: auto; height: 58px; z-index: 70;
    flex-direction: row; padding: 0 8px;
    border-right: none; border-top: 1px solid var(--border);
    /* Opaque: as a fixed bar it sits over scrolling content, unlike the
       gradient column it is on desktop. */
    background: var(--bg-primary);
  }
  /* NB: .icon-rail and .compass-sidebar are the SAME element
     (<aside class="compass-sidebar icon-rail">), not parent and child. Setting
     height/width here overrides the .compass-sidebar rule above via source
     order, which is how a first attempt at this block silently produced a
     full-viewport 390x844 bar instead of a 58px one. Layout properties belong
     on .compass-sidebar only; this rule is direction/alignment. */
  .icon-rail {
    flex-direction: row; align-items: center; justify-content: space-around;
    gap: 0; padding: 0;
  }
  /* The rail buttons are not direct children of .icon-rail — they sit inside a
     nested <nav class="compass-nav">, which is itself flex-direction:column.
     Rotating only the outer container would leave them stacked vertically
     inside a 58px bar. */
  .compass-nav {
    flex-direction: row; align-items: center; justify-content: space-around;
    flex: 1; padding: 0; gap: 0; height: 100%;
  }
  .rail-mark, .rail-spacer, .compass-sidebar-foot { display: none; }
  .rail-tip { display: none; }              /* no hover on touch */
  .rail-btn.on { box-shadow: inset 0 2px 0 var(--blue); }

  /* Topbar spans the full width now that no rail sits beside it. */
  .compass-topbar { display: flex; left: 0; padding: 0 14px; }

  /* Base padding-top clears the fixed 64px topbar; add bottom clearance for
     the tab bar. */
  .compass-main { padding: var(--s-4); padding-top: calc(var(--s-4) + 64px); padding-bottom: 74px; }

  /* Flyouts become bottom sheets above the tab bar. */
  .flyouts { left: 0; right: 0; top: auto; bottom: 58px; width: 100%; height: auto; }
  .flyout {
    position: fixed; left: 0; right: 0; bottom: 58px; top: auto;
    width: auto; height: auto; max-height: 56vh;
    border-right: none; border-top: 1px solid var(--border);
    border-radius: var(--r-md) var(--r-md) 0 0;
  }
  .flyout.waffle-panel {
    top: 70px; bottom: auto; left: 10px; right: 10px; width: auto;
    max-height: calc(100vh - 140px); border-radius: var(--r-md);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE TABLE CONTAINMENT (2026-08-20)

   Found while fixing the same bug in Argos Service, where a 10-column table
   with nothing bounding its width set the whole page width and forced
   left/right scrolling on an iPhone (390px viewport, 848px document).

   This app has the same exposure: many tables and no rule that makes their
   container a horizontal scroll box. The selector is deliberately
   container-agnostic — these tables sit in a dozen differently-named wrappers
   across the templates, so matching on any block element that DIRECTLY holds a
   table is more reliable than trying to enumerate class names.

   The table keeps its normal layout and simply scrolls inside its own
   container, so the page never grows past the viewport.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :is(div, section, main, article, form, td):has(> table) { overflow-x: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE LAYOUT — page-local grids and toolbars (2026-08-21)

   David, on a real phone: "you still have to scroll to the left to see the
   right side of the top of the screen ... Compass is a bit worse than Service."

   Root cause of the SYMPTOM (why the waffle ends up off-screen rather than the
   page simply being clipped): when any element makes the document wider than
   the viewport, a mobile browser widens the initial containing block to the
   content width. .compass-topbar is position:fixed with left:0/right:0, so it
   resolves against that WIDENED block and stretches with the page — measured
   850px wide in a 390px viewport. Its right-aligned controls (theme toggle,
   waffle) are then painted at x≈790-840, off-screen, and only a horizontal
   swipe reaches them. That is why the 2026-08-21 01:34 pass concluded "the
   topbar measures fine in isolation" and still shipped a broken phone view:
   in isolation nothing overflows, so the ICB is 390 and the bar measures 390.
   The topbar is never the cause — it is the visible symptom of any overflow
   anywhere on the page.

   Root cause of the OVERFLOW: 41 of the 70 page templates carry their own
   inline <style> block with page-local layout, and none of them had a single
   media query. Those blocks are parsed AFTER app.css (the page's <style> comes
   after the <link> from _head.html), so an equal-specificity mobile rule here
   loses the cascade to them. Every selector below is therefore prefixed with
   'body' purely to outrank the page-local rule it is correcting — not for
   scoping.

   Enumerated, not pattern-matched: CSS cannot select "an element whose display
   is flex", so the two lists are generated from the real declarations found in
   those style blocks (see scratchpad/h/gen.js).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Toolbars and header rows wrap instead of running off the edge ──────
   Tablet as well as phone: at 820px these rows were still overflowing, they
   just needed more content to do it. Wrapping is the correct behaviour at
   every width — a row that fits is unaffected by being allowed to wrap. */
@media (max-width: 1024px) {
body .ci-overlay,
body .ci-panel-head,
body .ci-panel-title,
body .ci-shield,
body .ci-shield-sm,
body .ci-verify-btn,
body .de-actions,
body .de-banner,
body .dn-actions,
body .dn-banner,
body .dn-check,
body .dv-banner,
body .ins-cat-head,
body .ins-item,
body .ins-summary,
body .ir-check,
body .kb-clients a,
body .kb-edit-toolbar,
body .kb-search,
body .kb-toolbar,
body .ks-badge,
body .ks-body,
body .ks-btn,
body .ks-top,
body .marketing-demo .demo-row,
body .plan-item,
body .plan-rank,
body .rn-actions,
body .rs-head,
body .sa-filters label,
body .sec-badge,
body .submit-row,
body .vd-head,
body .vd-reveal-cta,
body .vf-actions,
body .vf-check,
body .vl-toolbar .actions,
body .vl-toolbar .field,
body .vl-toolbar .toggle,
body .vrf-card .actions,
body .vrr-actions,
body .wl-new form,
body .ws-form .controls,
body .ws-form .row,
body .ws-head,
body .ws-hist,
body .ws-hist-row,
body .ws-msg .role-tag,
body details.tree-section > summary.tree-group {
    flex-wrap: wrap;
  }
}

/* ── 2. Fixed-count grids collapse to one column ───────────────────────────
   Phone only. repeat(4,1fr) inside a 358px measure gives four 102px columns
   whose sum (409px + gaps) exceeds the container, and a grid does not shrink
   below its fixed track count. Deliberately NOT applied at tablet widths,
   where four columns still fit and collapsing them would waste the screen. */
@media (max-width: 640px) {
body .ci-stats,
body .dn-cols,
body .identity-grid,
body .ir-grid,
body .kb-edit-row,
body .kb-layout,
body .marketing-numbers,
body .marketing-proof,
body .marketing-waitlist form .row,
body .profile-grid,
body .rd-new form,
body .rn-row,
body .rs-factor-grid,
body .rs-inline-form,
body .rs-meta,
body .rs-money,
body .sa-create-form,
body .vd-meta,
body .vf-cols,
body .ws-cols2,
body .ws-grid,
body .ws-kv {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE + TABLET LAYOUT — shared shell (2026-08-21), companion to the block
   above.

   These are the defects that live in THIS stylesheet rather than in a page's
   own <style>, plus the readability work David asked for alongside the fix
   ("make it visually more appealing and easier to work with on a mobile
   phone").
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet and phone ─────────────────────────────────────────────────────
   Everything here is "let the box honour its container", which is correct at
   any width below desktop. Measured failures at 768/820 before this block:
   .client-hero 1068px wide, the dashboard user chip pushing the page head to
   918px, and the rack editor's fixed tracks reaching 831px. */
@media (max-width: 1024px) {

  /* The page head is flex + space-between with NO wrap, so a title and an
     action cluster shared one line at whatever width they wanted. */
  .compass-page-head { flex-wrap: wrap; }
  .compass-page-head > * { min-width: 0; max-width: 100%; }
  /* .flex/.center/.gap-3 are utility classes (app.css ~1189) used for the
     action cluster on most page heads; they carry no wrap of their own. */
  .compass-page-head .flex { flex-wrap: wrap; }

  /* Breadcrumbs are a nowrap flex row; a long record title overflowed it. */
  .breadcrumb { flex-wrap: wrap; }

  /* Same min-width:auto floor already fixed on .compass-main itself (commit
     e78daf1), one level further in: these shells collapse to a single 1fr
     track at their own breakpoints, but a long heading or a hero block inside
     still set the track width. */
  .record-shell > *, .client-shell > *, .dash-grid > *,
  .cockpit-grid > *, .field-grid > * { min-width: 0; }

  /* Nothing may be wider than the screen. Buttons and chips carry
     white-space:nowrap, so a long label (a client name, a hostname) makes an
     unshrinkable flex item. */
  .compass-btn, .btn, .user-chip, .compass-user-chip, .badge,
  .cmdk-trigger { max-width: 100%; min-width: 0; }
}

/* ── Phone only ───────────────────────────────────────────────────────────
   <=640px is Compass's existing phone tier — the width at which the rail is
   already a bottom tab bar. */
@media (max-width: 640px) {

  /* Stacking beats wrapping once the screen is this narrow: full-width title,
     then full-width controls that are easy to hit. */
  .compass-page-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
  }

  /* The ⌘K trigger becomes a real search row. Its min-width:240px is a hard
     floor that cannot shrink; combined with the user chip beside it that alone
     exceeded a 390px screen. Full width reads as a search field on a phone and
     gives a comfortable tap target. The ⌘K hint is meaningless without a
     keyboard, so it goes. */
  .cmdk-trigger { width: 100%; padding: .6rem .8rem; }
  .cmdk-trigger .kbd { display: none; }

  /* Allowing a button label to wrap is preferred over an ellipsis here: these
     are navigation targets and a truncated one is not identifiable. */
  .compass-btn, .btn, .user-chip, .compass-user-chip, .badge {
    white-space: normal;
  }

  /* Long unbroken strings wrap. Hostnames, email addresses, hashes and vault
     values have no break opportunity, so they push the page sideways.
     'anywhere' (not break-word) so the break is also considered when
     calculating min-content — which is what the grid and flex floors above
     are measured against. <pre> is deliberately excluded: it keeps its own
     scroll container rather than having its formatting destroyed. */
  .compass-main :is(h1, h2, h3, h4, p, code, dd, dt, li,
                    .page-title, .compass-page-title, .subtitle,
                    .k, .v, .cat-name, .ts) {
    overflow-wrap: anywhere;
  }

  /* 12 grids in these templates are declared in an inline style= attribute
     with a fixed px track (e.g. "minmax(0,1fr) 360px"). An inline declaration
     outranks any stylesheet rule, so !important is the only lever — used here
     and nowhere else in this file. auto-fit/auto-fill grids are excluded
     because they already respond correctly. */
  .compass-main [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: 1fr !important;
  }

  /* Six KPI tiles across, dropping to three at 960px — three still does not
     fit a phone. Two reads well and keeps the numbers legible. */
  .qbr-kpis { grid-template-columns: repeat(2, 1fr); }
  .qbr-kpi { min-width: 0; }

  /* 1.7rem display type on a 358px measure leaves ~14 characters a line for a
     record title. */
  .compass-page-head .page-title, .compass-page-title,
  .record-head .titlebox h1 { font-size: 1.35rem; line-height: 1.2; }
}