/* Commercial Intelligence Hub — Hello Kindred / Kin OS theme.
   Self-contained: no imports, no remote fonts, no CDN. CIH holds its own copy
   of the house tokens rather than importing, because CIH and Command Centre
   are separate applications and neither should be able to restyle the other
   by accident.

   Two rules govern everything below and are worth stating once:

   1. FRESH LIME (#cbff02) IS A FILL, NEVER INK. Lime text on paper is ~1.2:1.
      `--accent` is only ever a background; `--accent-ink` is what you colour
      text with. Anything sitting on lime takes `--on-accent` (#09262d).
   2. THE CHROME IS BASALT IN BOTH THEMES. The rail and topbar do not invert
      with the theme toggle, so they carry their own `--rail-*` token set that
      the dark-mode blocks deliberately leave alone. Only the content column
      flips. */

:root{
  /* HelloKindred's named type systems only. Gilroy/Larken are preferred when
     installed; the electronic pair Aptos/Georgia is the approved fallback.
     No font files or network font requests are bundled with CIH. */
  --font-sans:Gilroy,"Aptos","Segoe UI Variable Text","Segoe UI Variable Display",
    "Segoe UI",system-ui,sans-serif;
  --font-accent:Larken,Georgia,serif;
  /* Paper ramp. --bg is Paper 2, the page ground. */
  --bg:#eaeeef; --surface:#fff; --surface-2:#f7f8fa; --surface-3:#e5e8ec;

  /* Ink. #9ea8ab is the measured "Basalt 40% subdued" but only clears contrast
     ON DARK, so it lives in --ink-subdued and is used by the rail and topbar.
     On paper the same role is carried by --text-faint at an accessible value:
     #5f6d70 is 5.4:1 on Paper 0 and 4.8:1 on the Paper 2 page ground, where the
     eyebrows actually sit. #9ea8ab there would be 2.3:1 and fail outright. */
  --text:#09262d; --text-muted:#2d4a4f; --text-faint:#5c6f73;
  --heading-ink:#09262d;
  --ink-subdued:#9ea8ab;
  --border:#e5e8ec; --border-strong:rgba(9,38,45,.18);
  /* The measured Kin OS line (rgba(9,38,45,.18)) is 1.44:1 on white, which is
     fine for a decorative frame and illegal for the edge of a UI control
     (WCAG 1.4.11 wants 3:1). --border-strong keeps the measured value for
     frames; --control-line carries the accessible one and is what every
     input, quiet button, suggestion and state-bearing outline uses.
     .55 over #fff = #78888c = 3.70:1, and 3.26:1 on the Paper 2 page ground. */
  --control-line:rgba(9,38,45,.55);

  /* Always-Basalt chrome. Not overridden by either dark block. */
  --sidebar-bg:#09262d; --topbar-bg:#09262d;
  --rail-ink:rgba(255,255,255,.82); --rail-ink-strong:#fff;
  --rail-ink-muted:#9ea8ab;
  --rail-hover:rgba(255,255,255,.06); --rail-active:rgba(255,255,255,.08);
  --rail-line:rgba(255,255,255,.10);

  /* Accent. Fill vs ink, kept apart on purpose — see rule 1 above. */
  --accent:#cbff02; --accent-hover:#b8e800;
  --accent-ink:#09262d; --on-accent:#09262d;
  --accent-soft:rgba(9,38,45,.06); --accent-ring:rgba(9,38,45,.14);

  /* Focus. Two-tone: a Basalt line does the contrast work, the lime halo does
     the brand. Inside the Basalt chrome the two swap (see .sidebar/.topbar). */
  --focus-ring:#09262d; --focus-halo:rgba(203,255,2,.55);

  /* Status triplets: ink / background / line. */
  --success:#17603c; --success-soft:#e6f4ec; --success-line:#b6ddc7;
  --warning:#6a4a12; --warning-soft:#fbf2e0; --warning-line:#e8d7ad;
  --danger:#8f2d2d;  --danger-soft:#fbecec;  --danger-line:#eecccc;
  --info:#1c4f7c;    --info-soft:#e8f1f9;    --info-line:#b9d4ea;
  --draft:#4c5766;   --draft-soft:#eef1f4;   --draft-line:#d3dae2;

  --shadow-sm:0 1px 2px rgba(24,32,46,.05);
  --shadow:0 1px 2px rgba(24,32,46,.04),0 4px 16px rgba(24,32,46,.06);
  --shadow-lift:0 2px 4px rgba(24,32,46,.05),0 10px 28px rgba(24,32,46,.10);
  --shadow-lg:0 4px 10px rgba(24,32,46,.08),0 24px 60px rgba(24,32,46,.16);

  /* Names kept from the previous theme (~70 usages) and repointed to the Kin OS
     values, rather than renamed to --radius-* for no visual gain. */
  --r-sm:4px; --r:7px; --r-lg:12px; --r-xl:18px; --r-pill:999px;

  --sidebar-w:228px; --topbar-h:46px;
  /* RESERVED. --rail-secondary-width, --text-hero and --ease-doors are carried
     from the Kin OS token set for parity and are deliberately unused here: CIH
     has no secondary rail, no hero page head and no door transition. Nothing
     reads those three — editing one will not change anything on screen.
     --rail-width-collapsed is NOT reserved: the collapsed-rail block reads it
     and it is the sole definition of the collapsed rail's width. */
  --rail-secondary-width:212px;
  --rail-width-collapsed:64px; /* read by the collapsed-rail block */
  --content-max:1440px;

  /* .72rem is the measured Kin OS xs, but it resolves to 11.52px and this token
     carries every chip, eyebrow, field label and table header in the product —
     below the ~12px legibility floor. Raised the half-pixel to .75rem (12px);
     every other value is the measured one. */
  --text-xs:.75rem; --text-sm:.8125rem; --text-base:.9375rem; --text-md:1.0625rem;
  --text-lg:1.35rem; --text-xl:1.8rem;
  --text-hero:clamp(2.1rem,1.3rem + 2.2vw,3.1rem);
  --leading-tight:1.22; --leading-normal:1.55;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem;

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-rail:cubic-bezier(.32,.72,0,1);
  --ease-doors:cubic-bezier(.72,0,.16,1);
  --fast:140ms; --normal:200ms;
  --mono:Consolas,"Cascadia Mono","SF Mono",Menlo,monospace;
}

/* Dark mode. The two blocks below are byte-identical bodies behind different
   wrappers — the media query covers "system dark, no explicit choice", the
   attribute selector covers the toggle. EDIT THEM IN LOCKSTEP.
   Note what is absent: --sidebar-bg, --topbar-bg, --rail-*, --accent and
   --on-accent. The chrome is already Basalt and a lime button already carries
   Basalt ink, so re-inverting them here would undo the design. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#04161b; --surface:#0c2b33; --surface-2:#123640; --surface-3:#18414c;
    --text:#e7edee; --text-muted:#9ea8ab; --text-faint:#929ea1;
    --heading-ink:#eef3f4;
    --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.22);
    --control-line:rgba(255,255,255,.42);
    --accent-ink:#dbe5e7;
    --accent-soft:rgba(255,255,255,.07); --accent-ring:rgba(203,255,2,.30);
    --focus-ring:#cbff02; --focus-halo:rgba(9,38,45,.65);
    --success:#7fe0aa; --success-soft:rgba(127,224,170,.14); --success-line:rgba(127,224,170,.34);
    --warning:#f0c86a; --warning-soft:rgba(240,200,106,.14); --warning-line:rgba(240,200,106,.34);
    --danger:#ff9a9a;  --danger-soft:rgba(255,154,154,.14);  --danger-line:rgba(255,154,154,.32);
    --info:#8ec6ee;    --info-soft:rgba(142,198,238,.14);    --info-line:rgba(142,198,238,.32);
    --draft:#a8b2b5;   --draft-soft:rgba(158,168,171,.12);   --draft-line:rgba(158,168,171,.26);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow:0 1px 2px rgba(0,0,0,.30),0 4px 16px rgba(0,0,0,.40);
    --shadow-lift:0 2px 4px rgba(0,0,0,.30),0 10px 28px rgba(0,0,0,.48);
    --shadow-lg:0 4px 10px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.55);
  }
}
[data-theme=dark]{
  --bg:#04161b; --surface:#0c2b33; --surface-2:#123640; --surface-3:#18414c;
  --text:#e7edee; --text-muted:#9ea8ab; --text-faint:#929ea1;
  --heading-ink:#eef3f4;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.22);
  --control-line:rgba(255,255,255,.42);
  --accent-ink:#dbe5e7;
  --accent-soft:rgba(255,255,255,.07); --accent-ring:rgba(203,255,2,.30);
  --focus-ring:#cbff02; --focus-halo:rgba(9,38,45,.65);
  --success:#7fe0aa; --success-soft:rgba(127,224,170,.14); --success-line:rgba(127,224,170,.34);
  --warning:#f0c86a; --warning-soft:rgba(240,200,106,.14); --warning-line:rgba(240,200,106,.34);
  --danger:#ff9a9a;  --danger-soft:rgba(255,154,154,.14);  --danger-line:rgba(255,154,154,.32);
  --info:#8ec6ee;    --info-soft:rgba(142,198,238,.14);    --info-line:rgba(142,198,238,.32);
  --draft:#a8b2b5;   --draft-soft:rgba(158,168,171,.12);   --draft-line:rgba(158,168,171,.26);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 1px 2px rgba(0,0,0,.30),0 4px 16px rgba(0,0,0,.40);
  --shadow-lift:0 2px 4px rgba(0,0,0,.30),0 10px 28px rgba(0,0,0,.48);
  --shadow-lg:0 4px 10px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.55);
}

/* ── base ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-optical-sizing:auto;font-synthesis:none;
  font-size:var(--text-base);line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--font-sans);font-weight:700;
  line-height:var(--leading-tight);color:var(--heading-ink)}
h1{font-weight:800}
h1{font-size:var(--text-xl)} h2{font-size:var(--text-md)} h3{font-size:var(--text-base)}
p{margin:0}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
/* Inline content links carry an underline of their own: with lime off the table
   as ink, --accent-ink is the heading ink and 1.04:1 against body copy, so
   colour cannot distinguish a link from the text around it. Every container
   that holds an in-flow link is listed here. Chrome links (.nav-item,
   .ghost-link, .btn, .card-title-link) are deliberately not: they are
   positioned and styled as controls, not as words in a sentence. */
.prose a,.muted a,.tl-detail a,.kv a,.client-summary a,
.crumbs a,.scope-note a,.data-table td a,.tl-link,
.signal-foot a,.stack-row a{text-decoration:underline;
  text-underline-offset:.15em}
code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);
  padding:1px 5px;border-radius:var(--r-sm)}

/* ── a11y utilities ────────────────────────────────────── */
/* No border-radius here: overriding the element's own radius on focus squares
   off pill buttons mid-interaction. The outline already follows the shape. */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;
  box-shadow:0 0 0 5px var(--focus-halo)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:8px;z-index:100;background:var(--accent);
  color:var(--on-accent);font-weight:600;padding:10px 16px;border-radius:var(--r-pill)}
.skip-link:focus{left:8px}

/* ── shell: the Basalt rail ────────────────────────────── */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--sidebar-bg);
  color:var(--rail-ink);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  padding:var(--space-5) var(--space-3);
  /* Inside the Basalt chrome the focus ring inverts: lime line, Basalt halo. */
  --focus-ring:#cbff02; --focus-halo:rgba(9,38,45,.7)}

/* Dismiss surface for the off-canvas rail. Only exists below 900px (see the
   media query): the open rail is 234px of fixed panel at z-index 40 sitting
   directly over #menu-btn, so tapping the toggle again cannot close it.
   Redundant with the Escape key, which is what keyboard users still use. */
.nav-scrim{display:none;position:fixed;inset:0;z-index:35;
  background:rgba(4,22,27,.55);opacity:0;pointer-events:none;
  transition:opacity var(--normal) var(--ease)}
.nav-scrim.open{opacity:1;pointer-events:auto}

.brand{display:flex;gap:var(--space-3);align-items:center;
  padding:0 var(--space-2) var(--space-5);color:var(--rail-ink-strong);
  text-decoration:none;transition:opacity var(--fast) var(--ease)}
.brand:hover,.brand:focus-visible{opacity:.85}
/* Shown only by the collapsed rail. Lime ground, Basalt ink — the same
   icon-tile idiom as .avatar, and legal because lime is the fill and the two
   letters on it are Basalt (13.45:1). 48px of usable width in a collapsed rail
   cannot hold the wordmark, and an unsigned rail is worse than a mark. */
.brand-mark{display:none;width:32px;height:32px;flex:0 0 32px;
  border-radius:var(--r);background:var(--accent);color:var(--on-accent);
  place-items:center;font-size:var(--text-xs);font-weight:700;
  letter-spacing:-.02em}
/* The house wordmark: the real brand vector artwork inlined, sized in em so it tracks
   .wordmark's font-size the same way the old two-span text version did. Single fill,
   inherited -- both halves are the same colour; the weight contrast between hello and
   kindred is baked into the letterform widths in the source file, not applied by CSS. */
.wordmark{display:block;font-size:var(--text-md);line-height:1.1;
  color:currentColor;white-space:nowrap}
.wordmark-svg{display:inline-block;height:.85em;width:auto;vertical-align:middle}
.wm-glyphs{fill:currentColor}
.brand-text span{display:block;font-size:var(--text-xs);letter-spacing:.02em;
  margin-top:2px;color:var(--rail-ink-muted)}

/* The rail is a fixed-height column: brand at the top, status and utilities
   pinned at the bottom, nav taking whatever is left.
   flex:1 (and nothing else) is the BASE, at every width. Below 901px the rail
   is the off-canvas panel and the ONLY navigation there is, so .nav must not
   be an inner scroller: at 375x667 a 240px pinned block below a short nav
   scroller cut Reports and Ask CIH off with no scrollbar and no affordance.
   Below 901px .sidebar's own overflow-y:auto scrolls the panel as one piece,
   which is one natural swipe to everything. */
.nav{display:flex;flex-direction:column;gap:var(--space-1);flex:1}

/* Desktop only: here the footer really is pinned, and with the four utility
   rows the rail is ~815px tall, so on a 720px laptop a rail that scrolled as
   one piece put Sign out and Collapse menu below the fold — the opposite of
   pinned. So on the desktop rail (and only there) the NAV is the scroller.
   min-height:0 is load-bearing: a flex child defaults to min-height:auto and
   refuses to shrink below its content, which hands the overflow straight back
   to .sidebar. .sidebar keeps its own overflow-y:auto as the last resort for
   viewports too short even for brand + status + footer.
   The padding/negative-margin pair is NOT cosmetic. overflow-y:auto forces
   computed overflow-x to auto, which clips ink overflow at the padding box —
   and .nav-item stretches to exactly .nav's box, so the 2px focus outline at
   2px offset plus the 5px halo (max 5px of ink outside the border box) were
   clipped away on all six nav items, leaving two bare horizontal lime lines.
   6px/8px of padding gives the ring room inside the clip box; the matching
   negative margin puts the items back on the same x as the footer rows below
   the hairline. overflow-x:clip does NOT help — it still clips ink overflow.
   The scrollbar is styled for the dark chrome: the OS default is a light
   stripe down the Basalt rail, and 15px of it also shortened every nav row
   against the footer rows. 6px thin, and see the collapsed block for the
   gutter that keeps the 64px icon column centred. */
@media (min-width:900.021px){
  .nav{min-height:0;overflow-y:auto;
    padding:6px var(--space-2);margin:-6px calc(var(--space-2) * -1);
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.24) transparent}
  .nav::-webkit-scrollbar{width:6px}
  .nav::-webkit-scrollbar-track{background:transparent}
  .nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);
    border-radius:var(--r-pill)}
  .nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.38)}
}
.nav-group{display:flex;flex-direction:column}
.nav-group + .nav-group{margin-top:var(--space-4)}
/* The items are a real list, so a reader can be told "3 items" and skip the
   group. The gap lives here rather than on .nav-group, which now holds the
   label plus the list. */
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nav-group-label{margin:0 0 var(--space-2);padding:0 var(--space-3);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rail-ink-muted)}
/* 44px, not the 38px the rail was drawn at: below 900px this is the off-canvas
   nav and every item is a touch target. The rail has the room. */
.nav-item{display:flex;align-items:center;gap:var(--space-3);
  min-height:44px;padding:var(--space-2) var(--space-3);border-radius:var(--r);
  color:var(--rail-ink);font-size:var(--text-sm);font-weight:500;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.nav-item svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-item:hover{background:var(--rail-hover);color:var(--rail-ink-strong);
  text-decoration:none}
/* The signature: a 3px lime bar hard against the item's own left edge, so it
   follows the item's radius rather than floating at the rail edge. */
.nav-item.active{background:var(--rail-active);color:var(--rail-ink-strong);
  font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}

/* ── rail: status block, then the utility footer ───────── */
/* Two blocks, deliberately. .rail-status is CIH's standing statement about the
   data and the seam it links to; .sidebar-foot is the Kin OS utility set,
   pinned to the bottom under a hairline. The hairline belongs to the
   utilities, so it lives on .sidebar-foot and not between the two. */
.rail-status{display:flex;flex-direction:column;gap:var(--space-2);
  align-items:flex-start;padding:var(--space-4) var(--space-2) var(--space-3)}
.sidebar-foot{display:flex;flex-direction:column;gap:2px;align-items:stretch;
  padding:var(--space-3) 0 0;border-top:1px solid var(--rail-line)}

/* One row shape for every rail utility, link or button, matching .nav-item's
   44px height, radius and hover so the footer reads as the same family as the
   nav above it. 44px and not 40px for exactly the reason .nav-item is 44px:
   below 900px these rows are ordinary links in the off-canvas nav on a phone
   and every one of them is a touch target. It also keeps the vertical rhythm
   unbroken across the hairline. The icon slot is 24px rather than 20px because
   the profile row carries an avatar disc, and a 20px slot would stagger every
   label beside a 24px one. */
.rail-foot-item{display:flex;align-items:center;gap:var(--space-2);width:100%;
  min-height:44px;padding:var(--space-2) var(--space-3);border-radius:var(--r);
  background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;font-size:var(--text-sm);font-weight:500;color:var(--rail-ink);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.rail-foot-item:hover{background:var(--rail-hover);color:var(--rail-ink-strong);
  text-decoration:none}
.rail-foot-ico{flex:0 0 24px;display:grid;place-items:center}
.rail-foot-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail-foot-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* The collapse control reads a step quieter than its three siblings, as it
   does in Kin OS. "Quieter" is --rail-ink-muted, 6.5:1 on Basalt — emphasis,
   not an accessibility discount — and hover/focus takes it to full strength. */
.rail-foot-quiet{color:var(--rail-ink-muted)}
.rail-foot-quiet:hover,.rail-foot-quiet:focus-visible{color:var(--rail-ink-strong)}

/* "You are here" for the rail-footer pages. /integrations, /profile and
   /suggestions are real pages that are deliberately not NAV items, so nothing
   in the rail marked them and both a reader and a sighted user lost the
   current-page cue that every other page in the product gets. Same treatment
   as .nav-item.active — ground, weight and the 3px lime bar hard against the
   item's own left edge — driven off aria-current so the marker and the
   announcement can never disagree. In the collapsed rail the bar is the only
   thing left marking the page, exactly as it is for the nav above. */
.rail-foot-item[aria-current]{background:var(--rail-active);
  color:var(--rail-ink-strong);font-weight:600;
  box-shadow:inset 3px 0 0 var(--accent)}
/* box-shadow does not merge across rules, so the rule above would otherwise
   cancel the :focus-visible halo. Same re-add as .nav-item.active. */
.rail-foot-item[aria-current]:focus-visible{
  box-shadow:inset 3px 0 0 var(--accent),0 0 0 5px var(--focus-halo)}

/* The amber "note" triplet, written as literals rather than the --warning-*
   tokens on purpose: those tokens invert in dark mode and the rail does not,
   so the badge would change character under a toggle that never touches the
   surface it sits on. Same reason .rail-status .pill-ok carries its own
   values below. #6a4a12 on #fbf2e0 is 7.26:1. */
.badge-note{flex:0 0 auto;font-size:var(--text-xs);font-weight:700;
  letter-spacing:.08em;padding:1px 7px;border-radius:var(--r-pill);
  background:#fbf2e0;color:#6a4a12;border:1px solid #e8d7ad}

/* inline-block + padding-block so a bare inline anchor is a ~32px target
   rather than a 20px one. Nothing shifts: every container it sits in is a
   flex row with align-items:center or flex-start. */
.ghost-link{font-size:var(--text-sm);color:var(--text-muted);font-weight:500;
  display:inline-block;padding-block:6px}
.ghost-link:hover{color:var(--text)}
/* The two `.sidebar .ghost-link` / `.topbar .ghost-link` rules that used to sit
   here dressed the rail's Integration status link and the topbar's Sign out.
   Both are .rail-foot-item rows now and no .ghost-link survives anywhere in
   the chrome, so the rules matched nothing and were removed. */

/* The posture pill sits on Basalt, so it cannot use the paper status grounds. */
.rail-status .pill{border:1px solid transparent}
.rail-status .pill-ok{background:rgba(127,224,170,.16);color:#a8e8c6;
  border-color:rgba(127,224,170,.30)}
.rail-status .pill-warn{background:rgba(240,200,106,.16);color:#f2d98f;
  border-color:rgba(240,200,106,.32)}

/* Rail fit, desktop only (item 3263658092). After the base rail rules on
   purpose: same specificity, so these must come later to win. The suite took the rail from 8
   items to 14, and with the old 44px rows, a separate posture pill and four
   full-width utility rows the nav scroller showed 493px of 782px at 1280x900:
   Filing Assistant was cut off and the whole Insight group sat below the fold
   behind a 6px scrollbar. So, on the desktop rail only:
     - rows are 40px, the house size (BRAND 6.7 and 8.8); the off-canvas rail
       below 900px keeps 44px, because there every row is a touch target and
       the panel scrolls as one piece anyway;
     - the posture rides on the Integrations row (see views.layout) instead of
       taking a row of its own;
     - the four Kin OS utilities share ONE row as icon buttons, labels kept as
       .sr-only geometry (the same treatment as the collapsed rail), so every
       one still has its accessible name and a pointer title;
     - the vertical rhythm tightens by a step.
   With all of that the whole rail fits from about 860px of viewport height.
   Shorter than that the nav scrolls, and a fade at its foot says so: the
   first gradient travels with the content ("local") and covers the second
   ("scroll", pinned to the scroller's edge) once the end is reached, so the
   cue shows only while there is more below. */
@media (min-width:900.021px){
  .sidebar{padding-block:var(--space-4)}
  .brand{padding-bottom:var(--space-4)}
  .nav-item,.rail-foot-item{min-height:40px}
  .nav-group + .nav-group{margin-top:var(--space-3)}
  .nav-group-label{margin-bottom:2px;line-height:1.3}
  .nav-list{gap:1px}
  .nav{background:
      linear-gradient(transparent, var(--sidebar-bg) 70%) center bottom / 100% 28px
        no-repeat local,
      linear-gradient(transparent, rgba(255,255,255,.16)) center bottom / 100% 18px
        no-repeat scroll}
  .rail-status{padding:var(--space-1) 0;align-items:stretch}
  .sidebar-foot{flex-direction:row;align-items:center;justify-content:space-between;
    gap:2px;padding-top:var(--space-1)}
  .sidebar-foot .rail-foot-item{width:auto;flex:0 0 auto;gap:4px;
    padding-inline:var(--space-2)}
  .sidebar-foot .rail-foot-label{position:absolute;width:1px;height:1px;padding:0;
    margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
/* The posture pill on the Integrations row: short text, pushed to the end. */
.rail-status-row{position:relative}
.rail-status-row .rail-posture{margin-left:auto;flex:0 0 auto;font-size:var(--text-xs);
  padding:1px 8px}

/* ── shell: the Basalt topbar ──────────────────────────── */
.main-col{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--topbar-h);flex:0 0 var(--topbar-h);display:flex;
  padding:0 var(--space-5);background:var(--topbar-bg);
  color:var(--rail-ink);position:sticky;top:0;z-index:20;
  --focus-ring:#cbff02; --focus-halo:rgba(9,38,45,.7)}
/* The Basalt band stays full-bleed; its contents take the same measure and
   gutters as .content. Without this the trail and the avatar drift away from
   the column they belong to once .main-col grows past --content-max. */
.topbar-inner{display:flex;align-items:center;gap:var(--space-3);min-width:0;
  width:100%;max-width:var(--content-max);margin-inline:auto}

/* Mostly a visual location echo: the authoritative breadcrumb is nav.crumbs
   in the content, the rail carries aria-current, and the H1 names the page.
   The leading "Home" segment is a real link though, so the container itself
   can't be aria-hidden -- only the separators are, individually. */
.topbar-crumbs{display:flex;align-items:center;gap:var(--space-2);
  min-width:0;flex:1;overflow:hidden;font-size:var(--text-sm)}
.topbar-crumb{color:rgba(255,255,255,.62);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
a.topbar-crumb:hover,a.topbar-crumb:focus-visible{color:var(--rail-ink-strong)}
.topbar-crumb.is-leaf{color:var(--rail-ink-strong);font-weight:500}
/* .34 was 3.03:1 on Basalt. aria-hidden takes it out of the reading order,
   not off the screen. */
.topbar-crumb-sep{color:rgba(255,255,255,.50);flex:0 0 auto}

/* Must be allowed to shrink: pinned at max-content this cluster is ~261px and
   pushes the whole document sideways at 320px. The 620px block below sheds the
   two decorative members rather than squashing the real controls. */
/* margin-left:auto, not just the crumbs' flex:1. Above 620px the crumbs push
   this cluster to the right edge; at 620px and below they are display:none and
   the spacer goes with them, so without this the bar collapses to two controls
   huddled in the left corner with the whole width empty beside them. With the
   avatar and Sign out moved to the rail there is less here to hide it. */
.topbar-right{display:flex;align-items:center;gap:var(--space-3);
  flex:0 1 auto;min-width:0;margin-left:auto}
.env-tag{font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;padding:3px 9px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.10);color:var(--rail-ink);
  border:1px solid rgba(255,255,255,.16)}
/* Icon tile: lime ground, Basalt glyph — the house pattern. */
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);font-size:var(--text-xs);
  font-weight:700;flex:0 0 32px}
/* Two sizes of the same tile: --sm sits in the rail footer's 24px icon slot
   beside the 20px strokes, --lg heads the profile card.
   --sm keeps --text-xs (12px), not the .625rem (10px) it was drawn at: this
   file raises the measured Kin OS xs to 12px precisely because below that is
   under the legibility floor (see the token block), and the initials are the
   only content on the disc. Two uppercase letters at 12px/700 fit 24px once
   the letter-spacing is negative rather than positive. */
.avatar-sm{width:24px;height:24px;flex:0 0 24px;font-size:var(--text-xs);
  letter-spacing:-.02em}
.avatar-lg{width:48px;height:48px;flex:0 0 48px;font-size:var(--text-md)}
/* 44px minimum: #menu-btn is the only control that opens navigation below
   900px, and 20px glyph + 7px padding made it the smallest target on the page.
   place-items:center keeps the glyph optically centred as the box grows. */
.icon-btn{display:grid;place-items:center;background:none;border:0;
  color:var(--rail-ink);cursor:pointer;padding:12px;border-radius:50%;
  min-width:44px;min-height:44px;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round}
.icon-btn:hover{background:var(--rail-hover);color:var(--rail-ink-strong)}
/* Only the mobile nav toggle is width-conditional. The theme toggle is an
   .icon-btn too and used to inherit display:none, which hid it above 900px. */
.menu-btn{display:none}

/* ── shell: the paper content column ───────────────────── */
.content{width:100%;max-width:var(--content-max);margin-inline:auto;
  padding:var(--space-6) var(--space-5) var(--space-8);
  display:flex;flex-direction:column;gap:var(--space-5);flex:1}
/* :not(:focus-visible), not a bare outline:none -- #main only gets focus via
   the skip link (tabindex=-1), and a bare rule here was beating the global
   :focus-visible ring at (0,2,0), leaving that one jump with no visible cue. */
.content:focus:not(:focus-visible){outline:none}

/* Page head: eyebrow, H1, lede. */
.page-head{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.page-head-row{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3)}
.eyebrow{margin:0;font-size:var(--text-xs);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint)}
.page-sub{font-size:var(--text-base);color:var(--text-muted);
  line-height:var(--leading-normal);max-width:68ch;margin:0}

/* ── panels ────────────────────────────────────────────── */
.panel{background:var(--surface);border-radius:var(--r-xl);
  padding:var(--space-5);box-shadow:var(--shadow);color:var(--text)}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-3);margin-bottom:var(--space-4)}
/* minmax(0,1fr), not 1fr: a bare 1fr track floors at the item's min-content,
   so one long label pushes the grid wider than its container instead of the
   item wrapping inside it. Same guard as .stat-row and .mini-metrics. */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.muted{color:var(--text-muted);font-size:var(--text-sm)}
.muted.block{display:block}
.prose{color:var(--text-muted);font-size:var(--text-base);
  line-height:var(--leading-normal);max-width:68ch}
.empty{color:var(--text-faint);font-size:var(--text-sm);font-style:italic;padding:8px 0}

/* ── stats ─────────────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.stat{background:var(--surface);border-radius:var(--r-xl);
  padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-1);
  box-shadow:var(--shadow);
  transition:transform var(--normal) var(--ease),box-shadow var(--normal) var(--ease)}
.stat:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.stat-label{font-size:var(--text-xs);color:var(--text-faint);text-transform:uppercase;
  letter-spacing:.18em;font-weight:600}
.stat-value{font-size:var(--text-xl);font-weight:600;line-height:var(--leading-tight);
  color:var(--heading-ink)}
.stat-note{font-size:var(--text-sm);color:var(--text-muted)}
.stat-note.tone-warn{color:var(--warning)} .stat-note.tone-risk{color:var(--danger)}

/* ── chips & pills ─────────────────────────────────────── */
/* Every chip is a status triplet: soft ground, status ink, matching line. */
.chip{display:inline-block;font-size:var(--text-xs);font-weight:600;
  padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap;
  border:1px solid transparent}
.chip-strong{background:var(--success-soft);color:var(--success);border-color:var(--success-line)}
.chip-steady{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.chip-watch{background:var(--warning-soft);color:var(--warning);border-color:var(--warning-line)}
.chip-at-risk{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.chip-sev-high{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.chip-sev-medium{background:var(--warning-soft);color:var(--warning);border-color:var(--warning-line)}
.chip-sev-low{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.chip-stage{background:var(--draft-soft);color:var(--draft);border-color:var(--draft-line)}
/* Was the one lime-ink chip. Lime cannot be ink, and a lime fill in a dense
   pipeline table would shout louder than the row it sits in — so: info. */
.chip-negotiate{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.chip-won{background:var(--success-soft);color:var(--success);border-color:var(--success-line)}
.chip-lost{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
/* The six .chip-stance-* rules that used to sit here matched nothing:
   influence_pill() emits .chip-inf-*, which is defined in the contacts block.
   Removed so that editing the contact-influence colours has an effect. */
.pill{display:inline-block;font-size:var(--text-xs);font-weight:600;
  padding:4px 10px;border-radius:var(--r-pill);border:1px solid transparent}
.pill-ok{background:var(--success-soft);color:var(--success);border-color:var(--success-line)}
.pill-warn{background:var(--warning-soft);color:var(--warning);border-color:var(--warning-line)}

/* ── lists ─────────────────────────────────────────────── */
.stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.stack-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-3) 0;border-bottom:1px solid var(--border)}
.stack-row:last-child{border-bottom:0}
.stack-row .muted{display:block}
.stack-row .right{display:flex;align-items:center;gap:var(--space-2)}
.num{font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--text-sm)}
.mini-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mini-list li{display:flex;align-items:center;gap:9px;font-size:var(--text-sm)}
.mini-list li span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.doc-kind{font-size:var(--text-xs);font-weight:700;letter-spacing:.05em;padding:1px 6px;
  border-radius:var(--r-sm);background:var(--draft-soft);color:var(--draft);
  border:1px solid var(--draft-line)}

/* ── signals ───────────────────────────────────────────── */
.signal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.signal-top{display:flex;align-items:center;gap:9px;margin-bottom:5px;flex-wrap:wrap}
.signal-top .src{margin-left:auto;font-family:var(--mono);font-size:var(--text-xs)}
.signal-head{font-weight:600;font-size:var(--text-base);margin-bottom:3px}
.signal-detail{margin:6px 0 0;font-size:var(--text-sm);
  line-height:var(--leading-normal);color:var(--text-muted)}
/* min(280px,100%) is load-bearing: auto-fit reduces the track COUNT, never a
   track below its own floor, so a bare minmax(280px,1fr) overflows any
   container narrower than 280px (the panel is 240px wide at a 320px viewport)
   and scrolls the whole document sideways. */
.signal-grid{display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
/* Inline card: lighter than a .panel so nested cards do not read as peers.
   These are always emitted inside a .panel, which is --surface. */
.signal-card{background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--space-4);box-shadow:var(--shadow-sm)}
.signal-card h3{font-size:var(--text-base);line-height:1.4;margin:var(--space-2) 0 0}
.signal-card p{font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-normal)}
.signal-foot{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:baseline;
  margin:var(--space-3) 0 0;font-size:var(--text-xs);color:var(--text-faint)}
.signal-foot .src{font-family:var(--mono);font-size:var(--text-xs)}

/* ── charts ────────────────────────────────────────────── */
.chart{margin:0;display:flex;flex-direction:column;gap:9px}
.bar-row{display:grid;grid-template-columns:88px 1fr 56px;align-items:center;gap:11px}
.bar-label{font-size:var(--text-sm);color:var(--text-muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* The bar's LENGTH is the datum, and lime on the Paper 3 track is 1.05:1 —
   three empty grey capsules to anyone who cannot resolve a hue-only edge.
   Darkening the track would break the paper ramp, so both edges are drawn
   instead: a Basalt hairline inside the fill (13.4:1 on lime, 12.9:1 on the
   track) and an accessible line around the track's full extent. Dark mode
   already cleared 3:1 and is unharmed. */
.bar-track{height:9px;background:var(--surface-3);border-radius:var(--r-pill);
  overflow:hidden;box-shadow:inset 0 0 0 1px var(--control-line)}
/* Flat lime. A bar carries no text, so lime is a legal fill here; the previous
   two-stop gradient had no meaning once --accent-hover stopped being a hue. */
.bar-fill{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent);
  box-shadow:inset 0 0 0 1px var(--on-accent);
  animation:grow var(--normal) var(--ease) both}
@keyframes grow{from{transform:scaleX(.02);transform-origin:left}to{transform:scaleX(1)}}
.bar-value{font-size:var(--text-sm);font-variant-numeric:tabular-nums;text-align:right;
  color:var(--text-muted)}
.chart-cap{font-size:var(--text-xs);color:var(--text-faint);margin-top:var(--space-1)}

/* ── tables ────────────────────────────────────────────── */
/* The negative margins let a wide table scroll edge-to-edge inside its card,
   so they are tied to .panel's padding. Change one, change both. */
.table-wrap{overflow-x:auto;
  margin:0 calc(var(--space-5) * -1) calc(var(--space-5) * -1);
  padding:0 var(--space-5) var(--space-5)}
.data-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:660px}
.data-table th{text-align:left;font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.18em;color:var(--text-faint);font-weight:600;padding:0 12px 9px 0;
  border-bottom:1px solid var(--border)}
.data-table td{padding:11px 12px 11px 0;border-bottom:1px solid var(--border);
  vertical-align:top}
.data-table tr:last-child td{border-bottom:0}
.data-table tbody tr{transition:background var(--fast) var(--ease)}
.data-table tbody tr:hover{background:var(--surface-2)}
.num-cell{text-align:right;font-variant-numeric:tabular-nums}
/* The per-cell column label used by the ≤620px card layout. Real DOM text, not
   a ::before: generated content is not reliably exposed to assistive tech, and
   below 620px this is the only thing naming a column once thead is
   display:none. Hidden above 620px, where the header row does the job. */
.cell-label{display:none}

/* ── clients ───────────────────────────────────────────── */
.client-list{display:flex;flex-direction:column;gap:var(--space-4)}
.client-head{display:flex;justify-content:space-between;gap:var(--space-4);align-items:flex-start}
.client-head-right{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.client-summary{font-size:var(--text-base);color:var(--text-muted);
  margin-top:var(--space-3);line-height:var(--leading-normal)}
.client-card[hidden]{display:none}

/* ── reports ───────────────────────────────────────────── */
.report-list{display:flex;flex-direction:column;gap:var(--space-4)}
.metric-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);
  margin-top:var(--space-4)}
.metric{background:var(--surface-2);border-radius:var(--r-lg);
  padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:2px}
.metric-label{font-size:var(--text-xs);color:var(--text-faint);text-transform:uppercase;
  letter-spacing:.18em;font-weight:600}
.metric-value{font-size:var(--text-lg);font-weight:600;color:var(--heading-ink)}
.metric-delta{font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
.metric-delta.tone-ok{color:var(--success)}
.metric-delta.tone-risk{color:var(--danger)}

/* ── forms: inputs share one radius across the product ─── */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field-grow{flex:1 1 240px}
.field-label{font-size:var(--text-xs);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint)}
.field input,.ask-form input,.auth-form input,
.toolbar input[type=search],.toolbar select{
  font:inherit;font-size:var(--text-base);color:var(--text);background:var(--surface);
  border:1px solid var(--control-line);border-radius:var(--r);
  padding:9px 13px;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.field input{min-width:290px}
.toolbar input[type=search],.toolbar select{padding:9px 10px;min-width:150px}
/* Colour-only cue for pointer focus. The outline is NOT suppressed: this used
   to set outline:none at (0,2,1), which beat the global :focus-visible rule and
   replaced the designed two-tone ring with a 1.3:1 halo on every input and
   select in the product. Declaring border-color alone lets the shared
   indicator through untouched. */
.field input:focus,.ask-form input:focus,.auth-form input:focus,
.toolbar input[type=search]:focus,.toolbar select:focus{border-color:var(--accent-ink)}
.toolbar input[type=search]:hover,.toolbar select:hover{border-color:var(--accent-ink)}
/* Declared, or the UA derives it: Chromium and Firefox use 54% of currentColor,
   which is 3.64:1 on white. opacity:1 is required or Firefox re-applies .54. */
::placeholder{color:var(--text-faint);opacity:1}

/* Filter bar. A real form, so it must lay out as one: fields wrap, the
   count stays on its own line at narrow widths rather than being squeezed.
   The Apply button is never hidden — it is the no-JavaScript fallback. */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:flex-end;
  background:var(--surface);border-radius:var(--r-xl);
  padding:var(--space-4) var(--space-5);margin-bottom:var(--space-4);
  box-shadow:var(--shadow)}
.toolbar-actions{display:flex;gap:var(--space-2);align-items:center}
.toolbar-count{margin:0;flex-basis:100%;font-size:var(--text-sm);color:var(--text-muted)}

/* ── buttons ───────────────────────────────────────────── */
/* One definition each. The old file declared .btn and .btn-quiet twice and
   left .btn-primary entirely overridden; editing the dead copy looked like an
   edit that did nothing. Primary is the measured Kin OS pill. */
/* The border is Basalt, not lime. Kin OS measures the primary pill as a lime
   fill inside a lime border, but lime on paper is 1.18:1 against #fff and
   1.04:1 against the Paper 2 page ground — in light mode the control has no
   perceivable outline at all and reads as floating Basalt text. --on-accent is
   the ink the fill already carries, so the pill stays brand-correct and gains
   a 15.8:1 edge. Dark mode does not need it (the fill is 12.7:1 on --surface)
   but takes it harmlessly, which keeps one definition instead of two. */
.btn{font:inherit;font-size:var(--text-base);font-weight:600;cursor:pointer;
  padding:10px 15px;border-radius:var(--r-pill);
  border:1px solid var(--on-accent);background:var(--accent);color:var(--on-accent);
  box-shadow:var(--shadow-sm);text-decoration:none;display:inline-block;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease)}
/* No lime hover hue exists in the system: deepen the lime and lift the shadow,
   never shift toward another colour. */
.btn:hover{background:var(--accent-hover);border-color:var(--on-accent);
  box-shadow:var(--shadow-lift);text-decoration:none}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--on-accent)}
.btn-quiet{background:transparent;color:var(--accent-ink);
  border:1px solid var(--control-line);box-shadow:none}
