/* =============================================================================
WheelShop design system: "Sleek" (docs/research/10-sleek-look.md, D-87)
A calm, precise operations tool: closer to Linear, Stripe or Vercel than to
iOS Settings or a dealer management system. Replaces Floor Ticket (07).
Tokens, then base, then the shell, then components. Plain CSS, no build.
The system in nine lines:
1 Type: Instrument Sans for all UI text, sentence case; large titles are
semibold with slightly tight tracking. Geist Mono for job numbers, wheel
tags, timers, times and counts (tabular by nature). No all-caps headings;
tiny mono labels only for table heads. Never the system / SF stack.
2 Surfaces: a warm off-white page, white panels, 1 px hairlines and a very
soft shadow, 10-12 px radii. Dark: #0C0D0F page, #151619 panels. No
textures, grids or noise.
3 One brand token (--brand, white label: settings.brandColor, ui/brand.js)
drives primary buttons, the active nav item, focus rings, progress and
selected states. Tints come from color-mix(); readable on-brand text and
brand-as-text colours are worked out in ui/brand.js.
4 Navigation: an ink sidebar (both themes) with a 2 px brand bar on the
current item; a light bottom bar on phones; the employee top bar holds a
segmented My work | Station switch with a sliding brand thumb.
5 Buttons: primary = brand fill; secondary = white with a hairline; quiet =
text only; destructive = red. Floor buttons stay 64-72 px.
6 Status: soft tinted chips with an icon (or a dot) and a word: green
running, amber waiting / at risk, red down / problem, grey idle. Safety
and machine-down get a solid red left edge and a light red tint. Never
colour alone.
7 Lists are rows with hairlines inside ONE container (09-declutter). Job
numbers are Geist Mono medium. Placeholder marks: a grey dot + "est.".
8 Timers: big mono digits, the phase word and a thin progress bar in brand
colour; amber once ended (ready), red when overdue.
9 Motion 150-200 ms ease-out; route change = fade + 6 px rise; Reduce Motion
fades only. WCAG AA text, visible focus rings, 44 px targets, safe areas.
Legacy token names (--label, --bg-card, --accent, --paper ...) stay as
aliases so every stylesheet and the inline tints in the views keep working.
============================================================================= */
/* ----- 1. Tokens: colour (light) ------------------------------------------- */
:root {
color-scheme: light;
/* brand (white label). ui/brand.js overrides --brand, --on-brand, --brand-ink-l/-d */
--brand: #2F5BFF;
--on-brand: #FFFFFF;
--brand-ink: var(--brand-ink-l, #2F5BFF); /* brand as text on panels, AA */
--brand-soft: color-mix(in srgb, var(--brand) 9%, var(--panel));
--brand-soft-2: color-mix(in srgb, var(--brand) 16%, var(--panel));
--brand-line: color-mix(in srgb, var(--brand) 38%, var(--panel));
--brand-press: color-mix(in srgb, var(--brand) 84%, #000);
--focus: var(--brand-ink);
/* surfaces */
--page: #F7F7F5;
--panel: #FFFFFF;
--panel-2: #F4F4F1; /* wells, table heads */
--panel-3: #ECECE8; /* pressed */
--line: #E7E6E2; /* hairline */
--line-strong: #D5D4CF;
--text: #111214;
--text-2: #55575D; /* 7.3:1 on white */
--text-3: #6C6E74; /* 5.2:1 on white, 4.9:1 on the page */
--text-4: #A3A5AA; /* decorative only */
/* the ink sidebar (same in both themes) */
--rail: #111214;
--rail-2: #1C1D21;
--rail-line: #24262B;
--on-rail: #F4F4F5;
--on-rail-2: #A1A3A9; /* 7.4:1 on the rail */
/* status: fill, text (AA on panel), soft tint */
--green: #16A34A; --green-ax: #157A3B;
--amber: #D97706; --amber-ax: #A34E05;
--red: #DC2626; --red-ax: #B4181B; --red-fill: #D42A23;
--blue: #2563EB; --blue-ax: #1D4FCC;
--cyan: #0E8A9A; --cyan-ax: #0B6672;
--violet: #7C3AED;
--gray: #8A8C92; --gray2: #A3A5AA; --gray3: #C2C3C7; --gray4: #D9D9DC; --gray5: #E7E7E9; --gray6: #F1F1F2;
--orange: var(--amber); --orange-ax: var(--amber-ax);
--yellow: #EAB308; --yellow-ax: #8A6100;
/* shadows: hairline-soft, never heavy */
--shadow-1: 0 1px 2px rgb(17 18 20 / .04), 0 1px 1px rgb(17 18 20 / .02);
--shadow-2: 0 2px 8px rgb(17 18 20 / .05), 0 1px 2px rgb(17 18 20 / .04);
--shadow-pop: 0 18px 48px rgb(17 18 20 / .16), 0 3px 10px rgb(17 18 20 / .07);
/* semantic aliases (legacy names, Sleek values) */
--accent: var(--brand); --accent-text: var(--brand-ink); --accent-strong: var(--brand);
--success: var(--green); --success-text: var(--green-ax);
--warning: var(--amber); --warning-text: var(--amber-ax);
--critical: var(--red); --critical-text: var(--red-ax); --critical-strong: var(--red-fill);
--info: var(--blue); --info-text: var(--blue-ax);
--caution: var(--amber); --caution-text: var(--amber-ax);
--success-soft: color-mix(in srgb, var(--green) 10%, var(--panel));
--warning-soft: color-mix(in srgb, var(--amber) 11%, var(--panel));
--critical-soft: color-mix(in srgb, var(--red) 8%, var(--panel));
--info-soft: color-mix(in srgb, var(--blue) 8%, var(--panel));
--bg: var(--panel);
--bg-grouped: var(--page);
--bg-card: var(--panel);
--bg-card-2: var(--panel-2);
--bg-elevated: var(--panel);
--bg-sidebar: var(--rail);
--ground: var(--page);
--paper: var(--panel); --paper-2: var(--panel-2); --paper-3: var(--panel-3);
--ink: var(--text); --ink-2: var(--text-2); --ink-3: var(--text-3);
--edge: var(--line-strong); --rule: var(--line); --rule-strong: var(--line-strong);
--btn-edge: var(--line-strong); --btn-quiet: var(--line-strong); --band: var(--panel-2);
--graphite: var(--rail); --graphite-2: var(--rail-2); --graphite-edge: var(--rail-line);
--on-graphite: var(--on-rail); --on-graphite-2: var(--on-rail-2);
--safety: var(--brand); --on-safety: var(--on-brand); --safety-press: var(--brand-press);
--label: var(--text);
--label-2: var(--text-2);
--label-3: var(--text-3);
--label-4: var(--text-4);
--separator: var(--line);
--separator-opaque: var(--line);
--fill: #E4E4E1;
--fill-2: rgb(17 18 20 / .09);
--fill-3: rgb(17 18 20 / .055);
--fill-4: rgb(17 18 20 / .03);
--press: rgb(17 18 20 / .05);
--hover: rgb(17 18 20 / .028);
--seg-thumb: var(--text);
--on-accent: var(--on-brand);
--hairline: inset 0 -1px 0 var(--line);
--shadow-sheet: var(--shadow-pop);
--shadow-float: var(--shadow-2);
--avatar-bg: #E9E9E6;
--avatar-ink: #3B3D42;
/* stage ticks: small marks only, always beside the stage name */
--stage-checkin: var(--gray);
--stage-strip: #9A6B47;
--stage-repair: #5462C6;
--stage-paint: #B347A8;
--stage-machine: #1D8C9C;
--stage-qc: #188A6F;
--stage-ready: var(--green);
}
/* ----- dark (system, unless the page forces light) ------------------------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--brand-ink: var(--brand-ink-d, #5075FF);
--brand-soft: color-mix(in srgb, var(--brand) 16%, var(--panel));
--brand-soft-2: color-mix(in srgb, var(--brand) 26%, var(--panel));
--brand-line: color-mix(in srgb, var(--brand) 50%, var(--panel));
--brand-press: color-mix(in srgb, var(--brand) 82%, #fff);
--page: #0C0D0F; --panel: #151619; --panel-2: #1B1C20; --panel-3: #222328;
--line: #25272B; --line-strong: #33363B;
--text: #EDEDEF; --text-2: #A6A8AE; --text-3: #8D9096; --text-4: #5C5F65;
--rail: #111214; --rail-2: #1C1D21; --rail-line: #222428;
--green: #3FB862; --green-ax: #5BD07D;
--amber: #E99A2C; --amber-ax: #F2B154;
--red: #EF4444; --red-ax: #FF7A73; --red-fill: #D93630;
--blue: #5B8DEF; --blue-ax: #8AB0FF;
--cyan: #3BB3C2; --cyan-ax: #6CCBD7;
--gray: #7E8187; --gray2: #5F6268; --gray3: #46494E; --gray4: #36383D; --gray5: #2A2C30; --gray6: #1F2024;
--yellow: #EAB308; --yellow-ax: #F2C94C;
--success-soft: color-mix(in srgb, var(--green) 14%, var(--panel));
--warning-soft: color-mix(in srgb, var(--amber) 14%, var(--panel));
--critical-soft: color-mix(in srgb, var(--red) 14%, var(--panel));
--info-soft: color-mix(in srgb, var(--blue) 14%, var(--panel));
--fill: #2A2C31; --fill-2: rgb(237 237 239 / .12); --fill-3: rgb(237 237 239 / .07); --fill-4: rgb(237 237 239 / .04);
--press: rgb(237 237 239 / .07); --hover: rgb(237 237 239 / .035);
--shadow-1: 0 1px 2px rgb(0 0 0 / .3);
--shadow-2: 0 2px 10px rgb(0 0 0 / .35), 0 1px 2px rgb(0 0 0 / .3);
--shadow-pop: 0 20px 56px rgb(0 0 0 / .55), 0 0 0 1px #2A2C31;
--avatar-bg: #2A2C31; --avatar-ink: #D6D7DA;
--stage-strip: #C08E68; --stage-repair: #8590E8; --stage-paint: #D677CD; --stage-machine: #45B8C7; --stage-qc: #46C4A2;
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--brand-ink: var(--brand-ink-d, #5075FF);
--brand-soft: color-mix(in srgb, var(--brand) 16%, var(--panel));
--brand-soft-2: color-mix(in srgb, var(--brand) 26%, var(--panel));
--brand-line: color-mix(in srgb, var(--brand) 50%, var(--panel));
--brand-press: color-mix(in srgb, var(--brand) 82%, #fff);
--page: #0C0D0F; --panel: #151619; --panel-2: #1B1C20; --panel-3: #222328;
--line: #25272B; --line-strong: #33363B;
--text: #EDEDEF; --text-2: #A6A8AE; --text-3: #8D9096; --text-4: #5C5F65;
--rail: #111214; --rail-2: #1C1D21; --rail-line: #222428;
--green: #3FB862; --green-ax: #5BD07D;
--amber: #E99A2C; --amber-ax: #F2B154;
--red: #EF4444; --red-ax: #FF7A73; --red-fill: #D93630;
--blue: #5B8DEF; --blue-ax: #8AB0FF;
--cyan: #3BB3C2; --cyan-ax: #6CCBD7;
--gray: #7E8187; --gray2: #5F6268; --gray3: #46494E; --gray4: #36383D; --gray5: #2A2C30; --gray6: #1F2024;
--yellow: #EAB308; --yellow-ax: #F2C94C;
--success-soft: color-mix(in srgb, var(--green) 14%, var(--panel));
--warning-soft: color-mix(in srgb, var(--amber) 14%, var(--panel));
--critical-soft: color-mix(in srgb, var(--red) 14%, var(--panel));
--info-soft: color-mix(in srgb, var(--blue) 14%, var(--panel));
--fill: #2A2C31; --fill-2: rgb(237 237 239 / .12); --fill-3: rgb(237 237 239 / .07); --fill-4: rgb(237 237 239 / .04);
--press: rgb(237 237 239 / .07); --hover: rgb(237 237 239 / .035);
--shadow-1: 0 1px 2px rgb(0 0 0 / .3);
--shadow-2: 0 2px 10px rgb(0 0 0 / .35), 0 1px 2px rgb(0 0 0 / .3);
--shadow-pop: 0 20px 56px rgb(0 0 0 / .55), 0 0 0 1px #2A2C31;
--avatar-bg: #2A2C31; --avatar-ink: #D6D7DA;
--stage-strip: #C08E68; --stage-repair: #8590E8; --stage-paint: #D677CD; --stage-machine: #45B8C7; --stage-qc: #46C4A2;
}
/* ----- Increased contrast: stronger secondary text and hairlines ----------- */
@media (prefers-contrast: more) {
:root { --text-2: #3A3C41; --text-3: #4A4C51; --line: #B9B8B3; --line-strong: #8E8D88; --on-rail-2: #D4D5D8; }
:root[data-theme="dark"] { --text-2: #CFD0D4; --text-3: #B8BABF; --line: #4A4D53; --line-strong: #63666C; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --text-2: #CFD0D4; --text-3: #B8BABF; --line: #4A4D53; --line-strong: #63666C; }
}
/* ----- 1b. Tokens: type, space, shape, motion ------------------------------ */
/* Sizes in rem of a 17 px body. Each chrome scales them: floor x1.235 (body 21 px), wall TV x1.706. */
:root, [data-chrome] {
--scale: 1;
--t-large: calc(2rem * var(--scale)); /* 34 screen titles */
--t-title1: calc(1.647rem * var(--scale)); /* 28 KPI numbers */
--t-title2: calc(1.294rem * var(--scale)); /* 22 card titles */
--t-title3: calc(1.176rem * var(--scale)); /* 20 floor task name */
--t-headline: calc(1rem * var(--scale)); /* 17 row titles */
--t-body: calc(1rem * var(--scale)); /* 17 default */
--t-callout: calc(.941rem * var(--scale)); /* 16 toolbar buttons */
--t-subhead: calc(.882rem * var(--scale)); /* 15 row secondary */
--t-footnote: calc(.765rem * var(--scale)); /* 13 headers, times */
--t-caption1: calc(.706rem * var(--scale)); /* 12 tags, badges */
--t-caption2: calc(.647rem * var(--scale)); /* 11 tab labels only */
}
[data-chrome="floor"] { --scale: 1.235; --row-min: 64px; }
[data-chrome="kiosk"] { --scale: 1.706; }
@media (min-width: 2400px) { [data-chrome="kiosk"] { --scale: 2.2; } }
:root {
--font: "Instrument Sans", "Arial", "Liberation Sans", sans-serif;
--font-display: var(--font); /* legacy name: titles are Instrument Sans semibold now */
--font-mono: "Geist Mono", "Cascadia Mono", "Consolas", "Liberation Mono", monospace;
--font-rounded: var(--font); /* legacy name */
--cond: 100%; /* legacy: no condensed labels */
--track-title: -.022em; /* large titles */
--track-head: -.012em; /* card and section titles */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 44px; --sp-9: 64px;
--gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
--tap: 44px;
--row-min: 44px;
--stripe-w: 3px;
--r-group: 12px; --r-tile: 12px; --r-sheet: 16px; --r-control: 10px; --r-chip: 8px; --r-tag: 6px; --r-capsule: 10px;
--navbar-h: 56px;
--tabbar-h: 60px;
--tabbar-space: 0px; /* set on compact shells */
--sidebar-w: 248px;
/* motion: 150-200 ms ease-out, no bounce */
--ease: cubic-bezier(.2, .7, .2, 1);
--dur-ui: 160ms;
--dur-press: 90ms;
--dur-spring: 200ms;
--spring: cubic-bezier(.2, .8, .2, 1);
}
@media (min-width: 768px) { :root { --gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right)); } }
@media (min-width: 1200px) { :root { --gutter: max(32px, env(safe-area-inset-left), env(safe-area-inset-right)); } }
@media (min-width: 768px) and (max-width: 1023.98px) { :root { --sidebar-w: 220px; } }
/* ----- 2. Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* On iOS the root size follows the user's text size (Dynamic Type); the family is ours. */
html {
font: -apple-system-body;
font-family: var(--font);
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
@supports not (-webkit-touch-callout: none) { html { font-size: 106.25%; } }
body {
margin: 0; min-height: 100dvh;
background: var(--page); color: var(--text);
font-family: var(--font); font-size: var(--t-body); line-height: 1.4; letter-spacing: 0;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
a { color: var(--brand-ink); text-decoration: none; }
img, svg { display: block; }
.ico { flex: none; }
.ico .f { fill: currentColor; stroke: none; }
.ico .knock { stroke: var(--bg-card); }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus { outline: none; }
/* one ring everywhere: brand, with a panel-coloured gap so it shows on any surface */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-control); }
::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num { font-variant-numeric: tabular-nums; }
.mono, .num.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: -.01em; }
/* type utilities */
.t-large { font-size: calc(var(--t-large) * .94); line-height: 1.1; font-weight: 600; letter-spacing: var(--track-title); }
.t-title1 { font-size: var(--t-title1); line-height: 1.15; font-weight: 600; letter-spacing: var(--track-title); }
.t-title2 { font-size: var(--t-title2); line-height: 1.25; font-weight: 600; letter-spacing: var(--track-head); }
.t-title3 { font-size: var(--t-title3); line-height: 1.3; font-weight: 600; letter-spacing: var(--track-head); }
.t-headline { font-size: var(--t-headline); line-height: 1.35; font-weight: 600; }
.t-body { font-size: var(--t-body); line-height: 1.4; }
.t-callout { font-size: var(--t-callout); line-height: 1.35; }
.t-subhead { font-size: var(--t-subhead); line-height: 1.4; }
.t-footnote { font-size: var(--t-footnote); line-height: 1.4; }
.t-caption1 { font-size: var(--t-caption1); line-height: 1.35; font-weight: 500; }
.t-caption2 { font-size: var(--t-caption2); line-height: 1.25; }
.c-2 { color: var(--text-2); } .c-3 { color: var(--text-3); }
.c-accent { color: var(--brand-ink); } .c-critical { color: var(--critical-text); } .c-warning { color: var(--warning-text); } .c-success { color: var(--success-text); }
/* ----- 3. Shell ------------------------------------------------------------- */
/* .shell[data-chrome="app" | "floor" | "kiosk" | "bare"] fills the window below the test bar (--td-h). */
.shell {
position: fixed; inset: var(--td-h, 0px) 0 0 0;
display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
background: var(--page);
}
.shell[data-chrome="app"] { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); transition: grid-template-columns var(--dur-spring) var(--spring); }
.shell[data-chrome="app"][data-sidebar="collapsed"] { grid-template-columns: 0 minmax(0, 1fr); }
.main {
position: relative; min-width: 0; height: 100%;
overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
scroll-padding-top: var(--navbar-h);
outline: none;
background: var(--page);
}
.col { width: 100%; max-width: var(--col-max, 1180px); margin-inline: auto; }
.main[data-width="readable"] { --col-max: 780px; }
.main[data-width="full"] { --col-max: none; }
/* top bar: the page colour, quiet; a hairline appears once the page scrolls under it.
The page title lives in the header below it; the bar shows it only on pages without one (.inline). */
.navbar {
position: sticky; top: 0; z-index: 20;
display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
min-height: var(--navbar-h); padding: env(safe-area-inset-top) calc(var(--gutter) - 8px) 0;
background: var(--page); color: var(--text);
box-shadow: 0 1px 0 transparent;
transition: box-shadow var(--dur-ui) var(--ease);
}
.navbar.scrolled-any { box-shadow: 0 1px 0 var(--line); }
.navbar-lead, .navbar-trail { display: flex; align-items: center; gap: 4px; min-width: 0; }
.navbar-trail { justify-content: flex-end; }
.navbar-title {
font-size: var(--t-headline); font-weight: 600; letter-spacing: var(--track-head);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; visibility: hidden;
}
.navbar.inline .navbar-title, .navbar.scrolled .navbar-title { max-width: 50vw; visibility: visible; }
.navbar-back {
display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); padding: 0 10px 0 4px; border: 0; background: none;
color: var(--text-2); font-size: var(--t-subhead); font-weight: 500;
cursor: pointer; border-radius: var(--r-control); max-width: 100%;
transition: color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
}
.navbar-back span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar-back .ico { color: currentColor; }
.navbar-back:hover { color: var(--text); background: var(--hover); }
.navbar-back:active { background: var(--press); }
/* page header: the title, then one line of plain-text summary numbers */
.lt { padding: 8px var(--gutter) 20px; }
.lt h1 {
font-size: calc(var(--t-large) * .9); line-height: 1.12; font-weight: 600;
letter-spacing: var(--track-title); overflow-wrap: anywhere; text-wrap: balance;
}
.lt-sub { margin-top: 6px; font-size: var(--t-subhead); font-weight: 400; color: var(--text-2); line-height: 1.7; }
/* summary numbers live here as plain text (09 rule 11); a number that leads somewhere is a link */
.lt-sub a, .lt-sub button {
display: inline; padding: 10px 0; margin: -10px 0; border: 0; background: none; font: inherit; cursor: pointer;
color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line-strong);
transition: text-decoration-color var(--dur-ui) var(--ease);
}
.lt-sub a:hover, .lt-sub button:hover { text-decoration-color: currentColor; }
.lt-sub [data-tone="critical"] { color: var(--critical-text); }
.lt-sub [data-tone="warning"] { color: var(--warning-text); }
.lt-sub [aria-pressed="true"] { color: var(--brand-ink); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.lt-sub .sub-sep { margin: 0 .35em; color: var(--text-4); }
.lt-sub > * { white-space: nowrap; }
.lt.hidden { display: none; }
.view { padding: 0 var(--gutter) calc(var(--sp-8) + var(--tabbar-space) + env(safe-area-inset-bottom)); }
.view > * + * { margin-top: var(--sp-7); }
.view.flush > * + * { margin-top: 0; }
/* sidebar (regular width): ink, full height, two levels at most */
.sidebar {
position: relative; z-index: 30; min-width: 0; overflow: hidden;
background: var(--rail); color: var(--on-rail);
}
.sidebar-panel {
height: 100%; width: var(--sidebar-w);
display: flex; flex-direction: column; gap: 0;
padding: max(10px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom)) env(safe-area-inset-left);
transition: transform var(--dur-spring) var(--spring), opacity var(--dur-ui) var(--ease);
}
.shell[data-sidebar="collapsed"] .sidebar-panel { transform: translateX(-100%); opacity: 0; }
.shell[data-sidebar="collapsed"] .sidebar { pointer-events: none; }
.sidebar-head { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 6px 0 18px; margin-top: -4px; }
/* the shop's mark: a brand tile with a wheel ring (white label: it follows --brand) */
.sidebar-head::before {
content: ""; flex: none; width: 26px; height: 26px; border-radius: 8px;
background: radial-gradient(circle at 50% 50%, transparent 0 4.5px, var(--on-brand) 5px 7.5px, transparent 8px), var(--brand);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
}
.sidebar-brand {
flex: 1; min-width: 0; font-size: var(--t-subhead); font-weight: 600; letter-spacing: -.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--on-rail);
}
.sidebar-nav { flex: 1; overflow-y: auto; margin: 10px 0 0; padding: 0 10px; }
.sidebar-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-item {
position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px 0 12px; border-radius: 8px;
color: var(--on-rail-2); font-size: var(--t-subhead); font-weight: 500;
transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
}
.side-item .ico { color: currentColor; width: 20px; height: 20px; opacity: .9; }
.side-item:hover { background: rgb(255 255 255 / .04); color: var(--on-rail); }
.side-item:active { background: rgb(255 255 255 / .07); transition-duration: 0s; }
.side-item[aria-current="page"] { background: rgb(255 255 255 / .07); color: #fff; }
.side-item[aria-current="page"] .ico { opacity: 1; }
.side-item[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 2px; border-radius: 0 2px 2px 0; background: var(--brand); }
.side-item .side-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-count { color: var(--on-rail-2); font-family: var(--font-mono); font-size: var(--t-footnote); }
.sidebar-primary { margin: 10px 10px 4px; width: calc(100% - 20px); }
.sidebar-foot { padding: 8px 10px 0; margin-top: 4px; border-top: 1px solid var(--rail-line); }
.account {
display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 8px;
border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; color: var(--on-rail);
transition: background-color var(--dur-ui) var(--ease);
}
.account:hover { background: rgb(255 255 255 / .04); }
.account:active { background: rgb(255 255 255 / .07); }
.account-text { flex: 1; min-width: 0; display: grid; }
.account-name { font-size: var(--t-subhead); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-role { font-size: var(--t-footnote); color: var(--on-rail-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .avatar { background: #2A2C31; color: #E6E7EA; }
.sidebar :focus-visible { outline-color: color-mix(in srgb, var(--brand) 60%, #fff); }
/* bottom bar (compact width): panel colour, full width, 3-5 items; the current one in brand */
.tabbar { display: none; }
@media (max-width: 767.98px) {
.shell[data-chrome="app"], .shell[data-chrome="app"][data-sidebar="collapsed"] { grid-template-columns: minmax(0, 1fr); --tabbar-space: calc(var(--tabbar-h) + 8px); }
.shell[data-chrome="app"] .sidebar { display: none; }
.shell[data-chrome="app"] .tabbar {
position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
display: flex; align-items: stretch; gap: 0;
height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
background: var(--panel); border-top: 1px solid var(--line);
}
.shell[data-chrome="app"] .navbar-sidebar-toggle { display: none; }
}
.tab {
position: relative; flex: 1 1 0; min-width: 0;
display: grid; justify-items: center; align-content: center; gap: 3px;
color: var(--text-3);
font-size: var(--t-caption1); font-weight: 500; letter-spacing: 0;
transition: color var(--dur-ui) var(--ease);
}
.tab .ico { width: 23px; height: 23px; }
.tab span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.tab[aria-current="page"] { color: var(--brand-ink); font-weight: 600; }
.tab:active { color: var(--text); transition-duration: 0s; }
.tab .badge { position: absolute; top: 2px; left: calc(50% + 6px); }
@media (min-width: 768px) { .navbar .navbar-account { display: none; } }
/* floor chrome (employee, their own iPad): one light bar: shop and time,
the My work | Station switch in the middle, Help (always) and Me on the right */
.shell[data-chrome="floor"] { grid-template-rows: auto auto minmax(0, 1fr); }
/* status strip: one line under the bar (clocked in, today's note, a ready timer) */
.statusstrip {
position: relative; z-index: 19; display: flex; align-items: center; gap: 8px; min-height: 52px;
padding: 8px var(--gutter); overflow-x: auto; scrollbar-width: none;
background: var(--page); border-bottom: 1px solid var(--line);
}
.statusstrip::-webkit-scrollbar { display: none; }
.strip-item {
flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%; padding: 0 14px 0 11px;
border-radius: 999px; background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
font-size: var(--t-subhead); font-weight: 500; white-space: nowrap;
}
.strip-item .ico { width: 18px; height: 18px; color: var(--strip-tone, var(--text-3)); }
.strip-item .num, .strip-item .cd-digits { font-family: var(--font-mono); }
.strip-item.note { flex: 0 1 auto; min-width: 0; }
.strip-item.note span { overflow: hidden; text-overflow: ellipsis; }
a.strip-item { position: relative; cursor: pointer; transition: background-color var(--dur-press) var(--ease); }
a.strip-item::after { content: ""; position: absolute; inset: -6px 0; }
a.strip-item:active { background: var(--panel-3); }
.strip-item[data-tone="success"] { --strip-tone: var(--success-text); }
.strip-item[data-tone="warning"], .strip-item[data-tone="caution"] { --strip-tone: var(--warning-text); background: var(--warning-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 35%, transparent); }
.strip-item[data-tone="critical"] { --strip-tone: var(--critical-text); background: var(--critical-soft); color: var(--critical-text); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 35%, transparent); }
.strip-item .cd-inline { min-height: 0; padding: 0; background: none; box-shadow: none; border: 0; font-size: inherit; color: inherit; }
.strip-item .cd-inline .cd-icon { color: inherit; }
.floorbar {
position: relative; z-index: 20;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 16px;
min-height: 72px; padding: env(safe-area-inset-top) var(--gutter) 0;
background: var(--panel); color: var(--text); border-bottom: 1px solid var(--line);
}
.floorbar-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.floorbar-lead::before {
content: ""; flex: none; width: 32px; height: 32px; border-radius: 9px;
background: radial-gradient(circle at 50% 50%, transparent 0 5.5px, var(--on-brand) 6px 9px, transparent 9.5px), var(--brand);
}
.floorbar-title { min-width: 0; display: grid; line-height: 1.2; }
.floorbar-title b { font-size: var(--t-subhead); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floorbar-title span { font-family: var(--font-mono); font-size: var(--t-footnote); font-weight: 400; color: var(--text-3); white-space: nowrap; }
.floorbar-center { width: min(420px, 40vw); display: flex; align-items: center; }
.floorbar-center .seg { margin: 0; }
/* One place only (a shop collecting data, iteration 8): its name instead of a one-segment switch. */
.floorbar-one { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: var(--r-control); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.floorbar-one[aria-current="page"] { background: var(--brand); color: var(--on-brand); }
.floorbar-trail { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.help-btn { padding: 0 16px 0 13px; min-height: 48px; }
.help-btn .ico { width: 22px; height: 22px; }
.me-btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; flex: none; transition: box-shadow var(--dur-ui) var(--ease); }
.me-btn:hover { box-shadow: 0 0 0 1px var(--line-strong); }
.me-btn[aria-current="page"] { box-shadow: 0 0 0 2px var(--brand); }
.me-btn .avatar { border-radius: 999px; }
.shell[data-chrome="floor"] .main { scroll-padding-top: 0; }
.shell[data-chrome="floor"] .lt { padding-top: 24px; }
@media (max-width: 767.98px) {
[data-chrome="floor"] { --scale: 1.12; }
.floorbar { grid-template-columns: minmax(0, 1fr) auto; min-height: 64px; gap: 8px; }
.floorbar-lead { display: none; }
.floorbar-center { width: auto; }
.help-btn { padding: 0; width: 48px; }
.help-btn span { display: none; }
.me-btn { width: 48px; height: 48px; }
}
/* actions pinned to the bottom of a floor screen (the Now task): never scroll away */
.floor-actions {
position: sticky; bottom: 0; z-index: 10;
display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
margin: var(--sp-6) calc(-1 * var(--gutter)) 0; padding: var(--sp-4) var(--gutter) max(var(--sp-4), env(safe-area-inset-bottom));
background: var(--panel); border-top: 1px solid var(--line);
}
/* kiosk chrome (wall TV): read-only, dark, no navigation, no scrolling */
.shell[data-chrome="kiosk"] .main { overflow: hidden; }
.shell[data-chrome="kiosk"] .view { padding: 32px 40px; height: 100%; }
/* bare chrome: sign-in and start screens */
.shell[data-chrome="bare"] .main { display: grid; }
.bare { display: grid; align-content: safe center; justify-items: center; gap: var(--sp-6); padding: max(32px, env(safe-area-inset-top)) var(--gutter) max(32px, env(safe-area-inset-bottom)); min-height: 100%; }
.bare-card { width: min(100%, 520px); display: grid; gap: var(--sp-6); }
.bare-title { text-align: center; display: grid; gap: 8px; justify-items: center; }
.app-mark { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: var(--on-brand); background: var(--brand); box-shadow: var(--shadow-2), inset 0 0 0 1px rgb(255 255 255 / .12); }
.app-mark .ico { width: 30px; height: 30px; }
/* boot skeleton (index.html), never a blank screen */
.boot { position: fixed; inset: 0; display: grid; grid-template-columns: 248px 1fr; gap: 32px; padding: 0 24px 0 0; background: var(--page); }
.boot i { display: block; background: var(--fill-3); border-radius: 8px; }
.boot-side { display: grid; align-content: start; gap: 10px; background: var(--rail); padding: 18px 14px; }
.boot-side i { background: rgb(255 255 255 / .06); }
.boot-main { display: grid; align-content: start; gap: 16px; padding-top: 72px; max-width: 760px; }
@media (max-width: 767.98px) { .boot { grid-template-columns: 1fr; padding: 0 16px; } .boot-side { display: none; } }
/* ----- 4. Components -------------------------------------------------------- */
/* buttons: 10 px radius, semibold sentence case, a subtle press (scale + shade), 44 px minimum.
Default (gray / tinted) = secondary: white with a hairline. filled = primary: brand. */
.btn {
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: var(--tap); min-width: var(--tap); padding: 0 16px;
border: 1px solid var(--line-strong); border-radius: var(--r-control); cursor: pointer;
font-size: var(--t-subhead); font-weight: 600; letter-spacing: -.005em;
line-height: 1.1; text-align: center; text-decoration: none;
background: var(--panel); color: var(--text); box-shadow: var(--shadow-1);
transition: transform var(--dur-press) var(--ease), background-color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.btn .ico { width: 18px; height: 18px; }
@media (hover: hover) { .btn:hover { background: var(--panel-2); } }
.btn:active { transform: scale(.98); background-color: var(--panel-3); transition-duration: 40ms; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }
.btn.btn-filled, :root .btn.btn-filled { background: var(--brand); color: var(--on-brand); border-color: transparent; box-shadow: var(--shadow-1), inset 0 1px 0 rgb(255 255 255 / .1); }
@media (hover: hover) { .btn.btn-filled:hover { background: color-mix(in srgb, var(--brand) 92%, #000); } }
.btn.btn-filled:active { background: var(--brand-press); }
.btn.btn-tinted { background: var(--panel); color: var(--text); }
.btn.btn-gray { background: var(--panel); color: var(--text); }
.btn.btn-plain { background: none; border-color: transparent; box-shadow: none; padding: 0 10px; color: var(--text-2); }
@media (hover: hover) { .btn.btn-plain:hover { background: var(--hover); color: var(--text); } }
.btn-plain:active { background: var(--press); }
.btn-plain.strong { font-weight: 700; color: var(--text); }
.btn.btn-critical, :root .btn.btn-critical { background: var(--red-fill); color: #fff; border-color: transparent; }
@media (hover: hover) { .btn.btn-critical:hover { background: color-mix(in srgb, var(--red-fill) 90%, #000); } }
.btn-critical:active { filter: brightness(.94); }
.btn.btn-critical-tinted, :root .btn.btn-critical-tinted { background: var(--panel); color: var(--critical-text); border-color: color-mix(in srgb, var(--red) 55%, var(--panel)); }
@media (hover: hover) { .btn.btn-critical-tinted:hover { background: var(--critical-soft); } }
.btn-small { min-height: 34px; padding: 0 12px; font-size: var(--t-footnote); border-radius: 8px; }
.btn-small::after { content: ""; position: absolute; inset: -6px -2px; } /* keeps a 44 px hit area */
.btn-small .ico { width: 16px; height: 16px; }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: 0; width: var(--tap); }
.btn-icon.btn-plain { padding: 0; color: var(--text-2); }
.btn-icon .ico { width: 20px; height: 20px; }
/* the floor button: full width, 72 px, big label with an icon */
.btn-floor {
display: flex; width: 100%; min-height: 72px; gap: 12px; padding: 0 24px; border-radius: 14px;
font-size: var(--t-title3); font-weight: 600; letter-spacing: -.01em;
}
.btn-floor .ico { width: 26px; height: 26px; }
.btn-floor:active { transform: scale(.985); }
/* list: ONE panel, hairlines between rows, a thin status stripe only on exceptions.
Header: a sentence-case section title with space around it (no rule line). */
:where(.group) { margin: 0; }
.group + .group { margin-top: 36px; }
.group-header {
display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 2px 10px;
font-size: var(--t-subhead); line-height: 1.3; font-weight: 600; letter-spacing: -.005em; color: var(--text);
}
.group-header.prominent { font-size: var(--t-title3); letter-spacing: var(--track-head); }
.group-body { margin: 0; padding: 0; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-group); overflow: hidden; box-shadow: var(--shadow-1); }
.group-footer { margin: 0; padding: 10px 2px 0; font-size: var(--t-footnote); line-height: 1.45; color: var(--text-2); }
.cell { position: relative; }
.cell + .cell { border-top: 1px solid var(--line); }
.row {
--stripe: transparent;
position: relative; display: flex; align-items: center; gap: 12px;
width: 100%; min-height: var(--row-min); padding: 11px 16px;
border: 0; background: none; color: inherit; text-align: left; font: inherit;
box-shadow: inset var(--stripe-w) 0 0 var(--stripe);
}
.row:has(.pill[data-tone="critical"]) { --stripe: var(--red); }
.row:has(.pill[data-tone="warning"]) { --stripe: var(--amber); }
a.row, button.row, label.row { cursor: pointer; transition: background-color var(--dur-ui) var(--ease); }
a.row:active, button.row:active, label.row:active { background-color: var(--press); transition-duration: 0s; }
@media (hover: hover) { a.row:hover, button.row:hover { background-color: var(--hover); } }
.row-icon {
flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
background: var(--panel-2); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line);
}
.row-icon .ico { width: 18px; height: 18px; }
.row-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.row-title { font-size: var(--t-body); line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
.row-title.bold { font-weight: 600; }
.row-subtitle { font-size: var(--t-subhead); line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere; }
.row-value { flex: 0 1 auto; min-width: 0; color: var(--text-2); font-size: var(--t-subhead); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.row-trail { flex: none; display: flex; align-items: center; gap: 8px; }
.row-chevron { flex: none; color: var(--text-4); width: 14px; height: 14px; margin-right: -4px; }
.row.destructive .row-title { color: var(--critical-text); font-weight: 600; }
.row.accent .row-title { color: var(--brand-ink); font-weight: 600; }
.row.accent .row-icon { background: var(--brand-soft); color: var(--brand-ink); box-shadow: none; }
.row.center { justify-content: center; } .row.center .row-text { flex: 0 1 auto; text-align: center; }
.row[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* switch: a compact track with a square-ish knob (not an iOS capsule). */
.switch {
-webkit-appearance: none; appearance: none; flex: none; position: relative; margin: 0; cursor: pointer;
width: 46px; height: 28px; border-radius: 8px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line-strong);
transition: background-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.switch::before {
content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 6px;
background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 0 0 1px rgb(0 0 0 / .04);
transition: transform var(--dur-ui) var(--ease);
}
.switch:checked { background: var(--brand); box-shadow: none; }
.switch:checked::before { transform: translateX(18px); }
.switch:focus-visible { outline-offset: 3px; }
/* the on state also has a mark, never colour alone */
.switch:checked::after { content: ""; position: absolute; left: 10px; top: 9px; width: 2px; height: 10px; border-radius: 1px; background: var(--on-brand); opacity: .9; }
/* tiles: two hit zones (the key acts, the name opens) */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--sp-3); }
.tile {
position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tile); min-width: 0; box-shadow: var(--shadow-1);
}
.tile-act {
flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px;
border: 1px solid var(--line-strong); cursor: pointer; background: var(--panel); color: var(--text);
transition: transform var(--dur-press) var(--ease), background-color var(--dur-ui) var(--ease);
}
.tile-act .ico { width: 24px; height: 24px; }
.tile-act:active { transform: scale(.96); }
.tile[data-on] .tile-act { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.tile[data-tone="warning"] { box-shadow: inset var(--stripe-w) 0 0 var(--amber), var(--shadow-1); }
.tile[data-tone="critical"] { box-shadow: inset var(--stripe-w) 0 0 var(--red), var(--shadow-1); background: var(--critical-soft); }
.tile[data-tone="warning"] .tile-act { background: var(--warning-soft); color: var(--warning-text); border-color: transparent; }
.tile[data-tone="critical"] .tile-act { background: var(--red-fill); color: #fff; border-color: transparent; }
.tile-open {
flex: 1; min-width: 0; align-self: stretch; display: grid; align-content: center; gap: 2px;
margin: -12px -14px -12px 0; padding: 12px 14px 12px 0; border: 0; background: none; text-align: left; cursor: pointer;
border-radius: 0 var(--r-tile) var(--r-tile) 0; color: inherit;
}
a.tile-open { color: inherit; }
.tile-open:active { background: var(--press); }
.tile-title { font-size: var(--t-headline); font-weight: 600; overflow-wrap: anywhere; }
.tile-status { font-size: var(--t-subhead); color: var(--text-2); overflow-wrap: anywhere; }
.tile.large { grid-column: span 2; flex-direction: column; align-items: flex-start; min-height: 168px; padding: 16px; }
.tile.large .tile-open { margin: 0; padding: 0; width: 100%; align-content: end; border-radius: 0; flex: 1; }
.tile.large .tile-title { font-size: var(--t-title2); letter-spacing: var(--track-head); }
@container (max-width: 420px) { .tile.large { grid-column: auto; } }
/* segmented control: a recessed track with a sliding ink thumb (brand on the floor bar).
2-5 equal segments; the thumb moves with --i (ui/components.js segmented()). */
.seg {
--n: 2; --i: 0; --pad: 3px;
position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
min-height: 40px; padding: var(--pad); margin: 6px 0; border-radius: var(--r-control); background: var(--panel-2);
box-shadow: inset 0 0 0 1px var(--line);
max-width: 100%; isolation: isolate;
}
.seg.block { display: grid; width: 100%; }
.seg-thumb {
position: absolute; z-index: 0; top: var(--pad); bottom: var(--pad); left: var(--pad);
width: calc((100% - 2 * var(--pad)) / var(--n)); border-radius: 7px;
background: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .18);
transform: translateX(calc(var(--i) * 100%));
transition: transform var(--dur-spring) var(--spring), background-color var(--dur-ui) var(--ease);
}
.seg button {
position: relative; z-index: 1; min-width: 0; padding: 0 14px; border: 0; background: none; cursor: pointer;
font-size: var(--t-subhead); font-weight: 500; letter-spacing: -.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--text-2); border-radius: 7px;
transition: color var(--dur-ui) var(--ease);
}
.seg button::after { content: ""; position: absolute; inset: -8px 0; }
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] { color: var(--panel); font-weight: 600; }
.seg button .ico { width: 18px; height: 18px; margin: auto; }
.seg.lg { min-height: 48px; }
.seg.lg button { font-size: var(--t-body); padding: 0 18px; }
.seg.lg button::after { inset: -2px 0; }
/* on the floor bar the switch is navigation: brand thumb */
.floorbar .seg { min-height: 50px; }
.floorbar .seg-thumb { background: var(--brand); }
.floorbar .seg button { font-size: var(--t-subhead); }
.floorbar .seg button[aria-checked="true"] { color: var(--on-brand); }
/* search field */
.search {
display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0; padding: 0 4px 0 12px;
border-radius: var(--r-control); background: var(--panel); color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-1);
transition: box-shadow var(--dur-ui) var(--ease);
}
.search .ico { width: 18px; height: 18px; }
.search input {
flex: 1; min-width: 0; height: 42px; border: 0; background: none; color: var(--text); outline: none;
font-size: var(--t-subhead);
}
.search input::placeholder { color: var(--text-3); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-clear { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: var(--text-3); cursor: pointer; border-radius: 8px; }
.search-clear .ico { width: 18px; height: 18px; }
.search:focus-within { box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
/* chips: filter keys and counters ("2 Problems"): 8 px radius, hairline, mono counts */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
.chip {
flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 10px; position: relative;
border: 0; border-radius: var(--r-chip); background: var(--panel); color: var(--text-2); cursor: pointer;
box-shadow: inset 0 0 0 1px var(--line-strong);
font-size: var(--t-subhead); font-weight: 500; white-space: nowrap;
transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.chip::after { content: ""; position: absolute; inset: -4px 0; } /* 44 px hit area */
.chip .ico { width: 16px; height: 16px; color: var(--chip-tone, var(--text-3)); }
.chip .chip-count { font-family: var(--font-mono); font-weight: 500; font-size: .95em; color: var(--chip-tone, var(--text)); }
@media (hover: hover) { .chip:hover { color: var(--text); background: var(--panel-2); } }
.chip:active { background: var(--panel-3); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--panel); box-shadow: none; }
.chip[aria-pressed="true"] .ico, .chip[aria-pressed="true"] .chip-count { color: inherit; }
.chip[data-tone="critical"] { --chip-tone: var(--critical-text); }
.chip[data-tone="warning"] { --chip-tone: var(--warning-text); }
.chip[data-tone="success"] { --chip-tone: var(--success-text); }
.chip[data-tone="accent"] { --chip-tone: var(--brand-ink); }
/* status chip: soft tint, an icon (or a dot) and a word. Never colour alone. */
.pill {
--tone: var(--gray); --tone-text: var(--text-2);
display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 8px; flex: none;
border-radius: var(--r-tag); background: color-mix(in srgb, var(--tone) 12%, var(--panel)); color: var(--tone-text);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent);
font-size: var(--t-footnote); font-weight: 500; letter-spacing: 0;
line-height: 1; white-space: nowrap;
}
.pill:not(:has(.ico))::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.pill .ico { width: 14px; height: 14px; color: var(--tone-text); }
.pill[data-tone="accent"] { --tone: var(--brand); --tone-text: var(--brand-ink); }
.pill[data-tone="success"] { --tone: var(--green); --tone-text: var(--success-text); }
.pill[data-tone="warning"] { --tone: var(--amber); --tone-text: var(--warning-text); }
.pill[data-tone="critical"] { --tone: var(--red); --tone-text: var(--critical-text); font-weight: 600; }
.pill[data-tone="info"] { --tone: var(--blue); --tone-text: var(--info-text); }
.pill[data-tone="caution"] { --tone: var(--amber); --tone-text: var(--warning-text); font-weight: 600; }
.pill[data-tone="neutral"] { --tone: var(--gray); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.pill.large { height: 32px; padding: 0 12px 0 10px; font-size: var(--t-subhead); border-radius: 8px; }
.pill.large .ico { width: 16px; height: 16px; }
[data-chrome="floor"] .pill { height: 32px; padding: 0 11px 0 9px; border-radius: 8px; }
[data-chrome="floor"] .pill .ico { width: 17px; height: 17px; }
/* badge: red count, mono digits */
.badge {
display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
border-radius: 999px; background: var(--red-fill); color: #fff;
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: 0;
}
.badge.gray { background: var(--fill-2); color: var(--text); }
.sidebar .badge { box-shadow: 0 0 0 2px var(--rail); }
/* placeholder mark (09 rule 8; Saul's policy): a small quiet dot and a short grey mono word ("est.").
The full "uncalibrated" explanation lives in Owner > Shop > Setup. */
.ph-mark {
display: inline-flex; align-items: center; gap: 5px; flex: none; vertical-align: baseline;
font-family: var(--font-mono); font-size: var(--t-caption1); font-weight: 400; letter-spacing: 0; text-transform: none;
color: var(--text-3); white-space: nowrap;
}
.ph-mark::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--text-4); }
.ph-mark.dot-only { gap: 0; }
/* stage tick: colour as a small mark only, always with the stage name */
.stage { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-subhead); color: var(--text); white-space: nowrap; }
.stage::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--stage-c, var(--stage-checkin)); }
/* job numbers and wheel tags: Geist Mono medium, never a tag shape */
.tagshape, .emp-tag, .emp-gate-tag, .mgr-q-job, .mgr-jobno, .pb-job, .wall-jobno, .emp-task-job {
font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -.01em;
}
/* avatar: initials on a soft neutral (photo when there is one) */
.avatar {
--size: 32px;
flex: none; display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: 999px; overflow: hidden;
background: var(--avatar-bg); color: var(--avatar-ink); font-size: calc(var(--size) * .36); font-weight: 600;
letter-spacing: 0; line-height: 1; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .05);
-webkit-user-select: none; user-select: none;
}
:root .avatar { color: var(--avatar-ink); } /* beats "card span { secondary colour }" rules in the views */
:root .sidebar .avatar { color: #E6E7EA; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.s44 { --size: 44px; } .avatar.s56 { --size: 56px; } .avatar.s120 { --size: 120px; }
/* gauge: a single open 270-degree capacity dial, round ends */
.gauge { position: relative; display: inline-grid; place-items: center; flex: none; }
.gauge svg { overflow: visible; }
.gauge circle { stroke-linecap: round; }
.gauge-track { stroke: var(--fill); }
.gauge-value { stroke: var(--gauge-tone, var(--brand)); transition: stroke-dashoffset var(--dur-spring) var(--spring); }
.gauge-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.gauge-num { font-family: var(--font-mono); font-weight: 500; letter-spacing: -.03em; }
.gauge-label { color: var(--text-2); font-weight: 500; }
.gauge[data-tone="success"] { --gauge-tone: var(--green); }
.gauge[data-tone="warning"] { --gauge-tone: var(--amber); }
.gauge[data-tone="critical"] { --gauge-tone: var(--red); }
.gauge[data-tone="neutral"] { --gauge-tone: var(--gray); }
/* empty state: names the next step */
.empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 44px 24px; }
.empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 14px; color: var(--text-3); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.empty-icon .ico { width: 28px; height: 28px; }
.empty-title { font-size: var(--t-title3); font-weight: 600; letter-spacing: var(--track-head); }
.empty-text { max-width: 44ch; font-size: var(--t-subhead); color: var(--text-2); line-height: 1.5; }
.empty .btn { margin-top: 12px; }
.empty.card { background: var(--panel); border: 1px dashed var(--line-strong); border-radius: var(--r-group); }
/* skeleton blocks (static: no looping shimmer) */
.skel { display: block; background: var(--fill-3); border-radius: 6px; min-height: 1em; }
.skel-group { display: grid; gap: 1px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-group); padding: 6px 16px; }
.skel-row { display: flex; align-items: center; gap: 12px; height: 44px; }
/* error box */
.alert-box { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-group); background: var(--critical-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--red) 30%, var(--panel)); box-shadow: inset 3px 0 0 var(--red); }
.alert-box .ico { color: var(--critical-text); width: 20px; height: 20px; }
/* sheet: