/* MSE Ops: the erp.mse.engineer design system (apps/mse-dashboard/app/static/app.css, docs/DESIGN.md), codified
   token for token, and lifted into an enterprise ERP shell:

   TWO TONES. The menu is the dark tone (deep navy in both themes); the work area is the light tone (near-white in the
   light theme, a slate visibly lighter than the menu in the dark theme). The dashboard's tokens (--ink .. --orb-3,
   --radius, --shadow) keep their exact names and values; the shell adds one tier of its own: --nav-* for the menu and
   --work / --card for the work area. Glass only for surfaces that float (menu edge, top bar, sign-in, drawer, menus,
   toasts, tooltips); working cards are near-solid so numbers never sit on a moving blur.

   TWO VOICES. Everything Arni did by itself is marked in sea-green with the spark icon ("Done by Arni"); everything that
   needs a person is marked in brass with the hand icon ("Needs you"). The two never share a colour.

   One stylesheet, no framework, no inline styles (CSP style-src 'self'). Tokens are oklch, defined once per theme. */

@font-face { font-family: "Inter"; src: url("../fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/InterVariable-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ---- Tokens: dark (the dashboard's :root, unchanged) ---- */
:root {
  --ink: oklch(0.155 0.025 255);
  --ink-2: oklch(0.19 0.028 255);
  --panel: oklch(0.205 0.026 255 / 0.82);
  --panel-solid: oklch(0.205 0.026 255);
  --glass: oklch(0.24 0.03 255 / 0.46);
  --glass-edge: oklch(0.95 0.02 250 / 0.12);
  --glass-hi: oklch(1 0 0 / 0.07);
  --text: oklch(0.96 0.008 250);
  --text-2: oklch(0.78 0.02 250);
  --text-3: oklch(0.66 0.02 252);
  --rule: oklch(0.95 0.02 250 / 0.08);
  --field: oklch(0.155 0.025 255 / 0.55);
  --blue: oklch(0.70 0.13 250);
  --blue-2: oklch(0.58 0.14 255);
  --brass: oklch(0.80 0.11 80);
  --sea: oklch(0.76 0.11 170);
  --coral: oklch(0.70 0.15 30);
  --plum: oklch(0.68 0.10 320);
  --good: oklch(0.78 0.13 155);
  --bad: oklch(0.72 0.15 28);
  --shadow: 0 1px 0 var(--glass-hi) inset, 0 20px 50px -24px oklch(0 0 0 / 0.65);
  --radius: 18px;
  --orb-1: oklch(0.45 0.14 255 / 0.55);
  --orb-2: oklch(0.55 0.10 80 / 0.28);
  --orb-3: oklch(0.45 0.10 190 / 0.30);
  /* Shell tier (ERP uplift) */
  --nav: oklch(0.125 0.032 258);
  --nav-2: oklch(0.105 0.03 260);
  --nav-edge: oklch(0.95 0.02 250 / 0.10);
  --nav-text: oklch(0.90 0.015 250);
  --nav-text-2: oklch(0.74 0.025 252);
  --nav-text-3: oklch(0.58 0.03 254);
  --nav-hover: oklch(1 0 0 / 0.06);
  --nav-on: oklch(0.70 0.13 250 / 0.20);
  --nav-accent: oklch(0.74 0.13 245);
  --work: oklch(0.205 0.026 255);
  --work-2: oklch(0.23 0.028 255);
  --card: oklch(0.245 0.026 255 / 0.92);
  --card-solid: oklch(0.245 0.026 255);
  --card-edge: oklch(0.95 0.02 250 / 0.10);
  --bar: oklch(0.225 0.026 255 / 0.78);
  --auto: var(--sea);
  --human: var(--brass);
  --radius-sm: 12px;
  --side-w: 240px;
  --bar-h: 60px;
  /* Inks: an accent used as TEXT. Each reads at 4.5:1 or better on every surface and on its own tint, in both themes
     (tests/test_contrast.py checks every pair). The plain accents stay for bars, borders, tints and icons. */
  --blue-ink: oklch(0.78 0.11 250);
  --brass-ink: oklch(0.83 0.11 80);
  --sea-ink: oklch(0.79 0.11 170);
  --coral-ink: oklch(0.77 0.13 30);
  --plum-ink: oklch(0.78 0.09 320);
  --good-ink: oklch(0.81 0.13 155);
  --bad-ink: oklch(0.77 0.13 28);
  --auto-ink: var(--sea-ink);
  --human-ink: var(--brass-ink);
  /* Fills behind white text (primary and approve buttons, the current tracker step, the avatar): 4.5:1 or better. */
  --fill-blue: oklch(0.54 0.15 256);
  --fill-blue-2: oklch(0.47 0.15 258);
  --fill-good: oklch(0.52 0.13 155);
  --fill-good-2: oklch(0.45 0.13 155);
  --fill-plum: oklch(0.50 0.12 320);
  --focus: oklch(0.80 0.12 245);
  /* One type scale, one spacing scale, radii, elevation, the focus ring and the touch target. Same in both themes. */
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px;
  --lh: 1.5; --lh-tight: 1.2;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
  --e-1: 0 1px 2px oklch(0 0 0 / .08);
  --e-2: var(--shadow);
  --e-3: 0 28px 70px -28px oklch(0 0 0 / .6);
  --ring: 0 0 0 3px oklch(from var(--focus) l c h / .45);
  --tap: 44px;
  color-scheme: dark;
}
/* ---- Tokens: light (the dashboard's light theme, unchanged; the menu stays navy) ---- */
:root[data-theme="light"] {
  --ink: oklch(0.975 0.006 250);
  --ink-2: oklch(0.955 0.01 250);
  --panel: oklch(1 0 0 / 0.86);
  --panel-solid: oklch(1 0 0);
  --glass: oklch(1 0 0 / 0.55);
  --glass-edge: oklch(0.3 0.03 255 / 0.10);
  --glass-hi: oklch(1 0 0 / 0.8);
  --text: oklch(0.22 0.03 258);
  --text-2: oklch(0.40 0.03 258);
  --text-3: oklch(0.50 0.025 258);
  --rule: oklch(0.3 0.03 258 / 0.09);
  --field: oklch(1 0 0 / 0.9);
  --blue: oklch(0.52 0.15 255);
  --blue-2: oklch(0.44 0.15 258);
  --brass: oklch(0.58 0.12 75);
  --sea: oklch(0.52 0.10 175);
  --coral: oklch(0.56 0.17 30);
  --plum: oklch(0.52 0.12 320);
  --good: oklch(0.52 0.14 155);
  --bad: oklch(0.54 0.18 28);
  --shadow: 0 1px 0 var(--glass-hi) inset, 0 18px 40px -26px oklch(0.25 0.05 255 / 0.35);
  --orb-1: oklch(0.80 0.08 250 / 0.55);
  --orb-2: oklch(0.88 0.07 85 / 0.55);
  --orb-3: oklch(0.86 0.06 185 / 0.45);
  --nav: oklch(0.285 0.068 257);
  --nav-2: oklch(0.225 0.058 259);
  --nav-edge: oklch(1 0 0 / 0.10);
  --nav-text: oklch(0.97 0.01 250);
  --nav-text-2: oklch(0.84 0.03 250);
  --nav-text-3: oklch(0.70 0.04 252);
  --nav-hover: oklch(1 0 0 / 0.08);
  --nav-on: oklch(1 0 0 / 0.14);
  --nav-accent: oklch(0.80 0.12 240);
  --work: oklch(0.965 0.007 250);
  --work-2: oklch(0.945 0.01 250);
  --card: oklch(1 0 0 / 0.94);
  --card-solid: oklch(1 0 0);
  --card-edge: oklch(0.3 0.03 255 / 0.10);
  --bar: oklch(1 0 0 / 0.78);
  --blue-ink: oklch(0.45 0.15 257);
  --brass-ink: oklch(0.45 0.10 68);
  --sea-ink: oklch(0.43 0.09 178);
  --coral-ink: oklch(0.47 0.16 32);
  --plum-ink: oklch(0.45 0.12 320);
  --good-ink: oklch(0.43 0.13 155);
  --bad-ink: oklch(0.47 0.18 28);
  --fill-blue: oklch(0.52 0.15 255);
  --fill-blue-2: oklch(0.44 0.15 258);
  --fill-good: oklch(0.48 0.13 155);
  --fill-good-2: oklch(0.42 0.13 155);
  --fill-plum: oklch(0.48 0.12 320);
  --focus: oklch(0.45 0.15 257);
  --e-1: 0 1px 2px oklch(0.25 0.05 255 / .08);
  --e-3: 0 28px 70px -30px oklch(0.25 0.05 255 / .4);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--ink); color: var(--text);
  font: 400 var(--fs-md)/var(--lh) "Inter", system-ui, sans-serif; font-feature-settings: "cv11", "ss01", "tnum";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: "Geist Mono", ui-monospace, monospace; font-size: .94em; }

/* Backdrop (sign-in and the work area): three slow, low-contrast light fields and a fine grain. */
.backdrop { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; background:
  radial-gradient(1200px 700px at 85% -10%, var(--ink-2), transparent 70%), var(--ink); }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.o1 { width: 52vmax; height: 52vmax; left: -14vmax; top: -18vmax; background: var(--orb-1); animation: drift1 38s ease-in-out infinite alternate; }
.o2 { width: 34vmax; height: 34vmax; right: -8vmax; top: 18vh; background: var(--orb-2); animation: drift2 46s ease-in-out infinite alternate; }
.o3 { width: 40vmax; height: 40vmax; left: 30vw; bottom: -26vmax; background: var(--orb-3); animation: drift3 52s ease-in-out infinite alternate; }
.grain { position: absolute; inset: -50%; opacity: .05; background-image:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@keyframes drift1 { to { transform: translate(6vmax, 5vmax) scale(1.06); } }
@keyframes drift2 { to { transform: translate(-5vmax, 4vmax) scale(.94); } }
@keyframes drift3 { to { transform: translate(-6vmax, -3vmax) scale(1.05); } }
/* Signed in, the work area is the light tone: the orbs drop to a whisper so the cards read as paper. */
body.in-app .backdrop { background: radial-gradient(1100px 600px at 90% -12%, var(--work-2), transparent 70%), var(--work); }
body.in-app .orb { opacity: .28; }
:root[data-theme="light"] body.in-app .orb { opacity: .45; }

.glass {
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--panel); } }
@media (prefers-reduced-transparency: reduce) { .glass { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* Icons: one inline SVG sprite (icons.svg), stroked, currentColor. */
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.i.sm { width: 15px; height: 15px; } .i.xs { width: 13px; height: 13px; } .i.lg { width: 28px; height: 28px; }

img.logo { border-radius: 50%; object-fit: contain; display: block; }

/* ---- Sign in (the dashboard's, unchanged) ---- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: min(420px, 100%); border-radius: 24px; padding: 36px 32px 28px; }
.auth-card img.logo { width: 72px; height: 72px; margin-bottom: 22px; }
.eyebrow { color: var(--text-3); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; }
.auth-card h1 { font-size: var(--fs-3xl); font-weight: 650; letter-spacing: -.02em; margin: 4px 0 24px; }
.fine { color: var(--text-3); font-size: var(--fs-xs); margin-top: 18px; }
.form-error { min-height: 1.4em; color: var(--bad-ink); font-size: var(--fs-sm); margin: -2px 0 10px; }

/* ---- Fields ---- */
.field { display: block; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 14px; min-width: 0; }
.field > span { display: block; margin-bottom: 6px; font-weight: 500; }
.field input, .field select, .field textarea, .input {
  display: block; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: var(--fs-md); color: var(--text);
  background: var(--field); border: 1px solid var(--card-edge); outline: none; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .input:focus-visible {
  border-color: var(--blue); box-shadow: 0 0 0 4px oklch(from var(--blue) l c h / .18); outline: none; }
.field .hint { color: var(--text-3); font-size: var(--fs-xs); margin-top: 4px; display: block; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--bad); }
.field select, select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .wide { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); color: var(--text-2); }
.auth .field input { border-radius: 12px; padding: 12px 14px; border-color: var(--glass-edge); }

/* ---- Buttons: primary = brand blue, good = the green "approve" of the picture, outline = secondary ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border-radius: 10px; cursor: pointer;
  font-weight: 600; font-size: var(--fs-md); border: 1px solid var(--card-edge); background: var(--card-solid); color: var(--text); white-space: nowrap;
  transition: transform .15s, filter .15s, border-color .2s, background .2s, box-shadow .2s; text-decoration: none; box-shadow: 0 1px 2px oklch(0 0 0 / .06); }
.btn:hover { border-color: oklch(from var(--blue) l c h / .6); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { border: 0; color: white; background: linear-gradient(180deg, var(--fill-blue), var(--fill-blue-2)); box-shadow: 0 10px 26px -12px var(--blue); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.good { border: 0; color: white; background: linear-gradient(180deg, var(--fill-good), var(--fill-good-2)); box-shadow: 0 10px 26px -14px var(--good); }
.btn.good:hover { filter: brightness(1.06); }
.btn.outline { color: var(--blue-ink); border-color: oklch(from var(--blue) l c h / .55); background: transparent; box-shadow: none; }
.btn.danger { color: var(--bad-ink); border-color: oklch(from var(--bad) l c h / .45); background: oklch(from var(--bad) l c h / .08); box-shadow: none; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn.ghost:hover { color: var(--text); background: var(--glass-hi); }
.btn.block { width: 100%; }
.btn.sm { padding: 6px 11px; font-size: var(--fs-sm); border-radius: 9px; }
.btn.xl { padding: 18px 20px; font-size: var(--fs-lg); border-radius: 16px; }
.btn.busy { cursor: progress; opacity: .7; }
.auth .btn.primary { border-radius: 12px; padding: 12px 16px; }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--card-edge); background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--text-2); }
.icon-btn:hover { color: var(--text); border-color: oklch(from var(--blue) l c h / .5); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions.end { justify-content: flex-end; }

/* =====================================================================================================
   SHELL: navy menu (dark tone) | top bar + work area (light tone)
   ===================================================================================================== */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100dvh; }