.btn-quiet:hover{background:var(--accent-soft);border-color:var(--accent-ink);
  box-shadow:none;text-decoration:none}
/* Consequential decisions are never the lime primary (review of item
   3265547908, Filing confirmation page): danger for an action that can make a
   second copy, caution for one recorded on a person's word. Soft fill, full
   ink and a full-strength edge, from the same tokens the at-risk and watch
   chips use, so both read in light and dark mode. */
.btn-danger{background:var(--danger-soft);color:var(--danger);
  border:1px solid var(--danger);box-shadow:none}
.btn-danger:hover{background:var(--danger-line);border-color:var(--danger);
  box-shadow:none;text-decoration:none}
.btn-caution{background:var(--warning-soft);color:var(--warning);
  border:1px solid var(--warning);box-shadow:none}
.btn-caution:hover{background:var(--warning-line);border-color:var(--warning);
  box-shadow:none;text-decoration:none}
/* box-shadow does not merge across rules, so the halo from :focus-visible is
   cancelled by any component that owns a box-shadow of its own. These three
   re-add it, and must stay after the rules they extend. */
.btn:focus-visible{box-shadow:var(--shadow-sm),0 0 0 5px var(--focus-halo)}
.btn-quiet:focus-visible,.btn-danger:focus-visible,
.btn-caution:focus-visible{box-shadow:0 0 0 5px var(--focus-halo)}
.nav-item.active:focus-visible{box-shadow:inset 3px 0 0 var(--accent),
  0 0 0 5px var(--focus-halo)}

/* ── ask ───────────────────────────────────────────────── */
/* min-width:0 on the input, or its intrinsic size (~190px at size=20) keeps the
   flex line from shrinking and pushes the Ask button off the panel at 320px. */
.ask-form{display:flex;flex-wrap:wrap;gap:var(--space-3);
  margin:var(--space-4) 0 var(--space-3)}
.ask-form input{flex:1;min-width:0;padding:11px 15px}
.suggestions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
/* Secondary button spec: transparent ground, Basalt line, Basalt ink. 40px
   minimum: these are the Ask page's primary affordance and were ~34px. */
.suggestion{background:transparent;border:1px solid var(--control-line);
  color:var(--accent-ink);font:inherit;font-size:var(--text-sm);font-weight:500;
  padding:9px 14px;min-height:40px;border-radius:var(--r-pill);cursor:pointer;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.suggestion:hover{background:var(--accent-soft);border-color:var(--accent-ink)}
.ask-answer{margin-top:var(--space-4)}
.ask-answer:empty{display:none}
.qa-list{display:flex;flex-direction:column;gap:var(--space-3)}
.qa{background:var(--surface-2);border-radius:var(--r-lg);padding:var(--space-4);
  animation:fade var(--normal) var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.qa-q{font-weight:600;font-size:var(--text-base);margin-bottom:6px}
.qa-a{font-size:var(--text-base);color:var(--text-muted);line-height:var(--leading-normal)}
/* Sources sit under every answer, not behind a disclosure. A citation the
   reader has to go looking for is a citation nobody checks. */
.qa-sources{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border)}
.qa-sources-label{font-size:var(--text-xs);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint);margin-right:2px}
.chip-src{background:var(--draft-soft);color:var(--draft);border-color:var(--draft-line);
  font-family:var(--mono);font-size:var(--text-xs)}
/* source_chips() emits an <a> for a citation that resolves and a <span> for one
   that does not. Without a persistent cue the two are identical at rest and the
   difference only appears on hover, which touch and keyboard never see. */
a.chip-src{text-decoration:underline;text-underline-offset:.15em}
a.chip-src:hover{background:var(--surface-3);color:var(--accent-ink);
  border-color:var(--control-line)}
.ask-loading{margin:0;font-size:var(--text-base);color:var(--text-muted)}
.ask-loading::after{content:"";display:inline-block;width:1em;text-align:left;
  animation:ellipsis 1.2s steps(4,end) infinite}
@keyframes ellipsis{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* ── facts ─────────────────────────────────────────────── */
.fact-grid{display:flex;flex-direction:column;gap:9px;margin-top:var(--space-4)}
.fact{display:flex;gap:var(--space-3);align-items:baseline;flex-wrap:wrap}
.fact-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.18em;
  font-weight:600;color:var(--text-faint);min-width:130px}
.fact-value{font-size:var(--text-sm);word-break:break-all}

/* ── suggestions ───────────────────────────────────────── */
/* Distinct from .suggestion, which is the Ask page's follow-up chip. Class
   matching is exact, so the two never collide — but they are neighbours in a
   grep, and this comment is here so nobody "tidies" one into the other. */
.suggestion-form{display:flex;flex-direction:column;gap:var(--space-3);
  margin-top:var(--space-4)}
/* A textarea is not an <input>, so the shared control rule above does not
   reach it and an unstyled one drops to the UA's monospace default. */
.suggestion-form textarea{font:inherit;font-size:var(--text-base);
  color:var(--text);background:var(--surface);
  border:1px solid var(--control-line);border-radius:var(--r);
  padding:11px 13px;width:100%;min-width:0;resize:vertical;
  line-height:var(--leading-normal);
  transition:border-color var(--fast) var(--ease)}
.suggestion-form textarea:focus{border-color:var(--accent-ink)}
.suggestion-form-foot{display:flex;flex-wrap:wrap;gap:var(--space-3);
  align-items:flex-end;justify-content:space-between}
.suggestion-form-foot select{font:inherit;font-size:var(--text-base);
  color:var(--text);background:var(--surface);
  border:1px solid var(--control-line);border-radius:var(--r);
  padding:9px 10px;min-width:190px;
  transition:border-color var(--fast) var(--ease)}
.suggestion-form-foot select:hover,
.suggestion-form-foot select:focus{border-color:var(--accent-ink)}
.suggestion-list{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--space-3)}
.suggestion-item{background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--space-4)}
.suggestion-top{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);
  align-items:baseline;margin-bottom:var(--space-2)}
.suggestion-top time{margin-left:auto;font-variant-numeric:tabular-nums}
.suggestion-body{font-size:var(--text-base);line-height:var(--leading-normal);
  color:var(--text);overflow-wrap:anywhere}
/* Category chips take the same status triplets as every other chip; the
   mapping is arbitrary but stable, and no two adjacent categories share one. */
.chip-cat-product{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.chip-cat-data{background:var(--success-soft);color:var(--success);border-color:var(--success-line)}
.chip-cat-reporting{background:var(--warning-soft);color:var(--warning);border-color:var(--warning-line)}
.chip-cat-integration{background:var(--draft-soft);color:var(--draft);border-color:var(--draft-line)}
.chip-cat-other{background:var(--draft-soft);color:var(--draft);border-color:var(--draft-line)}

/* ── profile ───────────────────────────────────────────── */
.profile-head{display:flex;align-items:center;gap:var(--space-4);
  margin-bottom:var(--space-5);flex-wrap:wrap}
.profile-name{font-size:var(--text-md);font-weight:600;color:var(--heading-ink)}

/* ── auth ──────────────────────────────────────────────── */
/* Full-bleed Basalt field, one white card floating on it. The old radial glow
   was tinted with --accent-soft, which is now Basalt rather than a hue. */
.auth-body{display:grid;place-items:center;min-height:100vh;padding:var(--space-5);
  background:radial-gradient(1100px 600px at 50% -15%,#0f3742,transparent 70%),var(--sidebar-bg)}
.auth-shell{width:100%;max-width:404px;display:flex;flex-direction:column;
  gap:var(--space-5)}
.auth-wordmark{color:var(--rail-ink-strong);text-align:center}
/* .wordmark-svg{height:.85em} tracks .wordmark's own font-size, not the
   ambient one -- .wordmark sets --text-md itself. The rail needs that
   compact scale; a login hero needs the display tier the type scale
   already defines for exactly this. Scoped so the rail is untouched. */
.auth-wordmark .wordmark{font-size:var(--text-hero)}
.auth-card{background:var(--surface);border-radius:var(--r-xl);
  padding:var(--space-6) var(--space-6) var(--space-5);width:100%;max-width:404px;
  box-shadow:var(--shadow-lg);color:var(--text)}
/* The field is pinned to Basalt in both themes but the card follows --surface,
   so in dark it is #0c2b33 floating on #09262d: 1.06:1 at the edge, with a
   black --shadow-lg that is invisible on a dark ground. Light mode is #fff on
   Basalt and needs nothing. Two blocks, same body, edited in lockstep — same
   convention as the token blocks above. */
[data-theme=dark] .auth-card{border:1px solid var(--control-line)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .auth-card{border:1px solid var(--control-line)}
}
.auth-product{margin:var(--space-2) 0 0;font-size:var(--text-xs);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-subdued)}
.auth-card h1{font-size:var(--text-lg);margin-bottom:6px}
.auth-lead{font-size:var(--text-sm);color:var(--text-muted);
  line-height:var(--leading-normal);margin-bottom:var(--space-5)}
.auth-form{display:flex;flex-direction:column;gap:6px}
.auth-form label{margin-top:var(--space-2)}
.auth-form input{padding:11px 14px}
.auth-form .btn{margin-top:var(--space-5);width:100%}
.auth-sso-button{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:48px;margin:0 0 7px;padding:11px 14px;border:1px solid #09262d;
  border-radius:999px;background:#cbff02;color:#09262d;font-weight:750;text-decoration:none}
.auth-sso-button:hover{filter:brightness(.96);text-decoration:none}
.auth-sso-note{margin:0 0 var(--space-4);color:var(--text-faint);font-size:var(--text-xs);text-align:center}
.auth-hint{font-size:var(--text-sm);color:var(--text-faint);text-align:center;
  margin-top:var(--space-5)}
.form-error{background:var(--danger-soft);color:var(--danger);
  border:1px solid var(--danger-line);font-size:var(--text-sm);
  padding:10px 14px;border-radius:var(--r);margin-bottom:var(--space-4)}
.form-note{background:var(--success-soft);color:var(--success);
  border:1px solid var(--success-line);font-size:var(--text-sm);
  padding:10px 14px;border-radius:var(--r);margin-bottom:var(--space-4)}

/* ── new-client popout (Clients page-head) ────────────── */
/* <details> as its own positioning context: the panel anchors to the
   trigger button, not to the page, so it tracks the button regardless of
   where the page-head row puts it. */
.new-client-pop{position:relative}
.new-client-pop>summary{list-style:none}
.new-client-pop>summary::-webkit-details-marker{display:none}
.new-client-pop>summary::marker{content:""}
.new-client-panel{position:absolute;top:calc(100% + var(--space-2));right:0;
  z-index:20;width:min(560px,calc(100vw - 32px));padding:var(--space-4);
  box-shadow:var(--shadow-lift)}
.new-client-panel form{margin-top:var(--space-4);display:flex;
  flex-direction:column;gap:var(--space-3)}
/* .field-grow's flex-basis:240px means "grow to fill row width" in the
   horizontal toolbar it was written for. This form is a column, where the
   same basis reads as height instead -- 240px of dead space under a
   two-row textarea. Every field already stretches to the column's full
   width by default, so grow has nothing to do here. */
.new-client-panel .field-grow{flex:none}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-3)}
/* .field input's 290px floor (written for the flex-wrap toolbar, where a
   wide track just wraps) doesn't fit a fixed-width 3-column grid: three
   168px tracks in the 560px panel can't shrink a 290px-floored input, so it
   overran the panel. Grid tracks don't wrap, so the floor has to go. */
.form-grid .field input{min-width:0;width:100%}
@media (max-width:720px){.form-grid{grid-template-columns:1fr}}

/* ── breadcrumb (in the content, on paper) ─────────────── */
.crumbs{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;
  font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-3)}
.crumbs a{color:var(--text-muted);display:inline-block;padding-block:6px}
.crumbs a:hover{color:var(--text)}
.crumbs [aria-current=page]{color:var(--text);font-weight:500}
.crumb-sep{color:var(--text-faint)}

/* ── detail heads ──────────────────────────────────────── */
/* The record name is the shell H1 now, so this row carries the meta line and
   the status chips rather than repeating the title underneath it. */
.detail-head{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:flex-start;
  justify-content:space-between;margin-bottom:var(--space-2)}
.detail-summary{margin-bottom:var(--space-5);max-width:68ch}
.detail-head-right{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}

.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-3);margin-bottom:var(--space-5)}

.mini-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-3);margin:var(--space-3) 0 0;padding:var(--space-3) 0 0;
  border-top:1px solid var(--border)}
.mini-metrics dt{font-size:var(--text-xs);color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.18em;font-weight:600}
.mini-metrics dd{margin:2px 0 0;font-size:var(--text-base);font-weight:600}

.kv{display:grid;gap:var(--space-3);margin:0}
.kv div{display:flex;justify-content:space-between;gap:var(--space-3);align-items:baseline;
  padding-bottom:var(--space-2);border-bottom:1px solid var(--border)}
.kv div:last-child{border-bottom:0;padding-bottom:0}
.kv dt{font-size:var(--text-sm);color:var(--text-muted)}
.kv dd{margin:0;font-size:var(--text-sm);font-weight:600;text-align:right}

.card-title-link{color:inherit}
.card-title-link:hover{color:inherit;text-decoration:underline}
.card-actions{display:flex;gap:var(--space-3);align-items:center;margin-top:var(--space-4);
  flex-wrap:wrap}
.row-link{font-weight:600}
.scope-note{font-size:var(--text-base);color:var(--text-muted);margin:0 0 var(--space-3)}

/* Verdict line. Carries the judgement the relationship panel exists to make,
   so it is typographically louder than the list beneath it. Same 3px-bar
   idiom as the active rail item, in the status line colour. */
.verdict{font-size:var(--text-base);font-weight:500;line-height:1.45;
  margin:0 0 var(--space-4);padding:var(--space-3);border-radius:var(--r-sm);
  border-left:3px solid var(--draft-line);background:var(--draft-soft);color:var(--text)}
.verdict.tone-ok{border-left-color:var(--success-line);background:var(--success-soft);
  color:var(--text)}
.verdict.tone-warn{border-left-color:var(--warning-line);background:var(--warning-soft)}
.verdict.tone-risk{border-left-color:var(--danger-line);background:var(--danger-soft)}

/* ── contacts ──────────────────────────────────────────── */
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.contact{padding:var(--space-3);border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface-2)}
/* No opacity. Group opacity composites the whole subtree toward the panel
   ground, and it took the note, the role and the "Lapsed" chip — the three
   things a reader opens a lapsed contact for — from 6.9:1 to 3.5:1. The state
   is already carried twice, by the dashed frame and by the chip that says
   "Lapsed"; the frame just needs to be visible enough to count as a cue. */
