/* Workbench design system.
 * Neutral grey surfaces (no tint), subtle hairline dividers and compact controls. Sizes follow a dense task-manager layout: 13.5px text, 23px page
 * titles, a 252px navigation panel with 30px rows, a 46px top bar and 28px/24px page padding.
 * The app is black and white: the accent is black in light mode and white in dark. Colour belongs to the tools (each has its own hue, see
 * .hue-t-*) and to meaning, from the Des. Prop. palette: green success, orange warning, red danger, blue information. Records are brown.
 * Radius rule: 4px on everything. Tags, chips and buttons have no borders: they are fills.
 */
/* Fonts, served from shared/fonts (SIL Open Font Licence, a copy beside them): Geist for everything, Geist Mono for figures that line up. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-variable.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-mono-variable.woff2") format("woff2"); }

:root {
  --bg: #f3f3f3;
  --surface: #ffffff;
  --surface-2: #f8f8f8;
  --surface-3: #ebebeb;
  --rail: #e7e7e7;
  --nav: #ededed;
  --ink: #161616;
  --ink-2: #3d3d3d;
  --ink-3: #636363;
  --line: rgba(0, 0, 0, .09);
  --line-2: rgba(0, 0, 0, .14);
  --active: rgba(0, 0, 0, .07);
  --fill: rgba(0, 0, 0, .06);       /* borderless buttons, chips and tags */
  --fill-2: rgba(0, 0, 0, .1);
  --accent: #111111;               /* the app itself is black and white; colour belongs to the tools (.hue-t-*) and to meaning */
  --accent-ink: #ffffff;
  --accent-text: #111111;
  --accent-soft: rgba(0, 0, 0, .06);
  --accent-line: rgba(0, 0, 0, .18);
  --link: #111111;
  --focus: #111111;
  --brand: var(--accent);
  --brand-ink: var(--accent-ink);
  --brand-soft: var(--accent-soft);
  --biz: #0f766e;
  --biz-ink: #ffffff;
  /* the Des. Prop. accents: base for fills and icons, ink for text on a tint, soft (10%) and line (30%) for tinted surfaces */
  --blue: #037cfd; --blue-ink: #0b5fc6; --blue-soft: color-mix(in srgb, #037cfd 10%, transparent); --blue-line: color-mix(in srgb, #037cfd 30%, transparent);
  --green: #36c45b; --green-ink: #1d7a3a; --green-soft: color-mix(in srgb, #36c45b 10%, transparent); --green-line: color-mix(in srgb, #36c45b 30%, transparent);
  --orange: #fc9702; --orange-ink: #945400; --orange-soft: color-mix(in srgb, #fc9702 10%, transparent); --orange-line: color-mix(in srgb, #fc9702 30%, transparent);
  --red: #fd3832; --red-ink: #c8241b; --red-soft: color-mix(in srgb, #fd3832 10%, transparent); --red-line: color-mix(in srgb, #fd3832 30%, transparent);
  --yellow: #fdce03; --yellow-ink: #7a5c00; --yellow-soft: color-mix(in srgb, #fdce03 10%, transparent); --yellow-line: color-mix(in srgb, #fdce03 30%, transparent);
  --teal: #32b2c4; --teal-ink: #0a7487; --teal-soft: color-mix(in srgb, #32b2c4 10%, transparent); --teal-line: color-mix(in srgb, #32b2c4 30%, transparent);
  --cyan: #34aae8; --cyan-ink: #0a6f9e; --cyan-soft: color-mix(in srgb, #34aae8 10%, transparent); --cyan-line: color-mix(in srgb, #34aae8 30%, transparent);
  --mint: #03c9c0; --mint-ink: #007a74; --mint-soft: color-mix(in srgb, #03c9c0 10%, transparent); --mint-line: color-mix(in srgb, #03c9c0 30%, transparent);
  --indigo: #5a58d3; --indigo-ink: #4745b8; --indigo-soft: color-mix(in srgb, #5a58d3 10%, transparent); --indigo-line: color-mix(in srgb, #5a58d3 30%, transparent);
  --purple: #b14fe0; --purple-ink: #8a2fb3; --purple-soft: color-mix(in srgb, #b14fe0 10%, transparent); --purple-line: color-mix(in srgb, #b14fe0 30%, transparent);
  --pink: #fc2f57; --pink-ink: #c01742; --pink-soft: color-mix(in srgb, #fc2f57 10%, transparent); --pink-line: color-mix(in srgb, #fc2f57 30%, transparent);
  --brown: #a4865b; --brown-ink: #7d6340; --brown-soft: color-mix(in srgb, #a4865b 10%, transparent); --brown-line: color-mix(in srgb, #a4865b 30%, transparent);
  --gray: #8e8e93; --gray-ink: #5f5f64; --gray-soft: color-mix(in srgb, #8e8e93 12%, transparent); --gray-line: color-mix(in srgb, #8e8e93 30%, transparent);
  /* meaning */
  --ok: var(--green-ink); --ok-bg: var(--green-soft); --ok-line: var(--green-line); --ok-solid: #1f8a3f;
  --warn: var(--orange-ink); --warn-bg: var(--orange-soft); --warn-line: var(--orange-line); --warn-ink: var(--orange-ink); --warn-solid: #b25e00;
  --bad: var(--red-ink); --bad-bg: var(--red-soft); --bad-line: var(--red-line); --bad-solid: #d1291f;
  --info: var(--blue-ink); --info-bg: var(--blue-soft); --info-line: var(--blue-line);
  --shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .06);
  --r-btn: 4px;
  --r-ctl: 4px;
  --r: 4px;
  --radius: 4px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: var(--font);
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rail-w: 60px;                   /* the tool portal: 48 px buttons with 6 px either side */
  --nav-w: 252px;                   /* the selected tool's navigation */
  --top-h: 46px;
  --row-h: 30px;                    /* a navigation row */
  --fs: 13.5px; --fs-sm: 12.5px; --fs-xs: 12px; --fs-2xs: 11px; --fs-lg: 16px; --fs-title: 23px;
  --fs-nav: var(--fs);
  --side-w: calc(var(--rail-w) + var(--nav-w));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111111; --surface: #191919; --surface-2: #1e1e1e; --surface-3: #262626; --rail: #0a0a0a; --nav: #0e0e0e;
    --ink: #ededed; --ink-2: #c4c4c4; --ink-3: #9d9d9d;
    --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .13); --active: rgba(255, 255, 255, .08); --fill: rgba(255, 255, 255, .07); --fill-2: rgba(255, 255, 255, .11);
    --accent: #ffffff; --accent-ink: #111111; --accent-text: #ffffff; --accent-soft: rgba(255, 255, 255, .08); --accent-line: rgba(255, 255, 255, .22);
    --link: #ededed; --focus: #ffffff;
    --blue: #0786fd; --blue-ink: #6cb6ff; --blue-soft: color-mix(in srgb, #0786fd 10%, transparent); --blue-line: color-mix(in srgb, #0786fd 30%, transparent);
    --green: #32ce5a; --green-ink: #3ddc6a; --green-soft: color-mix(in srgb, #32ce5a 10%, transparent); --green-line: color-mix(in srgb, #32ce5a 30%, transparent);
    --orange: #fca10c; --orange-ink: #ffa81f; --orange-soft: color-mix(in srgb, #fca10c 10%, transparent); --orange-line: color-mix(in srgb, #fca10c 30%, transparent);
    --red: #fd423c; --red-ink: #ff8a80; --red-soft: color-mix(in srgb, #fd423c 10%, transparent); --red-line: color-mix(in srgb, #fd423c 30%, transparent);
    --yellow: #fdd807; --yellow-ink: #ffd60a; --yellow-soft: color-mix(in srgb, #fdd807 10%, transparent); --yellow-line: color-mix(in srgb, #fdd807 30%, transparent);
    --teal: #42cddd; --teal-ink: #5bc8dc; --teal-soft: color-mix(in srgb, #42cddd 10%, transparent); --teal-line: color-mix(in srgb, #42cddd 30%, transparent);
    --cyan: #66cffd; --cyan-ink: #6fd0ff; --cyan-soft: color-mix(in srgb, #66cffd 10%, transparent); --cyan-line: color-mix(in srgb, #66cffd 30%, transparent);
    --mint: #60e8e4; --mint-ink: #5be3dd; --mint-soft: color-mix(in srgb, #60e8e4 10%, transparent); --mint-line: color-mix(in srgb, #60e8e4 30%, transparent);
    --indigo: #605ee3; --indigo-ink: #a9a7fa; --indigo-soft: color-mix(in srgb, #605ee3 10%, transparent); --indigo-line: color-mix(in srgb, #605ee3 30%, transparent);
    --purple: #c157f4; --purple-ink: #dba2f5; --purple-soft: color-mix(in srgb, #c157f4 10%, transparent); --purple-line: color-mix(in srgb, #c157f4 30%, transparent);
    --pink: #fc3961; --pink-ink: #ff8aa3; --pink-soft: color-mix(in srgb, #fc3961 10%, transparent); --pink-line: color-mix(in srgb, #fc3961 30%, transparent);
    --brown: #ae9065; --brown-ink: #d0b48f; --brown-soft: color-mix(in srgb, #ae9065 10%, transparent); --brown-line: color-mix(in srgb, #ae9065 30%, transparent);
    --gray: #98989d; --gray-ink: #b8b8be; --gray-soft: color-mix(in srgb, #98989d 14%, transparent); --gray-line: color-mix(in srgb, #98989d 30%, transparent);
    --ok-solid: #248a3d; --warn-solid: #b25e00; --bad-solid: #d1291f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111111; --surface: #191919; --surface-2: #1e1e1e; --surface-3: #262626; --rail: #0a0a0a; --nav: #0e0e0e;
  --ink: #ededed; --ink-2: #c4c4c4; --ink-3: #9d9d9d;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .13); --active: rgba(255, 255, 255, .08); --fill: rgba(255, 255, 255, .07); --fill-2: rgba(255, 255, 255, .11);
  --accent: #ffffff; --accent-ink: #111111; --accent-text: #ffffff; --accent-soft: rgba(255, 255, 255, .08); --accent-line: rgba(255, 255, 255, .22);
  --link: #ededed; --focus: #ffffff;
  --blue: #0786fd; --blue-ink: #6cb6ff; --blue-soft: color-mix(in srgb, #0786fd 10%, transparent); --blue-line: color-mix(in srgb, #0786fd 30%, transparent);
  --green: #32ce5a; --green-ink: #3ddc6a; --green-soft: color-mix(in srgb, #32ce5a 10%, transparent); --green-line: color-mix(in srgb, #32ce5a 30%, transparent);
  --orange: #fca10c; --orange-ink: #ffa81f; --orange-soft: color-mix(in srgb, #fca10c 10%, transparent); --orange-line: color-mix(in srgb, #fca10c 30%, transparent);
  --red: #fd423c; --red-ink: #ff8a80; --red-soft: color-mix(in srgb, #fd423c 10%, transparent); --red-line: color-mix(in srgb, #fd423c 30%, transparent);
  --yellow: #fdd807; --yellow-ink: #ffd60a; --yellow-soft: color-mix(in srgb, #fdd807 10%, transparent); --yellow-line: color-mix(in srgb, #fdd807 30%, transparent);
  --teal: #42cddd; --teal-ink: #5bc8dc; --teal-soft: color-mix(in srgb, #42cddd 10%, transparent); --teal-line: color-mix(in srgb, #42cddd 30%, transparent);
  --cyan: #66cffd; --cyan-ink: #6fd0ff; --cyan-soft: color-mix(in srgb, #66cffd 10%, transparent); --cyan-line: color-mix(in srgb, #66cffd 30%, transparent);
  --mint: #60e8e4; --mint-ink: #5be3dd; --mint-soft: color-mix(in srgb, #60e8e4 10%, transparent); --mint-line: color-mix(in srgb, #60e8e4 30%, transparent);
  --indigo: #605ee3; --indigo-ink: #a9a7fa; --indigo-soft: color-mix(in srgb, #605ee3 10%, transparent); --indigo-line: color-mix(in srgb, #605ee3 30%, transparent);
  --purple: #c157f4; --purple-ink: #dba2f5; --purple-soft: color-mix(in srgb, #c157f4 10%, transparent); --purple-line: color-mix(in srgb, #c157f4 30%, transparent);
  --pink: #fc3961; --pink-ink: #ff8aa3; --pink-soft: color-mix(in srgb, #fc3961 10%, transparent); --pink-line: color-mix(in srgb, #fc3961 30%, transparent);
  --brown: #ae9065; --brown-ink: #d0b48f; --brown-soft: color-mix(in srgb, #ae9065 10%, transparent); --brown-line: color-mix(in srgb, #ae9065 30%, transparent);
  --gray: #98989d; --gray-ink: #b8b8be; --gray-soft: color-mix(in srgb, #98989d 14%, transparent); --gray-line: color-mix(in srgb, #98989d 30%, transparent);
  --ok-solid: #248a3d; --warn-solid: #b25e00; --bad-solid: #d1291f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* one hue at a time: components read --h, --h-ink, --h-soft and --h-line */
