/* Copied verbatim from Sam Workflow (pd-live origin/main 9073b821) static/app.css. Do not edit: override in styles.css. */
/* The platform's base look: Trang's prototype (18.10.2026), the design every page follows. Values live in one file,
   wf/tokens.css (--wf-*, light and dark); this file only maps names onto them, so a theme switch or a new value
   reaches every page. Two sets of names point at the tokens:
   - Trang's own names (--bg, --panel, --panel2, --raise, --border, --border2, --ink, --muted, --faint, --btn,
     --btn-ink, --badge, --badge-ink, --good, --warn, --bad and their -soft, --sans, --mono), so her CSS can be used
     as it is in the page sheets;
   - Sam's older names (--navy, --accent, --line, --surface, --green, --amber, --red, ...), so a page sheet that is not
     restyled yet still looks of a piece.
   Then the global base and type, the app shell (base.html: the sidebar is header.topbar, the content is main.page,
   no banner any more: decision a, 19.10.2026), and Sam's own shared classes (.card, .notice, .btn, .input, ...)
   drawn in Trang's look. Her component catalogue is in components.css. CSP: no inline style anywhere, no web fonts,
   no url(). Works at 1280 and 400 px: never a sideways page scroll. */
:root {
  /* Trang's names */
  --bg: var(--wf-bg);
  --panel: var(--wf-panel);
  --panel2: var(--wf-panel2);
  --raise: var(--wf-raise);
  --border: var(--wf-border);
  --border2: var(--wf-border2);
  --ink: var(--wf-ink);
  --muted: var(--wf-muted);
  --faint: var(--wf-faint);
  --btn: var(--wf-btn);
  --btn-ink: var(--wf-btn-ink);
  --badge: var(--wf-badge);
  --badge-ink: var(--wf-badge-ink);
  --good: var(--wf-good);
  --good-soft: var(--wf-good-soft);
  --warn: var(--wf-warn);
  --warn-soft: var(--wf-warn-soft);
  --bad: var(--wf-bad);
  --bad-soft: var(--wf-bad-soft);
  --sans: var(--wf-font-sans);
  --mono: var(--wf-font-mono);
  /* Sam's older names, mapped onto Trang's: one accent no more; ink is the interactive colour */
  --navy: var(--wf-ink);
  --navy-2: var(--wf-btn-hover);
  --accent: var(--wf-ink);
  --accent-soft: var(--wf-panel2);
  --accent-line: var(--wf-border2);
  --accent-on-dark: var(--wf-muted);
  --focus: var(--wf-ink);
  --ink-2: var(--wf-muted);
  --line: var(--wf-border);
  --line-2: var(--wf-border);
  --line-input: var(--wf-border2);
  --surface: var(--wf-panel);
  --card: var(--wf-panel);
  --surface-2: var(--wf-panel2);
  --row-hover: var(--wf-panel2);
  --green: var(--wf-good);
  --green-soft: var(--wf-good-soft);
  --green-line: var(--wf-good-line);
  --amber: var(--wf-warn);
  --amber-soft: var(--wf-warn-soft);
  --amber-line: var(--wf-warn-soft);
  --amber-mark: var(--wf-warn);
  --red: var(--wf-bad);
  --red-soft: var(--wf-bad-soft);
  --red-line: var(--wf-bad-soft);
  --stale: var(--wf-badge-ink);
  --grey-soft: var(--wf-badge);
  --ai: var(--wf-good);
  --ai-soft: var(--wf-good-soft);
  /* radius */
  --r-sm: 4px;
  --radius: var(--wf-radius-btn);
  --r-full: var(--wf-radius-pill);
  /* type */
  --fs-meta: 12px;
  --fs-sm: 12.5px;
  --fs-body: var(--wf-fs-body);
  --fs-h2: 15px;
  --fs-h1: var(--wf-fs-h1);
  --fs-answer: 26px;
  /* spacing: 4-based */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --shadow: var(--wf-shadow-card);
}

/* ---------- global base (Trang: every scrollbar hidden; [hidden] always hides) ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* except where the shell scrolls (restore r-shell, as the old UI): the page, the sidebar's page list and the settings
   menu show her thin 6 px bar (the .tscroll look below), so a list that runs past the screen says so */