.contact.is-lapsed{border-style:dashed;border-color:var(--control-line)}
.contact-main{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.contact-name{font-weight:600;font-size:var(--text-base)}
.contact-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.contact-note{margin:var(--space-2) 0 0;font-size:var(--text-sm);
  line-height:var(--leading-normal);color:var(--text-muted)}
.small{font-size:var(--text-xs)}

.chip-inf-champion{background:var(--success-soft);color:var(--success);border-color:var(--success-line)}
.chip-inf-economic{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.chip-inf-technical{background:var(--draft-soft);color:var(--draft);border-color:var(--draft-line)}
.chip-inf-blocker{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.chip-inf-neutral{background:var(--draft-soft);color:var(--draft);border-color:var(--draft-line)}
.chip-eng-strong{background:var(--success-soft);color:var(--success);border-color:var(--success-line)}
.chip-eng-occasional{background:var(--warning-soft);color:var(--warning);border-color:var(--warning-line)}
.chip-eng-lapsed{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}

/* ── timeline ──────────────────────────────────────────── */
/* The rail is a border on the list, not a pseudo-element per item, so it stays
   continuous when an entry wraps. padding-left and .tl-marker's left offset
   are a matched pair — move one and the dots drift off the rail. */
.timeline{list-style:none;margin:0;padding:0 0 0 22px;
  border-left:2px solid var(--border);display:grid;gap:var(--space-5)}
.tl-item{position:relative}
.tl-marker{position:absolute;left:-29px;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--surface);border:2px solid var(--border-strong)}
.tl-risk .tl-marker{border-color:var(--danger);background:var(--danger-soft)}
/* A marker carries no text, so this is the one place lime can mark the brand
   event outright. The chip beside it stays on the info triplet. */
.tl-stage_change .tl-marker{border-color:var(--accent-ink);background:var(--accent)}
.tl-meeting .tl-marker{border-color:var(--success);background:var(--success-soft)}
.tl-head{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:baseline;margin:0}
.tl-title{font-weight:600;font-size:var(--text-base)}
.tl-detail{margin:5px 0 0;font-size:var(--text-sm);line-height:var(--leading-normal);
  color:var(--text-muted);max-width:68ch}
.tl-meta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:7px 0 0;
  font-size:var(--text-xs);color:var(--text-faint)}
.tl-actor::before{content:"·";margin-right:10px}
.tl-link::before{content:"·";margin-right:10px;color:var(--text-faint)}
.chip-act-risk{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.chip-act-stage_change{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.chip-act-meeting{background:var(--success-soft);color:var(--success);border-color:var(--success-line)}
.chip-act-note,.chip-act-email,.chip-act-document{background:var(--draft-soft);
  color:var(--draft);border-color:var(--draft-line)}

.chip-kind-risk{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.chip-kind-expansion{background:var(--success-soft);color:var(--success);border-color:var(--success-line)}
.chip-kind-relationship{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.chip-kind-market{background:var(--draft-soft);color:var(--draft);border-color:var(--draft-line)}

/* ── empty states, notices, loading ────────────────────── */
/* Two distinct concepts, deliberately not merged: .empty is the inline italic
   line inside a list, .empty-state is the designed panel. */
.empty-state{text-align:center;padding:var(--space-6) var(--space-5);
  border:1px dashed var(--border-strong);border-radius:var(--r-xl);
  background:var(--surface-2)}
.empty-title{margin:0 0 4px;font-weight:600;font-size:var(--text-base)}
.empty-state .muted{max-width:52ch;margin:0 auto}
.empty-state .btn-quiet{margin-top:var(--space-4)}

/* Lime bar on a notice: legal, because the bar carries no text. Inset rather
   than a real border so it follows the card's 18px radius. The bar is the only
   thing marking this panel as a caveat and lime on #f7f8fa is 1.11:1, so a 1px
   Basalt keyline (14.9:1) is painted under it and shows at x 3-4. */
.notice{background:var(--surface-2);
  box-shadow:inset 3px 0 0 var(--accent),inset 4px 0 0 var(--on-accent),var(--shadow)}
.notice .prose{margin:0}

.head-actions{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.inline-form{display:inline}

/* The export preview is machine output; monospace and a scroll container,
   never wrapped, because wrapping a fixed-width report is a lie about what
   the file would contain. */
/* --text-sm, not --text-xs: the export text is content, not a label. */
.preview{font-family:var(--mono);font-size:var(--text-sm);line-height:var(--leading-normal);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--space-4);margin:var(--space-3) 0 0;
  overflow-x:auto;white-space:pre;color:var(--text)}

/* Applied by app.js while a filter submit is in flight; without JS the
   browser's own navigation indicator does this job. */
/* .85, not .55: this dims the whole content column, and at .55 --text-muted
   fell to 2.6:1 for the duration of the request. */
.is-loading{opacity:.85;pointer-events:none;transition:opacity var(--fast) var(--ease)}
/* Same idea one control down: app.js disables the suggestion form's submit
   button once the POST is away, so a second click cannot file the same
   suggestion twice. Kept legible rather than greyed out — the button still
   says what it did, it just cannot be pressed again. Without JavaScript the
   button is never disabled and the form works exactly as before. */
.btn:disabled{opacity:.85;cursor:default;box-shadow:none}
.btn:disabled:hover{background:var(--accent);box-shadow:none}

/* Theme toggle: show the palette you would switch *to*, not the one you are
   in — a sun on a light page invites nobody to press it. */
#theme-btn .ico-sun{display:none}
#theme-btn .ico-moon{display:block}
[data-theme=dark] #theme-btn .ico-moon{display:none}
[data-theme=dark] #theme-btn .ico-sun{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) #theme-btn .ico-moon{display:none}
  :root:not([data-theme=light]) #theme-btn .ico-sun{display:block}
}
#theme-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── layout-correctness guards (not styling) ───────────── */
/* Grid and flex children default to min-width:auto, so a child whose
   min-content width exceeds the track pushes the whole page sideways instead
   of wrapping. Fixed at the container level rather than per-component,
   because the next dense row would reintroduce it. Do not remove. */
.content > *,
.grid-2 > *,
.stack-row,
.stack-row > *,
.tl-item,
/* .kv rows were missing from this list, and the profile page's Environment
   row put a white-space:nowrap .chip in the dd: 73px label + 12px gap + 189px
   chip inside a 240px track hung the chip 10px outside the white card at
   320px. The narrow-width stack that finishes the fix is in the 420px block. */
.kv div,
.kv div > *,
.contact{min-width:0}

/* Long unbroken values (ids, URLs, machine strings) must wrap rather than
   set the width of their column. */
.tl-detail,.contact-note,.client-summary,.prose,.detail-summary{overflow-wrap:anywhere}

/* Anchored cards (home deep-links to /clients#<id>) must clear the sticky
   topbar rather than landing underneath it. */
.client-card{scroll-margin-top:calc(var(--topbar-h) + var(--space-4))}

/* ── collapsed rail (the desktop side of the breakpoint) ─ */
/* The mirror image of .menu-btn's scoping. #menu-btn is display:none on the
   desktop side; #rail-toggle is display:none on the narrow side, so the two
   navigation controls are never both on screen and the collapse state can
   never be the reason someone cannot reach the nav on a phone.
   Everything that narrows the rail lives inside the query for the same reason:
   on the narrow side the rail is position:fixed and translated off-canvas, and
   a 64px width there would fight the off-canvas rules rather than help them.
   The default — expanded — is the CSS default, so with JavaScript off the rail
   is always full width and always navigable.

   THE BOUNDARY IS 900.02 / 900.021, NOT 900 / 901. Written as a pair of
   adjacent fractional widths because min-width:901px and max-width:900px are
   NOT complements: they leave the whole open interval (900, 901) uncovered,
   and fractional CSS viewport widths in that band are ordinary rather than
   exotic — a 1126px window at 125% zoom is 900.8 CSS px. In that band neither
   block matched, so the rail fell back to the base 234px sticky column while
   <html> still said data-rail="collapsed", with BOTH #rail-toggle and
   #menu-btn hidden: no navigation-width control on the page at all. The
   0.001px that still separates the two is finer than any device pixel ratio
   quantises to. Keep the two numbers in step — see the narrow block below. */
#rail-toggle{display:none}
@media (min-width:900.021px){
  #rail-toggle{display:flex}
  .sidebar{transition:width var(--normal) var(--ease-rail),
    flex-basis var(--normal) var(--ease-rail)}
  [data-rail=collapsed] .sidebar{width:var(--rail-width-collapsed);
    flex:0 0 var(--rail-width-collapsed);padding-inline:var(--space-2)}

  /* Every label collapses to .sr-only GEOMETRY, never display:none. The text
     stays in the accessibility tree, so not one row in the collapsed rail is
     an unnamed icon; the title attributes in the markup cover the pointer. */
  [data-rail=collapsed] .nav-label,
  [data-rail=collapsed] .nav-group-label,
  [data-rail=collapsed] .brand-text,
  [data-rail=collapsed] .rail-foot-label,
  [data-rail=collapsed] .badge-note,
  [data-rail=collapsed] .pill-text{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

  /* Centre what is left. The active item keeps its 3px lime bar — with the
     labels gone it is the only thing marking the current page. */
  [data-rail=collapsed] .nav-item,
  [data-rail=collapsed] .rail-foot-item{justify-content:center;gap:0;
    padding-inline:0}
  [data-rail=collapsed] .brand{justify-content:center;padding-inline:0}
  [data-rail=collapsed] .brand-mark{display:grid}
  [data-rail=collapsed] .rail-status{align-items:center;padding-inline:0}

  /* The posture pill has nothing to say without its text, so it becomes the
     dot it always was underneath. Colour ALONE is not allowed to carry it:
     the pill's translucent grounds composite to 1.47:1 (ok) and 1.44:1 (warn)
     against Basalt and are 1.02:1 apart from EACH OTHER, so the two postures
     were pixel-indistinguishable and both were far under the 3:1 floor for a
     graphic that conveys information (WCAG 1.4.11), and colour was the only
     carrier (1.4.1). So: repaint with the pill's own ink, which clears 3:1 on
     Basalt (#a8e8c6 is 7.72:1, #f2d98f higher), AND give the two states
     different SHAPES — demo is a solid disc, live connectors is a ring. The
     row also carries a title in the markup, so the collapsed dot has a
     pointer name like every other row. .pill-text is still announced. */
  [data-rail=collapsed] .rail-status .pill{width:12px;height:12px;padding:0;
    border-radius:50%;box-sizing:border-box}
  [data-rail=collapsed] .rail-status .pill-ok{background:#a8e8c6;
    border:1px solid #a8e8c6}
  [data-rail=collapsed] .rail-status .pill-warn{background:transparent;
    border:3px solid #f2d98f}
  /* On the Integrations row the dot sits on the icon's corner, so the icon
     column stays centred. The collapsed footer cannot hold four icons side by
     side in 48px, so it stacks them as it always did. */
  [data-rail=collapsed] .rail-status-row .rail-posture{position:absolute;top:6px;right:8px;
    margin:0}
  [data-rail=collapsed] .sidebar-foot{flex-direction:column;align-items:stretch}
  [data-rail=collapsed] .sidebar-foot .rail-foot-item{width:100%;padding-inline:0}

  /* Reserve the scrollbar on BOTH edges of the nav scroller. At 64px the rail
     has 48px of content and a scrollbar taken off one side only re-centred the
     20px glyphs 7px left of the brand mark, the posture dot and the four
     footer icons — a visible break in the icon column, and it appeared and
     disappeared with the viewport height. both-edges keeps the content box
     symmetric, so the icons sit on the rail's centre line whether the nav
     scrolls or not. */
  [data-rail=collapsed] .nav{scrollbar-gutter:stable both-edges}

  /* The group labels no longer take space, so the gap that separated the
     groups has to come from the margin alone. */
  [data-rail=collapsed] .nav-group + .nav-group{margin-top:var(--space-3)}
}

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1080px){
  /* All four KPI grids step down together. .stat-row and .mini-metrics used to
     stay 4-up until 900px, so the detail pages were at their most crowded in
     the band where the visually identical home cards had already relaxed. */
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* The narrow side of the rail breakpoint. 900.02px, not 900px: this and the
   collapsed-rail block's min-width:900.021px are deliberately adjacent
   fractional widths so no viewport can fall between them. Keep them in step. */
@media (max-width:900.02px){
  .grid-2{grid-template-columns:1fr}
  /* visibility, not transform alone. A transformed element is still rendered,
     still in the accessibility tree and still in the tab order, so the closed
     rail parked 7 focusable links at x=-234px on every narrow page while
     #menu-btn advertised aria-expanded="false". The delayed visibility keeps
     the slide: hidden only once the transform has finished. */
  .sidebar{position:fixed;z-index:40;transform:translateX(-100%);visibility:hidden;
    transition:transform var(--normal) var(--ease-rail),
      visibility 0s linear var(--normal)}
  /* The shadow moves here: with no x-offset, half of --shadow-lg's 60px blur
     spilled across x=0 onto the page while the rail was shut. */
  .sidebar.open{transform:none;visibility:visible;transition-delay:0s;
    box-shadow:var(--shadow-lg)}
  /* The open rail paints over its own toggle, so without this there is no way
     to close it on touch — Escape is the only other dismissal and a phone has
     no Escape key. */
  .nav-scrim{display:block}
  .menu-btn{display:grid}
  .content{padding:var(--space-5) var(--space-4) var(--space-7)}
  .topbar{padding:0 var(--space-4)}
}
@media (max-width:620px){
  .stat-grid,.metric-row,.stat-row,.mini-metrics{grid-template-columns:1fr}
  h1{font-size:var(--text-lg)}
  .stat-value{font-size:var(--text-lg)}
  .client-head{flex-direction:column;gap:var(--space-3)}
  /* Both are decorative: .env-tag repeats what the rail status block says and
     .topbar-crumbs is aria-hidden and already an ellipsis at this width.
     Sign out used to be exempt because the topbar was the only place it
     existed; it lives in the rail footer now, so the bar sheds down to the
     nav toggle and the theme toggle — two real controls, one at each end. */
  .env-tag{display:none}
  .topbar-crumbs{display:none}
  .table-wrap{margin:0;padding:0}
  .data-table{min-width:0}
  .data-table thead{display:none}
  .data-table tr{display:block;border-bottom:1px solid var(--border);padding:11px 0}
  /* flex-wrap, because a cell can hold more than one child: the Opportunity
     cell carries a title link plus the next step, and blockification made them
     siblings on one right-aligned line. */
  .data-table td{display:flex;flex-wrap:wrap;justify-content:space-between;
    gap:var(--space-3);border:0;padding:4px 0;text-align:right}
  /* Capped rather than flex-shrink:0 — an unshrinkable 111px label ate 46% of
     a 240px row at 320px. */
  .cell-label{display:block;font-size:var(--text-xs);
    text-transform:uppercase;letter-spacing:.18em;color:var(--text-faint);
    font-weight:600;text-align:left;max-width:45%}
  .data-table td > *:not(.cell-label){min-width:0}
  .bar-row{grid-template-columns:74px 1fr 48px}
  .toolbar{padding:var(--space-3)}
  .toolbar input[type=search],.toolbar select{min-width:0;width:100%}
  .field input{min-width:0;width:100%}
  .field,.field-grow{flex:1 1 100%}
  /* The category select's 190px floor plus the Add button will not sit on one
     line inside a 240px panel, so the row stacks rather than overflowing. */
  .suggestion-form-foot{flex-direction:column;align-items:stretch}
  .suggestion-form-foot select{min-width:0;width:100%}
  .suggestion-top time{margin-left:0}
  .timeline{padding-left:18px}
  .tl-marker{left:-25px}
}
/* Below ~340px the value-plus-stage cluster on a stack row cannot sit beside
   the title without pushing the page sideways. Let it drop to its own line
   rather than clipping it or shrinking the chip text. */
@media (max-width:420px){
  .stack-row{flex-wrap:wrap}
  .stack-row .right{width:100%;justify-content:flex-start;margin-top:6px}
  /* Same reason, one row further in: a .kv label and a nowrap chip cannot
     share a line inside a 240px panel. Below ~354px the profile page's
     Environment chip hung outside the card's rounded corner, so the pair
     stacks — label, then value, both left-aligned. */
  .kv div{flex-wrap:wrap}
  .kv dd{width:100%;text-align:left}
}

/* One reduced-motion block, not two. */
@media (prefers-reduced-motion:reduce){
  /* transition-delay too, or the off-canvas rail's deferred visibility keeps
     it in the tab order for 200ms after a close that had no animation. */
  *,*::before,*::after{animation-duration:.001ms!important;
    transition-duration:.001ms!important;transition-delay:0s!important}
  .ask-loading::after{animation:none;content:"…"}
}

/* ── Filing Assistant (item 3258505579) ──────────────── */
/* Built from the existing panel, form-grid, kv, chip and data-table pieces;
   these rules only cover what the filing pages add. */
.filing-stats{margin-bottom:var(--space-5)}
.filing-upload,.filing-preview form{display:flex;flex-direction:column;gap:var(--space-3)}
.filing-upload input[type=file]{font:inherit;font-size:var(--text-sm);min-width:0;width:100%}
.filing-result{margin-top:var(--space-4);padding:var(--space-4);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg)}
.filing-result-head{display:flex;gap:var(--space-3);align-items:center;margin:0 0 var(--space-3)}
.filing-problems{margin:0 0 var(--space-3);padding-left:1.2em;color:var(--warning);
  font-size:var(--text-sm);line-height:var(--leading-normal)}
.filing-hash{word-break:break-all;font-size:var(--text-xs)}
.filing-error{color:var(--danger);font-weight:600}
.filing-branch .panel-head{flex-wrap:wrap}
.filing-contract{margin-top:var(--space-4)}
.filing-contract summary{cursor:pointer;font-size:var(--text-sm);font-weight:600}
.filing-fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;
  flex-direction:column;gap:var(--space-3)}
.filing-fieldset[disabled]{opacity:.7}
.filing-check{display:flex;gap:var(--space-2);align-items:center;font-size:var(--text-sm)}
.filing-check input{width:auto;min-width:0}
.filing-tokens dd{font-weight:400}
.filing-form-title{font-size:var(--text-md);margin:var(--space-5) 0 var(--space-3)}
.filing-panel .kv dd code,.filing-result .kv dd code{word-break:break-all}
/* A label beside a long value (the recovery reasons, item 3265547908 review)
   keeps its own words whole: with min-width:0 it shrank below "happened" and
   the value's first line ran over it. The value wraps instead. */
.filing-panel .kv dt{flex-shrink:0;max-width:45%}
/* Selects and the file picker on the filing forms take the same treatment as
   the suggestion form's select, so every control in a row lines up. */
.filing-upload select,.filing-preview select,.filing-fieldset select,
.filing-upload input[type=file]{font:inherit;font-size:var(--text-base);
  color:var(--text);background:var(--surface);
  border:1px solid var(--control-line);border-radius:var(--r);
  padding:9px 10px;min-width:0;width:100%;
  transition:border-color var(--fast) var(--ease)}
.filing-upload select:hover,.filing-preview select:hover,.filing-fieldset select:hover,
.filing-upload select:focus,.filing-preview select:focus,.filing-fieldset select:focus{
  border-color:var(--accent-ink)}
.filing-fieldset .field input[type=number]{min-width:0}
/* .field is a column; the checkbox and its label sit on one line. */
.field.filing-check{flex-direction:row;align-items:center;align-self:end;
  gap:var(--space-2);padding-bottom:10px}
.filing-preview .panel-head .pill,.filing-upload-head .pill{white-space:nowrap}
/* Templates, URLs and job ids are long unbroken strings. Left unbroken they
   widen the table past its panel, and in the phone card layout the short
   right-aligned values in the same table slide out of view. */
.filing-table code{word-break:break-all;white-space:normal}
.filing-table td{overflow-wrap:anywhere}
/* The audit trail's short columns (When, Branch, Event, By) hold short words
   and a timestamp: breaking them anywhere split "accepted" into "accepte d"
   at 1280px (item 3263658640). They break only between words; Detail keeps
   wrapping anywhere, so the table still fits its panel. */
.filing-trail td.filing-trail-short{overflow-wrap:normal;word-break:normal}
/* The timestamp stays on one line (it would otherwise break at its hyphens). */
.filing-trail td[data-label="When"]{white-space:nowrap}
/* Beats .form-grid .field input{width:100%}, which stretched the checkbox
   across the row and pushed its label to the far edge. */
.form-grid .filing-check input[type=checkbox],
.form-grid .field .filing-check input[type=checkbox]{width:auto;min-width:0;margin:0}
.field.filing-check{justify-content:flex-start}

/* ── Proposal Writer (item 3256444407) ──────────────── */
/* Built on the existing panel, chip, kv, form-grid and data-table pieces;
   these rules cover only what the proposal workspace adds. Lime stays a
   fill, never text: the primary button carries it, and so does the short
   accent bar on the cover slide's Basalt head (an accent, not the
   highlighter device, which is reserved for the Home h1). The current step
   is a Basalt pill with white ink, not lime (see the stepper below). */
.pw-stats{margin-bottom:var(--space-5)}
/* The workspace wraps its panels in one element, so it repeats .content's
   column rhythm rather than letting the panels touch. */
.pw-workspace{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.pw-workspace > *{min-width:0}
.pw-workspace > .crumbs,.pw-workspace > .pw-head,.pw-workspace > .pw-stepper{margin-bottom:0}
.pw-form{display:flex;flex-direction:column;gap:var(--space-3)}
.pw-form textarea,.pw-form select,.pw-search select,.pw-table input[type=date],
.pw-table input[type=text]{font:inherit;font-size:var(--text-base);color:var(--text);
  background:var(--surface);border:1px solid var(--control-line);border-radius:var(--r);
  padding:9px 12px;min-width:0;width:100%;
  transition:border-color var(--fast) var(--ease)}
.pw-form textarea{line-height:var(--leading-normal);resize:vertical}
.pw-form textarea:focus,.pw-form select:focus,.pw-search select:focus,
.pw-table input:focus{border-color:var(--accent-ink)}
.pw-form .field input{min-width:0;width:100%}
.pw-fieldset{border:0;margin:0;padding:0;min-width:0}
.pw-fieldset legend{margin-bottom:var(--space-2)}
.pw-template-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-3)}
.pw-template-card{display:flex;gap:var(--space-3);align-items:flex-start;cursor:pointer;
  padding:var(--space-3) var(--space-4);border:1px solid var(--control-line);
  border-radius:var(--r-lg);background:var(--surface);
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease)}
.pw-template-card:hover{border-color:var(--accent-ink)}
/* Selected: a Basalt edge, not lime -- lime is never a line on a light ground
   (BRAND 3.6), and the page's one lime fill is its primary button. */
.pw-template-card:has(input:checked){border-color:var(--accent-ink);background:var(--accent-soft);
  box-shadow:inset 3px 0 0 var(--accent-ink)}
.pw-template-card.is-disabled{cursor:not-allowed;border-style:dashed;background:var(--surface-2)}
.pw-template-card input{margin-top:4px}
.pw-template-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.pw-template-name{font-weight:600}
.pw-template-chips,.pw-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pw-head{margin-bottom:var(--space-3)}
.pw-head .small{margin-top:2px}

/* stepper */
.pw-stepper{margin:0 0 var(--space-5)}
.pw-stepper ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pw-step{display:inline-flex;align-items:center;gap:var(--space-2);padding:8px 14px 8px 8px;
  border-radius:var(--r-pill);border:1px solid var(--control-line);background:var(--surface);
  color:var(--text);font-size:var(--text-sm);font-weight:500;text-decoration:none;min-height:40px}
.pw-step:hover{border-color:var(--accent-ink);text-decoration:none;background:var(--accent-soft)}
/* The current step is a Basalt pill with white ink in BOTH themes (Basalt and
   white are theme-invariant chrome tokens), so the primary button stays the
   page's one lime fill. White on Basalt is 15.8:1. In the dark theme the
   pill's fill is close to the page ground, so --control-line draws its edge. */
.pw-step.is-current,.pw-step.is-current:hover{border-color:var(--control-line);
  background:var(--sidebar-bg);color:var(--rail-ink-strong);font-weight:600}
.pw-step-mark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border-strong);font-size:var(--text-xs);
  font-weight:700;color:var(--text)}
.pw-step-mark.is-done{background:var(--success-soft);border-color:var(--success-line);
  color:var(--success)}
.pw-step-mark.is-aux{background:transparent;border-style:dashed}
/* The mark inside the current pill: a white disc carrying Basalt ink, the
   same in both themes (15.8:1). It also overrides .is-done, so a completed
   current step keeps a visible check. */
.pw-step.is-current .pw-step-mark,.pw-step.is-current .pw-step-mark.is-done{
  background:var(--rail-ink-strong);border-color:var(--rail-ink-strong);
  color:var(--sidebar-bg)}

.pw-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;
  margin:var(--space-3) 0}
/* Smaller type, full-size target: 40px is the floor (BRAND 8.8). */
.pw-small-btn{padding:5px 11px;font-size:var(--text-sm);min-height:40px}
/* The timeline's Done box: the label around it is the 40px target. */
.pw-check{display:inline-flex;align-items:center;justify-content:center;min-width:40px;
  min-height:40px;cursor:pointer}
.pw-check input{margin:0;width:18px;height:18px}
/* The phone card layout sets min-width:0 on every cell child; the target
   keeps its 40px there too. */
.data-table td > label.pw-check{min-width:40px;min-height:40px}

/* sources */
.pw-source-group + .pw-source-group{margin-top:var(--space-5)}
.pw-source-group h3,.pw-subhead{font-size:var(--text-md);margin:0 0 var(--space-3)}
.pw-subhead{margin-top:var(--space-5)}
.pw-source-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pw-source{padding:var(--space-3) 0;border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:6px;min-width:0}
.pw-source:last-child{border-bottom:0}
.pw-source-top{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.pw-source-top .inline-form{margin-left:auto}
.pw-search{box-shadow:none;padding:0;background:transparent;margin:var(--space-3) 0}

/* inputs */
.pw-missing-list{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:6px;
  font-size:var(--text-sm);line-height:var(--leading-normal)}
.pw-module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--space-2);margin-bottom:var(--space-3)}
.pw-module{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-2) var(--space-3);
  border:1px solid var(--border);border-radius:var(--r);font-size:var(--text-sm)}