.side { position: sticky; top: 0; height: 100dvh; z-index: 20; color: var(--nav-text);
  background: linear-gradient(180deg, var(--nav), var(--nav-2)); box-shadow: inset -1px 0 0 var(--nav-edge), 8px 0 30px -18px oklch(0.1 0.05 258 / .55); }
/* the glass edge highlight: a hairline of light down the menu's right edge, brighter at the top */
.side::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, oklch(1 0 0 / .28), oklch(1 0 0 / .04) 40%, transparent); }
.side-in { height: 100%; display: flex; flex-direction: column; padding: 18px 12px 14px; overflow-y: auto; scrollbar-width: thin; }
.side-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 10px 2px; color: var(--nav-text); }
.side-brand:hover { text-decoration: none; }
/* The designer's wordmark: heavy, wide, white; the MSE roundel beside it keeps the company's own mark. */
.wordmark { font-weight: 850; font-size: var(--fs-3xl); letter-spacing: -.02em; line-height: 1; color: white; transform: scaleX(1.18); transform-origin: left center; text-shadow: 0 2px 14px oklch(0.6 0.12 250 / .35); }
.side-brand img { width: 30px; height: 30px; box-shadow: 0 0 0 1.5px oklch(1 0 0 / .8); opacity: .95; }
.side-sub { color: var(--nav-text-3); font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; padding: 8px 10px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--nav-edge); }
.nav { display: flex; flex-direction: column; gap: 1px; padding-top: 6px; }
.nav .grp { color: var(--nav-text-3); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 14px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 10px; color: var(--nav-text-2); font-weight: 500; font-size: var(--fs-md); border: 1px solid transparent;
  text-decoration: none; transition: background .2s, color .2s; position: relative; }
.nav a .i { color: var(--nav-text-3); transition: color .2s; }
.nav a:hover { color: var(--nav-text); background: var(--nav-hover); }
.nav a:hover .i { color: var(--nav-text); }
.nav a.on { color: white; background: linear-gradient(180deg, oklch(from var(--nav-accent) l c h / .26), oklch(from var(--nav-accent) l c h / .14)); border-color: oklch(1 0 0 / .12); box-shadow: inset 0 1px 0 oklch(1 0 0 / .10), 0 6px 18px -10px oklch(0 0 0 / .6); font-weight: 600; }
.nav a.on .i { color: var(--nav-accent); }
.nav a.on::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--nav-accent); box-shadow: 0 0 12px var(--nav-accent); }
.nav a .count { margin-left: auto; font-size: var(--fs-2xs); font-weight: 700; color: oklch(0.2 0.05 80); background: oklch(0.84 0.12 80); padding: 0 7px; border-radius: 999px; line-height: 18px; }
.nav a:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: -2px; }
.side-foot { margin-top: auto; padding: 14px 8px 2px; border-top: 1px solid var(--nav-edge); display: grid; gap: 8px; font-size: var(--fs-xs); color: var(--nav-text-3); }
.side-foot .legend { display: grid; gap: 6px; }
.side-foot .legend span { display: flex; align-items: center; gap: 8px; color: var(--nav-text-2); }
.side-foot .legend .i { width: 14px; height: 14px; }
.side-foot .legend .a .i { color: oklch(0.80 0.11 170); } .side-foot .legend .p .i { color: oklch(0.84 0.12 80); }
.side-foot .co { font-family: "Geist Mono", monospace; letter-spacing: .04em; }

.main { min-width: 0; display: flex; flex-direction: column; }
/* Top bar: glass over the light work area, full width, a hairline under it. */
.bar { position: sticky; top: 0; z-index: 15; height: var(--bar-h); display: flex; align-items: center; gap: 14px; padding: 0 22px;
  background: var(--bar); border-bottom: 1px solid var(--card-edge); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }
.bar .crumbs { font-size: var(--fs-sm); color: var(--text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.bar .crumbs a { color: var(--text-3); } .bar .crumbs a:hover { color: var(--text); text-decoration: none; }
.bar .crumbs .sep { opacity: .5; }
.bar .crumbs b { color: var(--text); font-weight: 600; }
.bar .meta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* Global search: PO, drawing, customer */
.gsearch { position: relative; flex: 0 1 380px; min-width: 120px; margin-left: 8px; }
.gsearch .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.gsearch input { width: 100%; padding: 8px 12px 8px 34px; border-radius: 10px; border: 1px solid var(--card-edge); background: var(--field); color: var(--text); font-size: var(--fs-md); outline: none; }
.gsearch input:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 4px oklch(from var(--blue) l c h / .16); }
.gsearch kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 500 11px "Geist Mono", monospace; color: var(--text-3); border: 1px solid var(--card-edge); border-radius: 5px; padding: 0 5px; }
.gresults { position: absolute; left: 0; right: 0; top: calc(100% + 6px); border-radius: 12px; padding: 6px; max-height: 70vh; overflow-y: auto; z-index: 40; min-width: 320px; }
.gresults .grp { color: var(--text-3); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 8px 10px 4px; }
.gresults a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: var(--fs-sm); }
.gresults a small { color: var(--text-3); margin-left: auto; font-size: var(--fs-xs); white-space: nowrap; }
.gresults a:hover, .gresults a.on { background: oklch(from var(--blue) l c h / .12); }
.gresults .none { padding: 12px 10px; color: var(--text-3); font-size: var(--fs-sm); }
/* Nico msg 2285 (4 Oct 2026): the dropdown must be frosted/opaque. It sits inside the blurred top bar, where a nested
   backdrop-filter cannot blur the page, so the page showed through. Near-opaque surface, own blur, no sideways scroll. */