html, .topbar .nav, .setmenu { scrollbar-width: thin; }
html::-webkit-scrollbar, .topbar .nav::-webkit-scrollbar, .setmenu::-webkit-scrollbar { display: block; width: 6px;
  height: 6px; }
html::-webkit-scrollbar-thumb, .topbar .nav::-webkit-scrollbar-thumb, .setmenu::-webkit-scrollbar-thumb {
  background: var(--border2); border-radius: 3px; }
[hidden]:not([hidden="until-found" i]) { display: none !important; }
html, body { margin: 0; padding: 0; }
/* ---------- the size scale (fb19/SIZES.md): Home and the month page are her prototype at the same browser zoom ----------
   One token, --wf-zoom, scales every size on these pages (type, padding, rows, rails, panels) at the root; the CSS
   keeps her prototype's numbers. The top bars keep their size (zoom back by 1 / --wf-zoom). Viewport units in the
   sheets are divided by --wf-zoom so a full-height or a 44 %-of-the-screen part still measures the screen; the scripts that place a
   pop-over from a rect divide by the zoom too. The sign-in page does not load this sheet and keeps its own look. */
html:has(#mc), html:has(#wf-frame[data-workflow="p7_month"]) { --wf-zoom: 1; zoom: var(--wf-zoom); }
.mc .mcbanner, #wf-frame[data-workflow="p7_month"] .wf-head { zoom: calc(1 / var(--wf-zoom, 1)); }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  font-family: var(--sans); font-size: var(--wf-fs-body); line-height: 1.5; letter-spacing: var(--wf-tracking);
  color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
img { max-width: 100%; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--border2); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
code { font-family: var(--mono); font-size: 12px; background: var(--panel2); padding: 1px 4px; border-radius: var(--r-sm); }
.mono { font-family: var(--mono); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.r { text-align: right; }
.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; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- the app shell: sidebar | banner over content (Trang's .app, .side, .main, .content) ---------- */
/* Four auto rows, then the content's row (restore r-shell): they held the data banners, which decision a (the owner,
   19.10.2026) took off every page; empty rows take no height, so the content starts at the top. */
body {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: repeat(4, auto) 1fr;
  min-height: calc(100vh / var(--wf-zoom, 1));
}
body:has(#wf-frame) { display: block; }

/* "Skip to the page" (the fix round, 19.10.2026): the first Tab stop on every page, out of sight until it has the
   keyboard, then her dark pill at the top left, over every page layer (80 and under) but under the drawers (89 and
   over, which keep the keyboard inside while open), with Sam's focus ring (components.css) */
.skiplink { position: fixed; top: 10px; left: 10px; z-index: 85; padding: 8px 14px; border-radius: 999px;
  background: var(--btn); color: var(--btn-ink); font-size: 13px; font-weight: 500; line-height: 1.4;
  text-decoration: none; white-space: nowrap; box-shadow: var(--wf-shadow-btn); transform: translateY(-300%); }
.skiplink:focus { transform: none; }
#page-start:target, #wf-head:target { scroll-margin-top: 12px; }

/* the sidebar: the brand and the footer keep their size; the page list (and a page's own documents block) shrinks and
   scrolls with her thin bar, so the role switch and the gear stay on screen on a short laptop (restore r-shell) */
header.topbar {
  grid-column: 1; grid-row: 1 / -1; align-self: start; position: sticky; top: 0;
  width: var(--wf-rail-nav); height: calc(100vh / var(--wf-zoom, 1)); height: calc(100dvh / var(--wf-zoom, 1)); overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 10px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--panel); border-right: 1px solid var(--border); color: var(--ink);
}
.topbar .brand { flex: none; display: flex; align-items: center; gap: 9px; padding: 6px 10px 14px 4px; font-weight: 600;
  letter-spacing: -.01em; }
.navtg { all: unset; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--wf-radius-nav);
  color: var(--muted); cursor: pointer; flex: none; }
.navtg:hover { background: var(--panel2); color: var(--ink); }
.topbar .brand-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.topbar .brand-name { color: var(--ink); text-decoration: none; white-space: nowrap; }

.topbar .nav { display: flex; flex-direction: column; gap: 1px; flex: 0 1 auto; min-height: 0; overflow-y: auto;
  margin: -4px; padding: 4px; }
.topbar .nav > * { flex-shrink: 0; }                 /* each name keeps its height: the list scrolls, never squashes */
.topbar > .sidedocs { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.topbar .nav > a, .topbar .grp { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--wf-radius-nav); color: var(--muted); font-size: 13.5px; line-height: 1.5;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.topbar .nav > a::before { content: "\2022"; width: 16px; flex: none; text-align: center; color: var(--faint);
  font-size: 13px; }
.topbar .nav > a[href="/"]::before { content: "\25C6"; }
.topbar .nav > a[href="/month"]::before { content: "\25A4"; }
.topbar .nav > a[href^="/wf"]::before { content: "\2318"; }
.topbar .nav > a[href="/inbox"]::before { content: "\2709"; }
.topbar .nav > a[href="/queue"]::before { content: "\2261"; }
.topbar .nav > a[href="/output"]::before { content: "\2197"; }
.topbar .nav > a[href="/kb"]::before { content: "\25C8"; }
.topbar .nav > a[href="/scoreboard"]::before { content: "\2713"; }
.topbar .nav > a[href="/settings"]::before { content: "\2699"; }
.topbar .nav > a:hover, .topbar .grp:hover { background: var(--panel2); color: var(--ink); }
.topbar .nav > a.active { background: var(--panel2); color: var(--ink); font-weight: 600; }
[data-theme="dark"] .topbar .nav > a.active { background: var(--raise); }
.topbar .nav > a.active::before { color: var(--ink); }
.topbar .glyph { width: 16px; flex: none; text-align: center; color: var(--faint); font-size: 13px; }
.topbar .gchev { margin-left: auto; font-size: 10px; color: var(--faint); }
.topbar .grp[aria-expanded="true"] .gchev::after { content: "\25BE"; }
.topbar .grp[aria-expanded="false"] .gchev::after { content: "\25B8"; }
.topbar .navgrp { display: flex; flex-direction: column; gap: 1px; }
.topbar .svc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.topbar .svc a, .topbar .svc-soon { display: block; padding: 7px 10px 7px 35px; border-radius: var(--wf-radius-nav);
  color: var(--muted); font-size: 13px; text-decoration: none; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.topbar .svc a:hover { background: var(--panel2); color: var(--ink); }
.topbar .svc-soon { cursor: default; }
/* her four services that are not built yet (fbru S): they look the same as the two that open, and do nothing */
.topbar .svc .svc-off { display: block; padding: 7px 10px 7px 35px; border-radius: var(--wf-radius-nav);
  color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; cursor: default; user-select: none; }
/* Live client records (the owner's build decision 2): one plain row after Services, for a signed-in personal session
   only; never in the rail nor its fly-out */
.topbar .nav > a.nav-live::before { content: ""; }
.topbar .navh { margin: 0; padding: 16px 10px 5px; font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap; }
/* fb19 (decision d, the owner, 19.10.2026): Sam's other pages in her folded group "Workspace", drawn as her Services
   list (her .nav.svc: indented, 13 px); folded unless the viewer opened it (html.ws-open) or it holds the page shown
   (.ws-here); shell.js keeps its hidden and aria-expanded in step; without script every link shows. */
.topbar .ws { display: flex; flex-direction: column; gap: 1px; }
.topbar .ws > a { display: block; padding: 7px 10px 7px 35px; border-radius: var(--wf-radius-nav); color: var(--muted);
  font-size: 13px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .ws > a:hover { background: var(--panel2); color: var(--ink); }
.topbar .ws > a.active { background: var(--panel2); color: var(--ink); font-weight: 600; }
[data-theme="dark"] .topbar .ws > a.active { background: var(--raise); }
@media (scripting: enabled) {
  html:not(.ws-open) .topbar .wsgrp:not(.ws-here) > .ws:not(.fly) { display: none; }
}
.topbar .ws.fly { position: fixed; left: 62px; z-index: 80; width: 230px; padding: 6px; margin: 0;
  border-radius: var(--wf-radius-panel); background: var(--panel);
  box-shadow: 0 0 0 1px var(--border2), 0 16px 36px -12px rgba(0, 0, 0, .25); }
.topbar .ws.fly > a { padding-left: 10px; }

/* the footer: who you are (the role switch) and the gear's settings menu */
.topbar .foot { flex: none; margin-top: auto; position: relative; display: flex; flex-wrap: wrap; align-items: center;
  gap: 9px; padding: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--faint); }
.meav { width: 26px; height: 26px; border-radius: 50%; background: var(--raise); color: var(--ink); display: flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none; }
/* the role's initial is the link to the role picker (restore r-shell): "You are: <role>. Change" in the rail too */
a.meav { text-decoration: none; cursor: pointer; }
a.meav:hover { background: var(--border2); }
.topbar .role-slot { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.35; }
/* her profile (fbru S): "<b>{name}</b><br>Capturer · Cape Town" beside the initial */
.topbar .me-name, .topbar .me-role { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .me-name { color: var(--ink); font-size: 12.5px; font-weight: 500; }
.topbar .me-role { color: var(--faint); font-size: 12px; }
.gear { all: unset; margin-left: auto; cursor: pointer; color: var(--faint); width: 28px; height: 28px;
  border-radius: var(--wf-radius-btn); display: flex; align-items: center; justify-content: center; flex: none; }
.gear:hover, .gear.on { background: var(--panel2); color: var(--ink); }
.setmenu { position: absolute; left: 4px; right: 4px; bottom: calc(100% + 6px); z-index: 40; display: flex;
  flex-direction: column; padding: 6px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--wf-radius-panel); box-shadow: var(--wf-shadow-menu); max-height: calc(calc(100vh / var(--wf-zoom, 1)) - 72px);
  overflow-y: auto; }
[data-theme="dark"] .setmenu { border-color: var(--wf-panel-line); }
.setmenu > a, .setmenu > .setmi-soon, .setmenu .signout .btn { all: unset; box-sizing: border-box; display: block;
  width: 100%; padding: 7px 10px; border-radius: var(--wf-radius-nav); font-size: 13px; color: var(--ink);
  cursor: pointer; }
.setmenu > a { display: flex; align-items: center; gap: 8px; }
.setmenu > a:hover, .setmenu .signout .btn:hover { background: var(--panel2); }
.setmenu > .setmi-soon { cursor: default; }
.setmenu .signout { margin: 0; }
/* her .setmi chip at the item's right: Client email says "read only" (Sam reads the made-up mailbox; live mail off) */
.setchip { margin-left: auto; font-size: 10.5px; padding: 1px 8px; }
/* without JavaScript (restore r-shell): the gear cannot open its menu, so its links and Sign out show in place, in
   the footer above who you are, in the menu's row look (base.html's noscript block) */
.topbar .foot > noscript { display: block; flex: 1 1 100%; order: -1; min-width: 0; }
.nsmenu { display: flex; flex-direction: column; padding: 0 0 8px; margin: -4px 0 0; border-bottom: 1px solid var(--border); }
.nsmenu > a, .nsmenu .signout .btn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px; border-radius: var(--wf-radius-nav); font-size: 13px; color: var(--ink);
  cursor: pointer; }
.nsmenu > a:hover, .nsmenu .signout .btn:hover { background: var(--panel2); }
.nsmenu .signout { margin: 0; }
/* who you are shows once: the footer's role switch, else (in the rail, below) this list's role line, as in the menu */
.nsmenu .setrole, .nsmenu .setrole-sep { display: none; }
/* who you are, inside the menu: shown only at 720 px or less, where the rail hides the footer's role switch */
.setmenu .setrole, .setmenu .setrole-sep { display: none; }
.setrole { align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: 13px;
  color: var(--muted); }
.setrole a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--border2);
  text-underline-offset: 2px; white-space: nowrap; }
.setrole a:hover { text-decoration-color: currentColor; }
/* Ask Sam on every page (her .fab): her glass card fixed at the bottom, centred on the content; coming, so disabled */
.askbar { position: fixed; bottom: 22px; left: calc(50% + var(--wf-rail-nav) / 2); z-index: 50; margin: 0;
  width: min(560px, calc(calc(100vw / var(--wf-zoom, 1)) - var(--wf-rail-nav) - 40px)); transform: translateX(-50%); }
.nav-mini:not(.nav-peek) .askbar { left: calc(50% + var(--wf-rail-icon) / 2);
  width: min(560px, calc(calc(100vw / var(--wf-zoom, 1)) - var(--wf-rail-icon) - 40px)); }
.askbar .fab-row input { order: 1; cursor: not-allowed; }
.askbar .fab-row input:disabled { color: var(--faint); }
.askbar .ask-coming { order: 2; flex: none; margin: 0; }
.askbar .ask-go { order: 3; cursor: not-allowed; }
.setsep { height: 1px; background: var(--border); margin: 5px 4px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px;
  font-size: 13px; color: var(--muted); }
.seg { display: flex; background: var(--panel2); border-radius: var(--wf-radius-btn); padding: 2px; }
.seg button { all: unset; font-size: 12px; padding: 3px 8px; border-radius: var(--wf-radius-tab); color: var(--muted);
  cursor: pointer; }
.seg button.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--wf-shadow-seg); }
[data-theme="dark"] .seg button.on { background: var(--raise); }

/* the folded sidebar: Trang's 56 px icon rail (the toggle, remembered; forced at 720 px or less below, where these
   rules step aside so the phone drawer only has the forced rail to undo) */
@media (min-width: 721px) {
  .nav-mini:not(.nav-peek) header.topbar { width: var(--wf-rail-icon); padding-inline: 6px; }
  .nav-mini:not(.nav-peek) .topbar .brand { justify-content: center; padding: 6px 0 14px; }
  .nav-mini:not(.nav-peek) .topbar .brand-id,
  .nav-mini:not(.nav-peek) .topbar .brand-name,
  .nav-mini:not(.nav-peek) .topbar .grp .t,
  .nav-mini:not(.nav-peek) .topbar .gchev,
  .nav-mini:not(.nav-peek) .topbar .navh,
  .nav-mini:not(.nav-peek) .topbar .nav > a.nav-live,
  .nav-mini:not(.nav-peek) .topbar .role-slot { display: none; }
  .nav-mini:not(.nav-peek) .topbar .nav > a, .nav-mini:not(.nav-peek) .topbar .grp { justify-content: center; gap: 0;
    font-size: 0; }
  .nav-mini:not(.nav-peek) .topbar .svc:not(.fly) { display: none; }
  .nav-mini:not(.nav-peek) .topbar .ws:not(.fly) { display: none; }
  /* "Live client records" (the owner, 19.10.2026: never tucked into a menu) stays in the rail as its own icon */
  .nav-mini:not(.nav-peek) .topbar .svc:not(.fly):has(> li.svc-live) { display: flex; }
  .nav-mini:not(.nav-peek) .topbar .svc:not(.fly) > li:not(.svc-live) { display: none; }
  .nav-mini:not(.nav-peek) .topbar .svc:not(.fly) > li.svc-live > a { display: flex; justify-content: center;
    padding: 7px 10px; font-size: 0; }
  .nav-mini:not(.nav-peek) .topbar .svc:not(.fly) > li.svc-live > a::before { content: "\25C9"; font-size: 13px;
    color: var(--faint); }
  .nav-mini:not(.nav-peek) .topbar .foot { padding: 8px 2px; flex-direction: column; }
  .nav-mini:not(.nav-peek) .topbar .gear { margin-left: auto; }   /* her folded foot keeps the gear's auto margin */
  /* the rail's names (restore r-shell): each page's title shows as a tooltip on hover and as her small menu label
     beside the rail on keyboard focus; Services (no title in its markup) shows its own name the same way */
  .nav-mini:not(.nav-peek) .topbar .grp:is(:hover, :focus-visible) .t,
  .nav-mini:not(.nav-peek) .topbar .nav > a[title]:focus-visible::after {
    display: block; position: fixed; left: 62px; z-index: 80; padding: 4px 9px; border-radius: var(--wf-radius-nav);
    background: var(--panel); color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap;
    box-shadow: 0 0 0 1px var(--border2), var(--wf-shadow-pop); pointer-events: none; }
  .nav-mini:not(.nav-peek) .topbar .nav > a[title]:focus-visible::after { content: attr(title); }
}
.topbar .svc.fly { position: fixed; left: 62px; z-index: 80; width: 230px; padding: 6px; margin: 0;
  border-radius: var(--wf-radius-panel); background: var(--panel);
  box-shadow: 0 0 0 1px var(--border2), 0 16px 36px -12px rgba(0, 0, 0, .25); }