.pw-module input{margin-top:3px}
.pw-eyebrow{margin:0 0 2px;font-size:var(--text-xs);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint)}
.pw-section > .panel-head h2{margin:0}
.pw-slot{padding:var(--space-4) 0;border-top:1px solid var(--border);display:flex;
  flex-direction:column;gap:var(--space-2);min-width:0}
.pw-slot-head{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);
  align-items:center;justify-content:space-between}
.pw-slot-head h3{margin:0;font-size:var(--text-base)}
.pw-slot-form{margin-top:var(--space-2)}
.pw-value{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--text-base);
  line-height:var(--leading-normal);color:var(--text);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r);padding:var(--space-3)}
.pw-value.is-past{font-size:var(--text-sm);color:var(--text-muted)}
.pw-prov{font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-normal)}
.pw-prov-text{margin:0}
.pw-cites{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;
  font-size:var(--text-sm)}
.pw-needs{margin:0;background:var(--warning-soft);color:var(--warning);
  border:1px solid var(--warning-line);border-radius:var(--r);padding:10px 14px;
  font-size:var(--text-sm);line-height:var(--leading-normal)}
.pw-needs a{color:inherit;font-weight:600}
.pw-confirm{margin:0;font-size:var(--text-sm);color:var(--warning)}
.pw-fixed{background:var(--draft-soft);border:1px dashed var(--draft-line);
  border-radius:var(--r);padding:10px 14px;font-size:var(--text-sm);color:var(--text-muted)}
.pw-fixed p{margin:4px 0 0}
.pw-hints,.pw-history,.pw-dependency,.pw-reopen{font-size:var(--text-sm)}
.pw-hints summary,.pw-history summary,.pw-dependency summary,.pw-reopen summary{
  cursor:pointer;font-weight:600;color:var(--accent-ink);padding:4px 0}
.pw-hints ul,.pw-history ol{margin:var(--space-2) 0 0;padding-left:1.2em;
  display:flex;flex-direction:column;gap:6px;color:var(--text-muted)}
.pw-voice{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.pw-voice[hidden],.pw-voice-fallback[hidden],[data-print][hidden]{display:none}
/* Listening is information, not an error: the info triplet, not danger. */
.pw-voice-btn[aria-pressed=true]{border-color:var(--info);color:var(--info);
  background:var(--info-soft)}
.pw-voice-note[hidden]{display:none}
.pw-edit{font-size:var(--text-sm)}
.pw-edit > summary{cursor:pointer;font-weight:600;color:var(--accent-ink);padding:4px 0}
.pw-edit[open] > summary{margin-bottom:var(--space-2)}
.pw-voice-fallback{margin:0}

/* draft slides */
.pw-watermark{margin:0 0 var(--space-3);background:var(--warning-soft);color:var(--warning);
  border:1px solid var(--warning-line);border-radius:var(--r);padding:10px 14px;
  font-size:var(--text-sm);font-weight:600}
.pw-slides{display:grid;gap:var(--space-5);margin-top:var(--space-5)}
.pw-slide{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow);
  overflow:hidden;min-width:0}
.pw-slide-head{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:2px}
.pw-slide-head h3{margin:0;font-size:var(--text-lg);color:var(--heading-ink)}
.pw-slide-no{font-size:var(--text-xs);color:var(--text-faint);font-variant-numeric:tabular-nums}
.pw-slide.is-cover .pw-slide-head{background:var(--sidebar-bg);border-bottom:0}
.pw-slide.is-cover .pw-slide-head h3{color:var(--rail-ink-strong)}
.pw-slide.is-cover .pw-slide-head .pw-eyebrow,
.pw-slide.is-cover .pw-slide-no{color:var(--rail-ink-muted)}
/* A short lime accent bar on the cover's Basalt ground (BRAND 2.1 rule 1: on
   Basalt, white text and lime for accent only). It is not the highlighter
   device, which is reserved for the Home h1. A fill with no text on it. */
.pw-slide.is-cover .pw-slide-head h3::after{content:"";display:block;width:72px;height:6px;
  margin-top:10px;background:var(--accent);transform:skewX(-18deg)}
.pw-slide-body{padding:var(--space-4) var(--space-5);display:grid;gap:var(--space-4)}
.pw-slot-out{display:flex;flex-direction:column;gap:6px;min-width:0}
/* A chip inside an uppercase, letter-spaced field label (the Demo chip on
   the Draft step and the print view) keeps the one chip casing used
   everywhere else: "Demo", not "DEMO". */
.field-label .chip{text-transform:none;letter-spacing:normal}
/* The pricing table scrolls sideways inside its slide card at phone width
   instead of being clipped by the card's overflow:hidden. */
.pw-price-wrap{overflow-x:auto;max-width:100%}
.pw-price{border-collapse:collapse;width:100%;font-size:var(--text-sm)}
.pw-price th,.pw-price td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);
  white-space:nowrap}
.pw-price th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;
  color:var(--text-faint)}

/* review */
.pw-issues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.pw-issue{display:flex;gap:var(--space-2);align-items:baseline;font-size:var(--text-sm);
  line-height:var(--leading-normal)}
.pw-issue .chip{flex:none}
/* Paths, hashes and SharePoint locations are long unbroken strings; left
   alone they widen the page at phone width. */
.pw-issue > span,.pw-prov,.pw-needs,.pw-deps,.pw-notes,.pw-print-foot,.pw-print-sources,
.pw-template .kv dd,.pw-template code,.pw-template p,.pw-head p,.pw-dependency p,.pw-watermark{
  min-width:0;overflow-wrap:anywhere}