.gresults.glass { background: oklch(0.2 0.026 255); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); overflow-x: hidden; }
:root[data-theme="light"] .gresults.glass { background: oklch(0.995 0.003 250); }
.gresults a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 1px; }
.gresults a > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.gresults a small { grid-column: 2; margin-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gresults a > svg, .gresults a > .icon { grid-row: span 2; align-self: center; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; border: 1px solid var(--card-edge); gap: 2px; background: var(--card); }
.seg button { border: 0; background: transparent; padding: 5px 10px; border-radius: 7px; cursor: pointer; color: var(--text-2); font-size: var(--fs-sm); font-weight: 550; }
.seg button[aria-pressed="true"] { background: linear-gradient(180deg, var(--fill-blue), var(--fill-blue-2)); color: white; }
.who { position: relative; }
.who-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--card-edge); background: var(--card); border-radius: 10px; padding: 4px 10px 4px 4px; cursor: pointer; font-weight: 500; font-size: var(--fs-sm); }
.avatar { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: var(--fs-2xs); font-weight: 700; color: white; background: linear-gradient(145deg, var(--fill-blue), var(--fill-blue-2)); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); border-radius: 12px; padding: 6px; min-width: 240px; z-index: 30; }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: var(--text); font-size: var(--fs-md); text-decoration: none; }
.menu button:hover, .menu a:hover, .menu button:focus-visible { background: var(--glass-hi); outline: none; }
.menu button[aria-checked="true"] { color: var(--brass-ink); }
.menu .sep { height: 1px; background: var(--rule); margin: 4px 6px; }
.menu .who-line { padding: 8px 10px 6px; color: var(--text-3); font-size: var(--fs-xs); }
.burger { display: none; }
/* The floor's scan page has no menu, so it has no menu button either (a tap used to open an empty scrim). */
.scan-only .burger, .scan-only .side-scrim { display: none !important; }
.test-banner { margin: 0; padding: 7px 22px; font-size: var(--fs-sm); color: oklch(0.3 0.08 75); background: oklch(0.88 0.11 85); display: flex; gap: 8px; align-items: center; }

/* ---- Page ---- */
.page { padding: var(--sp-5) var(--sp-6) var(--sp-12); display: grid; gap: var(--sp-4); width: 100%; max-width: 1560px; margin: 0 auto; align-content: start; }
.page:focus { outline: none; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.page-head .sub { color: var(--text-2); margin-top: 5px; font-size: var(--fs-lg); max-width: 82ch; }
.page-head .tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-head .refbox { display: grid; justify-items: end; gap: 6px; }
.ref { font-family: "Geist Mono", monospace; font-size: var(--fs-sm); font-weight: 600; color: var(--text); padding: 6px 12px; border-radius: 10px; background: var(--work-2); border: 1px solid var(--card-edge); }
.refbox .pill { padding: 5px 12px; border-radius: 9px; }
/* The stage sheet: title, order pill and status chip, the 8-step tracker, then tabs; one white sheet like the picture. */
.sheet { --sheet-x: 22px; background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-5) var(--sheet-x) 0; display: grid; gap: 14px; min-width: 0; }
.sheet .tabs { margin: 0 calc(-1 * var(--sheet-x)); padding: 0 calc(var(--sheet-x) - 4px); margin-bottom: 0; border-bottom: 0; border-top: 1px solid var(--rule); background: linear-gradient(180deg, var(--work), transparent); border-radius: 0 0 var(--radius) var(--radius); }
/* The tab body sits directly under its tab bar, inside the same sheet. */
.sheet.has-panel .tabs { border-radius: 0; border-bottom: 1px solid var(--rule); }
.sheet > .tabpanel { margin: -14px calc(-1 * var(--sheet-x)) 0; padding: var(--sp-4) var(--sheet-x) var(--sp-5); min-width: 0; border-radius: 0 0 var(--radius) var(--radius); }
.sheet .tabs button { padding: 13px 14px; font-size: var(--fs-md); }
.sheet .tracker { padding: 4px 0 4px; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-4); }
.card { background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; min-width: 0; }
.card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card h2 { font-size: var(--fs-lg); font-weight: 620; letter-spacing: -.01em; }
.card .sub { color: var(--text-3); font-size: var(--fs-sm); }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }

/* ---- KPI tiles (glass, as the dashboard) ---- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { border-radius: var(--radius); padding: 16px 16px 14px; position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 118px; text-align: left; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; text-decoration: none; color: inherit; }
.kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent, var(--blue)), transparent); opacity: .85; }
.kpi:hover, .kpi:focus-visible { transform: translateY(-2px); text-decoration: none; border-color: oklch(from var(--accent, var(--blue)) l c h / .45); outline: none; }
.kpi .label { color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.kpi .value { font-size: clamp(24px, 2.2vw, 30px); font-weight: 650; letter-spacing: -.025em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.kpi .ctx { color: var(--text-3); font-size: var(--fs-xs); margin-top: auto; display: flex; gap: 6px; align-items: center; }
.acc-blue { --accent: var(--blue); } .acc-coral { --accent: var(--coral); } .acc-brass { --accent: var(--brass); } .acc-sea { --accent: var(--sea); } .acc-plum { --accent: var(--plum); }

/* ---- Pipeline strip ---- */
.pipe { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.pipe a { display: block; padding: 12px 12px 10px; border-radius: 12px; border: 1px solid var(--card-edge); background: var(--work); color: inherit; text-decoration: none; position: relative; }
.pipe a:hover { border-color: oklch(from var(--blue) l c h / .5); text-decoration: none; }
.pipe .n { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pipe .k { color: var(--text-3); font-size: var(--fs-xs); display: flex; gap: 6px; align-items: center; }
.pipe .k b { font-family: "Geist Mono", monospace; font-weight: 500; color: var(--text-3); }
.pipe .v { color: var(--text-2); font-size: var(--fs-xs); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pipe .bar-i { height: 3px; border-radius: 2px; margin-top: 8px; background: var(--rule); overflow: hidden; }
.pipe .bar-i i.w0 { width: 0; } .pipe .bar-i i.w1 { width: 10%; } .pipe .bar-i i.w2 { width: 20%; } .pipe .bar-i i.w3 { width: 30%; } .pipe .bar-i i.w4 { width: 40%; }
.pipe .bar-i i.w5 { width: 50%; } .pipe .bar-i i.w6 { width: 60%; } .pipe .bar-i i.w7 { width: 70%; } .pipe .bar-i i.w8 { width: 80%; } .pipe .bar-i i.w9 { width: 90%; } .pipe .bar-i i.w10 { width: 100%; }
.pipe .bar-i i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-2), var(--blue)); border-radius: 2px; }

/* ---- The 8-step tracker, as in the picture: green done with a tick, the current step solid blue with a halo,
   the steps to come as numbered outlines; the connector is green up to the current step. ---- */
.tracker { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding: 6px 0 2px; margin: 0; list-style: none; }
.tracker li { display: flex; min-width: 0; }
.tracker .st { width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: var(--fs-xs); color: var(--text-3); }
.tracker .st::before { content: ""; position: absolute; top: 14px; left: calc(-50% + 17px); right: calc(50% + 17px); height: 2px; background: var(--rule); border-radius: 1px; }
.tracker li:first-child .st::before { display: none; }
.tracker .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 650; font-size: var(--fs-sm); border: 1.5px solid oklch(from var(--text-3) l c h / .45); background: var(--card-solid); color: var(--text-3); position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.tracker .st.done { color: var(--text-2); }
.tracker .st.done::before, .tracker .st.now::before { background: var(--good); }
.tracker .st.done .dot { border: 0; color: white; background: linear-gradient(180deg, var(--fill-good), var(--fill-good-2)); }
.tracker .st.done .dot .i { stroke-width: 2.4; }
.tracker .st.now { color: var(--text); font-weight: 650; }
.tracker .st.now .dot { border: 0; color: white; width: 34px; height: 34px; margin-top: -2px; margin-bottom: -2px; background: linear-gradient(180deg, var(--fill-blue), var(--fill-blue-2)); box-shadow: 0 0 0 5px oklch(from var(--blue) l c h / .18), 0 8px 18px -8px var(--blue); }
.tracker a.st { text-decoration: none; }
.tracker a.st:hover .dot { border-color: var(--blue); }
.tracker .lbl { line-height: 1.2; display: flex; flex-direction: column; align-items: center; gap: 1px; overflow-wrap: anywhere; }
.tracker .lbl small { font-size: var(--fs-2xs); font-weight: 500; color: var(--text-3); }

/* =====================================================================================================
   AUTOMATION LEDGER: "Done by Arni" (sea, spark) beside "Needs you" (brass, hand). Every stage screen has one.
   ===================================================================================================== */
.ledger { display: flex; flex-wrap: wrap; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--card-edge); background: var(--card); box-shadow: var(--shadow); }
.ledger > section { padding: 14px 18px 14px; min-width: 0; position: relative; }
.ledger .auto { flex: 1.6 1 380px; } .ledger .need { flex: 1 1 280px; }
.ledger > section::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.ledger .auto { background: linear-gradient(90deg, oklch(from var(--auto) l c h / .09), transparent 70%); }
.ledger .auto::before { background: var(--auto); }
.ledger .need { border-left: 1px solid var(--card-edge); background: linear-gradient(90deg, oklch(from var(--human) l c h / .11), oklch(from var(--human) l c h / .04)); }
.ledger .need::before { background: var(--human); }
.ledger h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.ledger .auto h2 { color: var(--auto-ink); } .ledger .need h2 { color: var(--human-ink); }
.ledger h2 small { margin-left: auto; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.ledger ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.ledger ol li { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text); padding: 4px 10px 4px 7px; border-radius: 999px; background: oklch(from var(--auto) l c h / .10); border: 1px solid oklch(from var(--auto) l c h / .22); max-width: 100%; min-width: 0; }
.ledger ol li .i { flex: none; } .ledger ol li .i { color: var(--auto-ink); width: 13px; height: 13px; }
.ledger ol li time { font-family: "Geist Mono", monospace; font-size: var(--fs-2xs); color: var(--text-3); }
.ledger ol li a { color: inherit; } .ledger ol li a:hover { color: var(--auto-ink); }
.ledger ol li span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.ledger .none { color: var(--text-3); font-size: var(--fs-sm); }
.ledger .need .ask { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.ledger .need .why { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: 10px; }
.ledger .need .actions { gap: 8px; }
.ledger .need.clear { background: linear-gradient(90deg, oklch(from var(--good) l c h / .08), transparent); }
.ledger .need.clear::before { background: var(--good); }
.ledger .need.clear h2 { color: var(--good-ink); }
/* Who-did-it chips, usable anywhere: in tables, cards, drawers. */
.who-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); font-weight: 650; padding: 2px 8px 2px 6px; border-radius: 999px; white-space: nowrap; letter-spacing: .01em; }
.who-chip .i { width: 12px; height: 12px; }
.who-chip.auto { color: var(--auto-ink); background: oklch(from var(--auto) l c h / .13); }
.who-chip.human { color: var(--human-ink); background: oklch(from var(--human) l c h / .16); }
.who-chip.floor { color: var(--blue-ink); background: oklch(from var(--blue) l c h / .13); }