.topbar .svc.fly a, .topbar .svc.fly .svc-soon { padding-left: 35px; }   /* her fly-out keeps the list's indent */
/* Services folded, remembered (restore r-shell): wf/theme.js sets html.svc-closed before the first paint when this
   browser keeps "closed" under "fidorn-svc", or keeps nothing and the window is under 760 px tall; shell.js keeps
   the list's hidden and aria-expanded in step. The rail's fly-out still opens it. */
html.svc-closed .topbar .svc:not(.fly) { display: none; }
/* The sidebar is sticky, so it is a stacking context of its own at the page's level: its pop-ups (the rail's fly-out
   and name labels, the menu at 720 px or less) would sit under the page's sticky and fixed bars (Home's banner 15,
   the month's header 20, Home's composer 25). While one shows, the sidebar lifts above them, under Ask Sam (50) and
   every overlay (60 and up); the phone drawer has its own level (restore r-shell). */
:root:not(.nav-open) header.topbar:has(.svc.fly, .setmenu:not([hidden]), .grp:hover, .grp:focus-visible,
  .nav > a:focus-visible) { z-index: 45; }
/* her overlay (.srcover) under the phone drawer (720 px or less, below); shell.js shows it */
.navscrim { position: fixed; inset: 0; z-index: 60; background: var(--wf-overlay); }
@keyframes navin { from { transform: translateX(-26px); opacity: 0; } to { transform: none; opacity: 1; } }