.hue-blue { --h: var(--blue); --h-ink: var(--blue-ink); --h-soft: var(--blue-soft); --h-line: var(--blue-line); }
.hue-green { --h: var(--green); --h-ink: var(--green-ink); --h-soft: var(--green-soft); --h-line: var(--green-line); }
.hue-orange { --h: var(--orange); --h-ink: var(--orange-ink); --h-soft: var(--orange-soft); --h-line: var(--orange-line); }
.hue-red { --h: var(--red); --h-ink: var(--red-ink); --h-soft: var(--red-soft); --h-line: var(--red-line); }
.hue-yellow { --h: var(--yellow); --h-ink: var(--yellow-ink); --h-soft: var(--yellow-soft); --h-line: var(--yellow-line); }
.hue-teal { --h: var(--teal); --h-ink: var(--teal-ink); --h-soft: var(--teal-soft); --h-line: var(--teal-line); }
.hue-cyan { --h: var(--cyan); --h-ink: var(--cyan-ink); --h-soft: var(--cyan-soft); --h-line: var(--cyan-line); }
.hue-mint { --h: var(--mint); --h-ink: var(--mint-ink); --h-soft: var(--mint-soft); --h-line: var(--mint-line); }
.hue-indigo { --h: var(--indigo); --h-ink: var(--indigo-ink); --h-soft: var(--indigo-soft); --h-line: var(--indigo-line); }
.hue-purple { --h: var(--purple); --h-ink: var(--purple-ink); --h-soft: var(--purple-soft); --h-line: var(--purple-line); }
.hue-pink { --h: var(--pink); --h-ink: var(--pink-ink); --h-soft: var(--pink-soft); --h-line: var(--pink-line); }
.hue-brown { --h: var(--brown); --h-ink: var(--brown-ink); --h-soft: var(--brown-soft); --h-line: var(--brown-line); }
.hue-gray { --h: var(--gray); --h-ink: var(--gray-ink); --h-soft: var(--gray-soft); --h-line: var(--gray-line); }