.pw-decide{margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.pw-diff{margin:0;padding-left:1.2em;font-size:var(--text-sm);display:flex;flex-direction:column;
  gap:6px}
.pw-before{color:var(--text-muted)}
.pw-after{color:var(--success);font-weight:500}
.pw-inline-grid{flex-direction:row;flex-wrap:wrap;align-items:flex-end;margin-bottom:var(--space-4)}
.pw-table td{overflow-wrap:anywhere}
.pw-table .btn{white-space:nowrap}
.data-table.pw-compact{min-width:0}
.grid-2.pw-grid-top{align-items:start}
.pw-table code.pw-ref{white-space:nowrap;word-break:normal}
.pw-workspace .panel > .prose,.pw-new > .prose,.pw-template > .prose{margin:0 0 var(--space-4)}
.pw-table code{word-break:break-all;white-space:normal}
.pw-table input[type=date],.pw-table input[type=text]{padding:6px 8px;min-width:120px}
.pw-plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pw-notes,.pw-deps{margin:var(--space-3) 0;padding-left:1.2em;font-size:var(--text-sm);
  line-height:var(--leading-normal);color:var(--text-muted);display:flex;flex-direction:column;gap:6px}
.pw-template .kv{margin-bottom:var(--space-3)}

/* standalone print view */
.pw-print-body{background:var(--bg)}
.pw-print{max-width:1040px;margin:0 auto;padding:var(--space-5) 16px var(--space-7)}
.pw-print-band{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;
  background:var(--sidebar-bg);color:var(--rail-ink-strong);border-radius:var(--r-xl);
  padding:var(--space-5)}
.pw-print-band h1{margin:4px 0;color:var(--rail-ink-strong);font-size:var(--text-xl)}
.pw-print-band p{margin:0;color:var(--rail-ink)}
.pw-print-band .pw-eyebrow{color:var(--rail-ink-muted)}
.pw-print-brand{color:var(--rail-ink-strong);width:160px;flex:none}
.pw-print-brand .wordmark{width:100%;height:auto;fill:currentColor}
.pw-print .pw-watermark{margin-top:var(--space-4)}
.pw-rendering{margin:0 0 var(--space-3);font-size:var(--text-sm);color:var(--text-muted)}
.pw-print-actions{display:flex;gap:var(--space-3);flex-wrap:wrap}
.pw-print-sources{margin-top:var(--space-6);font-size:var(--text-sm)}
.pw-print-foot{margin-top:var(--space-5);font-size:var(--text-xs);color:var(--text-faint)}
@media (max-width:720px){
  .pw-slide-head,.pw-slide-body{padding:var(--space-3) var(--space-4)}
  .pw-source-top .inline-form{margin-left:0}
}
/* "Technical detail" (BRAND 9.9): collapsed by default, 12px mono. */
.tech-detail{margin-top:var(--space-3);font-size:var(--text-xs);color:var(--text-muted)}
.tech-detail > summary{cursor:pointer;font-weight:600;color:var(--accent-ink);padding:10px 0;
  min-height:40px;box-sizing:border-box;line-height:20px;font-family:inherit;
  font-size:var(--text-sm)}
.tech-detail-body{font-family:var(--mono);font-size:var(--text-xs);overflow-wrap:anywhere;
  display:flex;flex-direction:column;gap:6px;margin-top:6px}
.tech-detail-body code{background:transparent;padding:0}
@media print{
  .pw-print-actions,.skip-link,.tech-detail{display:none!important}
  .pw-print-body{background:var(--surface)}
  .pw-slide{box-shadow:none;border:1px solid var(--border-strong);break-inside:avoid}
  .pw-price-wrap{overflow:visible}
  .pw-price th,.pw-price td{white-space:normal}
  .pw-print-band{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pw-slide.is-cover .pw-slide-head{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ── CIH home and Proposal Writer refresh ───────────────────────
   Based on Luke's Client Intelligence Hub screen references. Existing route,
   data, access and approval rules remain the source of truth; these classes
   only restyle those server-rendered workflows. */

/* Home launcher */
.content-home{gap:0;padding-top:0;padding-bottom:var(--space-8)}
.content-home>.page-head{display:none}
.home-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:#09262d;margin:0 calc(-1 * var(--space-5));padding:34px var(--space-5) 38px;
  min-height:275px;display:flex;align-items:center}
.home-hero-copy{position:relative;z-index:2;width:min(760px,72%)}
.home-greeting,.home-section-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.19em;
  line-height:1.35;text-transform:uppercase}
.home-greeting{color:#cbff02;margin:0 0 12px}
.home-hero h1{color:#fff;font-size:clamp(2rem,1.4rem + 2vw,3.1rem);line-height:1.12;
  max-width:780px;font-weight:700}
.home-hero h1 em{position:relative;z-index:0;isolation:isolate;display:inline-block;
  color:#09262d;font-family:var(--font-accent);font-style:italic;font-weight:800}
.home-hero h1 em::before{content:"";position:absolute;z-index:-1;inset:.08em -.17em .06em;
  background:#cbff02;transform:skewX(-1.6deg);border-radius:2px}
.home-hero-lede{color:rgba(255,255,255,.78);font-size:var(--text-md);margin-top:8px}
.home-ask{display:flex;align-items:center;gap:12px;max-width:760px;margin-top:26px;
  min-height:62px;background:#fff;border:1px solid rgba(255,255,255,.42);border-radius:16px;
  padding:7px 8px 7px 18px;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.home-ask-icon{font-size:27px;line-height:1;color:#596c70;transform:rotate(-25deg)}
.home-ask input{flex:1;min-width:0;border:0;outline:0;box-shadow:none;background:transparent;
  color:#09262d;font:inherit;font-size:var(--text-base)}
.home-ask input::placeholder{color:#7c8d91;opacity:1}
.home-ask .btn{min-width:96px;min-height:46px}
.home-hero-art{position:absolute;z-index:1;inset:0 0 0 66%;overflow:hidden;pointer-events:none}
.hero-ring{position:absolute;width:210px;height:210px;border:18px solid rgba(255,255,255,.1);
  border-radius:50%;right:57%;top:-58px;box-shadow:inset 0 0 0 15px #09262d,
  inset 0 0 0 33px rgba(255,255,255,.1),0 0 0 16px #09262d,0 0 0 33px rgba(255,255,255,.08)}
.hero-arrow{position:absolute;right:8%;top:52px;width:0;height:0;border-top:74px solid transparent;
  border-bottom:74px solid transparent;border-left:166px solid #cbff02;transform:rotate(-8deg)}
.hero-dots{position:absolute;right:-10px;bottom:35px;width:104px;height:104px;
  background-image:radial-gradient(circle,#cbff02 0 18px,transparent 19px);
  background-size:39px 39px}
.home-assistants,.home-resume,.home-portfolio{padding:24px var(--space-5) 0}
.home-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px}
.home-section-label{color:var(--text-faint);margin:0}
.home-demo-chip,.home-draft-chip{display:inline-flex;align-items:center;min-height:27px;padding:3px 11px;
  border-radius:999px;background:#e4eaec;color:#43565a;font-size:var(--text-xs);font-weight:600}
.assistant-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.assistant-card{--assistant-band:#09262d;position:relative;min-width:0;min-height:245px;overflow:hidden;
  border:1px solid rgba(9,38,45,.08);border-radius:20px;background:var(--surface);
  box-shadow:var(--shadow);transition:transform var(--normal) var(--ease),box-shadow var(--normal) var(--ease)}
.assistant-card::before{content:"";position:absolute;inset:0 0 auto;height:116px;background:var(--assistant-band)}
.assistant-card::before{background-image:
  radial-gradient(circle at 64% 122%,rgba(9,38,45,.12) 0 48px,transparent 49px),
  linear-gradient(138deg,transparent 78%,rgba(9,38,45,.12) 78% 92%,transparent 92%)}
.assistant-card::after{content:"";position:absolute;right:-22px;top:-34px;width:130px;height:130px;
  border:18px solid rgba(9,38,45,.07);border-radius:50%;pointer-events:none}
.assistant-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.assistant-card-link{position:relative;z-index:1;display:flex;min-height:245px;flex-direction:column;
  align-items:flex-start;padding:18px 20px 17px;color:var(--heading-ink);text-decoration:none!important}
.assistant-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  color:#09262d;background:#fff}
.assistant-icon svg,.home-resume-mark svg{width:25px;height:25px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.assistant-card-title{margin-top:8px;color:var(--assistant-title,#09262d);font-size:21px;font-weight:700;
  line-height:1.2}
.assistant-card-copy{margin-top:18px;color:var(--text-muted);font-size:var(--text-base);line-height:1.45}
.assistant-card-action{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:15px;
  color:var(--heading-ink);font-size:var(--text-sm);font-weight:700}
.assistant-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;margin-top:auto;padding-top:15px}
.assistant-card-footer .assistant-card-action{margin:0;padding:10px 16px;min-height:40px;
  border-radius:999px;background:#09262d;color:#fff;white-space:nowrap}
.assistant-card-footer .assistant-card-action>span{color:#cbff02;font-size:18px;line-height:1}
.assistant-card-status{display:inline-flex;align-items:center;gap:7px;min-width:0;color:#849497;
  font-size:var(--text-xs);line-height:1.3;text-align:right}
.assistant-card-status i{display:block;width:9px;height:9px;flex:0 0 9px;border-radius:50%;
  background:var(--status-dot,#9db0b3)}
.assistant-proposal{--assistant-band:#cbff02}
.assistant-documents{--assistant-band:#45b97c}
.assistant-contracts{--assistant-band:#09262d;--assistant-title:#fff}
.assistant-rfx{--assistant-band:#1b6b6e;--assistant-title:#fff}
.assistant-handover{--assistant-band:#9db0b3}
.assistant-filing{--assistant-band:#bfe8d1}
.home-resume{padding-top:26px}
.home-resume-card{display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1px solid var(--border);border-left:6px solid #cbff02;border-radius:0 17px 17px 0;
  padding:14px 18px;box-shadow:var(--shadow)}
.home-resume-mark{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;
  border-radius:13px;background:#cbff02;color:#09262d}
.home-resume-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.home-resume-copy strong{font-size:var(--text-md);color:var(--heading-ink)}
.home-resume-copy span{color:var(--text-muted);font-size:var(--text-sm)}
.home-resume-button{display:inline-flex;align-items:center;gap:8px;background:#09262d;color:#fff;
  padding:10px 17px;border-radius:999px;font-weight:700;white-space:nowrap}
.home-portfolio{padding-top:28px}
.home-portfolio>.grid-2{margin-top:18px}

/* Proposal start screen */
.content-proposals{--assistant-head-bg:#cbff02;--assistant-head-fg:#09262d;--assistant-head-eyebrow:#09262d;
  --assistant-head-ring:rgba(9,38,45,.11);--assistant-head-shape:#09262d}
.content-documents{--assistant-head-bg:#45b97c;--assistant-head-fg:#09262d;--assistant-head-eyebrow:#09262d;
  --assistant-head-ring:rgba(9,38,45,.11);--assistant-head-shape:#09262d}
.content-contracts{--assistant-head-bg:#09262d;--assistant-head-fg:#fff;--assistant-head-eyebrow:#cbff02;
  --assistant-head-ring:rgba(255,255,255,.13);--assistant-head-shape:#cbff02}
.content-rfx{--assistant-head-bg:#1b6b6e;--assistant-head-fg:#fff;--assistant-head-eyebrow:#cbff02;
  --assistant-head-ring:rgba(255,255,255,.15);--assistant-head-shape:#cbff02}
.content-handover{--assistant-head-bg:#9db0b3;--assistant-head-fg:#09262d;--assistant-head-eyebrow:#09262d;
  --assistant-head-ring:rgba(9,38,45,.11);--assistant-head-shape:#09262d}
.content-filing{--assistant-head-bg:#bfe8d1;--assistant-head-fg:#09262d;--assistant-head-eyebrow:#09262d;
  --assistant-head-ring:rgba(9,38,45,.11);--assistant-head-shape:#09262d}
.content-proposals>.page-head,.content-documents>.page-head,.content-contracts>.page-head,
.content-rfx>.page-head,.content-handover>.page-head,.content-filing>.page-head{position:relative;isolation:isolate;overflow:hidden;
  background:var(--assistant-head-bg);margin:-32px calc(-1 * var(--space-5)) 0;padding:24px var(--space-5) 27px;
  min-height:150px;justify-content:center}
.content-proposals>.page-head::before,.content-documents>.page-head::before,.content-contracts>.page-head::before,
.content-rfx>.page-head::before,.content-handover>.page-head::before,.content-filing>.page-head::before{content:"";position:absolute;z-index:-1;right:18%;top:-90px;width:205px;height:205px;
  border:17px solid var(--assistant-head-ring);border-radius:50%;box-shadow:inset 0 0 0 15px var(--assistant-head-bg),
  inset 0 0 0 33px var(--assistant-head-ring),0 0 0 15px var(--assistant-head-bg),0 0 0 31px var(--assistant-head-ring)}
.content-proposals>.page-head::after,.content-documents>.page-head::after,.content-contracts>.page-head::after,
.content-rfx>.page-head::after,.content-handover>.page-head::after,.content-filing>.page-head::after{content:"";position:absolute;z-index:-1;right:5%;top:25px;width:0;height:0;
  border-left:100px solid transparent;border-right:100px solid transparent;border-bottom:118px solid var(--assistant-head-shape);
  transform:rotate(14deg)}
.content-proposals .eyebrow,.content-documents .eyebrow,.content-contracts .eyebrow,
.content-rfx .eyebrow,.content-handover .eyebrow,.content-filing .eyebrow{color:var(--assistant-head-eyebrow)}
.content-proposals .page-head h1,.content-documents .page-head h1,.content-contracts .page-head h1,
.content-rfx .page-head h1,.content-handover .page-head h1,.content-filing .page-head h1{font-size:clamp(2rem,1.2rem + 2vw,2.8rem);font-weight:700;color:var(--assistant-head-fg)}
.content-proposals .page-sub,.content-documents .page-sub,.content-contracts .page-sub,
.content-rfx .page-sub,.content-handover .page-sub,.content-filing .page-sub{color:var(--assistant-head-fg);opacity:.82;max-width:70ch}
.content-proposals .pw-workspace{gap:18px}
.content-proposals .pw-workspace>.crumbs{margin:0}
.content-proposals .pw-head{padding:0;background:transparent;border:0;box-shadow:none}
.proposal-start-stepper{margin:0}
.proposal-start-stepper ol{cursor:default}
.proposal-start-stepper .pw-step:not(.is-current){color:#516569;border-color:#d2dbdd}
.proposal-start{min-width:0}
.proposal-start-form{gap:22px}
.proposal-start-templates,.proposal-start-deal{padding:22px 24px;background:var(--surface);
  border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}
.proposal-start-templates>legend.proposal-section-label{position:relative;top:0;margin:0 0 11px;padding:0}
.proposal-section-label{margin:0 0 7px;color:#5a7276;font-size:var(--text-xs);font-weight:700;
  letter-spacing:.18em;line-height:1.3;text-transform:uppercase}
.proposal-start-templates .prose{margin:0 0 16px}
.proposal-start .pw-template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.proposal-start .pw-template-card{position:relative;display:flex;flex-direction:column;gap:14px;
  padding:14px;border:2px solid transparent;border-radius:17px;background:var(--surface-2);}
.proposal-start .pw-template-card:hover{border-color:#789094}
.proposal-start .pw-template-card:has(input:checked){border-color:#09262d;background:#fff;
  box-shadow:inset 0 0 0 1px #09262d}
.proposal-start .pw-template-card input{position:absolute;z-index:2;top:17px;left:17px;width:20px;height:20px;
  accent-color:#09262d}
.pw-template-art{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:9px;min-height:180px;overflow:hidden;padding:22px 24px 20px 30px;
  aspect-ratio:2.1/1;border-radius:12px;background:linear-gradient(90deg,#09262d 54%,#bfe8d1 54%);color:#fff}
.pw-template-art::before{content:"";position:absolute;z-index:-1;right:-35px;top:-70px;width:180px;height:180px;
  border:17px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:inset 0 0 0 15px transparent,
  inset 0 0 0 32px rgba(255,255,255,.14)}
.pw-template-art::after{content:"";position:absolute;z-index:-1;right:26px;bottom:20px;width:0;height:0;
  border-top:44px solid transparent;border-bottom:44px solid transparent;border-left:78px solid #cbff02;
  transform:rotate(-8deg)}
.pw-template-art-common{background:linear-gradient(90deg,#1b6b6e 54%,#d4e8dc 54%)}
.pw-art-brand{font-size:13px;letter-spacing:-.04em}
.pw-art-brand strong{font-weight:700}
.pw-art-label{margin-top:8px;color:#cbff02;font-size:var(--text-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.pw-art-title{max-width:62%;font-size:clamp(1rem, .7rem + .7vw, 1.4rem);line-height:1.2;color:#fff}
.pw-art-mark{position:absolute;right:48px;bottom:33px;color:#09262d;font-size:30px;transform:rotate(-12deg)}
.proposal-start .pw-template-body{gap:8px;padding:0 5px 4px}
.proposal-start .pw-template-name{font-size:var(--text-md);color:var(--heading-ink)}
.proposal-start .pw-template-chips{gap:6px}
.proposal-start .pw-template-card .muted{line-height:1.35}
.proposal-client-select{max-width:460px;margin:0 0 18px}
.proposal-client-select .field-label{display:block;margin:0 0 6px;color:#5a7276;font-size:var(--text-xs);
  font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.proposal-brief-heading{margin:0 0 16px}
.proposal-brief-heading h2{margin:0 0 4px;color:var(--heading-ink);font-size:var(--text-md)}
.proposal-brief-heading .muted{margin:0}
.pw-new-brief-set{display:grid;gap:20px;margin:18px 0 0;padding:0;border:0}
.pw-new-brief-set[hidden]{display:none}
.proposal-start-deal .pw-quickbrief-question{grid-template-columns:34px minmax(0,1fr)}
.proposal-start-deal .pw-quickbrief-title{margin:0;color:#09262d;font-size:var(--text-base);font-weight:700;line-height:1.35}
.proposal-start-deal .pw-quickbrief-question textarea{min-height:48px}
.proposal-start-deal{padding:22px 24px 18px}
.proposal-deal-fields{display:grid;grid-template-columns:minmax(220px,1fr) minmax(190px,1fr) minmax(190px,1fr);
  gap:18px;align-items:end}
.proposal-deal-fields>div:first-child{grid-column:1/-1}
.proposal-deal-fields h2{font-size:var(--text-md);margin-bottom:4px}
.proposal-deal-fields .field{margin:0}
.proposal-extra-fields{margin-top:14px}
.proposal-extra-fields>summary,.proposal-support>summary{cursor:pointer;color:var(--heading-ink);
  font-size:var(--text-sm);font-weight:650;padding:8px 0}
.proposal-extra-fields .form-grid{margin-top:12px}
.proposal-type-note{margin:12px 0 0}
.proposal-start-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-top:16px;margin-top:14px;border-top:1px solid var(--border);color:var(--text-muted);font-size:var(--text-sm)}
.proposal-start-actions .btn{min-width:170px;justify-content:center}
.proposal-recent{margin-top:2px}
.proposal-recent .panel-head{align-items:center}
.proposal-recent .panel-head h2{font-size:var(--text-md)}
.proposal-support{padding:15px 20px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);box-shadow:var(--shadow)}
.proposal-support>p{margin:6px 0}
.proposal-support-links{display:flex;gap:18px;margin-top:12px!important}
.proposal-support-links a{font-size:var(--text-sm);font-weight:650;text-decoration:underline}

/* Shared three-step workspace */
.content-proposals .pw-stepper{margin:0}
.content-proposals .pw-stepper ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:999px;
  box-shadow:0 2px 3px rgba(9,38,45,.04)}
.content-proposals .pw-stepper li{position:relative;min-width:0}
.content-proposals .pw-stepper li+li::before{content:"→";position:absolute;left:-10px;top:50%;z-index:2;
  color:#a8b8ba;transform:translateY(-50%);font-size:20px}
.content-proposals .pw-step{display:flex;align-items:center;gap:12px;min-height:62px;width:100%;
  padding:10px 20px;border:0;border-radius:0;background:transparent;font-size:var(--text-base);
  font-weight:600;color:#09262d}
.content-proposals .pw-step:hover{background:#f7f9f9}
.content-proposals .pw-step.is-current,.content-proposals .pw-step.is-current:hover{
  background:#fff;color:#09262d}
.content-proposals .pw-step-mark{width:34px;height:34px;flex:0 0 34px;background:#09262d;
  border:2px solid #09262d;color:#cbff02;font-size:var(--text-base)}
.content-proposals .pw-step.is-current .pw-step-mark{background:#cbff02;color:#09262d;border-color:#09262d}
.content-proposals .pw-step-mark.is-done{background:#09262d;color:#cbff02}
.pw-step-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:-10px;
  font-size:var(--text-xs);color:var(--text-muted)}
.pw-step-tools a{color:var(--text-muted);text-decoration:underline;text-underline-offset:3px}
.content-proposals .pw-head p{margin:0}
.content-proposals .pw-head .muted{color:var(--text-muted)}
.content-proposals .pw-head code{font-size:var(--text-xs)}
.content-proposals .pw-workspace>.pw-stepper{margin:0}
.proposal-source-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 20px;background:#09262d;color:#fff;border-radius:17px;box-shadow:var(--shadow)}
.proposal-source-strip>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.proposal-source-strip .proposal-section-label{color:#cbff02}
.proposal-source-strip strong{font-size:var(--text-md)}
.proposal-source-strip>div>span:last-child{color:rgba(255,255,255,.75);font-size:var(--text-sm)}
.proposal-source-strip .btn{white-space:nowrap}
.proposal-source-strip .ghost-link{color:#fff;white-space:nowrap}
.proposal-brief-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;align-items:start}
.proposal-brief-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.proposal-brief-main>.pw-section{margin:0}
.proposal-brief-main>.pw-section .panel-head h2{font-size:var(--text-md)}
.proposal-brief-aside{position:sticky;top:18px;padding:22px 20px;background:#09262d;color:#fff;
  border-radius:19px;box-shadow:var(--shadow)}
.proposal-brief-aside .proposal-section-label{color:#cbff02}
.proposal-brief-aside h2{color:#fff;font-size:var(--text-lg)}
.proposal-brief-aside>p:not(.proposal-section-label):not(.proposal-demo-note){margin:10px 0;color:rgba(255,255,255,.8)}
.proposal-brief-aside ul{display:grid;gap:10px;margin:19px 0 23px;padding:0;list-style:none}
.proposal-brief-aside li{position:relative;padding-left:22px;color:rgba(255,255,255,.88);font-size:var(--text-sm)}
.proposal-brief-aside li::before{content:"✓";position:absolute;left:0;color:#cbff02;font-weight:700}
.proposal-brief-aside .btn{background:#fff;color:#09262d;border-color:#fff}
.proposal-demo-note{margin-top:16px;color:#c2d0d2;font-size:var(--text-xs);line-height:1.5}
.proposal-next-action{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;border-top:1px solid var(--border);color:var(--text-muted);font-size:var(--text-sm)}

/* The Quick brief is the single five-question intake for the two approved decks. */
.pw-quickbrief-form{min-width:0}
.pw-quickbrief-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.8fr);
  gap:22px;align-items:start}
.pw-quickbrief-panel{display:grid;gap:21px;min-width:0;padding:25px 28px;background:#fff;
  border:1px solid #dce4e5;border-radius:21px;box-shadow:0 2px 3px rgba(9,38,45,.06)}
.pw-quickbrief-heading h2{margin:0;color:#09262d;font-size:var(--text-xl);font-weight:750}
.pw-quickbrief-heading p{margin:4px 0 0;color:#5c6f73;font-size:var(--text-sm)}
.pw-quickbrief-question{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.pw-quickbrief-number{display:grid;place-items:center;width:32px;height:32px;background:#cbff02;
  border:2px solid #09262d;border-radius:50%;color:#09262d;font-weight:750}
.pw-quickbrief-question-body{display:grid;gap:5px;min-width:0}
.pw-quickbrief-title{color:#09262d;font-size:var(--text-base);font-weight:700;line-height:1.35}
.pw-quickbrief-hint{margin:0 0 6px;color:#859598;font-size:var(--text-xs);line-height:1.45}
.pw-quickbrief-question textarea{width:100%;min-height:48px;padding:11px 14px;background:#fff;
  border:1px solid #b7c6c8;border-radius:12px;color:#2d4a4f;line-height:1.45}
.pw-quickbrief-question textarea:focus{border-color:#09262d;outline:3px solid rgba(203,255,2,.42)}
.pw-quickbrief-question input[type=text]{width:100%;min-height:44px;padding:10px 14px;background:#fff;
  border:1px solid #b7c6c8;border-radius:12px;color:#2d4a4f;font:inherit;line-height:1.45}
.pw-quickbrief-question input[type=text]:focus{border-color:#09262d;outline:3px solid rgba(203,255,2,.42)}
.pw-quickbrief-extra .pw-quickbrief-number{background:#fff}
.pw-quickbrief-more{border:1px solid #d3dfe1;border-radius:12px;background:#fff;margin-top:8px}
.pw-quickbrief-more>summary{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;
  padding:11px 14px;color:#09262d;font-size:var(--text-sm);font-weight:700;cursor:pointer}
.pw-quickbrief-more[open]>summary{border-bottom:1px solid #e3ecee}
.pw-quickbrief-more-count{color:#5c6f73;font-size:var(--text-xs);font-weight:600}
.pw-quickbrief-more-body{display:grid;gap:16px;padding:14px}
.pw-quickbrief-more-q{display:grid;gap:5px;min-width:0}
.pw-quickbrief-more-q .pw-quickbrief-title{font-size:var(--text-sm)}
.pw-quickbrief-options{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 3px}
.pw-quickbrief-choice{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;
  padding:8px 13px;border:1px solid #c8d5d7;border-radius:999px;background:#fff;
  color:#09262d;font-size:var(--text-sm);font-weight:600;cursor:pointer}
.pw-quickbrief-choice:has(input:checked){border-color:#09262d;background:#09262d;color:#fff}
.pw-quickbrief-choice input{width:16px;height:16px;margin:0;accent-color:#cbff02}
.pw-quickbrief-file{display:flex;align-items:center;gap:11px;min-width:0;padding:10px 13px;
  border:1px solid #a4c43b;border-radius:12px;background:#fff}
.pw-file-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;
  border-radius:9px;background:#e8f4ed;color:#45b97c;font-size:21px;font-weight:700}
.pw-quickbrief-file label{display:grid;gap:2px;min-width:0;flex:1;cursor:pointer}
.pw-quickbrief-file label strong{color:#09262d;font-size:var(--text-sm)}
.pw-quickbrief-file label span,.pw-attached-file{color:#829295;font-size:var(--text-xs)}
.pw-quickbrief-file input[type=file]{max-width:100%;margin-top:6px;color:#5c6f73;font-size:var(--text-xs)}
.pw-attached-file{padding:5px 8px;border-radius:999px;background:#edf7f1;color:#17603c;white-space:nowrap}
.pw-quickbrief-aside{position:sticky;top:18px;display:flex;flex-direction:column;gap:12px;min-width:0;
  min-height:420px;padding:25px 26px;background:#09262d;color:#fff;border-radius:20px;
  box-shadow:var(--shadow);overflow:hidden}
.pw-quickbrief-aside::after{content:"";position:absolute;right:-18px;top:20px;width:0;height:0;
  border-top:48px solid transparent;border-bottom:48px solid transparent;border-left:100px solid #cbff02;
  transform:rotate(-18deg);opacity:.96}
.pw-quickbrief-aside>*{position:relative;z-index:1}
.pw-quickbrief-aside .proposal-section-label{color:#cbff02}
.pw-quickbrief-aside h2{max-width:280px;margin:0;color:#fff;font-size:var(--text-xl);line-height:1.25}
.pw-quickbrief-aside ul{display:grid;gap:12px;margin:18px 0 14px;padding:0;list-style:none}
.pw-quickbrief-aside li{position:relative;padding-left:23px;color:#c7d3d5;font-size:var(--text-sm)}
.pw-quickbrief-aside li::before{content:"✓";position:absolute;left:0;color:#cbff02;font-weight:800}
.pw-quickbrief-autofill{margin:auto 0 8px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);
  color:#c7d3d5;font-size:var(--text-sm);line-height:1.55}
.pw-quickbrief-autofill strong{color:#9db0b3;font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase}
.pw-quickbrief-aside .btn{width:100%;min-height:50px;justify-content:space-between;padding-inline:18px;
  background:#cbff02;border-color:#cbff02;color:#09262d;font-weight:750}

/* Review / download. The thumbnail rail activates only when JS enhancement
   loads; with JS off every slide remains visible and readable in order. */
.proposal-review-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.proposal-review-main{min-width:0}
.proposal-review-main>.pw-watermark,.proposal-review-main>.proposal-rendering-note{display:none}
.proposal-review-columns{min-width:0}
.proposal-review-columns.is-enhanced{display:grid;grid-template-columns:minmax(175px,220px) minmax(0,1fr);
  grid-template-rows:auto auto auto;gap:0 18px;align-items:stretch}
.proposal-review-columns.is-enhanced>.proposal-review-state{grid-column:2;grid-row:1;margin:0;padding:17px 22px 10px;
  background:#fff;border:1px solid #dce4e5;border-bottom:0;border-radius:18px 18px 0 0}
.proposal-review-columns.is-enhanced .pw-review-slides{display:contents}
.proposal-review-columns.is-enhanced .pw-slide-thumbs{grid-column:1;grid-row:1 / span 3;max-height:none;
  padding:20px 12px;background:#fff;border:1px solid #dce4e5;border-radius:18px;box-shadow:0 2px 3px rgba(9,38,45,.06)}
.pw-slide-total{margin:0 8px 5px;color:#5c6f73;font-size:var(--text-xs);font-weight:750;
  letter-spacing:.16em;text-transform:uppercase}
.proposal-review-columns.is-enhanced .pw-slide-stage{grid-column:2;grid-row:2;min-width:0;padding:0 22px 16px;
  background:#fff;border-inline:1px solid #dce4e5}
.proposal-review-columns.is-enhanced .pw-slide-count{display:none}
.proposal-review-columns.is-enhanced .pw-slides{margin:0}
.proposal-review-columns.is-enhanced .proposal-slide-editor{grid-column:2;grid-row:3;min-width:0;padding:0 22px 22px;
  background:#fff;border:1px solid #dce4e5;border-top:0;border-radius:0 0 18px 18px;box-shadow:0 2px 3px rgba(9,38,45,.06)}
.proposal-slide-editor{display:grid;gap:10px}
.proposal-slide-editor textarea{width:100%;min-height:58px;padding:11px 14px;border:1px solid #b7c6c8;
  border-radius:12px;background:#fff;color:#2d4a4f;line-height:1.45}
.proposal-slide-editor textarea:focus{border-color:#09262d;outline:3px solid rgba(203,255,2,.42)}
.proposal-slide-editor .btn{justify-self:start}
.proposal-slide-edit-actions{display:flex;flex-wrap:wrap;gap:10px}
.proposal-review-state{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.proposal-review-state .proposal-section-label{margin-bottom:4px}
.proposal-review-state h2{font-size:var(--text-lg)}
.proposal-state-pill{padding:5px 11px;border-radius:999px;background:#e2f3e9;color:#17603c;
  font-size:var(--text-xs);font-weight:650;white-space:nowrap}
.proposal-review-main>.pw-watermark{margin:0 0 4px;color:var(--text-faint);font-size:var(--text-xs)}
.proposal-review-rail{display:grid;gap:16px;min-width:0}
.proposal-checklist{padding:19px 20px}
.proposal-checklist ul{display:grid;gap:13px;margin:0;padding:0;list-style:none}
.proposal-checklist li{position:relative;padding-left:28px;color:var(--heading-ink);font-size:var(--text-sm);font-weight:600}
.proposal-checklist li::before{position:absolute;left:0;top:-2px;display:grid;place-items:center;width:21px;height:21px;
  border-radius:50%;content:"✓";background:#e2f3e9;color:#17603c;font-weight:800}
.proposal-checklist li.proposal-check-warn::before{content:"!";background:#fbecd2;color:#865817}
.proposal-process{margin-top:21px;padding-top:16px;border-top:1px solid var(--border)}
.proposal-process strong{font-size:var(--text-sm);color:var(--heading-ink)}
.proposal-process p{margin-top:5px;color:var(--text-muted);font-size:var(--text-sm);line-height:1.5}
.proposal-download-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:13px;
  padding:22px 20px;background:#09262d;color:#fff;border-radius:20px;box-shadow:var(--shadow)}
.proposal-download-card::after{content:"";position:absolute;z-index:0;right:-53px;top:18px;width:0;height:0;
  border-top:57px solid transparent;border-bottom:57px solid transparent;border-left:115px solid #cbff02;
  transform:rotate(-17deg)}
.proposal-download-card>*{position:relative;z-index:1}
.proposal-download-card .proposal-section-label{color:#cbff02}
.proposal-download-card h2{max-width:220px;color:#fff;font-size:var(--text-lg)}
.proposal-pptx-action{min-width:0}
.proposal-pptx-action>.btn{min-height:48px;width:100%;justify-content:center}
.proposal-pptx-action .pw-dependency{padding:10px 0;color:#fff}
.proposal-pptx-action .pw-dependency summary{cursor:default;list-style:none;background:#cbff02;color:#09262d;
  padding:12px 15px;border-radius:999px;font-weight:750;text-align:center}
.proposal-pptx-action .pw-dependency summary::-webkit-details-marker{display:none}
.proposal-pptx-action .pw-dependency>p{margin:10px 4px;color:#d4e0e1;font-size:var(--text-xs);line-height:1.5}
.proposal-download-card .proposal-export-note,.proposal-download-card .proposal-demo-note{
  color:#cad8da;font-size:var(--text-xs);line-height:1.5}
.proposal-download-card .btn-quiet{background:transparent;color:#fff;border-color:#fff;justify-content:center}
.proposal-download-card .btn-studio{background:transparent;color:#ccd8da;border:1px solid #718588;
  border-radius:999px;padding:9px 12px;font:inherit;font-size:var(--text-sm);font-weight:650;opacity:.76}
.proposal-export-links{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--text-xs)}
.proposal-export-links a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.proposal-download-card .tech-detail{color:#c6d4d5}
.pw-review-slides{min-width:0}
.pw-slide-stage{min-width:0}
.pw-slide-count{margin:0 0 9px;color:var(--text-faint);font-size:var(--text-xs);font-weight:700;
  letter-spacing:.15em;text-transform:uppercase}
.pw-slides{display:grid;gap:18px;margin-top:8px}
.pw-slide{min-width:0;overflow:hidden;aspect-ratio:16/9;max-height:470px;background:#fff;
  border:1px solid #bac8ca;border-radius:12px;box-shadow:none}
.pw-slide-head{padding:13px 18px 10px}
.pw-slide-head h3{font-size:var(--text-md)}
.pw-slide-body{max-height:calc(100% - 62px);overflow:auto;padding:13px 18px;gap:10px}
.pw-slide.is-cover .pw-slide-head{background:#09262d}
.pw-slide.is-cover .pw-slide-head h3{font-size:var(--text-lg)}
.pw-slide.is-cover .pw-slide-head::after{content:"";display:block;width:58px;height:4px;margin-top:8px;
  background:#cbff02;border-radius:3px}
.pw-review-slides.is-enhanced{display:grid;grid-template-columns:minmax(155px,220px) minmax(0,1fr);gap:18px}
.pw-slide-thumbs{display:grid;align-content:start;gap:9px;max-height:calc(100vh - 230px);overflow:auto;
  padding:2px 3px 4px 0}
.pw-slide-thumbs[hidden]{display:none}
.pw-slide-thumb{display:flex;align-items:flex-start;gap:9px;width:100%;min-width:0;padding:7px;
  border:1px solid transparent;border-radius:12px;background:transparent;color:var(--heading-ink);
  text-align:left;cursor:pointer}
.pw-slide-thumb:hover{background:var(--surface)}
.pw-slide-thumb[aria-pressed=true]{border-color:#09262d;background:#f3f8d4}
.pw-thumb-art{position:relative;display:flex;flex:0 0 94px;aspect-ratio:16/10;flex-direction:column;gap:3px;
  overflow:hidden;padding:8px 7px;background:#fff;border:1px solid #c6d0d2;border-radius:5px;color:#09262d}
.pw-thumb-art>span{font-size:7px;font-weight:700}
.pw-thumb-art>strong{max-width:68%;font-size:7px;line-height:1.1}
.pw-thumb-art>i{display:block;width:65%;height:2px;background:#c8d3d4}
.pw-thumb-art>i:last-child{width:45%}
.pw-slide-thumb[data-slide-target="slide-1"] .pw-thumb-art{background:#09262d;color:#fff}
.pw-slide-thumb[data-slide-target="slide-1"] .pw-thumb-art::after{content:"";position:absolute;right:-8px;bottom:-12px;width:52px;height:60px;
  background:#cbff02;clip-path:polygon(50% 0,100% 100%,0 70%)}
.pw-thumb-label{display:flex;gap:6px;padding-top:3px;font-size:var(--text-xs);font-weight:600;line-height:1.3}
.pw-thumb-label b{color:var(--text-faint)}
.pw-review-slides.is-enhanced .pw-slides{margin:0}
.pw-review-slides.is-enhanced .pw-slide{display:none}
.pw-review-slides.is-enhanced .pw-slide.is-selected{display:block}
.pw-slide[hidden]{display:none}

@media (max-width:1000px){
  .assistant-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proposal-review-layout{grid-template-columns:minmax(0,1fr) 270px}
  .proposal-brief-layout{grid-template-columns:minmax(0,1fr) 240px}
  .proposal-deal-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pw-quickbrief-layout{grid-template-columns:minmax(0,1.4fr) minmax(270px,.8fr);gap:16px}
}
@media (max-width:760px){
  .home-hero{padding-top:30px;padding-bottom:30px;min-height:290px}
  .home-hero-copy{width:100%}
  .home-hero-art{inset:0 0 0 72%;opacity:.45}
  .home-ask{margin-top:20px}
  .assistant-grid{gap:12px}
  .assistant-card,.assistant-card-link{min-height:230px}
  .assistant-card-link{padding:14px}
  .assistant-card-title{font-size:var(--text-md)}
  .home-resume-card{flex-wrap:wrap}
  .home-resume-button{margin-left:auto}
  .content-proposals>.page-head{margin:-24px calc(-1 * var(--space-4)) 0;padding:22px var(--space-4)}
  .proposal-review-layout{grid-template-columns:1fr}
  .proposal-review-rail{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .proposal-brief-layout{grid-template-columns:1fr}
  .proposal-brief-aside{position:static}
  .pw-quickbrief-layout{grid-template-columns:1fr}
  .pw-quickbrief-aside{position:static;min-height:0}
  .pw-review-slides.is-enhanced{grid-template-columns:150px minmax(0,1fr)}
  .pw-thumb-art{flex-basis:72px}
}
@media (max-width:560px){
  .home-hero{margin:0 calc(-1 * var(--space-4));padding-inline:var(--space-4)}
  .home-hero h1{font-size:2.05rem}
  .home-ask{gap:6px;padding-left:12px}
  .home-ask-icon{display:none}
  .home-ask .btn{min-width:72px}
  .home-assistants,.home-resume,.home-portfolio{padding-inline:0}
  .assistant-grid{grid-template-columns:1fr}
  .assistant-card,.assistant-card-link{min-height:205px}
  .home-resume-card{gap:10px;padding:12px}
  .home-resume-mark{width:42px;height:42px;flex-basis:42px}
  .home-resume-copy{flex-basis:calc(100% - 60px)}
  .home-resume-copy span{line-height:1.35}
  .home-draft-chip{margin-left:52px}
  .home-resume-button{margin-left:auto}
  .content-proposals>.page-head,.content-documents>.page-head,.content-contracts>.page-head,
  .content-rfx>.page-head,.content-handover>.page-head,.content-filing>.page-head{margin-top:-24px;min-height:135px}
  .content-proposals>.page-head::before,.content-documents>.page-head::before,.content-contracts>.page-head::before,
  .content-rfx>.page-head::before,.content-handover>.page-head::before,.content-filing>.page-head::before{right:6%;opacity:.6}
  .content-proposals>.page-head::after,.content-documents>.page-head::after,.content-contracts>.page-head::after,
  .content-rfx>.page-head::after,.content-handover>.page-head::after,.content-filing>.page-head::after{right:-21%;opacity:.7}
  .proposal-start-templates,.proposal-start-deal{padding:17px 15px}
  .proposal-start .pw-template-grid{grid-template-columns:1fr}
  .pw-template-art{min-height:145px}
  .proposal-deal-fields{grid-template-columns:1fr}
  .proposal-deal-fields>div:first-child{grid-column:auto}
  .proposal-start-actions,.proposal-next-action{align-items:stretch;flex-direction:column}
  .proposal-start-actions .btn,.proposal-next-action .btn{width:100%;justify-content:center}
  .proposal-start-actions>span{line-height:1.45}
  .content-proposals .pw-stepper ol{border-radius:20px}
  .content-proposals .pw-step{gap:6px;min-height:53px;padding:8px 7px;font-size:var(--text-xs)}
  .content-proposals .pw-step-mark{width:27px;height:27px;flex-basis:27px}
  .content-proposals .pw-stepper li+li::before{left:-6px;font-size:14px}
  .pw-step-tools{gap:8px 12px;margin-top:-8px}
  .proposal-source-strip{align-items:flex-start;flex-wrap:wrap;padding:15px}
  .proposal-source-strip>div{flex-basis:100%}
  .proposal-brief-aside{padding:18px}
  .proposal-review-rail{grid-template-columns:1fr}
  .proposal-review-columns.is-enhanced{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:0}
  .proposal-review-columns.is-enhanced>.proposal-review-state{grid-column:1;grid-row:2;padding:14px 16px 10px}
  .proposal-review-columns.is-enhanced .pw-slide-thumbs{grid-column:1;grid-row:1;grid-template-columns:repeat(3,minmax(0,1fr));
    max-height:170px;overflow:auto;padding:10px;border-radius:15px 15px 0 0}
  .proposal-review-columns.is-enhanced .pw-slide-stage{grid-column:1;grid-row:3;padding:0 16px 12px}
  .proposal-review-columns.is-enhanced .proposal-slide-editor{grid-column:1;grid-row:4;padding:0 16px 16px}
  .pw-slide-total{grid-column:1/-1}
  .pw-review-slides.is-enhanced{grid-template-columns:1fr}
  .pw-slide-thumbs{grid-template-columns:repeat(3,minmax(0,1fr));max-height:170px;overflow:auto}
  .pw-slide-thumb{display:flex;flex-direction:column;gap:3px;padding:4px}
  .pw-thumb-art{flex:0 0 auto;width:100%}
  .pw-thumb-label{font-size:10px}
  .pw-slide{aspect-ratio:auto;max-height:none;min-height:390px}
}

/* Printing always uses the light palette (item 3256444407). Background
   graphics are off by default when printing, so dark-theme ink (#e7edee) would
   land on white paper at 1.18:1. Every content token is mapped back to its
   light value for both dark selectors; the Basalt chrome tokens are
   theme-invariant already. Keep in lockstep with :root above:
   scripts/test_proposals.py fails if any token here differs from its :root
   value or a :root content token that the dark theme changes is missing. */
@media print{
  :root,:root[data-theme=dark],:root:not([data-theme=light]){
    --bg:#eaeeef; --surface:#fff; --surface-2:#f7f8fa; --surface-3:#e5e8ec;
    --text:#09262d; --text-muted:#2d4a4f; --text-faint:#5c6f73;
    --heading-ink:#09262d;
    --border:#e5e8ec; --border-strong:rgba(9,38,45,.18);
    --control-line:rgba(9,38,45,.55);
    --accent-ink:#09262d;
    --accent-soft:rgba(9,38,45,.06); --accent-ring:rgba(9,38,45,.14);
    --focus-ring:#09262d; --focus-halo:rgba(203,255,2,.55);
    --success:#17603c; --success-soft:#e6f4ec; --success-line:#b6ddc7;
    --warning:#6a4a12; --warning-soft:#fbf2e0; --warning-line:#e8d7ad;
    --danger:#8f2d2d;  --danger-soft:#fbecec;  --danger-line:#eecccc;
    --info:#1c4f7c;    --info-soft:#e8f1f9;    --info-line:#b9d4ea;
    --draft:#4c5766;   --draft-soft:#eef1f4;   --draft-line:#d3dae2;
    --shadow-sm:none; --shadow:none; --shadow-lift:none; --shadow-lg:none;
  }
}

/* ── CIH suite (item 3263658092) ─────────────────────── */
/* Suite overview, Integrations & readiness and the six module pages. Built
   from the existing panel, stat, chip, kv, toolbar and data-table pieces;
   these rules only cover what the suite pages add. Tokens only, both themes. */
.suite-section-head{font-size:var(--text-md);margin:0 0 var(--space-3)}
.suite-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:var(--space-5)}
.module-card{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.module-card-head{display:flex;align-items:center;gap:var(--space-3)}
.module-card-head h3{margin:0;font-size:var(--text-md)}
.module-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;
  border-radius:var(--r);background:var(--surface-2);color:var(--heading-ink);
  border:1px solid var(--border)}
.module-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.module-summary{margin:0;color:var(--text-muted);font-size:var(--text-sm);
  line-height:var(--leading-normal)}
.module-card .field-label{margin-top:var(--space-2)}
.module-card .card-actions{margin-top:auto;padding-top:var(--space-3)}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.stack-row .chip-row{margin-top:6px}
/* Suite tables also sit in half-width columns, where the house 660px floor
   turned them into sideways scrollers that cut the last column off. They
   wrap instead; below 620px they reflow to cards like every other table. */
.data-table.suite-table{min-width:0}
.suite-list{margin:var(--space-1) 0 0;padding-left:1.15em;font-size:var(--text-sm);
  line-height:var(--leading-normal);color:var(--text);overflow-wrap:anywhere}
.suite-list li + li{margin-top:4px}
.suite-list ul{margin:2px 0 0;padding-left:1.1em;color:var(--text-muted)}
.suite-ordered{padding-left:1.4em}
.suite-sources{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.suite-sources li + li{margin-top:0}
.suite-meanings,.suite-checks{list-style:none;padding:0}
.suite-checks li{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:baseline}
/* A chip column and a text column, so each meaning lines up with the next. */
.suite-meanings li{display:grid;grid-template-columns:minmax(7.5rem,auto) 1fr;
  gap:var(--space-3);align-items:baseline}
.suite-meanings li .chip{justify-self:start}
.suite-meanings li + li,.suite-checks li + li{margin-top:var(--space-2)}
/* Prose, counters and forms sit flush against a table's header otherwise:
   .table-wrap carries no top spacing of its own. */
.panel .prose + .table-wrap,.panel .prose + .quiet-state,.suite-count + .table-wrap,
.panel .suite-subhead + .table-wrap{margin-top:var(--space-3)}
.panel .prose + .table-wrap{margin-top:var(--space-4)}
.suite-count{margin:0}
.suite-list a,.on-page a,.cite a,.answer-card a:not(.btn),.quiet-state a{
  text-decoration:underline;text-underline-offset:.15em}
.suite-intro .panel-head{margin-bottom:var(--space-3)}
.suite-intro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-5);margin-top:var(--space-4)}
.suite-demo-note{margin-top:var(--space-4);max-width:72ch}
.suite-subhead{font-size:var(--text-sm);font-weight:600;margin:var(--space-4) 0 var(--space-2)}
.suite-subhead .muted{font-weight:400;margin-left:6px}
.suite-grid-top{align-items:start}
.suite-count-list li{justify-content:space-between}
/* Disclosure summaries are 40px targets (BRAND 8.8), like every control. */
.suite-needs summary,.suite-more > summary{cursor:pointer;font-size:var(--text-sm);
  font-weight:600;color:var(--accent-ink);padding:10px 0;min-height:40px;
  box-sizing:border-box;line-height:20px}
/* The module intro: one line and its posture, the detail folded away. */
.suite-intro-compact{padding-block:var(--space-3)}
.suite-intro-line{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
  align-items:baseline;justify-content:space-between}
.suite-intro-line .prose{margin:0;flex:1 1 40ch;max-width:80ch}
.suite-more .suite-intro-grid{margin-top:var(--space-2)}
.suite-more .suite-demo-note{margin-top:var(--space-3)}
.suite-suggest-group + .suite-suggest-group{margin-top:var(--space-4)}
/* Commercial Queries: the suggestions past the first two of a family fold
   into a plain <details> (no JavaScript), so the panel stays short at 375px. */
.suggest-more{margin-top:var(--space-1)}
.suggest-more>summary{cursor:pointer;display:inline-block;min-height:40px;box-sizing:border-box;
  padding:10px 0;line-height:20px;font-size:var(--text-sm);font-weight:500;
  color:var(--accent-ink);text-decoration:underline;text-underline-offset:.15em}
.suggest-more>.suggestions{margin-top:var(--space-1)}
.suite-answer{margin-top:var(--space-4)}
/* Inline empty state (BRAND 6.10): dashed, transparent, instructive. */
.quiet-state{padding:var(--space-4);border:1px dashed var(--border-strong);
  border-radius:var(--r);background:transparent}
.quiet-title{margin:0 0 4px;font-weight:600;font-size:var(--text-sm)}
.quiet-state .muted{margin:0;max-width:60ch}
/* In-page and view navigation. The current view is Basalt, not lime: lime
   never carries information on a light ground (BRAND 8.4). */
.on-page{display:flex;flex-wrap:wrap;gap:0 var(--space-4);align-items:center;
  font-size:var(--text-sm)}
.on-page a{display:inline-flex;align-items:center;min-height:40px}
.view-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.view-tabs a{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;
  border-radius:var(--r-pill);border:1px solid var(--control-line);background:var(--surface);
  color:var(--accent-ink);font-size:var(--text-sm);font-weight:500;text-decoration:none;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.view-tabs a:hover{background:var(--accent-soft);border-color:var(--accent-ink);
  text-decoration:none}
.view-tabs a.is-current{background:var(--accent-ink);color:var(--surface);
  border-color:var(--accent-ink);font-weight:600}
.panel .suite-form{box-shadow:none;background:var(--surface-2);margin-bottom:var(--space-4);
  padding:var(--space-3) var(--space-4)}
a.suggestion{display:inline-flex;align-items:center;text-decoration:none}
a.suggestion:hover{text-decoration:none}
/* Answers and facts: every fact carries its source and date on its own line. */
.answer-card{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--space-4);
  background:var(--surface-2);display:flex;flex-direction:column;gap:var(--space-2);
  margin-top:var(--space-3)}
.answer-head{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.answer-head h3{margin:0;font-size:var(--text-base)}
/* A file name in the playbook's convention has no break opportunity (item
   3263653342 review): it may break anywhere rather than widen the page. */
.answer-head strong,.answer-head code,.answer-card code{min-width:0;max-width:100%;
  overflow-wrap:anywhere;word-break:break-word}
.answer-text{margin:0;font-size:var(--text-base);line-height:var(--leading-normal);
  max-width:72ch;overflow-wrap:anywhere}
.answer-answered{box-shadow:inset 3px 0 0 var(--success)}
.answer-stale{box-shadow:inset 3px 0 0 var(--warning)}
.answer-denied{box-shadow:inset 3px 0 0 var(--info)}
.answer-unavailable{box-shadow:inset 3px 0 0 var(--danger)}
/* Source not connected yet: a planned state, so neutral (BRAND 6.4). */
.answer-pending{box-shadow:inset 3px 0 0 var(--border-strong)}
.answer-not_found{box-shadow:inset 3px 0 0 var(--control-line)}
.answer-card .card-actions{margin-top:var(--space-2)}
.cite-list{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;
  flex-direction:column;gap:var(--space-3)}
.cite{padding-left:var(--space-3);border-left:2px solid var(--border-strong);min-width:0}
.cite-label{margin:0;font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-faint)}
.cite-text{margin:2px 0 0;font-size:var(--text-sm);line-height:var(--leading-normal);
  overflow-wrap:anywhere}
.cite-source{margin:3px 0 0;font-size:var(--text-xs);color:var(--text-muted);
  line-height:var(--leading-normal);overflow-wrap:anywhere}
.radar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.radar-bucket{background:var(--surface-2);border-radius:var(--r-lg);
  padding:var(--space-3) var(--space-4);min-width:0}
.radar-bucket h3{font-size:var(--text-sm);margin:0 0 var(--space-2)}
.radar-bucket .quiet-state{background:var(--surface)}
/* A bucket is a third of the panel above 1080px, too narrow for the title,
   the chip and the date on one line: the date and countdown wrapped word by
   word and spilled into the next bucket. Stack them instead. */
.radar-bucket .stack-row{flex-wrap:wrap;align-items:flex-start}
.radar-bucket .stack-row > div:first-child{flex:1 1 100%;min-width:0}
.radar-bucket .stack-row .right{width:100%;flex-wrap:wrap;justify-content:flex-start;
  margin-top:4px}
.radar-bucket .stack-row .right .num{white-space:nowrap}
.review-pack{display:flex;flex-direction:column;gap:var(--space-2)}
.notice-line{margin-top:var(--space-3);padding:var(--space-3);border-radius:var(--r);
  background:var(--surface-2);font-size:var(--text-sm);line-height:var(--leading-normal);
  box-shadow:inset 3px 0 0 var(--accent-ink)}
.verdict-line{margin:0 0 var(--space-3);display:flex;flex-wrap:wrap;gap:var(--space-2);
  align-items:baseline}
@media (max-width:1080px){
  .radar-grid{grid-template-columns:1fr}
}
@media (max-width:900.02px){
  .suite-intro-grid{grid-template-columns:1fr}
}
/* The register shows ten cards on a phone until "Show all" (no script). */
.register-more{display:none;margin:var(--space-3) 0 0}
.register-more a{display:inline-flex;align-items:center;min-height:40px}
/* ...and its count line says so there only (item 3263658043 review). */
.register-cap-note{display:none}
@media (max-width:620px){
  .register-capped tbody tr:nth-child(n+11){display:none}
  .register-more{display:block}
  .register-cap-note{display:inline}
  /* A long chip ("Flagged for an owner: nothing approved to draft from")
     ran 10px past its panel at 375px: on a phone chips wrap. */
  main .panel .chip{white-space:normal;max-width:100%}
  .panel .suite-form{padding:var(--space-3)}
  .suite-ask{flex-direction:column;align-items:stretch}
  .view-tabs a{flex:1 1 auto;justify-content:center}
  /* Suite tables carry sentences, not just figures: in the card layout the
     label sits above its value and both read left to right, instead of a
     right-aligned paragraph beside a narrow label. */
  .data-table.suite-table td{flex-direction:column;align-items:flex-start;text-align:left;
    gap:2px}
  .data-table.suite-table .cell-label{max-width:none}
}

/* ── Procurement & RFx workflow (item 3263652788) ──────── */
/* The forms that record a person's action on /rfx: confirm a line, score a
   factor, record the decision, change a matrix row, tick the checklist, record
   a renewal, upload an RFx. Built on the existing field, form-grid, toolbar
   and button pieces; tokens only, both themes. Every control is a 40px target
   and stretches to its column, so nothing pushes a phone sideways. */
.rfx-form{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-3);
  min-width:0}
.rfx-form .form-grid{align-items:end}
.rfx-form select,.rfx-form input[type=text],.rfx-form input[type=date],
.rfx-form input[type=file]{font:inherit;font-size:var(--text-base);color:var(--text);
  background:var(--surface);border:1px solid var(--control-line);border-radius:var(--r);
  padding:9px 12px;min-width:0;width:100%;min-height:40px;box-sizing:border-box;
  transition:border-color var(--fast) var(--ease)}
.rfx-form select:focus,.rfx-form input:focus{border-color:var(--accent-ink)}
.rfx-form .field input{min-width:0;width:100%}
.rfx-form .toolbar-actions{justify-content:flex-start;flex-wrap:wrap}
.rfx-form .btn{min-height:40px}
.rfx-inline{margin-top:var(--space-2);flex-basis:100%}
.rfx-item{padding:var(--space-3) var(--space-4);border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--surface-2);margin-top:var(--space-3);min-width:0}
.rfx-item-head{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:baseline;margin:0}
.rfx-item .cite-text{margin-top:var(--space-2)}
.rfx-checks .rfx-check-text{flex:1 1 20ch;min-width:0}
.rfx-checks .rfx-check > .chip{flex:0 0 auto}
.rfx-check .cite-source,.rfx-deadlines .cite-source,.rfx-summary .cite-source,
.data-table.suite-table .cite-source,.rfx-item-head .cite-source{display:block}
/* A value with no break opportunity (a 64-character fingerprint, a long
   address) wraps inside its cell instead of pushing the card wider than the
   phone: the cell value is a flex item, so it also needs min-width:0. */
.data-table.suite-table .cell-value{min-width:0;max-width:100%;overflow-wrap:anywhere}
.rfx-upload{padding:var(--space-3) var(--space-4);background:var(--surface-2);
  border-radius:var(--r-lg)}
@media (max-width:620px){
  .rfx-item,.rfx-upload{padding:var(--space-3)}
}

/* ── Commercial Queries (item 3263653017) ──────────────────
   Six outcomes, six looks: the bar on the card and the chip differ for every
   state, and "Provider unavailable" because a source is not connected yet
   stays neutral (BRAND 6.4) while a failed or missing reader does not. */
.chip-q-failed{background:transparent;color:var(--danger);border-color:var(--danger-line);
  border-style:dashed}
.answer-not_found{box-shadow:inset 3px 0 0 var(--control-line);border-style:dashed}
.answer-denied{box-shadow:inset 3px 0 0 var(--danger)}
.answer-unavailable{box-shadow:inset 3px 0 0 var(--danger);border-style:dashed}
.answer-unavailable.answer-pending{box-shadow:inset 3px 0 0 var(--border-strong)}
.answer-clarify{box-shadow:inset 3px 0 0 var(--info)}
/* Item 3263658148: the seventh outcome, Conflicting sources. Its own look:
   warning ink on the surface with a double rule, unlike Stale source (a soft
   warning chip) and every other state. Both sides are cited below it. */
.chip-q-conflict{background:transparent;color:var(--warning);border-color:var(--warning);
  border-style:double;border-width:3px;padding:0 8px;text-decoration:none}
a.chip-q-conflict:hover{background:var(--warning-soft)}
.answer-conflict{box-shadow:inset 3px 0 0 var(--warning);border-style:double;border-width:3px}
.answer-searched{margin:var(--space-1) 0 0;overflow-wrap:anywhere}
/* Contract Inquiry (item 3263658148). */
.contract-conflict{border-top:1px solid var(--border);padding-top:var(--space-3);
  margin-top:var(--space-3)}
.contract-conflict:first-child{border-top:0;padding-top:0;margin-top:0}
.contract-kv{margin:var(--space-2) 0}
.contract-unavailable{border-style:dashed}
.contract-stale{margin:0 0 var(--space-2)}
.contract-exports,.contract-no-drafting{margin-top:var(--space-2);overflow-wrap:anywhere}
.cite-source{overflow-wrap:anywhere}
.answer-question{margin:0;font-weight:600;font-size:var(--text-base);overflow-wrap:anywhere}
.answer-readas{margin:0}
.answer-origin{margin:0 0 var(--space-2)}
.answer-sources{display:flex;flex-direction:column;gap:var(--space-1)}
.answer-sources .field-label{margin:var(--space-2) 0 0}
.answer-card .suggestions{margin-top:var(--space-2)}
.answer-card .suggestions .field-label{flex:1 1 100%}
/* The source drawer: a plain <details>, so it works with JavaScript off. */
.source-drawer{margin:3px 0 0;font-size:var(--text-xs);color:var(--text-muted)}
.source-drawer summary{cursor:pointer;min-height:40px;box-sizing:border-box;
  padding:10px 0;line-height:20px;overflow-wrap:anywhere;color:var(--text-muted)}
.source-drawer summary:hover{color:var(--accent-ink)}
.drawer-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);
  gap:4px var(--space-3);margin:0 0 var(--space-2);padding:var(--space-2) var(--space-3);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.drawer-kv div{display:contents}
.drawer-kv dt{font-weight:600;color:var(--text-muted)}
.drawer-kv dd{margin:0;overflow-wrap:anywhere;color:var(--text)}
.drawer-kv a{text-decoration:underline;text-underline-offset:.15em}
/* The demo/live strip under the ask box. */
.queries-sources{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);
  align-items:center;margin-top:var(--space-3)}
.queries-sources p{margin:0}
.queries-source-chips{list-style:none;margin:0;padding:0}
.queries-source-chips li{display:inline-flex;gap:6px;align-items:center;
  font-size:var(--text-sm)}
/* This conversation and your history. */
.turn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:var(--space-3)}
.turn{padding-left:var(--space-3);border-left:2px solid var(--border-strong);min-width:0}
.turn[aria-current="true"]{border-left-color:var(--accent-ink)}
.turn-q{margin:0;font-size:var(--text-sm);font-weight:600;overflow-wrap:anywhere}
.turn-q a{display:inline-block;min-height:24px;text-decoration:underline;
  text-underline-offset:.15em}
.turn-meta{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-top:2px}
.turn-a{margin:2px 0 0;overflow-wrap:anywhere}
/* While a question is being looked up (app.js marks the form busy). */
.busy-form[aria-busy="true"] button{cursor:progress;opacity:.85}
@media (max-width:620px){
  .drawer-kv{grid-template-columns:1fr}
  .drawer-kv dt{margin-top:4px}
  .queries-sources{flex-direction:column;align-items:flex-start}
}

/* ── Account Growth Reporting (item 3263658093) ───────────── */
/* Every figure carries its provenance: the value, then a short line naming
   the system, the period and Demo, Connected or Derived. */
.fig{display:inline-flex;flex-direction:column;align-items:flex-end;gap:1px;
  font-variant-numeric:tabular-nums;text-align:right}
.fig-value{font-weight:600;color:var(--text);white-space:nowrap}
.fig-meta{font-size:var(--text-xs);color:var(--text-muted);font-weight:400;
  white-space:normal;overflow-wrap:anywhere}
.fig-derived .fig-value{color:var(--info)}
.fig-derived .fig-meta{color:var(--info)}
.fig-stale .fig-meta{color:var(--warning)}
.fig-none{color:var(--text-muted)}
/* In a sentence or a list, a figure reads inline: value, then its label. */
.suite-list .fig,.kv .fig,.growth-reasons .fig,.growth-direction .fig{display:inline;
  text-align:left}
.suite-list .fig .fig-meta,.kv .fig .fig-meta,.growth-direction .fig .fig-meta{
  display:inline;margin-left:6px}
.growth-table td .fig{align-items:flex-end}
.growth-table td:not(.num-cell) .fig{align-items:flex-start;text-align:left}
.growth-table-source{margin:0 0 var(--space-2)}
.growth-reasons{margin:var(--space-1) 0 0;padding-left:18px;font-size:var(--text-sm)}
.growth-state{margin-top:var(--space-3)}
.growth-state-error{border-color:var(--danger-line);background:var(--danger-soft)}
.growth-state-stale{border-color:var(--warning-line);background:var(--warning-soft)}
.growth-state-denied{border-color:var(--danger-line)}
.growth-filters{margin-top:var(--space-3)}
.growth-context{margin-top:var(--space-2)}
.growth-context p{margin:0}
.growth-sources{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:4px var(--space-3);font-size:var(--text-xs);color:var(--text-muted)}
.growth-export{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;
  margin:var(--space-3) 0}
.growth-export .field-label{margin:0;flex:0 0 auto}
.growth-export .muted{flex:1 1 220px}
.growth-crumbs{margin:0 0 var(--space-3)}
.growth-update summary{cursor:pointer;min-height:40px;box-sizing:border-box;padding:10px 0;
  line-height:20px;color:var(--accent-ink);font-weight:600}
.growth-update-form{display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-2) 0;min-width:200px}
.growth-update-form .field{display:flex;flex-direction:column;gap:2px}
.growth-notes{margin-top:var(--space-3)}
.notice-error{border-color:var(--danger-line)}
.growth-print-block{margin-top:var(--space-5)}
.growth-print-block h2{font-size:var(--text-lg);margin:0 0 var(--space-2)}
@media (max-width:620px){
  .fig,.growth-table td .fig{align-items:flex-start;text-align:left}
  .growth-export{flex-direction:column;align-items:stretch}
  .growth-export .muted{flex:0 0 auto}
}
@media print{
  .growth-print-block{break-inside:auto}
  .growth-print .table-wrap{overflow:visible}
  .growth-print .data-table td,.growth-print .data-table th{white-space:normal}
}

/* ── Showcase QA fixes (item 3263658043) ───────────────────────────── */
/* Proposal Writer Draft step: a field label inside a "needs input" or a
   fixed-content box sits on that box's tint, where --text-faint fell below
   4.5:1 in dark mode (3.96 and 4.39). It takes the box's own text colour. */
.pw-needs .field-label{color:inherit}
.pw-fixed .field-label{color:var(--text-muted)}
/* The Draft pricing table fits a phone card: its cells may wrap there
   instead of needing a sideways scroll inside the card (402px in 311px). */
@media (max-width:620px){
  .pw-price th,.pw-price td{white-space:normal;padding:6px 4px}
  .pw-price td{overflow-wrap:break-word}
  .pw-price th{letter-spacing:.04em}
}
/* A destructive action is two deliberate steps: a disclosure that says it
   cannot be undone, then a danger button (Clear my history, Delete rule). */
.danger-confirm > summary{color:var(--danger)}
.danger-confirm[open]{border-left:3px solid var(--danger-line);padding-left:var(--space-3);
  margin-top:var(--space-2)}
.danger-confirm p{margin:0 0 var(--space-2)}

/* Real cover-slide previews for the two approved Proposal Writer templates. */
.pw-template-art{display:block!important;position:relative;flex:0 0 auto;width:100%;height:auto;min-height:0;max-width:100%;padding:0;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:12px}

/* Proposal Writer intake: keep the section number inside the card and allow a new client name. */
.proposal-start-templates>.proposal-section-label{margin:0 0 11px;padding:0}
.proposal-client-name{max-width:640px;margin:0 0 14px}
.proposal-client-name .field-label{display:block;margin:0 0 6px;color:#5a7276;font-size:var(--text-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.proposal-client-name input{width:100%}
.proposal-client-help{display:block;margin-top:6px;color:var(--text-muted);font-size:var(--text-xs)}
.proposal-new-client-details{max-width:820px;margin:0 0 18px}
.proposal-new-client-details>.form-grid{margin-top:10px}
/* Keep the template section number inside its card. */
.proposal-start-templates>legend.proposal-section-label{top:10px;margin:0 0 21px;padding:0}

/* Task 3281771509: keep the page title compact and lead with the assistant cards.
   Preserve the current hero artwork and move Ask CIH below the cards. */
.home-hero.home-hero-title{min-height:0;padding-block:24px 22px}
.home-assistants{padding-top:16px}
.home-playbook{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:18px var(--space-5) 0;padding:11px 16px;border:1px solid var(--border);border-radius:14px;
  background:var(--surface);color:var(--text-muted);font-size:var(--text-sm)}
.home-playbook-label{color:var(--text-faint);font-size:var(--text-xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.home-playbook a{display:inline-flex;align-items:center;gap:9px;min-height:30px;color:var(--heading-ink);
  font-weight:700;text-decoration:none}
.home-playbook a:hover{text-decoration:underline}
.home-playbook-draft{display:inline-flex;align-items:center;min-height:23px;padding:2px 9px;
  border-radius:999px;background:#eef6c7;color:#536400;font-size:var(--text-xs);font-weight:600}
.home-playbook-arrow{color:#718489;font-size:16px;line-height:1}
.home-playbook.home-playbook-top{margin:0 var(--space-5) 16px;justify-content:flex-start}
.home-ask-support{display:flex;align-items:center;gap:20px;margin:20px var(--space-5) 0;
  padding:12px 16px;border-radius:16px;background:#09262d}
.home-ask-support .home-hero-lede{flex:0 1 240px;margin:0;color:rgba(255,255,255,.78)}
.home-ask-support .home-ask{flex:1;width:100%;max-width:none;margin:0}
@media (max-width:760px){
  .home-hero.home-hero-title{min-height:0;padding-top:24px;padding-bottom:22px}
  .home-hero.home-hero-title .home-hero-copy{width:100%}
  .home-hero.home-hero-title .home-hero-art{opacity:.22}
  .home-playbook{align-items:flex-start;flex-direction:column;margin-inline:var(--space-4);gap:6px}
  .home-ask-support{display:block;margin-inline:var(--space-4)}
  .home-ask-support .home-ask{margin-top:12px}
}

/* Admin Settings / People: a compact, record-first directory. Activity and
   account controls live on a person's detail page instead of crowding the list. */
.admin-people{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.admin-people-heading,.admin-person-heading{display:flex;align-items:flex-end;
  justify-content:space-between;gap:var(--space-4)}
.admin-people-heading h2,.admin-person-heading h2{margin:4px 0;font-size:var(--text-lg);
  color:var(--heading-ink)}
.admin-people-heading .eyebrow,.admin-person-heading .eyebrow{margin:0}
.admin-supporting{margin:4px 0 0;color:var(--text-muted);font-size:var(--text-sm);line-height:1.45}
.admin-footnote{margin:12px 0 0;color:var(--text-faint);font-size:var(--text-xs);line-height:1.5}
.admin-panel.panel{padding:var(--space-4) var(--space-5);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:none}
.admin-panel .panel-head{margin-bottom:var(--space-3)}
.admin-panel .panel-head h2{margin:0;font-size:var(--text-md);color:var(--heading-ink)}
.admin-invite-form{display:grid;grid-template-columns:minmax(220px,1.3fr) minmax(180px,1fr) auto;
  align-items:end;gap:var(--space-3)}
.admin-invite-form .field{margin:0;min-width:0}
.admin-invite-form .btn{min-height:42px;white-space:nowrap}
.admin-directory-panel .panel-head{align-items:center}
.admin-count{color:var(--text-faint);font-size:var(--text-xs);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.admin-people-filters{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,.55fr) auto auto;
  align-items:end;gap:var(--space-3);margin:0 0 var(--space-4);padding:var(--space-3) 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.admin-people-filters .field{margin:0;min-width:0}
.admin-people-filters input,.admin-people-filters select{min-height:40px}
.admin-clear-filter{min-height:40px;display:inline-flex;align-items:center;padding:0 8px;
  color:var(--text-muted);font-size:var(--text-sm);text-decoration:underline;
  text-underline-offset:.15em}
.admin-table-wrap{margin:0;padding:0}
.data-table.admin-people-table,.data-table.admin-activity-table{min-width:0}
.data-table.admin-people-table th,.data-table.admin-activity-table th{padding-bottom:10px}
.data-table.admin-people-table td,.data-table.admin-activity-table td{padding:12px 12px 12px 0}
.admin-person-cell{display:flex;flex-direction:column;gap:3px;min-width:0}
.admin-person-link{width:max-content;max-width:100%;color:var(--heading-ink);font-weight:650;
  text-decoration:none;overflow-wrap:anywhere}
.admin-person-link:hover{text-decoration:underline;text-underline-offset:.15em}
.admin-person-email{display:block;color:var(--text-muted);font-size:var(--text-xs);overflow-wrap:anywhere}
.admin-state,.admin-role{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;
  border:1px solid var(--border);border-radius:5px;font-size:var(--text-xs);font-weight:600;
  line-height:1.3;white-space:nowrap}
.admin-state-active,.admin-role-admin{border-color:var(--success-line);background:var(--success-soft);
  color:var(--success)}
.admin-state-pending,.admin-role-user{border-color:var(--border);background:var(--surface-2);
  color:var(--text-muted)}
.admin-state-revoked,.admin-role-protected{border-color:var(--border);background:var(--surface-2);
  color:var(--text-faint)}
.admin-back-link{display:inline-flex;align-items:center;min-height:36px;width:max-content;
  color:var(--text-muted);font-size:var(--text-sm);text-decoration:none}
.admin-back-link:hover{text-decoration:underline;text-underline-offset:.15em}
.admin-person-heading{align-items:center;padding:0 0 var(--space-3);border-bottom:1px solid var(--border)}
.admin-person-heading h2{font-size:var(--text-xl);margin:4px 0 0;overflow-wrap:anywhere}
.admin-person-heading .admin-person-email{margin:4px 0 0}
.admin-person-state{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}
.admin-person-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:var(--space-4)}
.admin-meta{margin:0}
.admin-meta-row{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(0,1.3fr);gap:var(--space-3);
  padding:10px 0;border-top:1px solid var(--border)}
.admin-meta-row:first-child{border-top:0;padding-top:2px}
.admin-meta-row dt{color:var(--text-faint);font-size:var(--text-xs);font-weight:600;
  letter-spacing:.04em}
.admin-meta-row dd{margin:0;color:var(--text);font-size:var(--text-sm);overflow-wrap:anywhere}
.admin-settings-panel .panel-head{margin-bottom:var(--space-2)}
.admin-setting-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:var(--space-4);padding:14px 0;border-top:1px solid var(--border)}
.admin-setting-row h3{margin:0;color:var(--heading-ink);font-size:var(--text-sm)}
.admin-setting-row p{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  margin:5px 0 0;color:var(--text-muted);font-size:var(--text-xs);line-height:1.45}
.admin-setting-row form{margin:0}
.admin-setting-row .btn{min-height:38px;white-space:nowrap}
.admin-role-explainer{color:var(--text-faint)}
.admin-protected-note{max-width:220px;color:var(--text-faint);font-size:var(--text-xs);text-align:right}
.admin-activity-panel .panel-head{align-items:center}
.admin-no-activity{margin:0;padding:14px 0;color:var(--text-muted);font-size:var(--text-sm)}
.admin-activity-table td:first-child{width:190px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.admin-activity-table td:last-child{color:var(--text-muted)}
@media (max-width:900px){
  .admin-person-grid{grid-template-columns:1fr}
  .admin-invite-form{grid-template-columns:1fr 1fr auto}
  .admin-people-filters{grid-template-columns:minmax(160px,1fr) minmax(150px,.7fr) auto auto}
}
@media (max-width:620px){
  .admin-people-heading,.admin-person-heading{align-items:flex-start;flex-direction:column}
  .admin-people-heading{gap:var(--space-2)}
  .admin-person-state{justify-content:flex-start}
  .admin-invite-form,.admin-people-filters{grid-template-columns:1fr}
  .admin-people-filters .btn,.admin-invite-form .btn{width:100%}
  .admin-clear-filter{justify-content:center}
  .data-table.admin-people-table td,.data-table.admin-activity-table td{
    justify-content:space-between;text-align:left}
  .data-table.admin-people-table td[data-label="Person"]{display:block}
  .data-table.admin-people-table td[data-label="Person"] .admin-person-cell{width:100%}
  .data-table.admin-activity-table td:first-child{width:auto}
  .admin-setting-row{grid-template-columns:1fr;gap:var(--space-2)}
  .admin-setting-row .btn{width:100%}
  .admin-protected-note{text-align:left}
  .admin-meta-row{grid-template-columns:minmax(100px,.65fr) minmax(0,1.35fr)}
}