/* the content column */
main.page { grid-column: 2; grid-row: -2 / -1; width: 100%; max-width: var(--wf-content-max); min-width: 0;
  margin: 0 auto; padding: 22px max(20px, env(safe-area-inset-right, 0px)) 120px max(20px, env(safe-area-inset-left, 0px));
  overflow-wrap: anywhere; }

/* ---------- type ---------- */
h1 { font-size: var(--wf-fs-h1); font-weight: 500; letter-spacing: -.7px; line-height: 1.5; color: var(--ink);
  margin: 0 0 2px; }
h2 { font-size: var(--wf-fs-section); font-weight: 500; letter-spacing: -.3px; color: var(--ink); margin: 0 0 6px; }
.h3 { font-size: 15px; font-weight: 500; letter-spacing: -.25px; line-height: 1.45; color: var(--ink); }
.answer { font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.5; margin: 0 0 18px; }
.answer:empty { margin: 0 0 16px; }
.muted { color: var(--muted); }
.eyebrow { font-size: var(--wf-fs-eyebrow); font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 2px; }

/* ---------- tables (Trang's generic table; wide ones scroll inside .tscroll / .table-wrap) ---------- */
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { font-size: var(--wf-fs-th); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
  text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--border); }
td { padding: 7px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.tscroll, .table-wrap { overflow-x: auto; scrollbar-width: thin; }
.tscroll::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { display: block; height: 6px; }
.tscroll::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* ---------- Sam's shared classes, in Trang's look ---------- */
/* .card is Trang's .panel: no border in light, a soft shadow, radius 12; its first h2 is the panel's title strip */
.card { background: var(--panel); border: 0; border-radius: var(--wf-radius-panel); box-shadow: var(--wf-shadow-panel);
  padding: 16px; margin: 0 0 14px; min-width: 0; }
[data-theme="dark"] .card { border: 1px solid var(--wf-panel-line); }
.card h2 { font-size: 13px; font-weight: 500; letter-spacing: var(--wf-tracking); color: var(--muted); margin: 0 0 10px; }
.card > h2:first-child { margin: -16px -16px 14px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.card.narrow { max-width: 420px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* notices: status colour as a soft fill with strong text, never a button */
.notice { border: 0; border-radius: var(--wf-radius-card); padding: 10px 14px; margin: 0 0 14px; font-size: 12.5px;
  font-weight: 500; }
.notice.info { background: var(--panel2); color: var(--ink); border: 1px solid var(--border); }
.notice.warn { background: var(--warn-soft); color: var(--warn); }
/* an app-state problem is calm and neutral (the owner's build decision 8: red is for data only) */
.notice.problem { background: var(--panel2); color: var(--ink); border: 1px solid var(--border); }
.notice.ok { background: var(--good-soft); color: var(--good); }

/* forms: the label above the field (Trang's dialog fields) */
.field-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-bottom: 7px; }
.input { width: 100%; font: inherit; letter-spacing: inherit; padding: 10px 12px; border: 1px solid var(--border2);
  border-radius: var(--wf-radius-card); background: var(--panel); color: var(--ink); }
.helper { font-size: 12px; color: var(--faint); margin: 6px 0 14px; }

/* buttons: .btn alone is Trang's ghost (secondary); .btn.primary is her dark .btn; one primary per card */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 12px;
  font-weight: 500; line-height: 1.5; letter-spacing: inherit; padding: 7px 14px; border-radius: var(--wf-radius-btn);
  border: 1px solid var(--border2); background: var(--panel); color: var(--ink); box-shadow: none; cursor: pointer;
  text-decoration: none; text-align: center; transition: background .15s ease, box-shadow .15s ease, border-color .15s ease; }
.btn:hover { background: var(--panel2); border-color: var(--ink); text-decoration: none; }
[data-theme="dark"] .btn:hover { background: var(--panel); }
.btn.primary { background: var(--btn); color: var(--btn-ink); border: 0; box-shadow: var(--wf-shadow-btn); }
.btn.primary:hover { background: var(--wf-btn-hover); }
.btn.sm { font-size: var(--wf-fs-btn-sm); padding: 5px 11px; }
.btn.on-dark { background: var(--panel); color: var(--ink); border-color: var(--border2); }
.btn[disabled], .btn[aria-disabled="true"], .btn[disabled]:hover, .btn[aria-disabled="true"]:hover {
  background: var(--raise); color: var(--faint); border: 1px solid var(--border); box-shadow: none; cursor: not-allowed; }
.ui-why { font-size: 12px; color: var(--faint); }

/* ---------- narrower screens ---------- */
@media (max-width: 900px) {
  h1 { font-size: 20px; }
}
@media (max-width: 720px) {
  body { grid-template-columns: var(--wf-rail-icon) minmax(0, 1fr); }      /* the rail's column stays put under the drawer */
  header.topbar { width: var(--wf-rail-icon); padding-inline: 6px; }
  .topbar .brand { justify-content: center; padding: 6px 0 14px; }
  .topbar .brand-id, .topbar .brand-name, .topbar .grp .t, .topbar .gchev, .topbar .navh, .topbar .role-slot,
  .topbar .nav > a.nav-live { display: none; }
  .topbar .nav > a, .topbar .grp { justify-content: center; gap: 0; font-size: 0; }
  .topbar .svc:not(.fly) { display: none; }
  :root:not(.nav-open) .topbar .ws:not(.fly) { display: none; }
  :root:not(.nav-open) .topbar .svc:not(.fly):has(> li.svc-live) { display: flex; }
  :root:not(.nav-open) .topbar .svc:not(.fly) > li:not(.svc-live) { display: none; }
  :root:not(.nav-open) .topbar .svc:not(.fly) > li.svc-live > a { display: flex; justify-content: center;
    padding: 7px 10px; font-size: 0; }
  :root:not(.nav-open) .topbar .svc:not(.fly) > li.svc-live > a::before { content: "\25C9"; font-size: 13px;
    color: var(--faint); }
  .topbar .foot { padding: 8px 2px; flex-direction: column; }
  .topbar .gear { margin-left: 0; }
  .setmenu { position: fixed; left: 62px; right: auto; bottom: 10px; width: 220px; max-height: calc(calc(100vh / var(--wf-zoom, 1)) - 20px); }
  .setmenu .setrole, .nsmenu .setrole { display: flex; flex-wrap: wrap; }
  .setmenu .setrole-sep, .nsmenu .setrole-sep { display: block; }
  .askbar, .nav-mini:not(.nav-peek) .askbar { left: calc(50% + var(--wf-rail-icon) / 2);
    width: min(560px, calc(calc(100vw / var(--wf-zoom, 1)) - var(--wf-rail-icon) - 24px)); bottom: 14px; }
  /* the rail's names, as above the 720 px line (restore r-shell) */
  :root:not(.nav-open) .topbar .grp:is(:hover, :focus-visible) .t,
  :root:not(.nav-open) .topbar .nav > a[title]:focus-visible::after {
    display: block; position: fixed; left: 62px; z-index: 80; padding: 4px 9px; border-radius: var(--wf-radius-nav);
    background: var(--panel); color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap;
    box-shadow: 0 0 0 1px var(--border2), var(--wf-shadow-pop); pointer-events: none; }
  :root:not(.nav-open) .topbar .nav > a[title]:focus-visible::after { content: attr(title); }
  /* her drawer on a phone (restore r-shell; her .csdrawer over .srcover, mirrored to the left): the fold button opens
     the whole sidebar over the page, with every page's name, Services, who you are and the gear; the rail's column
     stays, so nothing under it moves. shell.js: html.nav-open, the scrim, Escape, a link or focus leaving closes it. */
  .nav-open header.topbar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 61; align-self: stretch;
    width: var(--wf-rail-nav); height: auto; padding-inline: 10px; overflow-y: auto;
    box-shadow: 14px 0 44px rgba(0, 0, 0, .14); animation: navin .16s ease; }
  .nav-open .topbar .brand { justify-content: flex-start; padding: 6px 10px 14px 4px; }
  .nav-open .topbar .brand-id { display: flex; }
  .nav-open .topbar .brand-name { display: block; }
  .nav-open .topbar .grp .t, .nav-open .topbar .gchev { display: inline; }
  .nav-open .topbar .navh { display: block; }
  .nav-open .topbar .nav > a.nav-live { display: flex; }
  .nav-open .topbar .role-slot { display: flex; }
  .nav-open .topbar .nav > a, .nav-open .topbar .grp { justify-content: flex-start; gap: 9px; font-size: 13.5px; }
  .nav-open .topbar .svc:not(.fly) { display: flex; }
  .nav-open .topbar .foot { padding: 10px; flex-direction: row; }
  .nav-open .topbar .gear { margin-left: auto; }
  .nav-open .setmenu { position: absolute; left: 4px; right: 4px; bottom: calc(100% + 6px); width: auto;
    max-height: calc(calc(100vh / var(--wf-zoom, 1)) - 72px); }
  .nav-open .setmenu .setrole, .nav-open .setmenu .setrole-sep { display: none; }
}
/* without JavaScript (restore r-shell): the gear does nothing, so it steps aside for the links shown in place; on a
   phone the sidebar is shown whole at the top of the page (as the old top bar wrapped), since the drawer needs
   script. Browsers without the scripting media feature keep the rail, and the in-place list shows who you are. */