/* Each tool has its own hue in the portal and everywhere it is named. The portal order steps 150 degrees each time, so neighbours are always far apart
   (price, quote, propose, agree, bill, runway, huddle, playbook, pulse, listen, hire, onboard). nav.test.mjs and design.e2e.mjs check it. */
.hue-t-price { --th: 215; } .hue-t-quote { --th: 5; } .hue-t-propose { --th: 155; } .hue-t-agree { --th: 305; } .hue-t-bill { --th: 95; } .hue-t-runway { --th: 245; }
.hue-t-huddle { --th: 35; } .hue-t-playbook { --th: 185; } .hue-t-pulse { --th: 335; } .hue-t-listen { --th: 125; } .hue-t-hire { --th: 275; } .hue-t-onboard { --th: 65; } .hue-t-schedule { --th: 140; }
[class*="hue-t-"] { --h: hsl(var(--th) 72% 46%); --h-ink: hsl(var(--th) 82% 26%); --h-soft: hsl(var(--th) 75% 95%); --h-line: hsl(var(--th) 55% 78%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [class*="hue-t-"] { --h: hsl(var(--th) 80% 62%); --h-ink: hsl(var(--th) 85% 76%); --h-soft: hsl(var(--th) 32% 19%); --h-line: hsl(var(--th) 35% 34%); } }
:root[data-theme="dark"] [class*="hue-t-"] { --h: hsl(var(--th) 80% 62%); --h-ink: hsl(var(--th) 85% 76%); --h-soft: hsl(var(--th) 32% 19%); --h-line: hsl(var(--th) 35% 34%); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 12px); }
html[data-nav="collapsed"] { --side-w: var(--rail-w); }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs)/1.45 var(--font); padding: var(--top-h) 0 0 var(--side-w); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.005em; font-weight: 600; }
h1 { font: 600 var(--fs-title)/1.2 var(--display); letter-spacing: -.01em; }
h2 { font-size: var(--fs); } h3 { font-size: var(--fs); }
p { margin: 0 0 .75em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
small, .small { font-size: var(--fs-xs); }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--focus) 28%, transparent); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- icons ---------- */
.i { display: block; flex: none; }
.ico { display: inline-grid; place-items: center; flex: none; border-radius: 4px; background: var(--h-soft, var(--surface-3)); color: var(--h-ink, var(--ink-2)); }
.ico.s22 { width: 22px; height: 22px; } .ico.s26 { width: 26px; height: 26px; } .ico.s32 { width: 32px; height: 32px; border-radius: 4px; } .ico.s40 { width: 40px; height: 40px; border-radius: 4px; }
.logo { display: block; object-fit: contain; border-radius: 4px; }

/* ---------- shell: the tool portal (far left), the selected tool's navigation, the top bar ---------- */
.skip { position: fixed; left: 8px; top: -60px; z-index: 300; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: var(--r); border: 0; }
.skip:focus { top: 8px; }
/* the tool portal: one button per tool, grouped by use case, the open tool marked */
.wb-rail { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: var(--rail-w); background: var(--rail); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 6px 0; gap: 2px; }
.rail-scroll { flex: 1; min-height: 0; width: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0; scrollbar-width: none; }
.rail-scroll::-webkit-scrollbar { display: none; }
.rail-sep { width: 24px; height: 1px; background: var(--line); margin: 5px 0; flex: none; }
.rail-btn { position: relative; width: 48px; height: 48px; border-radius: 4px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; text-decoration: none; padding: 0; flex: none; }
.rail-btn:hover { background: var(--active); color: var(--ink); }
.rail-btn .ico { width: 28px; height: 28px; border-radius: 4px; background: none; color: inherit; }
.rail-btn[aria-current="page"] { background: var(--active); color: var(--h-ink, var(--ink)); }
.rail-btn[aria-current="page"]::before { content: ""; position: absolute; left: -6px; top: 12px; bottom: 12px; width: 2px; border-radius: 4px; background: var(--h, var(--accent)); }
.rail-tip { position: fixed; z-index: 130; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 500; line-height: 1.2; padding: 5px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none; }
.rail-btn .count { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 4px; background: var(--orange); border: 2px solid var(--rail); box-sizing: content-box; font-size: 0; }
.rail-btn .count.urgent { background: var(--red); }
.rail-foot .rail-btn .count { top: 3px; right: 3px; width: auto; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 4px; border: 0; background: var(--orange-soft); color: var(--orange-ink); font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.rail-foot .rail-btn .count.urgent { background: var(--bad-solid); color: #fff; box-shadow: none; }
.rail-btn .pip { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 4px; background: var(--orange); box-shadow: 0 0 0 2px var(--rail); }
.rail-mark { position: relative; width: 36px; height: 36px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: 17px; text-decoration: none; margin-bottom: 4px; flex: none; }
.rail-mark:hover { filter: brightness(1.06); }
.rail-mark .count { position: absolute; top: -5px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; background: var(--orange); color: #111; font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 1; box-shadow: 0 0 0 2px var(--rail); }
.rail-mark .count.urgent { background: var(--bad-solid); color: #fff; }

.rail-foot { display: grid; gap: 1px; justify-items: center; padding-top: 5px; border-top: 1px solid var(--line); width: 100%; }

/* the selected tool's navigation: its own screens, then what it made lately (claude.ai/new sidebar at 90%) */
.wb-nav { position: fixed; z-index: 39; top: 0; bottom: 0; left: var(--rail-w); width: var(--nav-w); background: var(--nav); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; font-size: var(--fs-nav); }
html[data-nav="collapsed"] .wb-nav { display: none; }
.nav-head { display: flex; align-items: center; gap: 9px; height: var(--top-h); padding: 0 12px 0 14px; flex: none; }
.nav-head .ico { width: 24px; height: 24px; border-radius: 4px; }
.nav-head .who { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.nav-head .t { font-weight: 600; font-size: var(--fs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-head .s { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-switch { width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 0; background: transparent; border-radius: 4px; cursor: pointer; color: var(--ink); text-align: left; }
.ws-switch:hover { background: var(--active); }
.ws-switch .who { min-width: 0; display: grid; line-height: 1.25; flex: 1; }
.ws-switch .t { font-weight: 600; font-size: var(--fs-nav); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-switch .s { font-size: 11px; color: var(--ink-3); }
.ws-switch .i { color: var(--ink-3); margin-left: auto; }
.avatar { width: 26px; height: 26px; border-radius: 4px; background: var(--biz); color: var(--biz-ink); display: inline-grid; place-items: center; font-size: .7rem; font-weight: 700; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ibtn { width: 30px; height: 30px; border-radius: 4px; border: 0; background: transparent; color: var(--ink-3); display: inline-grid; place-items: center; cursor: pointer; padding: 0; text-decoration: none; flex: none; position: relative; }
.ibtn:hover { background: var(--active); color: var(--ink); }
.ibtn .count { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; background: var(--bad-solid); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.nav-search { margin: 0; width: 100%; display: flex; align-items: center; gap: 8px; height: var(--row-h); padding: 0 6px 0 8px; border: 0; background: var(--fill); border-radius: 4px; color: var(--ink-3); font-size: var(--fs-nav); cursor: pointer; text-align: left; flex: none; }
.nav-search:hover { background: var(--fill-2); color: var(--ink-2); }
/* the project switcher: which project every tool is showing */
.proj-switch { margin: 0; width: 100%; display: flex; align-items: center; gap: 8px; min-height: calc(var(--row-h) + 6px); padding: 3px 6px 3px 8px; border: 1px solid transparent; background: transparent; border-radius: 4px; color: var(--ink); text-align: left; cursor: pointer; flex: none; }
.proj-switch:hover { background: var(--active); }
.proj-switch .ico { color: var(--ink-3); display: inline-flex; }
.proj-switch.on { background: var(--fill); }
.proj-switch.on .ico { color: var(--accent); }
.proj-switch .who { min-width: 0; flex: 1; display: grid; line-height: 1.2; }
.proj-switch .s { font-size: 10.5px; color: var(--ink-3); }
.proj-switch .t { font-size: var(--fs-nav); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-switch > svg { color: var(--ink-3); flex: none; }
.proj-scroll { max-height: 320px; overflow: auto; }
.pop-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-note { padding: 4px 8px 6px; max-width: 260px; font-size: 12px; color: var(--ink-3); }
/* the project tree in the Projects panel: folders indent under their project */
.nav-item.proj-node { padding-left: calc(10px + var(--depth, 0) * 14px); }
.nav-item.proj-node .twig { width: 6px; height: 6px; border-radius: 4px; border: 1.5px solid var(--ink-3); flex: none; margin: 0 5px 0 4px; }
.nav-item.proj-node[aria-current] .twig { border-color: var(--accent); background: var(--accent); }
kbd { font: 500 10.5px/1 var(--font); border: 0; border-radius: 4px; padding: 3px 5px; background: var(--fill); color: var(--ink-3); margin-left: auto; white-space: nowrap; }
.nav-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 8px 12px; }
/* the panel in three groups, each divided from the next: find and scope (search, project), this tool's screens, what it made lately */
.nav-top { display: grid; gap: 6px; padding: 2px 8px 10px; border-bottom: 1px solid var(--line); flex: none; }
#wb-recent { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
#wb-recent .nav-sec:first-child { margin-top: 8px; }
.nav-sec { margin: 14px 0 2px; padding: 0 8px; min-height: 24px; display: flex; align-items: center; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.nav-sec:first-child { margin-top: 0; }
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); }
.nav-item { display: flex; align-items: center; gap: 9px; min-height: var(--row-h); padding: 0 8px; border-radius: 4px; color: var(--ink-2); text-decoration: none; font-size: var(--fs-nav); font-weight: 400; line-height: 1.25; width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.nav-item:is(button) { border-radius: 4px; }
.nav-item:hover { background: var(--active); color: var(--ink); text-decoration: none; }
.nav-item[aria-current] { background: var(--active); color: var(--ink); font-weight: 500; }
.nav-item .ico { width: 16px; height: 16px; border-radius: 0; background: none; color: var(--ink-3); }
.nav-item[aria-current] .ico { color: var(--h-ink, var(--ink)); }
.nav-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .n { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nav-item .n.warn { color: var(--orange-ink); font-weight: 700; }
.nav-item .badge { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 4px; background: var(--orange-soft); color: var(--orange-ink); font-size: 10.5px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }
.nav-item .badge.urgent { background: var(--bad-solid); color: #fff; box-shadow: none; }
.nav-item.recent { font-weight: 400; }
.nav-item.recent .ico { display: none; }
.nav-empty { padding: 4px 8px; font-size: 11.5px; color: var(--ink-3); }
.nav-tools { display: none; }
.nav-foot { border-top: 1px solid var(--line); padding: 6px 8px; flex: none; }

.wb-top { position: fixed; z-index: 35; top: 0; left: var(--side-w); right: 0; height: var(--top-h); display: flex; align-items: center; gap: 6px; padding: 0 12px 0 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .here { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { opacity: .5; }
.top-spacer { flex: 1; }
.top-search { display: none; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 9px; width: 240px; border: 0; background: var(--fill); border-radius: 4px; color: var(--ink-3); font-size: 12.5px; cursor: pointer; }
html[data-nav="collapsed"] .top-search { display: flex; }
.top-search:hover { background: var(--fill-2); }
.wb-banners { }
.banner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 24px; border-bottom: 1px solid var(--line); font-size: 13px; }
.banner.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.banner.bad { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); }
.banner.info { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }
.banner .grow { flex: 1; min-width: 200px; }
.scrim { display: none; }
/* a tool's screens live in the navigation panel while it is open, so the row of tabs in the page steps aside; with the panel hidden, or on a phone, the tabs come back */
@media (min-width: 900px) { html[data-sections]:not([data-nav="collapsed"]) .tabs { display: none; } }

/* ---------- portals: menus, popovers, search palette ---------- */
.pop { position: fixed; z-index: 120; min-width: 220px; max-width: min(360px, calc(100vw - 16px)); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 4px; }
.pop-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 4px 8px; border: 0; background: transparent; border-radius: 4px; color: var(--ink); text-align: left; cursor: pointer; text-decoration: none; }
.pop-item:hover, .pop-item:focus-visible { background: var(--surface-2); text-decoration: none; outline-offset: -2px; }
.pop-item .i { color: var(--ink-3); }
.pop-item .k { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.pop-item[aria-checked="true"] .k { color: var(--ok); }
.pop-sep { height: 1px; background: var(--line); margin: 4px 0; }
.pop-label { padding: 6px 8px 2px; font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.pal-back { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .42); display: grid; place-items: start center; padding: 12vh 12px 0; }
.pal { width: min(640px, 100%); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: 72vh; }
.pal-input { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.pal-input input { flex: 1; border: 0; background: transparent; outline: 0; box-shadow: none; font: inherit; font-size: var(--fs-lg); height: 48px; min-height: 0; padding: 0; color: var(--ink); width: auto; }
.pal-input input:focus { box-shadow: none; }
.pal-list { overflow: auto; padding: 6px; }
.pal-sec { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.pal-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 4px; cursor: pointer; color: var(--ink); text-decoration: none; }
.pal-item[aria-selected="true"] { background: var(--surface-3); }
.pal-item .ico { width: 24px; height: 24px; }
.pal-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-item .sub { color: var(--ink-3); font-size: 12px; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-empty { padding: 22px 12px; text-align: center; color: var(--ink-3); }
.pal-foot { border-top: 1px solid var(--line); padding: 7px 14px; font-size: 12px; color: var(--ink-3); display: flex; gap: 16px; flex-wrap: wrap; }
.pal-foot kbd { margin: 0 4px 0 0; }

/* ---------- layout ---------- */
.wb-main { max-width: 1208px; margin: 0 auto; padding: 28px 24px 72px; }
.tool-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; justify-content: space-between; margin-bottom: 20px; }
.tool-head .th { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.tool-head h1 { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tool-head .sub { color: var(--ink-2); font: 400 var(--fs)/1.45 var(--font); margin-top: 4px; }
.tool-head .rw-details { margin-top: 4px; }
.tool-head .rw-details summary { cursor: pointer; color: var(--ink-3); font-size: 12px; width: fit-content; }
.rw { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; margin-bottom: 20px; }
.page-head h1 { margin: 0 0 4px; }
.page-head p { margin: 0; color: var(--ink-2); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.two-col > .aside { position: sticky; top: calc(var(--top-h) + 14px); display: grid; gap: 12px; }
@media (max-width: 1431px) { html:not([data-nav="collapsed"]) .two-col { grid-template-columns: minmax(0, 1fr); } html:not([data-nav="collapsed"]) .two-col > .aside { position: static; } }
@media (max-width: 1199px) { .two-col { grid-template-columns: minmax(0, 1fr); } .two-col > .aside { position: static; } } /* minmax(0, ...) so one wide card cannot stretch the whole column past a phone screen */
.grid { display: grid; gap: 12px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 720px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.two-col > * { min-width: 0; }
.stack.tight { gap: 6px; }
.spacer { flex: 1; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px 14px; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card.flat { box-shadow: none; }
.card.accent { border-left: 3px solid var(--h, var(--accent)); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; margin-bottom: 10px; flex-wrap: wrap; }
.card-head h2, .card-head h3 { font-size: var(--fs); font-weight: 600; }
.card-head h2, .card-head h3 { margin: 0; }
.kpi { display: grid; gap: 2px; }
.kpi .v { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: var(--fs-sm); color: var(--ink-3); }
.empty { text-align: center; padding: 28px 12px; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: var(--r); }

/* ---------- forms ---------- */
label.f, .f > label { display: grid; align-content: start; gap: 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); }
label.f > .hint, .hint { font-weight: 400; color: var(--ink-3); font-size: var(--fs-xs); }
.input, select.input, textarea.input, input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="url"], input[type="search"], input[type="password"], input[type="tel"], select, textarea {
  width: 100%; max-width: 100%; font: inherit; font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-ctl); padding: 4px 9px; min-height: 30px; }
.input:focus, input:focus, select:focus, textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); outline: 0; }
textarea { resize: vertical; min-height: 72px; line-height: 1.45; }
input[type="color"] { padding: 2px; min-height: 34px; width: 56px; border-radius: var(--r-ctl); border: 1px solid var(--line-2); background: var(--surface); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
input[type="file"] { font: inherit; max-width: 100%; min-width: 0; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 500; padding: 4px 10px; margin-right: 10px; border: 0; border-radius: var(--r-btn); background: var(--fill); color: var(--ink); cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--fill-2); }
.input:hover { border-color: var(--ink-3); }
.input[aria-invalid="true"], input[aria-invalid="true"] { border-color: var(--red); background: var(--bad-bg); }
.check { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; font-size: var(--fs); cursor: pointer; }
.suffix { position: relative; }
.suffix > span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; font-size: .82rem; }
.suffix > input { padding-right: 48px; }
.suffix > input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.suffix > input[type=number]::-webkit-inner-spin-button, .suffix > input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input.num, .num-in { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: var(--fs-sm); font-weight: 500; padding: 4px 11px; min-height: 30px;
  border-radius: var(--r-btn); border: 0; background: var(--fill); color: var(--ink); cursor: pointer; text-decoration: none; white-space: normal; text-align: center; line-height: 1.25; }
.btn:hover { background: var(--fill-2); text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.07); background: var(--accent); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--fill); }
.btn.danger { color: var(--bad); background: var(--bad-bg); }
.btn.danger:hover { background: var(--red-line); }
.btn.danger.solid { background: var(--bad-solid); color: #fff; }
.btn.sm { min-height: 26px; padding: 2px 9px; font-size: var(--fs-xs); }
.btn.icon { min-width: 30px; padding: 4px 6px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- pills, hue badges, callouts ---------- */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; line-height: 20px; border-radius: 4px; font-size: var(--fs-2xs); font-weight: 600; background: var(--fill); color: var(--ink-2); border: 0; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.brand { background: var(--accent-soft); color: var(--accent-text); }
.pill.hue { background: var(--h-soft); color: var(--h-ink); }
.rw .pill { padding: 0 6px; }
.callout { padding: 10px 12px; border-radius: var(--r); border: 0; background: var(--fill); font-size: var(--fs); }
.callout.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.callout.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.callout.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.callout.info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.callout strong { font-weight: 700; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table.t { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.t th { text-align: left; font-size: var(--fs-xs); color: var(--ink-2); font-weight: 500; padding: 9px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
table.t td { padding: 8px 10px; height: 40px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.t td .input { min-height: 30px; padding: 4px 8px; }
table.t tfoot td { font-weight: 600; background: var(--surface-2); }
table.t tr.row-warn td { background: color-mix(in srgb, var(--orange) 12%, transparent); }
table.t tr.row-loss td { background: color-mix(in srgb, var(--red) 12%, transparent); }
table.t tr.row-off td { opacity: .55; }
table.t tr.clickable { cursor: pointer; }
table.t tr.clickable:hover td { background: var(--surface-2); }

/* ---------- tabs ---------- */
/* The baseline is an inset shadow, not a border plus a -1px overlap: the overlap made the row 1px taller than its box, which draws a stray vertical scrollbar where scrollbars take space (Windows, Linux). */
.tabs { display: flex; gap: 2px; box-shadow: inset 0 -1px 0 var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button { font: inherit; font-size: var(--fs); font-weight: 500; background: none; border: 0; padding: 8px 11px; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; border-radius: 4px 4px 0 0; }
.tabs button:hover { color: var(--ink); background: var(--surface-2); }
.tabs button:focus-visible { outline-offset: -2px; } /* the row clips anything outside it, so the ring sits inside the button */
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--h, var(--accent)); }

/* ---------- segmented control, stepper, meters ---------- */
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--fill); border-radius: 4px; }
.seg > button, .seg .btn { font: inherit; font-size: var(--fs-xs); font-weight: 500; padding: 2px 9px; min-height: 24px; border: 0; background: transparent; border-radius: 4px; color: var(--ink-2); cursor: pointer; }
.seg > button:hover { color: var(--ink); }
.seg > button[aria-pressed="true"], .seg > button.primary, .seg > button[aria-selected="true"], .seg .btn.primary { background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .seg { flex-wrap: wrap; max-width: 100%; } }
.stepper { display: flex; gap: 0; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.stepper li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-3); padding: 2px 0; }
.stepper li:not(:last-child)::after { content: "›"; color: var(--ink-3); margin: 0 8px 0 6px; font-size: 1.1rem; line-height: 1; }
.stepper li .dot { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--line-2); display: inline-grid; place-items: center; font-size: .6rem; background: var(--surface); }
.stepper li.done { color: var(--ink-2); }
.stepper li.done .dot { background: var(--green); border-color: var(--green); color: #fff; }
.stepper li.now { color: var(--ink); font-weight: 600; }
.stepper li.now .dot { border-color: var(--accent); }
.meter { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--h, var(--accent)); border-radius: 4px; }
.meter.warn > i { background: var(--orange); } .meter.bad > i { background: var(--red); }

/* ---------- modal, drawer, toast ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 100; display: grid; place-items: start center; padding: 4vh 12px; overflow: auto; }
.modal { background: var(--surface); color: var(--ink); width: min(680px, 100%); border-radius: var(--r); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: 92vh; }
.modal.wide { width: min(920px, 100%); } .modal.narrow { width: min(460px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: var(--fs-lg); }
.modal-body { padding: 16px; overflow: auto; }
.modal-foot { padding: 10px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; background: var(--surface-2); border-radius: 0 0 var(--r) var(--r); }
.drawer-back { position: fixed; inset: 0; z-index: 110; background: rgba(0, 0, 0, .32); }
.drawer { position: fixed; z-index: 111; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--surface); border-left: 1px solid var(--line-2); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: grid; gap: 18px; align-content: start; }
.drawer-foot { padding: 10px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; background: var(--surface-2); }
.dl { display: grid; grid-template-columns: minmax(96px, 130px) minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.dl dt { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; padding-top: 1px; }
.dl dd { margin: 0; overflow-wrap: anywhere; }
.toasts { position: fixed; right: 14px; bottom: 14px; z-index: 200; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 28px)); }
.toast { background: var(--ink); color: var(--bg); padding: 9px 12px; border-radius: 4px; box-shadow: var(--shadow-lg); font-size: var(--fs); display: flex; gap: 10px; align-items: flex-start; }
.toast.ok { background: var(--ok-solid); color: #fff; } .toast.bad { background: var(--bad-solid); color: #fff; } .toast.warn { background: var(--warn-solid); color: #fff; }
.toast button { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

/* ---------- home: dashboard ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 4px; color: inherit; text-decoration: none; align-content: start; }
.tile:hover { border-color: var(--line-2); text-decoration: none; }
.tile .top { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 400; }
.tile .v { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 4px; }
.tile .d { font-size: var(--fs-xs); color: var(--ink-3); }
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1431px) { html:not([data-nav="collapsed"]) .dash { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1199px) { .dash { grid-template-columns: minmax(0, 1fr); } }
.dash > * { min-width: 0; }
.sec { margin-bottom: 22px; }
.sec > .card-head { margin-bottom: 8px; }
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.flow .node { position: relative; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: inherit; text-decoration: none; display: grid; gap: 2px; align-content: start; }
.flow .node:hover { border-color: var(--line-2); text-decoration: none; }
.flow .node b { font-size: .85rem; font-weight: 600; } .flow .node .n { font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.flow .arrow { display: none; }
.flow .node:not(:last-child)::after { content: "›"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 1.1rem; line-height: 1; }
@media (max-width: 1100px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flow .node::after { display: none; } }
@media (max-width: 560px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.next-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.next-list li { display: flex; gap: 12px; align-items: center; min-height: 46px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.next-list li:last-child { border-bottom: 0; }
.next-list li .grow { flex: 1; min-width: 0; }
.next-list li b { display: block; font-weight: 500; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }
.checklist li { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist .tick { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: #fff; flex: none; }
.checklist li.done .tick { background: var(--green); border-color: var(--green); }
.checklist li.done .lbl { color: var(--ink-3); text-decoration: line-through; }
.checklist .lbl { flex: 1; min-width: 0; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.feed li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; }
.feed .grow { flex: 1; min-width: 0; }
.feed .grow b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- records ---------- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.search-in { position: relative; flex: 1 1 240px; max-width: 380px; }
.search-in .i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search-in input { padding-left: 32px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-b { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border: 0; border-radius: 4px; background: var(--fill); color: var(--ink-2); cursor: pointer; font-size: var(--fs-xs); font-weight: 500; }
.chip-b:hover { background: var(--fill-2); color: var(--ink); }
.chip-b[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.chip-b .n { opacity: .7; font-variant-numeric: tabular-nums; }
table.t th .sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
table.t th .sort:hover { color: var(--ink); }
table.t th .sort .dir { display: inline-grid; } table.t th .sort .dir.asc svg { transform: rotate(180deg); }
table.t th .sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
table.t th[aria-sort="ascending"], table.t th[aria-sort="descending"] { color: var(--ink); }
table.t td.main { font-weight: 500; }
table.t td.main a { color: var(--ink); text-decoration: none; }
table.t td.main a:hover { text-decoration: underline; }
table.t td .sub { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--fs-xs); }
.tfoot-note { padding: 8px 12px; font-size: var(--fs-xs); color: var(--ink-3); border-top: 1px solid var(--line); background: var(--surface-2); }

/* ---------- generated documents (preview on screen) ---------- */
.doc-preview { background: var(--surface-3); border-radius: var(--r); padding: 18px; overflow: auto; }
.doc { background: #fff; color: #1a2230; width: 100%; max-width: 794px; margin: 0 auto; padding: 44px 48px; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); font: 13px/1.5 var(--font); }
@media (max-width: 640px) { .doc { padding: 22px 18px; } }

@media print {
  .no-print, .wb-rail, .wb-nav, .wb-top, .banner, .toasts, .scrim { display: none !important; }
  html, html[data-nav] { --side-w: 0px; --top-h: 0px; }
  body { background: #fff; padding: 0; }
  .wb-main { padding: 0; max-width: none; }
}

/* summary rows (totals card) */
.sumrows { display: grid; gap: 2px; }
.sumrows > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-variant-numeric: tabular-nums; }
.sumrows .grand { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 1.25rem; font-weight: 600; }

/* compact, optionally stackable tables */
table.t.tight { min-width: 620px; }
table.t.tight th, table.t.tight td { padding: 6px 5px; }
@media (max-width: 720px) {
  table.t.stackable { min-width: 0; }
  table.t.stackable, table.t.stackable tbody { display: block; }
  table.t.stackable thead { display: none; }
  table.t.stackable tr[data-i] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 12px; border-bottom: 1px solid var(--line); align-items: end; }
  table.t.stackable tr[data-i] td { padding: 0; border: 0; display: block; text-align: left; }
  table.t.stackable tr[data-i] td:first-child { grid-column: 1 / -1; }
  table.t.stackable tr[data-i] td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
  table.t.stackable tr[data-i] td .input { width: 100% !important; }
  table.t.stackable tr[data-i] td.num, table.t.stackable tr[data-i] td.center { text-align: left; }
  table.t.stackable tr[data-d] { display: block; }
  table.t.stackable tr[data-d][hidden] { display: none; }
  table.t.stackable tr[data-d] td { display: block; padding: 12px; }
}

/* ---------- charts: Apple system blue, orange, teal and purple in fixed order; blue and red for polarity ---------- */
:root {
  --c1: #1a73e8; --c2: #d46c00; --c3: #1a9e8f; --c4: #9b51e0;
  --pos: #1a73e8; --neg: #d93a30; --mid: #c9c9c9;
  --chart-grid: #ebebeb; --chart-axis: #cfcfcf;
  --age1: #99caff; --age2: #5aa7ff; --age3: #1a73e8; --age4: #0b57b8; --age5: #0a3e82;
  --age1-ink: #111827; --age2-ink: #111827; --age3-ink: #ffffff; --age4-ink: #ffffff; --age5-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c1: #3987e5; --c2: #d9780a; --c3: #1aa093; --c4: #a060e0;
    --pos: #3987e5; --neg: #e66767; --mid: #555555;
    --chart-grid: #2f2f2f; --chart-axis: #474747;
    --age1: #184f95; --age2: #256abf; --age3: #3987e5; --age4: #6da7ec; --age5: #86b6ef;
    --age1-ink: #ffffff; --age2-ink: #ffffff; --age3-ink: #111827; --age4-ink: #111827; --age5-ink: #111827;
  }
}
:root[data-theme="dark"] {
  --c1: #3987e5; --c2: #d9780a; --c3: #1aa093; --c4: #a060e0;
  --pos: #3987e5; --neg: #e66767; --mid: #555555;
  --chart-grid: #2f2f2f; --chart-axis: #474747;
  --age1: #184f95; --age2: #256abf; --age3: #3987e5; --age4: #6da7ec; --age5: #86b6ef;
  --age1-ink: #ffffff; --age2-ink: #ffffff; --age3-ink: #111827; --age4-ink: #111827; --age5-ink: #111827;
}
.chart { margin: 0; }
.chart figcaption { margin-bottom: 6px; }
.chart .legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .82rem; color: var(--ink-2); margin: 4px 0 8px; }
.chart .legend .key, .chart .tip .key, .segbar .legend .key { display: inline-block; width: 16px; height: 3px; border-radius: 4px; margin-right: 6px; vertical-align: middle; flex: none; }
.chart .legend .key.box, .segbar .legend .key.box { width: 10px; height: 10px; border-radius: 4px; }
.chart .plot { position: relative; border-radius: 4px; }
.chart svg { display: block; max-width: 100%; overflow: visible; }
.chart svg text { font: 11.5px var(--font); fill: var(--ink-3); }
.chart svg text.endlab, .chart svg text.marklab, .chart svg text.vlab { fill: var(--ink-2); font-weight: 600; }
.chart svg text.endlab, .chart svg text.marklab { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.chart svg .grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart svg .axis { stroke: var(--chart-axis); stroke-width: 1; }
.chart svg .ref { stroke: var(--ink-3); stroke-width: 1; opacity: .55; }
.chart svg .cross { stroke: var(--ink-3); stroke-width: 1; }
.chart svg .hover { fill: var(--ink); opacity: .06; }
.chart svg .bar:hover { filter: brightness(1.12); }
.chart .tip { position: absolute; z-index: 5; pointer-events: none; min-width: 150px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 4px; box-shadow: var(--shadow-lg); padding: 8px 10px; font-size: .8rem; }
.chart .tip .th { color: var(--ink-3); margin-bottom: 4px; }
.chart .tip .tr { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.chart .tip .tv { font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 2px; }
.chart .tip .tn { color: var(--ink-2); }
.chart-table summary { cursor: pointer; font-size: .82rem; color: var(--ink-3); margin-top: 8px; width: fit-content; }
.chart-table .table-wrap { margin-top: 6px; max-height: 280px; overflow: auto; }
.spark { vertical-align: middle; }
.segbar .seg-track { display: flex; gap: 2px; height: 8px; }
.segbar.tall .seg-track { height: 28px; }
.segbar .seg { border-radius: 4px; display: flex; align-items: center; min-width: 2px; color: #fff; font-size: .75rem; font-weight: 700; background: none; padding: 0; box-shadow: none; }
.segbar.tall .seg { border-radius: 4px; padding-left: 8px; }
.segbar .legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .82rem; color: var(--ink-2); margin-top: 8px; }

/* ---------- small screens: the rail goes, the navigation panel becomes a drawer ---------- */
@media (max-width: 899px) {
  html, html[data-nav] { --side-w: 0px; }
  .wb-rail { display: none; }
  .wb-nav, html[data-nav="collapsed"] .wb-nav { display: flex; left: 0; width: min(300px, 86vw); z-index: 90; transform: translateX(-102%); transition: transform .18s ease; box-shadow: var(--shadow-lg); visibility: hidden; }
  html[data-drawer="open"] .wb-nav { transform: none; visibility: visible; }
  html[data-drawer="open"] .scrim { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .4); }
  .wb-nav { font-size: 14px; }
  .nav-item { min-height: 36px; font-size: 14px; }
  .nav-search { height: 36px; font-size: 14px; }
  .nav-tools { display: block; }
  .wb-top { left: 0; }
  .top-search { display: none !important; }
  .wb-main { padding: 20px 16px 72px; }
  .banner { padding: 8px 14px; }
}
@media (min-width: 900px) { .only-small { display: none !important; } }
@media (max-width: 899px) { .only-wide { display: none !important; } }
@media (max-width: 560px) {
  .hide-sm { display: none; }
  .next-list li { flex-wrap: wrap; gap: 8px; }
  .next-list li .grow { flex-basis: 100%; order: 2; }
  .next-list li .pill { order: 1; }
  .next-list li .btn { order: 3; margin-left: auto; }
  .tool-head h1, .page-head h1 { font-size: 20px; }
  .crumbs .mid { display: none; }
}
@media (pointer: coarse) { .btn, .input, select, input[type="text"], input[type="number"], input[type="email"], input[type="date"] { min-height: 40px; } .btn.sm { min-height: 34px; } }