/* ---- Process page: the A-to-Z swimlane (Arni / People / Floor) ---- */
.swim { display: grid; grid-template-columns: 132px repeat(8, minmax(128px, 1fr)); min-width: 1180px; }
.swim-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px 6px; }
.swim .hd { padding: 10px 10px 12px; border-bottom: 1px solid var(--rule); display: grid; gap: 2px; text-decoration: none; color: inherit; }
.swim .hd:hover { background: var(--glass-hi); text-decoration: none; }
.swim .hd .n { font-family: "Geist Mono", monospace; font-size: var(--fs-2xs); color: var(--text-3); }
.swim .hd b { font-size: var(--fs-md); font-weight: 650; }
.swim .hd .c { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.swim .hd .c small { font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); letter-spacing: 0; margin-left: 4px; }
.swim .lane { padding: 12px 10px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border-bottom: 1px solid var(--rule); font-weight: 650; font-size: var(--fs-sm); }
.swim .lane small { font-weight: 500; color: var(--text-3); font-size: var(--fs-xs); }
.swim .lane .i { width: 20px; height: 20px; }
.swim .lane.a { color: var(--auto-ink); } .swim .lane.p { color: var(--human-ink); } .swim .lane.f { color: var(--blue-ink); }
.swim .cell { padding: 8px 6px; border-bottom: 1px solid var(--rule); border-left: 1px dashed var(--rule); display: flex; flex-direction: column; gap: 6px; }
.swim .stepbox { border-radius: 10px; padding: 8px 9px; font-size: var(--fs-xs); line-height: 1.35; border: 1px solid; }
.swim .stepbox b { display: block; font-size: var(--fs-sm); font-weight: 650; margin-bottom: 2px; }
.swim .stepbox.a { border-color: oklch(from var(--auto) l c h / .3); background: oklch(from var(--auto) l c h / .08); }
.swim .stepbox.p { border-color: oklch(from var(--human) l c h / .4); background: oklch(from var(--human) l c h / .10); }
.swim .stepbox.f { border-color: oklch(from var(--blue) l c h / .3); background: oklch(from var(--blue) l c h / .08); }
.swim .stepbox .q { display: inline-block; margin-top: 4px; font-family: "Geist Mono", monospace; font-size: var(--fs-2xs); font-weight: 600; color: var(--human-ink); }
.swim .stepbox a { color: inherit; } .swim .stepbox a:hover { text-decoration: none; }
.swim .stepbox a:hover b { text-decoration: underline; }
.key { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; color: var(--text-3); font-size: var(--fs-sm); }

/* ---- Tables: sticky headers, dense rows, Geist Mono figures ---- */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.table-wrap.tall { max-height: min(68vh, 900px); overflow: auto; border-top: 1px solid var(--rule); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; vertical-align: middle; }
td.wrap { white-space: normal; min-width: 180px; }
th { color: var(--text-3); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; background: var(--card-solid); position: sticky; top: 0; z-index: 1; }
td.num, th.num { text-align: right; font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--fs-sm); }
td.muted { color: var(--text-3); }
tbody tr:nth-child(even) td { background: oklch(from var(--text-3) l c h / .035); }
tbody tr.link { cursor: pointer; }
tbody tr.link:hover td, tbody tr.link:focus-visible td { background: oklch(from var(--blue) l c h / .08); }
tbody tr.link:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
tr.late td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.cap { color: var(--text-3); font-size: var(--fs-xs); padding: 10px 6px 0; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .input { max-width: 340px; padding: 8px 12px; }
.toolbar select.input { width: auto; max-width: 220px; }
.toolbar .spacer { flex: 1; }
.toolbar .count { color: var(--text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Saved views: a row of quiet chips, the one in use filled */
.views { display: flex; gap: 6px; flex-wrap: wrap; }
.views button { border: 1px solid var(--card-edge); background: transparent; color: var(--text-2); border-radius: 999px; padding: 5px 12px; font-size: var(--fs-sm); font-weight: 550; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.views button:hover { border-color: oklch(from var(--blue) l c h / .5); color: var(--text); }
.views button[aria-pressed="true"] { background: oklch(from var(--blue) l c h / .14); border-color: oklch(from var(--blue) l c h / .45); color: var(--text); }
.views button b { font-family: "Geist Mono", monospace; font-weight: 600; font-size: var(--fs-2xs); color: var(--text-3); }
/* Tag chips (party type, capability) */
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; color: var(--text-2); background: var(--work-2); border: 1px solid var(--card-edge); }
.chip.type { color: var(--blue-ink); background: oklch(from var(--blue) l c h / .10); border-color: oklch(from var(--blue) l c h / .22); }
.chip.cap { color: var(--plum-ink); background: oklch(from var(--plum) l c h / .10); border-color: oklch(from var(--plum) l c h / .22); }
button.chip { cursor: pointer; }
button.chip[aria-pressed="true"] { color: white; background: var(--fill-plum); border-color: var(--fill-plum); }

/* ---- Status pills ---- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; color: var(--text-2); background: oklch(from var(--text-3) l c h / .14); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.plain::before { display: none; }
.pill.blue { color: var(--blue-ink); background: oklch(from var(--blue) l c h / .14); }
.pill.good { color: var(--good-ink); background: oklch(from var(--good) l c h / .14); }
.pill.bad { color: var(--bad-ink); background: oklch(from var(--bad) l c h / .14); }
.pill.brass { color: var(--brass-ink); background: oklch(from var(--brass) l c h / .16); }
.pill.plum { color: var(--plum-ink); background: oklch(from var(--plum) l c h / .14); }
.pill.sea { color: var(--sea-ink); background: oklch(from var(--sea) l c h / .14); }
.tag-id { font-family: "Geist Mono", monospace; font-size: var(--fs-xs); color: var(--text-2); padding: 4px 9px; border-radius: 8px; border: 1px solid var(--card-edge); }

/* ---- Lists of items inside cards ---- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 9px 22px; font-size: var(--fs-md); margin: 0; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-md); }
.checks li .i { margin-top: 1px; }
.checks li.ok .i { color: var(--good-ink); } .checks li.no .i { color: var(--bad-ink); } .checks li.warn .i { color: var(--brass-ink); } .checks li.na .i { color: var(--text-3); }
.checks li small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--rule); }
.feed li:last-child { border-bottom: 0; }
.feed .body { min-width: 0; flex: 1; }
.feed .t { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed .s { color: var(--text-3); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed .row { display: flex; gap: 12px; align-items: center; color: inherit; flex: 1; min-width: 0; text-decoration: none; }
.feed a.row:hover .t { color: var(--blue-ink); }
.badge-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: oklch(from var(--accent, var(--blue)) l c h / .14); color: var(--accent, var(--blue)); }

/* ---- Empty, loading and notice states ---- */
.empty { padding: 26px 14px; text-align: center; color: var(--text-3); font-size: var(--fs-md); }
.empty b { display: block; color: var(--text-2); font-weight: 600; margin-bottom: 4px; }
.empty .i { width: 26px; height: 26px; margin: 0 auto 10px; display: block; color: var(--text-3); }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 12px; font-size: var(--fs-sm); color: var(--text-2);
  border: 1px solid oklch(from var(--brass) l c h / .35); background: oklch(from var(--brass) l c h / .08); }
.notice .i { color: var(--brass-ink); margin-top: 1px; }
.notice.bad { border-color: oklch(from var(--bad) l c h / .4); background: oklch(from var(--bad) l c h / .08); } .notice.bad .i { color: var(--bad-ink); }
.notice.good { border-color: oklch(from var(--good) l c h / .4); background: oklch(from var(--good) l c h / .08); } .notice.good .i { color: var(--good-ink); }
.skel { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--rule), var(--glass-hi), var(--rule)); background-size: 200% 100%; animation: skel 1.4s ease infinite; margin: 10px 0; }
.skel.w60 { width: 60%; } .skel.w40 { width: 40%; }
@keyframes skel { to { background-position: -200% 0; } }

/* ---- Tabs inside a page (underlined, as the picture) ---- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; overflow-x: auto; }
.tabs button { border: 0; background: transparent; padding: 11px 12px; cursor: pointer; color: var(--text-3); font-weight: 550; font-size: var(--fs-sm); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tabs button:hover { color: var(--text); }
.tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: 8px; }
.tabpanel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.tabs button[aria-selected="true"] { color: var(--blue-ink); border-bottom-color: var(--blue); font-weight: 650; }
.tabs button b { font-family: "Geist Mono", monospace; font-size: var(--fs-2xs); font-weight: 600; padding: 0 6px; border-radius: 999px; background: var(--work-2); color: var(--text-3); }
.tabs button b.hot { background: oklch(from var(--human) l c h / .18); color: var(--human-ink); }

/* ---- Drawer (side sheet) and dialog ---- */
.drawer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.drawer-scrim { position: absolute; inset: 0; background: oklch(0.15 0.03 258 / .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .25s ease both; }
.drawer-panel { position: relative; width: min(780px, 100%); height: 100%; overflow-y: auto; padding: 24px 26px 30px; border-radius: 22px 0 0 22px;
  background: oklch(from var(--card-solid) l c h / .96); animation: slide .35s cubic-bezier(.2,.8,.2,1) both; overscroll-behavior: contain; }
.drawer-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent, var(--blue)), transparent); }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.drawer-head h2 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.02em; margin-top: 4px; }
.drawer-head .lede { color: var(--text-2); margin-top: 4px; }
.drawer section + section { margin-top: 20px; }
.drawer h3 { font-size: var(--fs-md); font-weight: 600; color: var(--text-2); margin: 0 0 8px; }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { opacity: 0; transform: translateX(28px); } }
body.locked { overflow: hidden; }
.chart { height: 300px; width: 100%; }
.chart.short { height: 220px; }
.chart.tall { height: 360px; }