@media (scripting: none) {
  .topbar .gear { display: none; }
}
@media (scripting: none) and (max-width: 720px) {
  body { display: block; }
  header.topbar { position: static; width: auto; height: auto; overflow: visible; padding-inline: 12px;
    border-right: 0; border-bottom: 1px solid var(--border); }
  .topbar .brand { justify-content: flex-start; padding: 6px 10px 10px 4px; }
  .topbar .brand-id { display: flex; }
  .topbar .brand-name, .topbar .navh { display: block; }
  .topbar .grp .t, .topbar .gchev { display: inline; }
  .topbar .role-slot { display: flex; }
  .topbar .nav { overflow: visible; }
  .topbar .nav > a, .topbar .grp { justify-content: flex-start; gap: 9px; font-size: 13.5px; }
  .topbar .svc:not(.fly) { display: flex; }
  .topbar .ws:not(.fly) { display: flex; }
  .topbar .foot { padding: 10px; flex-direction: row; margin-top: 8px; }
  .nsmenu .setrole, .nsmenu .setrole-sep { display: none; }
}
@media (max-width: 600px) {
  h1 { font-size: 18px; }
  main.page { padding: 18px 12px 110px; }
  .card { padding: 14px; }
  .card > h2:first-child { margin: -14px -14px 12px; padding: 10px 14px; }
  .card.narrow { max-width: none; }
}

/* ---------- dark mode extras (fbru S; PROTO §14, the owner's build decisions): every token switches in
   wf/tokens.css; here panels, cards, chips and menus get her 1 px white hairline and deeper shadow,
   and her dark buttons invert (light #ededed with dark text, #fff on hover). Light is untouched. ---------- */
:root[data-theme="dark"] .card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .setmenu,
:root[data-theme="dark"] .topbar .svc.fly {
  border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .chip { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
:root[data-theme="dark"] .btn.primary { background: #ededed; color: #171717; }
:root[data-theme="dark"] .btn.primary:hover { background: #ffffff; }
/* her dark .btn[disabled] (PROTO): a disabled primary never looks pressable (Continue → Capture while tiles check) */
:root[data-theme="dark"] .btn.primary:is([disabled], [aria-disabled="true"]),
:root[data-theme="dark"] .btn.primary:is([disabled], [aria-disabled="true"]):hover {
  background: var(--raise); color: var(--faint); border: 1px solid var(--border); box-shadow: none; }