/* ---- Equation strip (the dashboard's "how it is built") ---- */
.equation { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 6px 0 4px; }
.eq-term { min-width: 120px; flex: 1 1 130px; border-radius: 14px; padding: 12px 14px; border: 1px solid var(--card-edge); background: var(--work); }
.eq-term .k { color: var(--text-3); font-size: var(--fs-xs); } .eq-term .v { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.eq-term .n { color: var(--text-3); font-size: var(--fs-xs); margin-top: 2px; }
.eq-term.result { background: linear-gradient(160deg, oklch(from var(--accent, var(--blue)) l c h / .28), oklch(from var(--accent, var(--blue)) l c h / .08)); border-color: oklch(from var(--accent, var(--blue)) l c h / .45); }
.conf { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; }
.conf i { width: 54px; height: 6px; border-radius: 3px; background: var(--rule); position: relative; overflow: hidden; display: inline-block; }
.conf i b { position: absolute; inset: 0 auto 0 0; border-radius: 3px; }
.conf.High i b { width: 100%; background: var(--good); } .conf.Medium i b { width: 62%; background: var(--brass); } .conf.Low i b { width: 30%; background: var(--bad); }
.conf.High { color: var(--good-ink); } .conf.Medium { color: var(--brass-ink); } .conf.Low { color: var(--bad-ink); }
blockquote.evidence { margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--auto); background: oklch(from var(--auto) l c h / .07); border-radius: 0 10px 10px 0; font-size: var(--fs-sm); color: var(--text-2); }
blockquote.evidence cite { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--text-3); margin-top: 3px; }

/* ---- Toasts ---- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: grid; gap: 8px; max-width: min(420px, calc(100% - 32px)); }
.toast { border-radius: 14px; padding: 12px 14px; font-size: var(--fs-md); display: flex; gap: 10px; align-items: flex-start; animation: slide .3s cubic-bezier(.2,.8,.2,1) both; }
.toast.good .i { color: var(--good-ink); } .toast.bad .i { color: var(--bad-ink); }

/* ---- ECharts tooltip, glass ---- */
.ec-tip { border-radius: 12px !important; border: 1px solid var(--glass-edge) !important; color: var(--text) !important;
  background: var(--glass) !important; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--shadow) !important; font: 500 12.5px/1.5 "Inter", system-ui, sans-serif !important; padding: 10px 12px !important; }
.ec-tip b { font-weight: 650; } .ec-tip .k { color: var(--text-3); }
.ec-tip .row { display: flex; justify-content: space-between; gap: 18px; font-variant-numeric: tabular-nums; align-items: center; }
.ec-tip svg { margin-right: 6px; vertical-align: 0; }

/* ---- Scan page (artisans' phones) ---- */
.scan { max-width: 520px; margin: 0 auto; display: grid; gap: 14px; width: 100%; }
.scan .job { border-radius: 22px; padding: 22px 20px; }
.scan .job h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; margin: 6px 0 2px; }
.scan .op { font-size: var(--fs-lg); color: var(--text-2); }
.scan .state { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.scan .big { display: grid; gap: 12px; }
.scan .big .btn { min-height: 64px; }
.scan-only .side, .scan-only .bar .seg, .scan-only .gsearch { display: none; }
.scan-only .shell { grid-template-columns: minmax(0, 1fr); }

/* ---- Print views: traveller, subcontract dispatch note, packing list ---- */
.printable { background: white; color: #111; border-radius: 14px; padding: 28px 30px; max-width: 900px; margin: 0 auto; font-size: var(--fs-sm); width: 100%; }
.printable h1 { font-size: var(--fs-xl); letter-spacing: -.01em; }
.printable .ph { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; border-bottom: 2px solid #111; padding-bottom: 12px; margin-bottom: 14px; }
.printable .ph img { width: 54px; height: 54px; }
.printable .qr { width: 132px; height: 132px; image-rendering: pixelated; }
.printable table { color: #111; }
.printable th, .printable td { border-bottom: 1px solid #bbb; padding: 7px 8px; color: #111; background: white; position: static; }
.printable th { color: #444; }
.printable .kv dt { color: #555; }
.printable .boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.printable .boxes div { border: 1px solid #999; border-radius: 6px; height: 64px; padding: 6px 8px; color: #555; font-size: var(--fs-2xs); }
.printable .foot { margin-top: 16px; color: #555; font-size: var(--fs-2xs); }
.print-bar { display: flex; justify-content: flex-end; gap: 10px; max-width: 900px; margin: 0 auto 12px; width: 100%; }
@page { size: A4 portrait; margin: 12mm; }
@media print {
  /* A print sheet with no app chrome: no menu, bar, tabs, buttons, toasts or backdrop; black on white whatever the theme. */
  :root, :root[data-theme] {
    color-scheme: light; --text: #111; --text-2: #333; --text-3: #555; --rule: #ccc; --card: #fff; --card-solid: #fff; --card-edge: #bbb;
    --work: #fff; --work-2: #f3f3f3; --ink: #fff; --panel-solid: #fff; --shadow: none; --e-1: none; --e-2: none;
    --blue-ink: #1d3f8a; --brass-ink: #6b4a10; --sea-ink: #0e5a52; --coral-ink: #8a2b14; --plum-ink: #5e2a63; --good-ink: #1b5e33; --bad-ink: #8f1d12;
  }
  body { background: white; color: #111; }
  .backdrop, .side, .side-scrim, .bar, .burger, .print-bar, .toasts, .page-head .actions, .test-banner, .drawer, .gresults,
  .tabs, .ledger-row, .decision-bar, .btn, .icon-btn, .views, .toolbar .spacer, .toolbar select, .toolbar input { display: none !important; }
  .shell { display: block; } .main { padding: 0; } .page { margin: 0; padding: 0; max-width: none; gap: 10px; }
  .sheet, .card, .stat, .decision, .kpi { box-shadow: none !important; background: white !important; border-color: #bbb !important; break-inside: avoid; }
  .sheet > .tabpanel { margin: 0; padding: 8px 0 0; }
  .table-wrap, .table-wrap.tall { max-height: none; overflow: visible; }
  th { position: static; background: white; }
  a { color: inherit; text-decoration: none; }
  .printable { border-radius: 0; padding: 0; max-width: none; }
  .printable tr, tbody tr { break-inside: avoid; }
  .printable thead, thead { display: table-header-group; }
}

/* ---- Decision cards: the minimum a person needs to decide, one primary action, details one click away ---- */
.decisions { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.decision { border: 1px solid var(--card-edge); border-radius: 14px; padding: 16px; background: var(--card-solid); display: grid; gap: 12px; align-content: start; position: relative; box-shadow: 0 1px 2px oklch(0 0 0 / .05); }
.decision::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--human); }
.decision.is-done::before { background: var(--good); }
.decision > header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.decision .t { font-weight: 600; font-size: var(--fs-lg); letter-spacing: -.01em; overflow-wrap: anywhere; }
.decision .s { color: var(--text-3); font-size: var(--fs-sm); margin-top: 2px; overflow-wrap: anywhere; }
.decision .price { display: grid; gap: 0; }
.decision .price .k { color: var(--text-3); font-size: var(--fs-xs); display: flex; gap: 8px; align-items: center; }
.decision .price .v { font-size: var(--fs-3xl); font-weight: 650; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.decision .price .n { color: var(--text-3); font-size: var(--fs-xs); }
/* Price pending (Nico msgs 2290-2291): what is missing to price a line, each item a button to where it is added. */
.decision .pending { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 4px 0 2px; font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; }
.decision .pending .pk { color: var(--text); }
.decision .pending .pl { display: inline; }
.decision .pending .pend-item { font: inherit; color: var(--brass-ink); background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; min-height: 0; overflow-wrap: anywhere; text-align: left; }
.decision .pending .pend-item:hover, .decision .pending .pend-item:focus-visible { text-decoration-thickness: 2.5px; }
.decision .pending .sep { color: var(--text-3); }
@media (pointer: coarse) { .decision .pending .pend-item { padding: 10px 0; min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; } }   /* 44 px tap target (test_browser phone pass, 4 Oct) */
.decision .basis { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.decision.is-done { opacity: .8; }
.done { display: flex; gap: 10px; align-items: center; color: var(--good-ink); font-weight: 600; }
.sp { height: 14px; }
h3.sub { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin: 6px 0 10px; }
.line-row { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 4px; }
.small-note, small.hint { color: var(--text-3); font-size: var(--fs-xs); }
.badge-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.linepick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.linepick .k { color: var(--text-3); font-size: var(--fs-xs); margin-right: 4px; }

/* ---- Quality readings ---- */
.readings { display: grid; gap: 10px; }
.reading { display: grid; grid-template-columns: minmax(0, 1fr) 150px 80px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.reading small { display: block; }

/* ---- Scan extras ---- */
.scan-ok { display: flex; gap: 12px; align-items: center; border-radius: 16px; padding: 14px 16px; font-size: var(--fs-lg); }
.scan-ok .i { color: var(--good-ink); }
.cam-box { display: none; margin-top: 12px; border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-edge); }
.cam-box.on { display: block; }
video.cam { display: block; width: 100%; max-height: 60vh; object-fit: cover; background: black; }

/* ---- Print bits ---- */
.qr-block { display: flex; gap: 12px; align-items: center; text-align: left; }
.cardno { font-family: "Geist Mono", monospace; font-size: var(--fs-2xl); font-weight: 700; color: #c2410c; letter-spacing: .02em; }
.qr-sm { width: 54px; height: 54px; display: block; }
.printable .kv { grid-template-columns: max-content 1fr max-content 1fr; }
.printable h3 { font-size: var(--fs-sm); margin: 16px 0 6px; color: #111; }
details.badge-box { border: 1px solid var(--card-edge); border-radius: 14px; padding: 10px 14px; background: var(--card); }
details.badge-box summary { cursor: pointer; color: var(--text-2); font-size: var(--fs-md); }
details.badge-box .field { margin: 10px 0 2px; }

/* =====================================================================================================
   Responsive: desktop first for working, phone first for the floor
   ===================================================================================================== */
@media (max-width: 1280px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-3, .span-4, .span-5 { grid-column: span 6; } .span-7, .span-8 { grid-column: span 12; }
  .pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ledger > section { flex-basis: 100%; } .ledger .need { border-left: 0; border-top: 1px solid var(--card-edge); }
}
@media (max-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: min(280px, 86vw); transform: translateX(-105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
  .side.open { transform: none; }
  .side-scrim { position: fixed; inset: 0; z-index: 19; background: oklch(0.15 0.03 258 / .5); }
  .burger { display: grid; }
  .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-12 { grid-column: 1 / -1; }
  .drawer-panel { border-radius: 0; padding: 20px 16px 28px; }
  .bar { padding: 0 14px; gap: 10px; }
  .bar .crumbs { display: none; }
  .gsearch { flex: 1 1 auto; margin-left: 0; }
  .gsearch kbd { display: none; }
}
@media (max-width: 640px) {
  .page { padding: 14px 12px 40px; gap: 14px; }
  .bar { gap: 6px; padding: 0 10px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { min-height: 100px; padding: 14px 12px 12px; }
  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .hide-sm { display: none; }
  th, td { padding: 9px 6px; } td.num, th.num { font-size: var(--fs-xs); }
  .tracker .lbl { display: none; }
  .tracker .dot { width: 26px; height: 26px; font-size: var(--fs-xs); }
  .tracker .st.now .dot { width: 28px; height: 28px; }
  .tracker .st::before { top: 12px; left: calc(-50% + 14px); right: calc(50% + 14px); }
  .page-head h1 { font-size: var(--fs-xl); }
  .sheet { --sheet-x: 14px; padding-top: var(--sp-4); }
  .seg button { padding: 5px 7px; }
  .who-btn .nm { display: none; }
  .gresults { min-width: 0; position: fixed; left: 8px; right: 8px; top: calc(var(--bar-h) + 4px); }
  .printable { padding: 16px; }
  .printable .boxes { grid-template-columns: 1fr; }
  .printable .kv { grid-template-columns: max-content 1fr; }
  .reading { grid-template-columns: minmax(0, 1fr) 110px; } .reading > span { grid-column: 1 / -1; }
  .decisions { grid-template-columns: minmax(0, 1fr); }
}
.swim .stepbox .q.muted { color: var(--text-3); font-weight: 500; }
.swim .stepbox span { display: block; color: var(--text-2); }
.notice b { color: var(--text); }

/* Designer-led details */
.btn .i.after { order: 2; }
.btn.navy { border: 0; color: white; background: linear-gradient(180deg, oklch(0.32 0.06 258), oklch(0.24 0.055 258)); box-shadow: 0 10px 24px -12px oklch(0.24 0.06 258); }
.btn.navy:hover { filter: brightness(1.12); }
.doc-tile { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 12px; background: var(--work); border: 1px solid var(--card-edge); }
.doc-tile .ic { width: 56px; height: 70px; border-radius: 8px; display: grid; place-items: center; background: var(--card-solid); border: 1px solid var(--card-edge); color: var(--blue-ink); box-shadow: 0 6px 14px -10px oklch(0 0 0 / .4); }
.doc-tile .ic .i { width: 26px; height: 26px; }
.doc-tile b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.doc-tile small { color: var(--text-3); font-size: var(--fs-xs); display: block; overflow-wrap: anywhere; }
.extract-ok { display: flex; gap: 10px; align-items: center; margin-top: 12px; color: var(--good-ink); font-weight: 600; font-size: var(--fs-md); }
.extract-ok .i { width: 22px; height: 22px; }
.extract-ok small { display: block; color: var(--text-3); font-weight: 500; font-size: var(--fs-xs); }
.extract-ok.warn { color: var(--brass-ink); }
/* The verdict and its confidence bar keep a gap (the bar ran into "PO"); a note under it takes its own line. */
.extract-ok > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.extract-ok > div > small { flex-basis: 100%; }
.hero-stat { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 18px 12px; border-radius: 12px; background: oklch(from var(--good) l c h / .10); color: var(--good-ink); }
.hero-stat .i { width: 34px; height: 34px; }
.hero-stat b { font-size: var(--fs-xl); font-weight: 700; }
.hero-stat small { color: var(--text-2); }
.hero-stat.brass { background: oklch(from var(--brass) l c h / .12); color: var(--brass-ink); }
.hero-stat.blue { background: oklch(from var(--blue) l c h / .10); color: var(--blue-ink); }
.jobno { padding: 12px 14px; border-radius: 12px; background: oklch(from var(--sea) l c h / .10); }
.jobno b { display: block; font-family: "Geist Mono", monospace; font-size: var(--fs-xl); color: var(--sea-ink); }
.jobno small { color: var(--sea-ink); font-weight: 600; }
.matrow { display: grid; grid-template-columns: minmax(0, 1.6fr) 70px minmax(0, 1fr) minmax(0, 1.2fr) 80px; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--rule); }
.matrow:last-child { border-bottom: 0; }
.matrow b { display: block; font-weight: 600; } .matrow small { color: var(--text-3); font-family: "Geist Mono", monospace; font-size: var(--fs-xs); }
.matrow .num { text-align: right; font-family: "Geist Mono", monospace; }
@media (max-width: 640px) { .matrow { grid-template-columns: minmax(0, 1fr) auto; } .matrow > :nth-child(n+3) { grid-column: 1 / -1; } }
.stack { display: grid; gap: 18px; }
.late-txt { color: var(--bad-ink); font-weight: 600; }
.muted-txt { color: var(--text-3); }
.tracker.map .st.now::before { background: var(--rule); }

/* =====================================================================================================
   Shared components (ui.js): automation row, "Needs you" bar, figures with their source, queues, decisions, explanations,
   channel bar, badge keypad, honest empty / loading / error states. Tokens only.
   ===================================================================================================== */
/* One collapsible row (native <details>) */
.collapse-row { border: 1px solid var(--card-edge); border-radius: var(--r-md); background: var(--work); color: var(--text); min-width: 0; }
.collapse-row > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); padding: 10px 14px; min-height: var(--tap); border-radius: inherit; }
.collapse-row > summary::-webkit-details-marker { display: none; }
.collapse-row > summary .chev { margin-left: auto; color: var(--text-3); transition: transform .2s; }
.collapse-row[open] > summary .chev { transform: rotate(180deg); }
.collapse-row > summary:hover { background: var(--glass-hi); }
.collapse-row > .collapse-body { padding: 0 var(--sp-3) var(--sp-3); }
/* The automation ledger as one row: "Done by Arni · …" beside what needs you */
.ledger-row .lr-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; min-width: 0; font-size: var(--fs-sm); }
.lr-auto, .lr-need { display: inline-flex; gap: 7px; align-items: center; min-width: 0; }
.lr-auto { color: var(--text-2); }
.lr-auto .i, .lr-auto b { color: var(--auto-ink); }
.lr-auto b { font-weight: 650; }
.lr-need { color: var(--human-ink); font-weight: 600; }
.lr-need.clear { color: var(--good-ink); font-weight: 550; }
.lr-text { overflow-wrap: anywhere; }
.ledger-row .ledger { box-shadow: none; }
.ledger .auto, .ledger .need { color: var(--text); }
/* "Needs you", only when it carries a button */
.decision-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  color: var(--text); border: 1px solid oklch(from var(--human) l c h / .45); background: oklch(from var(--human) l c h / .10); }
.decision-bar .db-ic { color: var(--human-ink); display: grid; place-items: center; }
.decision-bar .db-body { flex: 1 1 240px; min-width: 0; }
.decision-bar .ask { font-weight: 650; }
.decision-bar .why { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
/* Figures with where they came from */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); }
.stat { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--card-solid); color: var(--text);
  border: 1px solid var(--card-edge); box-shadow: var(--e-1); position: relative; overflow: hidden; min-width: 0; text-decoration: none; }
.stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent, var(--blue)), transparent); }
a.stat:hover { border-color: oklch(from var(--accent, var(--blue)) l c h / .45); text-decoration: none; }
.stat .label { color: var(--text-2); font-size: var(--fs-sm); font-weight: 550; }
.stat .value { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; min-height: 1.3em; }
.stat .value.na { color: var(--text-3); }
.stat .value .skel { margin: 8px 0; height: 18px; }
.stat .ctx, .stat .stat-note { color: var(--text-3); font-size: var(--fs-xs); }
.source { display: flex; gap: 6px; align-items: center; color: var(--text-3); font-size: var(--fs-xs); margin-top: auto; padding-top: var(--sp-1); min-width: 0; }
.source span { overflow-wrap: anywhere; }
/* Queues: who and what is waiting, and for how long */
.queue .meta { display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.queue .age.old { color: var(--bad-ink); font-weight: 600; }
.feed li > .actions { gap: var(--sp-2); }
/* Decisions */
.decision .evidence-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.decision .evidence-list li { padding-left: 10px; border-left: 2px solid var(--rule); display: grid; gap: 2px; }
.decision .evidence-list .source { margin-top: 0; padding-top: 0; }
.who-acts { display: flex; gap: 6px; align-items: center; color: var(--human-ink); font-size: var(--fs-sm); font-weight: 600; }
/* Explanations: range bar, factors, what is missing */
.range { display: grid; gap: 6px; margin: 2px 0 var(--sp-3); }
.range .rb { width: 100%; height: 14px; display: block; overflow: visible; }
.rb-track { fill: oklch(from var(--text-3) l c h / .22); }
.rb-range { fill: oklch(from var(--blue) l c h / .45); }
.rb-val { fill: var(--blue-ink); }
.rb-val.out { fill: var(--bad-ink); }
.rb-labels { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.rb-labels b { color: var(--text); font-weight: 650; }
.factors { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); }
.factors li { display: grid; gap: 1px; font-size: var(--fs-sm); }
.factors small { color: var(--text-3); font-size: var(--fs-xs); }
.missing { border-top: 1px solid var(--rule); padding-top: 10px; }
.missing h3 { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin: 0 0 6px; }
.missing ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: var(--fs-sm); }
/* Which company the work is for */
.channel-bar { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); max-width: 100%;
  color: var(--text-2); border: 1px solid var(--card-edge); background: var(--work-2); }
.channel-bar b { font-weight: 700; letter-spacing: .03em; }
.channel-bar.ch-mse { color: var(--blue-ink); background: oklch(from var(--blue) l c h / .12); border-color: oklch(from var(--blue) l c h / .32); }
.channel-bar.ch-mps { color: var(--sea-ink); background: oklch(from var(--sea) l c h / .12); border-color: oklch(from var(--sea) l c h / .32); }
/* Badge keypad (shared bay phones) */
.keypad { display: grid; gap: var(--sp-3); max-width: 340px; margin: 0 auto; width: 100%; }
.kp-label { color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; text-align: center; }
.kp-out { display: flex; justify-content: center; gap: 10px; }
.kp-d { width: 48px; height: 56px; border-radius: var(--r-md); border: 1.5px solid var(--card-edge); background: var(--field); color: var(--text);
  display: grid; place-items: center; font: 650 var(--fs-xl) "Geist Mono", ui-monospace, monospace; }
.kp-d.on { border-color: var(--blue); }
.kp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kp-key { min-height: 60px; border-radius: var(--r-md); border: 1px solid var(--card-edge); background: var(--card-solid); color: var(--text); cursor: pointer;
  display: grid; place-items: center; font: 600 var(--fs-xl) "Inter", system-ui, sans-serif; box-shadow: var(--e-1); }
.kp-key:active { transform: translateY(1px); }
.kp-key.kp-fn { color: var(--text-2); background: var(--work-2); }
.keypad .actions .btn { flex: 1; min-height: 56px; font-size: var(--fs-lg); }
/* Honest states */
.empty .who-fix { display: block; margin-top: 6px; color: var(--text-2); font-weight: 550; }
.empty > span { display: block; }
.empty .actions { justify-content: center; margin-top: var(--sp-3); }
.empty.error-state .i { color: var(--bad-ink); }
.loading { display: block; }
.photo-btn { display: inline-flex; }
.veto-form .field textarea { min-height: 110px; }
/* Sign-in help */
.help-line { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--sp-4); }
.req-box { margin-top: var(--sp-2); display: grid; gap: var(--sp-2); }
.req-box .fine { margin-top: 0; }

/* =====================================================================================================
   Phones, tablets and touch: 44 x 44 px targets, rows that wrap instead of cutting the facts, a still background
   ===================================================================================================== */
@media (max-width: 640px), (pointer: coarse) {
  .btn, .btn.sm { min-height: var(--tap); }
  .btn.sm { padding: 10px 14px; font-size: var(--fs-sm); }
  .icon-btn { width: var(--tap); height: var(--tap); }
  .seg button, button.chip { min-height: 36px; min-width: var(--tap); }
  .views button, .tabs button, .menu button, .menu a, .gresults a, .nav a, .who-btn, .collapse-row > summary { min-height: var(--tap); }
  .input, .field input, .field select, .gsearch input { min-height: var(--tap); }
  .check { min-height: var(--tap); }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  tbody tr.link td { padding-top: 12px; padding-bottom: 12px; }
}
@media (max-width: 640px) {
  .seg button { min-height: var(--tap); }
  /* A row: the title and its facts on top (up to two lines each), pills and buttons on their own line below. */
  .feed li { flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2) var(--sp-3); }
  .feed li > .row, .feed li > a.row { flex: 1 1 100%; }
  .feed li > .body { flex: 1 1 200px; }
  .feed .t, .feed .s { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
  .feed li .who-chip.auto { display: none; }
  .decision-bar .actions { width: 100%; }
  .decision-bar .actions .btn { flex: 1 1 auto; }
  .bar .meta { gap: 6px; }
  .gsearch { min-width: 0; flex: 1 1 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat .value { font-size: var(--fs-xl); }
}
@media (max-width: 480px) {
  #theme-btn { display: none; }   /* the look is also under Settings */
  .stats { grid-template-columns: minmax(0, 1fr); }
}
/* The drifting backdrop stays on the desktop. Phones, tablets and the floor's scan page get a still background. */
@media (max-width: 960px) { body.in-app .orb, body.in-app .grain { display: none; } }
body.scan-only .orb, body.scan-only .grain { display: none; }

/* =====================================================================================================
   P20 experience pass: measured in a real browser (tests/ui_browser.mjs) at 390, 820 and 1440 px, light and dark.
   ===================================================================================================== */
/* Paper is always light: a printable sheet (traveller, dispatch note, keying sheet, badge cards) uses the light tokens in
   either theme, so its pills, channel bar and cards read on white on screen as well as on paper. */
.printable {
  color-scheme: light;
  --text: oklch(0.22 0.03 258); --text-2: oklch(0.40 0.03 258); --text-3: oklch(0.50 0.025 258); --rule: oklch(0.3 0.03 258 / 0.12);
  --field: #fff; --card: #fff; --card-solid: #fff; --card-edge: oklch(0.3 0.03 255 / 0.18); --work: oklch(0.965 0.007 250); --work-2: oklch(0.945 0.01 250);
  --glass-hi: oklch(1 0 0 / 0.8); --shadow: none;
  --blue: oklch(0.52 0.15 255); --brass: oklch(0.58 0.12 75); --sea: oklch(0.52 0.10 175); --coral: oklch(0.56 0.17 30); --plum: oklch(0.52 0.12 320);
  --good: oklch(0.52 0.14 155); --bad: oklch(0.54 0.18 28);
  --blue-ink: oklch(0.45 0.15 257); --brass-ink: oklch(0.45 0.10 68); --sea-ink: oklch(0.43 0.09 178); --coral-ink: oklch(0.47 0.16 32);
  --plum-ink: oklch(0.45 0.12 320); --good-ink: oklch(0.43 0.13 155); --bad-ink: oklch(0.47 0.18 28); --auto-ink: var(--sea-ink); --human-ink: var(--brass-ink);
  --fill-blue: oklch(0.52 0.15 255); --fill-blue-2: oklch(0.44 0.15 258); --fill-good: oklch(0.48 0.13 155); --fill-good-2: oklch(0.42 0.13 155);
}
.printable .channel-bar { font-size: var(--fs-md); }

/* Row titles and their facts are never cut: they wrap. The deciding fact (days late, why held) is written first. */
.feed .t, .feed .s { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* Touch: every target at least 44 x 44 px (company switch, theme and phone switches, tracker steps, rows, lone links). */
@media (max-width: 640px), (pointer: coarse) {
  .seg button, button.chip { min-height: var(--tap); }
  .tracker a.st { min-height: var(--tap); justify-content: center; }
  .feed a.row { min-height: var(--tap); }
  .ledger ol li { padding-top: 0; padding-bottom: 0; }
  .ledger ol li a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .cap > a, p.cap a:only-child, .help-line a { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); }
}
/* On a phone the step map uses the sheet's side margins, so each of the 8 steps is at least 44 px wide. */
@media (max-width: 640px) {
  .sheet .tracker.map { margin: 0 calc(-1 * var(--sheet-x) + 2px); }
}

/* Print: the traveller, the dispatch note and the Pastel keying sheet as paper. */
@media print {
  .printable { box-shadow: none; }
  .printable .decisions, .decisions { display: block; }
  .printable .decision { break-inside: avoid; margin: 0 0 8px; border: 1px solid #bbb; background: #fff; box-shadow: none; }
  .printable .decision::before { display: none; }
  .printable input, .printable select, .printable textarea { background: #fff !important; color: #111; border: 1px solid #777 !important; box-shadow: none; }
  .printable .field .hint { display: none; }
  .cardno, .channel-bar, .pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .scan .cam-box { display: none !important; }
  .tracker.map { display: none !important; }   /* the step map is navigation, not part of the paper */
  .printable.traveller.draft { display: none !important; }   /* as the page says: a job not released yet does not print */
  .sheet { border: 0 !important; padding: 0 !important; border-radius: 0 !important; }
}
/* ux-11: the late-reason picker is on phones too, on its own line under the row. */
@media (max-width: 640px) { .feed .late-pick.hide-sm { display: block; flex: 1 1 100%; } .feed .late-pick select { width: 100%; } }
/* Figures stay two to a row on a phone: a short number does not need the full width. */
@media (max-width: 480px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Keyboard: "Skip to the page" is the first stop, shown only when it has the focus. */
.skip-link { position: fixed; left: var(--sp-2); top: -80px; z-index: 100; min-height: var(--tap); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--fill-blue), var(--fill-blue-2)); color: white; font-weight: 600; cursor: pointer; }
.skip-link:focus { top: var(--sp-2); }
@media print { .skip-link { display: none !important; } }
/* A decision card never grows wider than its column: its table scrolls inside it, and the price block drops under the title
   when the card is narrow (the Pastel keying sheet on a phone ran off the screen). */
.decisions > *, .decision > * { min-width: 0; }
.decision > header { flex-wrap: wrap; }
/* A paper sheet shown on a phone (the traveller, a dispatch note): the head wraps (the codes drop under the title) and the steps
   table scrolls inside the sheet, so the page itself never runs wider than the phone. Paper is unchanged. */
@media (max-width: 640px) { .printable { overflow-x: auto; } .printable .ph { flex-wrap: wrap; } .print-bar { flex-wrap: wrap; } }
/* ux-11: no column ever hides off the side. On a phone (and wherever a table does not fit its box: ui.js marks it .fit-blocks)
   a table is drawn as one block per row, each fact under its column name; the first column leads the block. Print keeps
   the table: paper is wide enough. */
@media screen and (max-width: 640px) {
  .table-wrap:has(> table.rowblocks) { overflow-x: visible; margin: 0; }
  .table-wrap.tall:has(> table.rowblocks) { overflow-x: hidden; }
  table.rowblocks, table.rowblocks > tbody, table.rowblocks > tbody > tr, table.rowblocks > tbody > tr > td { display: block; width: 100%; }
  table.rowblocks > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.rowblocks > tbody > tr { padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); }
  table.rowblocks > tbody > tr > td { display: grid; grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); gap: var(--sp-3); align-items: baseline;
    padding: 3px 2px; border: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; min-width: 0; background: none; }
  table.rowblocks > tbody > tr > td::before { content: attr(data-label); color: var(--text-3); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  table.rowblocks > tbody > tr > td.nolabel { grid-template-columns: minmax(0, 1fr); }
  table.rowblocks > tbody > tr > td.nolabel::before { content: none; }
  table.rowblocks > tbody > tr > td:first-child { font-weight: 600; }
  table.rowblocks > tbody > tr > td:first-child :is(small, .sub) { font-weight: 400; }
  table.rowblocks > tbody > tr > td.num { font-size: var(--fs-sm); }
  table.rowblocks .paper, table.rowblocks > tbody > tr > td.hide-sm { display: none; }
  table.rowblocks > tbody > tr:nth-child(even) > td { background: none; }
  table.rowblocks > tbody > tr.link > td { padding-top: 3px; padding-bottom: 3px; }
  table.rowblocks > tbody > tr.late { box-shadow: inset 3px 0 0 var(--bad); padding-left: var(--sp-2); }
  table.rowblocks > tbody > tr.late > td:first-child { box-shadow: none; }
  .printable table.rowblocks > tbody > tr > td { border: 0; padding: 3px 2px; }
  .printable { overflow-x: visible; }
}
@media screen {
  .table-wrap:has(> table.rowblocks.fit-blocks) { overflow-x: visible; margin: 0; }
  .table-wrap.tall:has(> table.rowblocks.fit-blocks) { overflow-x: hidden; }
  table.rowblocks.fit-blocks, table.rowblocks.fit-blocks > tbody, table.rowblocks.fit-blocks > tbody > tr, table.rowblocks.fit-blocks > tbody > tr > td { display: block; width: 100%; }
  table.rowblocks.fit-blocks > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.rowblocks.fit-blocks > tbody > tr { padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); }
  table.rowblocks.fit-blocks > tbody > tr > td { display: grid; grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); gap: var(--sp-3); align-items: baseline;
    padding: 3px 2px; border: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; min-width: 0; background: none; }
  table.rowblocks.fit-blocks > tbody > tr > td::before { content: attr(data-label); color: var(--text-3); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  table.rowblocks.fit-blocks > tbody > tr > td.nolabel { grid-template-columns: minmax(0, 1fr); }
  table.rowblocks.fit-blocks > tbody > tr > td.nolabel::before { content: none; }
  table.rowblocks.fit-blocks > tbody > tr > td:first-child { font-weight: 600; }
  table.rowblocks.fit-blocks > tbody > tr > td:first-child :is(small, .sub) { font-weight: 400; }
  table.rowblocks.fit-blocks > tbody > tr > td.num { font-size: var(--fs-sm); }
  table.rowblocks.fit-blocks .paper { display: none; }
  table.rowblocks.fit-blocks > tbody > tr:nth-child(even) > td { background: none; }
  table.rowblocks.fit-blocks > tbody > tr.link > td { padding-top: 3px; padding-bottom: 3px; }
  table.rowblocks.fit-blocks > tbody > tr.late { box-shadow: inset 3px 0 0 var(--bad); padding-left: var(--sp-2); }
  table.rowblocks.fit-blocks > tbody > tr.late > td:first-child { box-shadow: none; }
  .printable table.rowblocks.fit-blocks > tbody > tr > td { border: 0; padding: 3px 2px; }
}
/* ---------- Approve card: the reasons as a summary (holds_summary.js; the director's direction of Sun 4 Oct 2026) ---------- */
.hs { display: grid; gap: var(--sp-2); min-width: 0; }
.hs-verdict { display: flex; gap: var(--sp-2); align-items: flex-start; margin: 0; font-weight: 600; font-size: var(--fs-md); line-height: 1.45; }
.hs-verdict .i { flex: none; margin-top: 2px; }
.hs-verdict[data-tone="no"] .i { color: var(--bad-ink); } .hs-verdict[data-tone="warn"] .i { color: var(--brass-ink); }
.hs-verdict[data-tone="good"] .i { color: var(--good-ink); } .hs-verdict[data-tone="na"] .i { color: var(--text-3); }
.hs-banner { margin: 0; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.45; }
.hs-groups { display: grid; gap: 6px; min-width: 0; }
.hs-group > summary { padding: 8px 12px; min-height: var(--tap); }
.hs-group { border-left-width: 3px; }
.hs-group.t-no { border-left-color: var(--bad); } .hs-group.t-warn { border-left-color: var(--brass); } .hs-group.t-na { border-left-color: var(--card-edge); }
/* icon | title, with the count and who clears it under the title: the same two-row line on a phone and on a desk */
.hs-line { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: var(--sp-2); row-gap: 4px; align-items: start; min-width: 0; flex: 1; }
.hs-line .hs-ic { grid-row: 1; grid-column: 1; margin-top: 2px; }
.hs-ic.no { color: var(--bad-ink); } .hs-ic.warn { color: var(--brass-ink); } .hs-ic.na { color: var(--text-3); }
.hs-title { grid-column: 2; font-size: var(--fs-md); font-weight: 600; color: var(--text); min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.hs-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.hs-meta:empty { display: none; }
.hs-count { font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-owner { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: var(--r-pill); color: var(--text-2);
  border: 1px solid var(--card-edge); background: oklch(from var(--text-3) l c h / .08); white-space: nowrap; }
.hs-trial { font-size: var(--fs-2xs); color: var(--brass-ink); white-space: nowrap; }
.hs-group .collapse-body { padding: 0 12px 12px; display: grid; gap: var(--sp-3); min-width: 0; }
.hs-sub { display: grid; gap: 6px; min-width: 0; }
.hs-sub + .hs-sub { border-top: 1px solid var(--card-edge); padding-top: var(--sp-3); }
.hs-sub-t { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.hs-rows { border-collapse: collapse; font-size: var(--fs-sm); width: auto; max-width: 100%; }
.hs-rows th { text-align: left; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-3); padding: 2px 14px 4px 0; }
.hs-rows td { padding: 3px 14px 3px 0; border-top: 1px solid var(--card-edge); font-variant-numeric: tabular-nums; vertical-align: top; overflow-wrap: anywhere; }
.hs-rows td:first-child { font-weight: 600; }
.hs-says { margin: 0; padding-left: 1.1em; display: grid; gap: 3px; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.45; }
.hs-says li { overflow-wrap: anywhere; }
.hs-do { margin: 0; font-size: var(--fs-xs); color: var(--text-3); }
@media print { .hs-group .collapse-body { display: grid; } }
.hs-sub-t { display: flex; flex-wrap: wrap; gap: 4px var(--sp-2); align-items: baseline; }
.hs-status { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.hs-status.no { color: var(--bad-ink); } .hs-status.warn { color: var(--brass-ink); }
.hs-said { margin: 0; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.hs-all > summary { min-height: 36px; padding: 6px 10px; font-size: var(--fs-xs); color: var(--text-3); }
.hs-all .collapse-body { padding: 0 10px 10px; }
/* the drill-down tables wrap inside their card: app.css sets every th/td to nowrap and every th sticky (review, Sun 4 Oct 2026) */
.hs-rows th, .hs-rows td { white-space: normal; padding-right: 10px; }
.hs-rows th:last-child, .hs-rows td:last-child { padding-right: 0; }
/* an order and line ("4508157486 / 10") may break at its spaces on a phone, never inside the number */
.hs-rows td.mono { overflow-wrap: normal; word-break: normal; }
.hs-rows th { position: static; background: none; text-transform: none; letter-spacing: 0; vertical-align: bottom; }
.hs-rows td.hs-mark { color: var(--brass-ink); }
.hs-same { color: var(--brass-ink); }
.hs-same-t { margin: 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--text); padding: 6px 10px; border-radius: var(--r-sm, 6px);
  background: oklch(from var(--brass) l c h / .10); overflow-wrap: anywhere; }
/* where there is room (a desk), an order and its line stay on one line */
@media (min-width: 440px) { .hs-rows td.mono { white-space: nowrap; } }

/* Quote 'why' drawer, short form (Nico msg 2434, 5 Oct 2026): the decision first, details one click away */
.why-sum .why-lines { margin: 10px 0 0; padding-left: 18px; color: var(--text-2); font-size: var(--fs-md); }
.why-sum .why-lines li { margin: 4px 0; }
details.why-more { margin-top: 14px; border-top: 1px solid var(--card-edge); padding-top: 10px; }
details.why-more > summary { cursor: pointer; color: var(--text-2); font-size: var(--fs-md); font-weight: 600; }
details.why-more[open] > summary { margin-bottom: 8px; }

/* ---- Scan page on a phone (floor pilot, Tue 6 Oct 2026). The go-live rehearsal measured the scan confirmation at 852 px on an
   844 px screen, under the badge keypad. scan.js now puts the confirmation under the job, above the keypad; on a phone the job,
   the confirmation and the keypad are tighter, so the job, the confirmation with its Next button and the keypad fit a 390 x 844
   screen without scrolling (measured in Chromium, staging/pilot_tue/evidence). Every button stays at least 52 px tall. */
.scan .scan-result { display: grid; gap: 10px; scroll-margin-top: calc(var(--bar-h) + 8px); }
@media (max-width: 640px) {
  .scan { gap: 10px; }
  .scan .job { padding: 14px 16px; border-radius: 18px; }
  .scan .job h1 { font-size: var(--fs-xl); margin: 4px 0 0; }
  .scan .op { font-size: 15px; }
  .scan .state { margin-top: 8px; }
  .scan .state.ask { display: none; }
  .scan-ok { padding: 10px 12px; gap: 10px; font-size: 15px; border-radius: 14px; }
  .scan .scan-result .notice { padding: 8px 12px; }
  .scan .scan-result .btn.xl { min-height: 52px; padding: 12px 16px; }
  .scan .badge-ask { padding: 14px; }
  .scan .scan-result:not(:empty) + div > .badge-ask > header { display: none; }   /* after a scan: the confirmation, then the keys */
  .scan .keypad { gap: 8px; }
  .scan .kp-d { height: 46px; }
  .scan .kp-grid { gap: 8px; }
  .scan .kp-key { min-height: 52px; }
}
/* Workshop board, Minutes (managers only): the day picker, then each job with its steps and stretches */
.minutes-bar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.minutes-bar .field { margin-bottom: 0; min-width: 180px; }
.minutes-job { display: grid; gap: 8px; }
.minutes-job + .minutes-job { border-top: 1px solid var(--rule); padding-top: 14px; }
.minutes-job h3 { font-size: var(--fs-md); font-weight: 650; }
.minutes-op { color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }