/* ============================================================================ ODRdesk — foundation Plain CSS, no build step. Custom properties only. HOW THEMING WORKS ----------------- Every colour in this file resolves through a semantic token. Light values are declared on :root. Dark values are declared once as --d-* raw tokens, then mapped onto the semantic names by TWO identical blocks, marked [THEME MAP A] and [THEME MAP B]: A @media (prefers-color-scheme:dark) body:not(.light):not(.dark) — OS default B body.dark — user choice CSS cannot share one declaration block across a media query and a class, so the mapping is written twice. THE TWO BLOCKS MUST STAY IDENTICAL. Values live only in the --d-* group, so edits happen in one place. There are deliberately ZERO `body.dark .component { --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239CB0BD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239CB0BD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}` rules. If a component needs to differ between themes, add a token — do not add a theme override. WHAT IS WHERE ------------- Read top to bottom; the order is the cascade and moving things silently changes how they render, so sections grow in place rather than being sorted. Search for the banner text to jump. FOUNDATION tokens, reset, type scale, theme maps A and B LAYOUT app shell, sidebar, main, grids CONTROLS buttons, inputs, tabs, toasts, modals DATA DISPLAY tables, badges, status tones, cards DASHBOARD .q-* queue cards, .sbar-* status bars IDLE + AGEING .idle-* bands, .ar-* status-deadline settings rows TICKET DETAIL .tk-* grouped facts, ownership markers FIRST RUN .frun-* the one-line hint on first launch EMPTY STATES .empty-* RULES THAT KEEP THIS HONEST --------------------------- 1. Every colour resolves to a token. A literal hex in this file is a bug unless it is a --d-* raw value or documented in DESIGN.md. 2. Two channels for state. Never hue alone: colour PLUS shape, length, or position. ~6% of men cannot separate this palette's red from its amber. 3. No coloured stripe down the side of a card. It is the most recognisable tell of generated UI, and it is almost always duplicating a signal the element already carries in its text colour or background. Five were removed on 2026-07-27 for exactly that reason. 4. Text clears 4.5:1 in BOTH themes. Not one. The shop runs Windows and will default to light; this machine runs dark. Rules 1-3 are enforced by a test — see `design_rules` in crates/odrdesk-app/src/tickets.rs. It fails the build, not a review. ========================================================================== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ /* ── TYPE SCALE ──────────────────────────────────────────────────────────── Nine steps. 9/10/11px collapsed to 11px (bench legibility), 15/16 to 16, 20/22 to 22. --fs-4xl is decorative glyphs only, never text. */ /* 🔴 The platform's own interface face, named in the platform's own order. 'Inter' led this stack and was never loaded — no @font-face, no link — so every machine has silently been rendering the fallback. Naming a face the app does not ship is a stack that reads as a decision and behaves as an accident. What it actually resolved to is the right answer anyway, and it is the Apple approach: an application wears the system's interface face. SF Pro on macOS, Segoe UI Variable on Windows 11 — the shop's own machines — and both are drawn for exactly this job at exactly these sizes. A shipped webfont would make the demo and the shop floor look the same as each other and worse than either. */ --ff:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI Variable Text','Segoe UI',system-ui,sans-serif; --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2344535E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --ff-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --fs-2xs:11px;--fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-lg:16px; --fs-xl:18px;--fs-2xl:22px;--fs-3xl:28px;--fs-4xl:36px; /* ── CONTROL SIZING ─────────────────────────────────────────────────────── --tap full 44px target: primary actions, form fields, nav, tabs --tap-md 40px visible box paired with a 44px invisible hit area (header) --tap-sm 36px dense inline control inside a table row or toolbar --tap-xs 32px overlay/secondary control on a card or tile */ --tap:44px;--tap-md:40px;--tap-sm:36px;--tap-xs:32px; /* --r-xs is for things 4-8px tall, where --r-sm would round them away: the fill inside a 4px bar, an 8px legend swatch, a sparkline column. It was four literal 2px values before it was a token, which is the definition of drift rather than design. */ --r-xs:2px;--r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-full:9999px; --hh:64px;--cp:24px; /* 240px was a default, not a measurement. The longest label in the nav is "Repair Tickets" — 16px of padding, an 18px icon, a 10px gap, the text, and 16px again comes to roughly 160px, so 240 was carrying 80px of empty gutter down the whole height of the window. Every pixel of it was taken from the tables, which are the part that actually runs out of room. 204px leaves the longest label comfortable and gives the content back 36px. A future auto-collapse can take it further; this is the version that needs no new behaviour to explain. */ --sidebar-width:204px; /* ── SURFACES & TEXT (light) ─────────────────────────────────────────────── */ /* Retuned 2026-09-06 to the world of the 4 September mockup: a cooler, flatter ground, near-black ink, and the brand blue as the one accent. --text-muted is #5F6875 rather than the mockup's #8A929E because the latter reads 3.3:1 on white and the floor here is 4.5. */ --bg:#F4F5F7;--surface:#fff;--surface-2:#F8F9FB; --surface-raised:#fff; /* a card sitting on a card */ --surface-sunken:#EEF0F4; /* an inset well inside a card */ --field-bg:#fff; /* text input / select fill */ --border:#E3E6EB; --text:#111318;--text-2:#4B5563;--text-muted:#5F6875; --on-color:#fff; /* text on a saturated fill (danger, success, avatars) */ --on-accent:#fff; /* text on the accent fill; the dark map swaps it, see --d-on-accent */ /* ── ACCENT ─────────────────────────────────────────────────────────────── Two blues, because one cannot do both jobs: white-on-accent needs a DARK blue, accent-as-text-on-dark needs a LIGHT one. --accent accent as TEXT, and as border/outline. Safe on any surface. app.js writes `color:var(--accent)` inline 29 times, so this is the one that has to be text-safe. --accent-fill solid interactive fill that carries --on-color text. --accent-soft tinted accent surface. --accent-ink is an alias of --accent, kept because it reads clearly at the call site. --accent-light is a legacy alias: app.js emits it inline. */ /* #0068C4 is the brand blue (#008EFF) pulled down until text and white-on-it both clear the floor with headroom: 5.56:1 on white, 5.10:1 on --bg. The brand value itself sits at 3.3 and fails. It is the shared light accent of the storefront and the app: ../ODR-KB/3-reference/design-tokens.md is the source, this block implements it. */ --accent:#0068C4;--accent-ink:#0068C4; --accent-fill:#0068C4;--accent-fill-hover:#005FB0;--accent-hover:#005FB0; --accent-soft:#E6F2FC;--accent-light:#E6F2FC; --focus:#0068C4;--ring:0 0 0 3px rgba(0,142,255,.25); /* ── FEEDBACK ─────────────────────────────────────────────────────────────── */ --success:#22C55E;--success-bg:#F0FDF4;--success-text:#15803D; /* ⚠️ --warning as a GRAPHIC FILL on white measures 3.19:1 — passes the 3:1 graphics floor with 0.19 to spare (audited 2026-08-24 by the website session). If the light theme ever gains a tinted panel behind a lamp, this is the value that fails first: re-measure before adding the ground. */ --warning:#D97706;--warning-bg:#FFFBEB;--warning-text:#92400E; --danger:#EF4444;--danger-bg:#FEF2F2;--danger-text:#B91C1C; /* ── STATUS / STAGE TONES ───────────────────────────────────────────────── Ten tones drive all 41 status and stage badges. Each is bg / fg / bd, and every fg clears 4.5:1 on its own bg in BOTH themes. Adding a status means picking a tone, never picking a hex. */ --tone-neutral-bg:#F3F4F6;--tone-neutral-fg:#374151;--tone-neutral-bd:#D1D5DB; --tone-blue-bg:#EFF6FF;--tone-blue-fg:#1D4ED8;--tone-blue-bd:#BFDBFE; --tone-indigo-bg:#EEF2FF;--tone-indigo-fg:#4338CA;--tone-indigo-bd:#C7D2FE; --tone-violet-bg:#F5F3FF;--tone-violet-fg:#6D28D9;--tone-violet-bd:#DDD6FE; --tone-teal-bg:#F0FDFA;--tone-teal-fg:#0F766E;--tone-teal-bd:#99F6E4; --tone-green-bg:#F0FDF4;--tone-green-fg:#15803D;--tone-green-bd:#BBF7D0; --tone-amber-bg:#FFFBEB;--tone-amber-fg:#92400E;--tone-amber-bd:#FDE68A; --tone-gold-bg:#FEF3C7;--tone-gold-fg:#854D0E;--tone-gold-bd:#FCD34D; --tone-orange-bg:#FFF7ED;--tone-orange-fg:#9A3412;--tone-orange-bd:#FED7AA; --tone-red-bg:#FEF2F2;--tone-red-fg:#B91C1C;--tone-red-bd:#FECACA; /* ── ROW TINTS ────────────────────────────────────────────────────────────── */ --row-warn-bg:#FFFBEB;--row-warn-hover:#FEF3C7; --row-danger-bg:#FEF2F2;--row-danger-hover:#FEE2E2; --row-sel-bg:#EFF6FF; /* ── SIDEBAR & BRAND ──────────────────────────────────────────────────────── */ --brand-deep:#0F1B2D;--brand-mid:#1E3A5F; /* The sidebar sits on the page's own surface since 2026-09-06 — white by day, graphite by night — with the active row as a soft blue pill. The navy panel it replaced was the one part of the light theme that was not light, and it made the app read as two products side by side. */ --sidebar-bg:#fff;--sidebar-hover:#F1F3F6; --sidebar-active:rgba(0,142,255,.10);--sidebar-border:#008EFF; --sidebar-text:#4B5563;--sidebar-text-hover:#111318;--sidebar-active-text:#111318; --sidebar-muted:#5F6875;--sidebar-divider:#E3E6EB; --sidebar-focus:#0068C4; /* 5.6:1 on the light sidebar; the dark map swaps it */ --avatar-bg:#0068C4; /* ── OVERLAYS ─────────────────────────────────────────────────────────────── */ --scrim:rgba(0,0,0,.5); --overlay-ctrl-bg:rgba(255,255,255,.92);--overlay-ctrl-bg-hover:#fff; --overlay-del-bg:rgba(15,23,42,.7); --tooltip-bg:#1E293B;--tooltip-fg:#fff; /* ── SHADOWS ──────────────────────────────────────────────────────────────── */ --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow-md:0 1px 2px rgba(17,19,24,.06),0 8px 24px -16px rgba(17,19,24,.25); --shadow-lg:0 4px 12px rgba(0,0,0,.08); --shadow-xl:0 10px 30px rgba(0,0,0,.12); --shadow-modal:0 20px 60px rgba(0,0,0,.20); /* ── DARK PALETTE SOURCE ────────────────────────────────────────────────── Inert here. Consumed only by [THEME MAP A] and [THEME MAP B] below. */ /* Retuned 2026-09-06 to the mockup's night palette: a graphite ground with cards one step lighter, and rules that are a lift rather than a line. */ --d-bg:#0E1014;--d-surface:#15181E;--d-surface-2:#1B1F26; --d-surface-raised:#1B1F26;--d-surface-sunken:#0E1014;--d-field-bg:#0E1014; --d-border:#262B34; --d-text:#E8EAF0; /* text-2 and muted are the foreground AT AN ALPHA, not sibling greys. Solid #ADBAC7/#8B949E drifted up to 0.5:1 in contrast across this theme's three grounds; the same tokens as foreground-at-alpha drift a third of that, because they inherit whatever they sit on. Measured 2026-08-24 on #0D1117 / #161B22 / #1C2129: text-2 8.06-9.05:1, muted 5.76-6.25:1 — everything clears 4.5 with margin on every ground. */ --d-text-2:#A3ABB8;--d-text-muted:#8A93A2; /* 7.5:1 and 5.8:1 on the card */ /* Dark ink is the brand blue itself, #008EFF, which is the thing a person recognises between the storefront and the app: 5.72:1 on --d-bg, 5.34 on the card, and 4.97 on the raised surface — passing, but the thinnest number in the set, so --d-surface-raised must not lighten without re-measuring. The fill follows the ground and the ink follows the fill (the token file's correction of 2026-09-06): on dark the fill is the brand blue too, 5.72:1 at its edge against --d-bg where #0068C4 managed 3.52, and it carries near-black ink #06202C (5.05:1) because white on #008EFF is 3.3:1. On light the pair is #0068C4 with white. The two inks never cross. Shared with the storefront: ../ODR-KB/3-reference/design-tokens.md. */ --d-accent:#008EFF;--d-accent-ink:#008EFF; --d-accent-fill:#008EFF;--d-accent-fill-hover:#2B9DFF;--d-accent-hover:#2B9DFF;--d-on-accent:#06202C; --d-accent-soft:rgba(0,142,255,.14);--d-focus:#008EFF;--d-ring:0 0 0 3px rgba(0,142,255,.35); --d-success:#3FB950;--d-success-bg:#0C2A18;--d-success-text:#7EE787; --d-warning:#D29922;--d-warning-bg:#3A2600;--d-warning-text:#FBBF24; --d-danger:#F85149;--d-danger-bg:#3B1113;--d-danger-text:#FF8A80; --d-tone-neutral-bg:#282E36;--d-tone-neutral-fg:#C9D1D9;--d-tone-neutral-bd:#3D444D; --d-tone-blue-bg:#0D2847;--d-tone-blue-fg:#79C0FF;--d-tone-blue-bd:#1F4C7A; --d-tone-indigo-bg:#1E1B4B;--d-tone-indigo-fg:#A5B4FC;--d-tone-indigo-bd:#33307A; --d-tone-violet-bg:#2A1A5E;--d-tone-violet-fg:#C4B5FD;--d-tone-violet-bd:#453091; --d-tone-teal-bg:#0B2E2C;--d-tone-teal-fg:#5EEAD4;--d-tone-teal-bd:#14514C; --d-tone-green-bg:#0C2A18;--d-tone-green-fg:#7EE787;--d-tone-green-bd:#17512C; --d-tone-amber-bg:#3A2600;--d-tone-amber-fg:#FBBF24;--d-tone-amber-bd:#5C3D00; --d-tone-gold-bg:#3B2E00;--d-tone-gold-fg:#FCD34D;--d-tone-gold-bd:#5E4900; --d-tone-orange-bg:#3B1D06;--d-tone-orange-fg:#FDBA74;--d-tone-orange-bd:#5E300B; --d-tone-red-bg:#3B1113;--d-tone-red-fg:#FF8A80;--d-tone-red-bd:#5E1D20; --d-row-warn-bg:#2D2000;--d-row-warn-hover:#3A2A00; --d-row-danger-bg:#2D0000;--d-row-danger-hover:#3B1113;--d-row-sel-bg:#1E3A5F; --d-sidebar-bg:#15181E;--d-sidebar-divider:#262B34;--d-sidebar-text:#A3ABB8; --d-sidebar-text-hover:#E8EAF0;--d-sidebar-active:rgba(0,142,255,.14); --d-sidebar-muted:#8A93A2;--d-avatar-bg:#0068C4; --d-sidebar-hover:rgba(255,255,255,.06);--d-sidebar-active-text:#E8EAF0;--d-sidebar-focus:#008EFF; --d-scrim:rgba(0,0,0,.72); --d-overlay-ctrl-bg:rgba(28,35,51,.92);--d-overlay-ctrl-bg-hover:#1C2333; --d-overlay-del-bg:rgba(0,0,0,.75); --d-tooltip-bg:#30363D;--d-tooltip-fg:#E6EDF3; --d-shadow-sm:0 1px 2px rgba(0,0,0,.5); --d-shadow-md:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px -12px rgba(0,0,0,.6); --d-shadow-lg:0 4px 12px rgba(0,0,0,.7); --d-shadow-xl:0 10px 30px rgba(0,0,0,.75); --d-shadow-modal:0 20px 60px rgba(0,0,0,.8); } /* ───────────────────────────────────────────────────────────────────────── [THEME MAP A] — OS preference is the initial default. Yields to body.dark and body.light, so an explicit user choice always wins. KEEP IDENTICAL TO [THEME MAP B]. ───────────────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme:dark){ body:not(.light):not(.dark){ color-scheme:dark; --bg:var(--d-bg);--surface:var(--d-surface);--surface-2:var(--d-surface-2); --surface-raised:var(--d-surface-raised);--surface-sunken:var(--d-surface-sunken); --field-bg:var(--d-field-bg);--border:var(--d-border); --text:var(--d-text);--text-2:var(--d-text-2);--text-muted:var(--d-text-muted); --accent:var(--d-accent);--accent-ink:var(--d-accent-ink); --accent-fill:var(--d-accent-fill);--accent-fill-hover:var(--d-accent-fill-hover);--accent-hover:var(--d-accent-hover); --accent-soft:var(--d-accent-soft);--accent-light:var(--d-accent-soft);--on-accent:var(--d-on-accent); --focus:var(--d-focus);--ring:var(--d-ring); --success:var(--d-success);--success-bg:var(--d-success-bg);--success-text:var(--d-success-text); --warning:var(--d-warning);--warning-bg:var(--d-warning-bg);--warning-text:var(--d-warning-text); --danger:var(--d-danger);--danger-bg:var(--d-danger-bg);--danger-text:var(--d-danger-text); --tone-neutral-bg:var(--d-tone-neutral-bg);--tone-neutral-fg:var(--d-tone-neutral-fg);--tone-neutral-bd:var(--d-tone-neutral-bd); --tone-blue-bg:var(--d-tone-blue-bg);--tone-blue-fg:var(--d-tone-blue-fg);--tone-blue-bd:var(--d-tone-blue-bd); --tone-indigo-bg:var(--d-tone-indigo-bg);--tone-indigo-fg:var(--d-tone-indigo-fg);--tone-indigo-bd:var(--d-tone-indigo-bd); --tone-violet-bg:var(--d-tone-violet-bg);--tone-violet-fg:var(--d-tone-violet-fg);--tone-violet-bd:var(--d-tone-violet-bd); --tone-teal-bg:var(--d-tone-teal-bg);--tone-teal-fg:var(--d-tone-teal-fg);--tone-teal-bd:var(--d-tone-teal-bd); --tone-green-bg:var(--d-tone-green-bg);--tone-green-fg:var(--d-tone-green-fg);--tone-green-bd:var(--d-tone-green-bd); --tone-amber-bg:var(--d-tone-amber-bg);--tone-amber-fg:var(--d-tone-amber-fg);--tone-amber-bd:var(--d-tone-amber-bd); --tone-gold-bg:var(--d-tone-gold-bg);--tone-gold-fg:var(--d-tone-gold-fg);--tone-gold-bd:var(--d-tone-gold-bd); --tone-orange-bg:var(--d-tone-orange-bg);--tone-orange-fg:var(--d-tone-orange-fg);--tone-orange-bd:var(--d-tone-orange-bd); --tone-red-bg:var(--d-tone-red-bg);--tone-red-fg:var(--d-tone-red-fg);--tone-red-bd:var(--d-tone-red-bd); --row-warn-bg:var(--d-row-warn-bg);--row-warn-hover:var(--d-row-warn-hover); --row-danger-bg:var(--d-row-danger-bg);--row-danger-hover:var(--d-row-danger-hover); --row-sel-bg:var(--d-row-sel-bg); --sidebar-bg:var(--d-sidebar-bg);--sidebar-divider:var(--d-sidebar-divider); --sidebar-text:var(--d-sidebar-text);--sidebar-text-hover:var(--d-sidebar-text-hover); --sidebar-active:var(--d-sidebar-active);--sidebar-muted:var(--d-sidebar-muted); --sidebar-hover:var(--d-sidebar-hover);--sidebar-active-text:var(--d-sidebar-active-text);--sidebar-focus:var(--d-sidebar-focus); --avatar-bg:var(--d-avatar-bg);--scrim:var(--d-scrim); --overlay-ctrl-bg:var(--d-overlay-ctrl-bg);--overlay-ctrl-bg-hover:var(--d-overlay-ctrl-bg-hover); --overlay-del-bg:var(--d-overlay-del-bg); --tooltip-bg:var(--d-tooltip-bg);--tooltip-fg:var(--d-tooltip-fg); --shadow-sm:var(--d-shadow-sm);--shadow-md:var(--d-shadow-md);--shadow-lg:var(--d-shadow-lg); --shadow-xl:var(--d-shadow-xl);--shadow-modal:var(--d-shadow-modal); }} /* ───────────────────────────────────────────────────────────────────────── [THEME MAP B] — explicit user choice, set by applyDark() in app.js. KEEP IDENTICAL TO [THEME MAP A]. ───────────────────────────────────────────────────────────────────────── */ body.dark{ color-scheme:dark; --bg:var(--d-bg);--surface:var(--d-surface);--surface-2:var(--d-surface-2); --surface-raised:var(--d-surface-raised);--surface-sunken:var(--d-surface-sunken); --field-bg:var(--d-field-bg);--border:var(--d-border); --text:var(--d-text);--text-2:var(--d-text-2);--text-muted:var(--d-text-muted); --accent:var(--d-accent);--accent-ink:var(--d-accent-ink); --accent-fill:var(--d-accent-fill);--accent-fill-hover:var(--d-accent-fill-hover);--accent-hover:var(--d-accent-hover); --accent-soft:var(--d-accent-soft);--accent-light:var(--d-accent-soft);--on-accent:var(--d-on-accent); --focus:var(--d-focus);--ring:var(--d-ring); --success:var(--d-success);--success-bg:var(--d-success-bg);--success-text:var(--d-success-text); --warning:var(--d-warning);--warning-bg:var(--d-warning-bg);--warning-text:var(--d-warning-text); --danger:var(--d-danger);--danger-bg:var(--d-danger-bg);--danger-text:var(--d-danger-text); --tone-neutral-bg:var(--d-tone-neutral-bg);--tone-neutral-fg:var(--d-tone-neutral-fg);--tone-neutral-bd:var(--d-tone-neutral-bd); --tone-blue-bg:var(--d-tone-blue-bg);--tone-blue-fg:var(--d-tone-blue-fg);--tone-blue-bd:var(--d-tone-blue-bd); --tone-indigo-bg:var(--d-tone-indigo-bg);--tone-indigo-fg:var(--d-tone-indigo-fg);--tone-indigo-bd:var(--d-tone-indigo-bd); --tone-violet-bg:var(--d-tone-violet-bg);--tone-violet-fg:var(--d-tone-violet-fg);--tone-violet-bd:var(--d-tone-violet-bd); --tone-teal-bg:var(--d-tone-teal-bg);--tone-teal-fg:var(--d-tone-teal-fg);--tone-teal-bd:var(--d-tone-teal-bd); --tone-green-bg:var(--d-tone-green-bg);--tone-green-fg:var(--d-tone-green-fg);--tone-green-bd:var(--d-tone-green-bd); --tone-amber-bg:var(--d-tone-amber-bg);--tone-amber-fg:var(--d-tone-amber-fg);--tone-amber-bd:var(--d-tone-amber-bd); --tone-gold-bg:var(--d-tone-gold-bg);--tone-gold-fg:var(--d-tone-gold-fg);--tone-gold-bd:var(--d-tone-gold-bd); --tone-orange-bg:var(--d-tone-orange-bg);--tone-orange-fg:var(--d-tone-orange-fg);--tone-orange-bd:var(--d-tone-orange-bd); --tone-red-bg:var(--d-tone-red-bg);--tone-red-fg:var(--d-tone-red-fg);--tone-red-bd:var(--d-tone-red-bd); --row-warn-bg:var(--d-row-warn-bg);--row-warn-hover:var(--d-row-warn-hover); --row-danger-bg:var(--d-row-danger-bg);--row-danger-hover:var(--d-row-danger-hover); --row-sel-bg:var(--d-row-sel-bg); --sidebar-bg:var(--d-sidebar-bg);--sidebar-divider:var(--d-sidebar-divider); --sidebar-text:var(--d-sidebar-text);--sidebar-text-hover:var(--d-sidebar-text-hover); --sidebar-active:var(--d-sidebar-active);--sidebar-muted:var(--d-sidebar-muted); --sidebar-hover:var(--d-sidebar-hover);--sidebar-active-text:var(--d-sidebar-active-text);--sidebar-focus:var(--d-sidebar-focus); --avatar-bg:var(--d-avatar-bg);--scrim:var(--d-scrim); --overlay-ctrl-bg:var(--d-overlay-ctrl-bg);--overlay-ctrl-bg-hover:var(--d-overlay-ctrl-bg-hover); --overlay-del-bg:var(--d-overlay-del-bg); --tooltip-bg:var(--d-tooltip-bg);--tooltip-fg:var(--d-tooltip-fg); --shadow-sm:var(--d-shadow-sm);--shadow-md:var(--d-shadow-md);--shadow-lg:var(--d-shadow-lg); --shadow-xl:var(--d-shadow-xl);--shadow-modal:var(--d-shadow-modal); } body.light{color-scheme:light} body{font-family:var(--ff);background:var(--bg);color:var(--text);overflow:hidden;height:100vh} #app{display:flex;height:100vh} /* ── KEYBOARD FOCUS ─────────────────────────────────────────────────────── One treatment, everywhere. Declared before the components so component rules can still adjust offset, and repeated at the end of the file for the controls that set their own :focus styles. */ :focus-visible{outline:3px solid var(--focus);outline-offset:2px} /* SIDEBAR */ #sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);display:flex;flex-direction:column;flex-shrink:0;z-index:50;--focus:var(--sidebar-focus)} .sb-brand{display:flex;align-items:center;gap:10px;padding:20px 16px;border-bottom:1px solid var(--sidebar-divider)} .sb-brand-name{font-size:var(--fs-xl);font-weight:700;color:var(--sidebar-active-text);letter-spacing:-0.3px} .sb-nav{flex:1;padding:8px 0;overflow-y:auto} /* 40px rather than the 44px tap tier, and this is the stated reason the design rules ask for. The 44px floor exists for controls a technician commits or types into; a nav row is neither, and it spans the full 240px of the sidebar, so the target is enormous in the axis that actually matters. At 44px the fourteenth item fell off the bottom of a laptop screen, which costs more than four pixels of height ever could. */ /* 🔴 THE INACTIVE ITEMS ARE QUIET SO THE ACTIVE ONE READS. Fourteen items at one weight makes a wall: the eye has to search for where it is instead of being told. The active row keeps full strength and full icon; the rest sit back. Nothing moves and no row is lost — this is contrast doing the work that another divider would otherwise be asked to do, and the height budget below is untouched. */ .nav-item{display:flex;align-items:center;gap:10px;min-height:40px;padding:9px 16px;cursor:pointer;color:var(--sidebar-muted);font-size:var(--fs-md);font-weight:500;border-left:3px solid transparent;transition:all .15s;user-select:none} .nav-item:hover{background:var(--sidebar-hover);color:var(--sidebar-text-hover)} .nav-item.active{background:var(--sidebar-active);border-left-color:var(--sidebar-border);color:var(--sidebar-active-text);font-weight:600} .nav-item:focus-visible{outline-offset:-3px} .nav-item svg{flex-shrink:0;opacity:.55;transition:opacity .15s} .nav-item:hover svg{opacity:.85} .nav-item.active svg{opacity:1} /* ── Sidebar groups ────────────────────────────────────────────────────── Fifteen flat items gave no clue which screens belong together, and once the list is filtered per person it would leave arbitrary gaps where somebody else's pages used to be. Grouped by what the screen is FOR, a technician's sidebar reads as short and complete rather than censored. A group with nothing visible in it renders nothing at all, so the shape of the list never advertises what is missing. The headings are quiet on purpose: they are wayfinding, not navigation, and at sidebar-muted they sit below the items in the reading order without needing a rule or a box. ⚠️ NO divider rule between groups, and the spacing is deliberately tight. The first version had a 1px rule plus 14px of padding on each group and it pushed Settings off the bottom of a 868px window — an administrator had to scroll a primary navigation to reach it. Fourteen items and five headings is already close to the height budget, so anything added here costs a row at the bottom. The heading alone separates the groups perfectly well. THE HEIGHT BUDGET, measured rather than guessed. At an 868px window the nav has ~738px of room and fourteen 44px items with five headings wanted 762px, so Settings sat below the fold for an administrator. Two things were tried. Tightening the group spacing recovered part of it. Moving Settings to the pinned slot recovered NOTHING — the slot costs the same height the row gave back — and it is kept anyway because pinning the one item people go hunting for is right on its own merits. What actually fixed it is the 40px nav row below. */ .nav-group + .nav-group{margin-top:4px} .nav-group-h{padding:6px 16px 2px;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--sidebar-muted);opacity:.55;user-select:none;line-height:1.35} /* Pinned nav slot: sits between the scrolling list and the shop name, so a short window steals rows from the middle of the nav rather than from the one item people go looking for. */ #sb-pinned:not(:empty){padding-top:4px;border-top:1px solid var(--sidebar-divider)} .sb-footer{padding:16px;border-top:1px solid var(--sidebar-divider)} .sb-shop{font-size:var(--fs-xs);font-weight:600;color:var(--sidebar-text)} .sb-email{font-size:var(--fs-2xs);color:var(--sidebar-muted);margin-top:2px} /* Quiet enough to ignore, present enough to read off when somebody asks which build you are running. */ .sb-build{font-size:var(--fs-2xs);color:var(--sidebar-muted);opacity:.6;margin-top:6px; font-variant-numeric:tabular-nums;cursor:default} .sb-build-local{opacity:.85} /* The update line is a button: same type as the build line, lit with the accent so it reads as "something you can do", never as an alarm. */ .sb-update{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer; color:var(--sidebar-focus);opacity:.95;font:inherit;font-size:var(--fs-2xs);font-weight:600} .sb-update:hover{text-decoration:underline} .upd-meta{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:14px} .upd-notes{white-space:pre-wrap;font-size:var(--fs-sm);line-height:1.55;max-height:40vh;overflow-y:auto; padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2)} .upd-progress{margin-top:16px} .upd-bar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden} .upd-bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--accent);border-radius:inherit;transition:transform .25s ease} .upd-bar.upd-indeterminate i{transform:scaleX(.35);animation:upd-slide 1.1s ease-in-out infinite alternate} @keyframes upd-slide{from{transform:translateX(0) scaleX(.35)}to{transform:translateX(186%) scaleX(.35)}} @media (prefers-reduced-motion:reduce){.upd-bar.upd-indeterminate i{animation:none;transform:scaleX(1)}} .upd-progress-t{font-size:var(--fs-xs);color:var(--text-muted);margin-top:6px;font-variant-numeric:tabular-nums} /* HEADER */ #hdr{position:fixed;top:0;left:var(--sidebar-width);right:0;height:var(--hh);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--cp);z-index:40;box-shadow:var(--shadow-sm)} .hdr-id{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0} .hdr-title{font-size:var(--fs-xl);font-weight:600;line-height:1.2} /* The area's tabs sit on the title row. One tab is a title, not a choice, so the strip is empty (and takes no room) for a single-page area. */ .hdr-row{display:flex;align-items:center;gap:18px;min-width:0} /* Diagnosis: one row per area; the state is a segmented control, the finding is a field. The row tints with the state so the eye reads the column. */ .dx-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden} .dx-st{min-height:30px;padding:4px 10px;border:0;background:none;font:inherit;font-size:var(--fs-xs);font-weight:500;color:var(--text-2);cursor:pointer;border-right:1px solid var(--border)} .dx-st:last-child{border-right:0} .dx-st.active{color:var(--text);background:var(--surface-2);font-weight:600} .dx-st.dx-st-ok{background:var(--success-bg);color:var(--success-text)} .dx-st.dx-st-damaged{background:var(--danger-bg);color:var(--danger-text)} .dx-st.dx-st-later{background:var(--warning-bg);color:var(--warning-text)} .dx-row-damaged td:first-child b{color:var(--danger-text)} .dx-finding{min-height:32px} /* The bell: a count on the icon, a list under it. */ .icon-btn.bell{position:relative} .icon-btn.bell.has::after{content:attr(data-count);position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent-fill);color:var(--on-accent);font-size:var(--fs-2xs);font-weight:700;line-height:16px;text-align:center} .bell-panel{position:absolute;top:calc(var(--hh) - 8px);right:120px;width:360px;max-height:70vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);z-index:60} .bell-h{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border)} .bell-item{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-bottom:1px solid var(--border);background:none;color:var(--text);font:inherit;cursor:pointer} .bell-item:hover{background:var(--surface-2)} .bell-item b{display:block;font-size:var(--fs-sm)} .bell-item span{display:block;color:var(--text-2);font-size:var(--fs-xs);margin-top:2px} .bell-item i{display:block;color:var(--text-muted);font-size:var(--fs-xs);font-style:normal;margin-top:4px} /* Messages: list left, thread right, the repair pinned above the thread. */ .msg-wrap{display:grid;grid-template-columns:340px 1fr;gap:16px;min-height:calc(100vh - var(--hh) - 48px)} .msg-list{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:auto} .msg-filters{display:flex;gap:2px;padding:10px 10px 6px;border-bottom:1px solid var(--border)} .msg-row{display:block;width:100%;text-align:left;padding:10px 14px;border:0;border-bottom:1px solid var(--border);background:none;color:var(--text);font:inherit;cursor:pointer;position:relative} .msg-row:hover{background:var(--surface-2)} .msg-row.on{background:var(--accent-soft)} .msg-row-top{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-sm)} .msg-when{color:var(--text-muted);font-family:var(--font-mono,ui-monospace);font-size:var(--fs-xs)} .msg-row-sub{display:block;color:var(--text-2);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px;margin-top:2px} .msg-dot{position:absolute;right:12px;bottom:12px;width:8px;height:8px;border-radius:50%;background:var(--accent-fill)} .msg-thread{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);display:flex;flex-direction:column;min-height:480px} .msg-head{padding:12px 16px;border-bottom:1px solid var(--border)} .msg-pin{margin-top:6px;font-size:var(--fs-sm);color:var(--text-2)} .msg-stream{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px;max-height:52vh} .msg-b{max-width:78%;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:var(--fs-sm);line-height:1.5} .msg-b.me{align-self:flex-end;background:var(--accent-soft)} .msg-b.auto{align-self:flex-end;border:1px dashed var(--border);background:transparent} .msg-subj{font-weight:600;margin-bottom:4px} .msg-meta{margin-top:6px;font-size:var(--fs-xs);color:var(--text-muted)} .msg-meta .ok{color:var(--success-text)} .msg-meta .bad{color:var(--danger-text)} .msg-compose{padding:12px 16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px} .msg-sign{font-size:var(--fs-xs)} /* Home's greeting: a sentence, not a stat. */ .home-hello{margin:4px 0 20px} .home-hello h2{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.01em;margin:0 0 4px} .home-hello p{margin:0;color:var(--text-2);font-size:var(--fs-md)} .hdr-tabs{display:flex;gap:2px;flex-wrap:nowrap} .hdr-tabs:empty{display:none} .hdr-tab{min-height:30px;padding:5px 10px;border-radius:var(--r-sm);border:0;background:none;font:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--text-2);cursor:pointer;white-space:nowrap} .hdr-tab:hover{background:var(--surface-2);color:var(--text)} .hdr-tab.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:600} .hdr-tab:focus-visible{outline-offset:-2px} /* The page's own summary, on the row that already names the page. Two lines fit inside the 64px header, which is 64px the content does not have to spend on a second header of its own. */ .hdr-sub{font-size:var(--fs-xs);color:var(--text-2);line-height:1.3; display:flex;align-items:center;flex-wrap:wrap;gap:5px} .hdr-sub:empty{display:none} .hdr-actions{display:flex;align-items:center;gap:8px} .hdr-actions:empty{display:none} .hdr-right{display:flex;align-items:center;gap:12px} .hdr-search{position:relative;flex:1;max-width:520px;margin:0 24px} .gs-input{width:100%;min-height:var(--tap);padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);font-size:var(--fs-sm);color:var(--text);transition:border-color .15s, box-shadow .15s} .gs-input:focus{border-color:var(--accent);box-shadow:var(--ring);background:var(--surface)} .gs-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);max-height:480px;overflow-y:auto;display:none;z-index:60} .gs-results.open{display:block} .gs-group{padding:6px 10px;font-size:var(--fs-2xs);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;background:var(--surface-2);border-bottom:1px solid var(--border);position:sticky;top:0} .gs-row{min-height:var(--tap);padding:8px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;border-bottom:1px solid var(--border)} .gs-row:hover,.gs-row.gs-active{background:var(--accent-soft)} .gs-row:focus-visible{outline-offset:-3px} .gs-row:last-child{border-bottom:0} .gs-row .gs-id{font-weight:700;color:var(--accent-ink);font-size:var(--fs-xs);min-width:80px;font-family:var(--ff-mono)} .gs-row .gs-main{flex:1;font-size:var(--fs-sm);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gs-row .gs-meta{font-size:var(--fs-2xs);color:var(--text-muted);text-align:right;flex:none} .gs-empty{padding:16px;text-align:center;color:var(--text-muted);font-size:var(--fs-sm)} .icon-btn{position:relative;background:none;border:none;cursor:pointer;color:var(--text-2);width:var(--tap-md);height:var(--tap-md);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;transition:background .15s} .icon-btn:hover{background:var(--surface-2)} .user-av{position:relative;width:var(--tap-md);height:var(--tap-md);border-radius:var(--r-full);background:var(--avatar-bg);color:var(--on-color);font-size:var(--fs-sm);font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent} /* MAIN */ #main{flex:1;margin-top:var(--hh);overflow-y:auto;height:calc(100vh - var(--hh))} .page{display:none;padding:var(--cp);min-height:100%} .page.active{display:block} /* PAGE HEADER */ .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px} .ph h2{font-size:var(--fs-2xl);font-weight:700} /* BUTTONS */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);min-width:var(--tap);padding:0 16px;border-radius:var(--r-md);font-size:var(--fs-md);font-weight:500;cursor:pointer;border:none;transition:all .15s;font-family:inherit;line-height:1.2} .btn-primary{background:var(--accent-fill);color:var(--on-accent)}.btn-primary:hover{background:var(--accent-fill-hover)} .btn-secondary{background:var(--surface);color:var(--text-2);border:1px solid var(--border)}.btn-secondary:hover{background:var(--surface-2)} .btn-success{background:var(--success-bg);color:var(--success-text)} .btn-danger{background:var(--danger-bg);color:var(--danger-text)} /* .btn-sm lives inside table rows — a visible 44px box would double row height, so the box is 36px and an invisible ::after carries the hit area to 44px. */ .btn-sm{position:relative;min-height:var(--tap-sm);min-width:0;padding:0 12px;font-size:var(--fs-xs)} /* Set by handlers.js while a click's work is on its way; further clicks are ignored. */ [aria-busy="true"]{cursor:progress} /* CARDS */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:20px 24px} /* STAT CARDS */ .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px} .stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:20px;position:relative;overflow:hidden} .stat-label{font-size:var(--fs-sm);font-weight:500;color:var(--text-2);margin-bottom:8px} .stat-val{font-size:var(--fs-3xl);font-weight:700}/* GRID */ /* Back to `stretch`, deliberately, after trying the opposite. `align-items:start` was set to stop a short panel being padded out to match a tall one — sound in principle, and it produced a visibly ragged bottom edge that reads as a layout fault rather than as honesty about content. The real problem was never the alignment: it was that the status rows were 30px against a 44px neighbour, so the panels differed by 54px. With the rows at 38px the two come within a few pixels of each other on their own, and `stretch` absorbs the remainder invisibly. Fixing the cause and then letting the default do its job beats overriding the default to accommodate the cause. */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px} /* TABLES .tbl-wrap is given a bounded height so it becomes the scroll container the sticky header needs. Without this, `overflow-x:auto` alone makes .tbl-wrap a scroll container whose vertical scrollport never scrolls, and position:sticky on thead silently does nothing while the page scrolls behind it. Scoped to div.tbl-wrap: app.js also puts the class on a bare . */ .tbl-wrap{overflow-x:auto} div.tbl-wrap{overflow:auto;max-height:max(340px,calc(100vh - var(--hh) - 200px))} table{width:100%;border-collapse:collapse;font-size:var(--fs-md)} /* border-collapse hands borders to the table, so a sticky th loses its bottom rule while scrolling. The inset shadow rides with the cell instead. */ thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);color:var(--text-2);font-weight:600;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);box-shadow:inset 0 -1px 0 var(--border);white-space:nowrap} tbody tr{border-bottom:1px solid var(--border);transition:background .1s;cursor:pointer} tbody tr:hover{background:var(--surface-2)} tbody tr:last-child{border-bottom:none} tbody tr:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;background:var(--surface-2)} /* COLUMN STABILITY — NOT SOLVED HERE, ON PURPOSE. Auto table-layout lets the widest customer name in the current result set decide where every later column starts, so the Status column moves when the filter changes. `max-width` on a td does NOT fix this: the auto algorithm treats it as a hint and redistributes anyway — measured live, a 51-character name still took 412px against a declared 280px cap, and the Status column still shifted 188px between filters. Shipping the cap would have added clipping risk for zero benefit. The fix needs a per-column hook — `table-layout:fixed` plus a (or widths on the th) — which is a markup change. See the report. */ /* One row height for every row, whatever is in it. Padding alone cannot do that: 12px above and below a line of text makes a 42px row and the same padding around a 36px button makes a 60px one, so a table read as eight calm rows and then a tall one wherever an invoice happened to still be unpaid — the rhythm broke exactly where the eye was meant to keep moving. `height` on a table cell is a MINIMUM, so a genuinely two-line cell still grows; what it stops is a control setting the height of its row. 52px fits a 36px button and a 32px avatar with air around both. */ tbody td{padding:8px 14px;height:52px;vertical-align:middle} tbody :focus-visible{outline-offset:-2px} .td-muted{color:var(--text-2);font-size:var(--fs-sm)} /* BADGES One construction, four roles. Every badge class below picks a tone token; none carries a colour of its own, so light and dark both follow the tokens. */ .badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:500;white-space:nowrap} /* ── FOUR ROLES, ONE QUESTION: WHOSE MOVE IS IT NOW ──────────────────────── Ten tone families across four badge vocabularies collapsed to four roles. docs/status-tones-proposal.md holds the mapping and what died; statusRole() in src/app/01-core.js holds the rule, including the deadline flip. 🔴 MOVING IS THE SOFT PILL AND NEVER ACCENT-FILL. Accent-fill is this app's button language; a filled pill sitting in a row of links reads pressable, and a status is not something you can press. Same construction as every other role — tinted ground, readable ink, hairline ring. THEIRS and SETTLED share one muted paint on purpose. The difference between them is that a THEIRS row always carries its age and a SETTLED row may drop it — a number is information, where a second grey would be decoration. The four roles draw on four of the ten tone families and introduce no new colour: neutral, blue, amber, red. Indigo, violet, teal, green, gold and orange stay defined — charts, lamps and sector chips still use them. What ended is their service as a status language. */ .role-ours{background:var(--tone-amber-bg);color:var(--tone-amber-fg);box-shadow:inset 0 0 0 1px var(--tone-amber-bd)} .role-moving{background:var(--tone-blue-bg);color:var(--tone-blue-fg);box-shadow:inset 0 0 0 1px var(--tone-blue-bd)} .role-theirs,.role-settled{background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);box-shadow:inset 0 0 0 1px var(--tone-neutral-bd)} .role-broken{background:var(--tone-red-bg);color:var(--tone-red-fg);box-shadow:inset 0 0 0 1px var(--tone-red-bd)} /* ── Chips that are NOT repair statuses ──────────────────────────────────── 🔴 A SEPARATE VOCABULARY, ON PURPOSE. The four roles above answer one question: WHOSE MOVE IS IT ON A REPAIR. That question is meaningless for a user's permission tier, a "Tax exempt" flag, a read-only lock, or a purchase order's stage — none of them has a next actor in a repair workflow. Borrowing the role classes for them was a category error, and it showed: Admin rendered muted while Technician rendered amber, so the least-privileged role became the loudest chip in the table. Two axes, because these chips are saying two different things: EMPHASIS chip-strong / chip-quiet rank or flag. Admin outranks Technician; PRIMARY outranks the rest. Louder means more, not worse. PROGRESS chip-open / chip-active / a stage in a workflow that is not chip-done repair — purchasing, wholesale. ⚠️ GREEN LIVES HERE, AND IT DIED IN THE ROLES. That is not an inconsistency. Green died on repair statuses because it lied: "Ready for Pickup" read as success while 86 aircraft sat uncollected for a fortnight. A purchase order marked RECEIVED is genuinely finished and needs nothing from anybody, which is the thing green is honestly for. Same colour, different claim. */ .chip-strong{background:var(--tone-blue-bg);color:var(--tone-blue-fg);box-shadow:inset 0 0 0 1px var(--tone-blue-bd)} .chip-quiet{background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);box-shadow:inset 0 0 0 1px var(--tone-neutral-bd)} .chip-open{background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);box-shadow:inset 0 0 0 1px var(--tone-neutral-bd)} .chip-active{background:var(--tone-amber-bg);color:var(--tone-amber-fg);box-shadow:inset 0 0 0 1px var(--tone-amber-bd)} .chip-done{background:var(--tone-green-bg);color:var(--tone-green-fg);box-shadow:inset 0 0 0 1px var(--tone-green-bd)} /* ── Legacy vocabularies, kept as aliases ───────────────────────────────── The four badge functions no longer emit these, but a dozen call sites still write them by hand — and screens outside this app's status language borrow them as a general palette (PO stages, wholesale stages, user roles). Each class maps to the role its statuses became, so a stale caller renders the new language rather than an unstyled pill. Two of them span a role boundary and had to be chosen rather than derived: `.s-await` covers Awaiting Estimate Approval (THEIRS) and Awaiting Repair (OURS), and `.s-pickup` is THEIRS only until its deadline. Both resolve to OURS here, because a hand-written class cannot do the deadline flip and a pill that is louder than the truth costs a glance, where one that is quieter than the truth costs a missed chase. Anything routed through statusBadge() gets the exact role and does not rely on this. */ .s-new,.s-repo,.s-await,.s-pickup,.b-draft,.stg-draft,.stg-approved,.stg-revised, .dji-prep,.dji-ret,.s-dji-prep{background:var(--tone-amber-bg);color:var(--tone-amber-fg);box-shadow:inset 0 0 0 1px var(--tone-amber-bd)} .s-diag,.s-repair,.s-qa,.dji-ship,.s-dji-ship{background:var(--tone-blue-bg);color:var(--tone-blue-fg);box-shadow:inset 0 0 0 1px var(--tone-blue-bd)} .s-parts,.s-vendor,.s-dji,.s-closed,.s-done,.s-declined,.s-abandoned, .b-sent,.b-paid,.b-void,.stg-published,.stg-declined,.stg-converted, .dji-atdji,.dji-comp,.dji-decl,.dji-repl, .s-dji-at,.s-dji-acc,.s-dji-dec,.s-dji-quote{background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);box-shadow:inset 0 0 0 1px var(--tone-neutral-bd)} /* The one legacy class that stays red: money promised and not paid is the only failed promise in the set. Every other red pill marked a CONCLUDED outcome — declined, abandoned, void — and red on a conclusion is the alarm crying wolf next to the one place it means something. */ .b-overdue{background:var(--tone-red-bg);color:var(--tone-red-fg);box-shadow:inset 0 0 0 1px var(--tone-red-bd)} /* SECTOR — customers.segment, seven values, one tone each. A sector has to be readable while scanning a list, which is the whole reason the column exists: public safety is the segment this business leads with and the records could not name it. Same construction as every badge above, so both themes follow the tokens. There is deliberately no class for unclassified — that renders nothing at all, not a grey chip saying so. */ .seg-ps{background:var(--tone-blue-bg);color:var(--tone-blue-fg);box-shadow:inset 0 0 0 1px var(--tone-blue-bd)} .seg-gov{background:var(--tone-indigo-bg);color:var(--tone-indigo-fg);box-shadow:inset 0 0 0 1px var(--tone-indigo-bd)} .seg-edu{background:var(--tone-violet-bg);color:var(--tone-violet-fg);box-shadow:inset 0 0 0 1px var(--tone-violet-bd)} .seg-com{background:var(--tone-teal-bg);color:var(--tone-teal-fg);box-shadow:inset 0 0 0 1px var(--tone-teal-bd)} .seg-ag{background:var(--tone-green-bg);color:var(--tone-green-fg);box-shadow:inset 0 0 0 1px var(--tone-green-bd)} .seg-util{background:var(--tone-gold-bg);color:var(--tone-gold-fg);box-shadow:inset 0 0 0 1px var(--tone-gold-bd)} .seg-other{background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);box-shadow:inset 0 0 0 1px var(--tone-neutral-bd)} /* The agency type is a refinement of Public Safety, not a peer of it, so it stays neutral and lets the sector badge beside it carry the colour. */ .seg-agency{background:var(--tone-neutral-bg);color:var(--tone-neutral-fg);box-shadow:inset 0 0 0 1px var(--tone-neutral-bd)} /* TOOLBAR */ .toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap} .search-in{flex:1;min-width:180px;max-width:320px;min-height:var(--tap);padding:9px 12px;border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--fs-md);background:var(--field-bg);color:var(--text);font-family:inherit} .search-in:focus{border-color:var(--accent);box-shadow:var(--ring)} /* Selects. These kept the platform's own control chrome — macOS draws a double chevron in a tinted well — so a select sitting in a row of buttons looked like it came from a different application, which on the ticket page it visibly did. appearance:none strips that; the chevron below is drawn as a mask so it takes a token colour and follows the theme, rather than being baked into a data URI per theme. */ .filter-sel, select.finput{ appearance:none; -webkit-appearance:none; min-height:var(--tap); padding:0 36px 0 12px; border:1px solid var(--border); border-radius:var(--r-md); font-size:var(--fs-md); font-family:inherit; background:var(--field-bg); color:var(--text); cursor:pointer; line-height:1.2; } .filter-sel:hover, select.finput:hover{border-color:var(--line-strong,var(--text-muted))} .filter-sel:focus, select.finput:focus{border-color:var(--accent);box-shadow:var(--ring);outline:none} .filter-sel:disabled, select.finput:disabled{cursor:not-allowed;color:var(--text-muted)} /* The chevron rides on the select itself rather than on a wrapper: 31 other selects in this app are bare .finput, and a wrapper-only solution would have left every one of them with appearance:none and no affordance at all — strictly worse than the platform control we were replacing. A data URI cannot use currentColor, so the whole image is a token and the theme maps swap it, which is the same mechanism every colour here uses. */ .filter-sel, select.finput{ background-image:var(--chevron); background-repeat:no-repeat; background-position:right 13px center; background-size:10px 6px; } /* MODALS */ .overlay{display:none;position:fixed;inset:0;background:var(--scrim);z-index:1000;align-items:center;justify-content:center;padding:20px} .overlay.open{display:flex} .modal{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-modal);width:100%;max-width:640px;max-height:90vh;overflow-y:auto} .modal-lg{max-width:820px} .modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:10} .modal-title{font-size:var(--fs-xl);font-weight:700} .modal-x{position:relative;background:none;border:none;cursor:pointer;font-size:var(--fs-2xl);color:var(--text-muted);line-height:1;width:var(--tap-md);height:var(--tap-md);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center} .modal-x:hover{background:var(--surface-2);color:var(--text)} .modal-body{padding:24px} .modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--border)} /* FORMS */ .fg{margin-bottom:16px} .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px} .flabel{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);margin-bottom:6px} .finput{width:100%;height:var(--tap);padding:0 12px;border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--fs-md);font-family:inherit;background:var(--field-bg);color:var(--text);transition:border-color .15s} .finput:focus{border-color:var(--accent);box-shadow:var(--ring)} .finput.err{border-color:var(--danger)} /* A read-only field holding a machine value somebody copies — a payment link, a token, a serial. Monospace because the whole point is reading it character by character to check it. Defined here rather than inline because the inline version put `font-family:monospace` next to an `onclick` attribute in the same generated string, which is the apostrophe-trap shape ODRDesk/CLAUDE.md warns about and which the design detector could not parse either. */ .finput.fld-mono{flex:1;min-width:240px;font-family:var(--ff-mono);font-size:var(--fs-xs)} textarea.finput{height:80px;padding:10px 12px;resize:vertical} .ferr{font-size:var(--fs-xs);color:var(--danger-text);margin-top:4px;display:none} .ferr.show{display:block} /* The always-on twin of .ferr: what a field MEANS, rather than what is wrong with it. A constrained list is only usable if the distinction between its options travels with the control — "commercial vs dealer?" is not answerable from the labels alone. Same measurements as .rc-hint, which does this job on the receiving page; named for forms because that is where it is reached from. */ .fhint{font-size:var(--fs-xs);color:var(--text-muted);margin-top:6px;line-height:1.45} .cbgroup{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .cbitem{display:flex;align-items:center;min-height:var(--tap-xs);gap:6px;cursor:pointer;font-size:var(--fs-sm)} .cbitem input{cursor:pointer;accent-color:var(--accent);width:18px;height:18px} /* TOAST */ #toasts{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px} .toast{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 16px;box-shadow:var(--shadow-lg);font-size:var(--fs-md);font-weight:500;min-width:200px;max-width:300px;display:flex;align-items:center;gap:8px;animation:toastIn .3s ease} .toast.ok{color:var(--success-text)} .toast.err{color:var(--danger-text)} .toast.info{color:var(--accent-ink)} @keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}} /* AVATAR — fill colour is supplied inline by app.js */ .av{border-radius:var(--r-full);color:var(--on-color);font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} /* CHARTS */ .chart-box{position:relative;height:220px}/* EMPLOYEE CARDS */ .emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px} .emp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:24px;text-align:center} .emp-av{width:64px;height:64px;border-radius:var(--r-full);color:var(--on-color);font-size:var(--fs-2xl);font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 12px} .emp-name{font-size:var(--fs-lg);font-weight:700} .emp-role{font-size:var(--fs-sm);color:var(--text-2);margin:4px 0 16px}.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .dl-label{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:2px} .dl-val{font-size:var(--fs-md);font-weight:500} /* TABS */ .tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:16px} .tab-btn{min-height:var(--tap);padding:10px 16px;font-size:var(--fs-md);font-weight:500;cursor:pointer;background:none;border:none;color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;font-family:inherit} .tab-btn.active{color:var(--accent-ink);border-bottom-color:var(--accent)} .tab-btn:focus-visible{outline-offset:-3px} .tab-pane{display:none}.tab-pane.active{display:block} /* KANBAN */ .kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:16px} .kb-col{flex-shrink:0;width:220px;background:var(--surface-2);border-radius:var(--r-lg);padding:10px} .kb-col-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .kb-col-title{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em} .kb-cnt{font-size:var(--fs-2xs);color:var(--text-2);background:var(--border);padding:1px 7px;border-radius:var(--r-full)} .kb-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px;margin-bottom:8px;cursor:pointer;box-shadow:var(--shadow-sm);transition:box-shadow .15s} .kb-card:hover{box-shadow:var(--shadow-md)} .kb-id{font-size:var(--fs-2xs);font-weight:700;color:var(--accent-ink);margin-bottom:3px} .kb-cust{font-size:var(--fs-sm);font-weight:600;margin-bottom:2px} .kb-drone{font-size:var(--fs-xs);color:var(--text-2);margin-bottom:6px} .kb-foot{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-2xs);color:var(--text-muted)} .kb-card[draggable="true"]{cursor:grab} .kb-card[draggable="true"]:active{cursor:grabbing} .kb-col.kb-drag-over{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--accent-soft)} /* VIEW TOGGLE */ .vt{display:flex;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden} /* Segmented control: the group clips overflow, so a ::after hit expander would be cut off. Real height instead — 40px, the header/toolbar control size. */ .vt-btn{min-height:var(--tap-md);padding:0 14px;background:none;border:none;cursor:pointer;font-size:var(--fs-sm);color:var(--text-2);transition:all .15s;font-family:inherit} .vt-btn.active{background:var(--accent-fill);color:var(--on-accent)} .vt-btn:focus-visible{outline-offset:-3px} /* INVENTORY HIGHLIGHTS */ tr.low{background:var(--row-warn-bg)!important}tr.low:hover{background:var(--row-warn-hover)!important} tr.oos{background:var(--row-danger-bg)!important}tr.oos:hover{background:var(--row-danger-hover)!important} /* TIMELINE */ .tl{display:flex;flex-direction:column}.tl-dot{width:32px;height:32px;border-radius:50%;background:var(--surface-2);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--fs-sm);z-index:1} .tl-dot.done{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}/* SECTION CARD */ .sc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);margin-bottom:20px;overflow:hidden} .sc-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border)} .sc-title{font-size:var(--fs-lg);font-weight:700} /* The right-hand side of a panel header. Says what the panel is showing and how it is ordered — which a title cannot, and which a reader otherwise has to infer from the rows. */ .sc-note{font-size:var(--fs-xs);color:var(--text-muted);text-align:right} .sc-note-warn{color:var(--warning-text);font-weight:500} /* Dashboard summary line. This replaced a heading that duplicated the one in the header bar with different words. Only the numbers survive, because only the numbers were information. */ .ph-tight{align-items:center}.dash-dot{color:var(--border)} .dash-as-of{display:inline-flex;align-items:center;gap:2px;color:var(--text-muted)} /* Reload is a maintenance action, not a task. It earns an icon beside the timestamp it refreshes, rather than a full button next to + New Ticket — where it competed with the one control on this screen that starts work. */ .dash-refresh{display:inline-flex;align-items:center;justify-content:center; width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer; color:var(--text-muted);border-radius:var(--r-sm)} .dash-refresh:hover{background:var(--surface-2);color:var(--text-2)} .dash-refresh svg{width:14px;height:14px} .dash-refresh:focus-visible{outline:3px solid var(--focus);outline-offset:1px} /* QUICK ACTIONS */ .qa{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}/* INLINE QTY — 36px, not 44px: it sits inside an already-44px table row and a full-height field would force the row taller across the whole inventory list. */ .qty-in{width:68px;height:var(--tap-sm);padding:4px 8px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-md);text-align:center;font-family:inherit;background:var(--field-bg);color:var(--text)} .qty-in:focus{border-color:var(--accent);box-shadow:var(--ring)} /* CUSTOMER DETAIL */ .cust-hdr{display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border)} /* ── EDIT MODE EXTENSIONS ── */ /* Edit-mode overlay controls sit in a row of three or four. A 44px hit expander would overlap its neighbours and steal their clicks, so these get a real 32px box and no expander. */ .card-ctrl-btn{background:var(--overlay-ctrl-bg);border:1px solid var(--border);border-radius:var(--r-sm);width:var(--tap-xs);height:var(--tap-xs);font-size:var(--fs-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .1s;box-shadow:var(--shadow-sm);padding:0;color:var(--text-2)}/* Isolated in a widget corner, so it can safely take a 44px expander. */ .widget-delete-btn{position:absolute;top:6px;right:6px;background:var(--overlay-ctrl-bg);border:1px solid var(--border);border-radius:50%;width:var(--tap-xs);height:var(--tap-xs);font-size:var(--fs-2xs);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;z-index:5;line-height:1;padding:0;color:var(--text-2)} /* PRINT */ /* Print. Literal black is intentional here: paper has no theme, and ink is ink. This is the one place a token would be wrong. */ @media print{#sidebar,#hdr,#toasts,#overlay,#edit-page-btn,#widget-panel,#edit-toolbar,.action-bar,.no-print{display:none!important}#main{margin:0;height:auto;overflow:visible}div.tbl-wrap{max-height:none;overflow:visible}thead th{position:static;box-shadow:none}.print-header{display:block!important}body{overflow:auto;background:#fff;color:#000;font-size:11pt}} /* Priority, marked at the edge of the row rather than inside a cell. inset box-shadow rather than border-left: `border-collapse:collapse` on the table hands borders to the table itself, so a border on a is dropped silently. The shadow rides with the cell and survives it. Applied to the first cell only — one stripe at the start of the row, not a line under every column. */ .tk-prio-row td:first-child{box-shadow:inset 3px 0 0 var(--danger)} .kb-prio{box-shadow:inset 3px 0 0 var(--danger)} /* The identifier column must never be the thing that truncates. Every other cell can lose its tail to an ellipsis and stay useful; a half-printed ticket number is not a ticket number. 🔴 The selector has to out-specify `table.tbl-fixed tbody td` (0,1,3), which is where the ellipsis comes from. Written first as plain `td.tk-id-cell` (0,1,1) it lost silently — the rule was in the stylesheet, the computed style still said `overflow:hidden`, and nothing anywhere said why. A rule that reads as protection and protects nothing is worse than no rule. */ table.tbl-fixed tbody td.tk-id-cell{white-space:nowrap;overflow:visible;width:1%} /* ─── ODRdesk v7.1 ─── */ body,#hdr,#sidebar,.modal,.card,.sc,.toast,tbody tr,.stat-card{transition:background .2s,border-color .2s,color .2s} .dm-btn{position:relative;width:var(--tap-md);height:var(--tap-md);border-radius:var(--r-full);border:1px solid var(--border);background:none;cursor:pointer;font-size:var(--fs-lg);display:flex;align-items:center;justify-content:center;transition:all .15s;color:var(--text-2)} .dm-btn:hover{background:var(--surface-2)} #confetti-cvs{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:99999}.cmt{display:flex;gap:10px;padding:10px 12px;border-radius:var(--r-md);background:var(--surface-sunken);border:1px solid var(--border);position:relative} .cmt.pinned{background:var(--accent-soft)}.cmt-author{font-size:var(--fs-xs);font-weight:700}/* Text actions in a thread: 32px, sized to sit inside a comment card without pushing every comment 12px taller. */ .cmt-act{display:inline-flex;align-items:center;min-height:var(--tap-xs);background:none;border:none;font-size:var(--fs-2xs);color:var(--text-2);cursor:pointer;padding:2px 8px;border-radius:var(--r-sm);font-family:inherit}.batch-pill{background:var(--tone-blue-bg);color:var(--tone-blue-fg);border:1px solid var(--tone-blue-bd);padding:2px 9px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:600;white-space:nowrap} .row-sel{background:var(--row-sel-bg)!important} .batch-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--accent-soft);border-radius:var(--r-md);border:1px solid var(--tone-blue-bd);margin-bottom:12px;flex-wrap:wrap} .batch-bar-cnt{font-size:var(--fs-sm);font-weight:700;color:var(--accent-ink)} .stitle{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:8px}.note-input{flex:1;padding:7px 10px;border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--fs-sm);font-family:inherit;background:var(--field-bg);color:var(--text);resize:none;min-height:var(--tap)} .note-input:focus{border-color:var(--accent);box-shadow:var(--ring)} /* ===== AUTH UI ===== */ .login-overlay{position:fixed;inset:0;background:linear-gradient(135deg,var(--brand-deep) 0%,var(--brand-mid) 100%);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px} .login-card{background:var(--surface);padding:32px;border-radius:var(--r-xl);box-shadow:var(--shadow-modal);width:100%;max-width:380px;display:flex;flex-direction:column} .login-brand{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--border)} /* The card title and its subtitle. These were five inline `font-size:20px` declarations across the login, setup and invitation cards — off the ramp, and duplicated once per card, so a sixth card meant a sixth copy. `--fs-xl` is the Title step the modal titles and the sidebar wordmark already use. */ .login-brand-title{font-size:var(--fs-xl);font-weight:700;line-height:1.2} .login-brand-sub{font-size:var(--fs-xs);color:var(--text-muted)} @keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}} /* ===== AVATAR DROPDOWN ===== */ .avatar-menu{position:absolute;top:56px;right:var(--cp);min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);z-index:60;padding:6px;animation:avatarMenuIn .12s ease-out} @keyframes avatarMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} .avatar-menu-hdr{padding:10px 12px;border-bottom:1px solid var(--border);margin-bottom:6px} .avatar-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap);padding:9px 12px;background:none;border:none;color:var(--text);font-size:var(--fs-md);font-family:inherit;text-align:left;cursor:pointer;border-radius:var(--r-sm)} .avatar-menu-item:hover{background:var(--surface-2)} .avatar-menu-item:focus-visible{outline-offset:-3px} .avatar-menu-divider{height:1px;background:var(--border);margin:6px 0} /* ── running-timer chip in the header ───────────────────────────────── */ .timer-chip{display:flex;align-items:center;gap:6px;min-height:var(--tap-xs);padding:4px 10px;border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-xs);font-weight:600;font-family:var(--ff-mono);cursor:pointer;border:1px solid transparent;transition:border-color .15s} .timer-chip:hover{border-color:var(--accent)} .timer-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-fill);animation:timer-pulse 1.4s ease-in-out infinite} .timer-sep{color:var(--text-muted);font-weight:400} .timer-stop{color:var(--danger-text);font-weight:600;font-family:inherit;font-size:var(--fs-2xs);text-decoration:underline} @keyframes timer-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}} /* ── ticket attachments (photos / docs / signatures) ────────────────── */ .att-drop{border:2px dashed var(--border);border-radius:var(--r-md);padding:18px;text-align:center;cursor:pointer;background:var(--surface-2);transition:border-color .15s,background .15s} .att-drop:hover{border-color:var(--accent);background:var(--accent-soft)} .att-drop.over{border-color:var(--accent);background:var(--accent-soft)} .att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} /* The tile is a real , never applied globally: the app renders ~20 tables and blanket fixed-layout would give every one of them equal columns. Auto-layout sized the Customer column from whichever name was widest in the current result set, so Status shifted horizontally between filters and muscle memory never formed. Truncation is recoverable because the cells carry a title attribute. */ table.tbl-fixed{table-layout:fixed} table.tbl-fixed tbody td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} table.tbl-fixed tbody td .badge, table.tbl-fixed tbody td .td-muted{max-width:100%} /* ── Idle indicator ────────────────────────────────────────────────────── How long a ticket has sat untouched. Nothing in the shop's current tools can answer this, and every documented failure here is a state nobody moved on, so it earns column two. The bar is a magnitude cue for scanning; the number is the fact. Colour and position both encode the band, so it survives a monochrome screen and colour-blindness. */ .idle{display:flex;align-items:center;gap:8px;} .idle-d{font-variant-numeric:tabular-nums;font-weight:600;min-width:42px;text-align:right;} .idle-bar{flex:1;min-width:36px;height:4px;border-radius:var(--r-full);background:var(--border);overflow:hidden;} .idle-bar>i{display:block;height:100%;border-radius:var(--r-xs);} .idle-fresh .idle-d{color:var(--text-muted);} .idle-fresh .idle-bar>i{background:var(--tone-green-fg);} .idle-warn .idle-d{color:var(--tone-amber-fg);} .idle-warn .idle-bar>i{background:var(--tone-amber-fg);} .idle-stale .idle-d{color:var(--tone-red-fg);} .idle-stale .idle-bar>i{background:var(--tone-red-fg);} .idle-none .idle-d{color:var(--text-muted);font-weight:400;} /* The date the idle count is measured from. Deliberately quiet and after the bar: "233d" is what you scan the column with, the date is what you say out loud once you have stopped on a row. Tabular figures so a column of dates does not jitter. */ .idle-on{font-size:var(--fs-2xs);color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;} /* 🔴 `.btn-link` was used on the DJI lookup control and defined nowhere, so it rendered as a default platform button — grey, chunky, and louder than the serial it sits beside. Written 2026-08-06 alongside the control itself and caught the same day by a review of the ticket page. It reads as a link because that is what it is: a quiet way to go and check something, sitting inline after a value. Not a primary action competing with the status control at the top of the page. */ .btn-link{ display:inline; padding:0; border:0; background:none; font:inherit; font-size:var(--fs-xs); color:var(--accent); text-decoration:underline; text-underline-offset:2px; cursor:pointer; } .btn-link:hover{ color:var(--accent-ink,var(--accent)); } .btn-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs); } .tk-dji-check{ margin-left:6px; white-space:nowrap; } /* The customer, on the identity line under the ticket number. It used to be a row of its own reading "Customer: [Edit]" — a label stating the obvious and a button whose text matched a different button nearby. */ .tk-cust{ margin-top:2px; font-size:var(--fs-sm); } .tk-cust a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; cursor:pointer; } .tk-cust a:hover{ color:var(--accent-ink,var(--accent)); } /* ── Dashboard: queues, not statistics ─────────────────────────────────── Each card names work nobody is moving and is a real button into the filtered list. The screen it replaced showed four numbers that were constant on a daily timescale and named no action. */ /* ============================================================================ DASHBOARD — queue cards and status bars The three doors on the front page, plus the sorted bar list. Severity carries on a dot (filled = critical, hollow = warning) as well as hue. ========================================================================== */ /* Flex rather than grid, and the reason is the ownership card. auto-fit collapses empty tracks, so a card that needs to be wider than its neighbours cannot express that as a span — the tracks it would span may not exist. Flex lets one card ask for more of the row while the others share what is left, and still wraps on a narrow window. */ /* ── The public repair endpoint panel ────────────────────────────────────── Built around one warning. `127.0.0.1` in the allowlist is correct while this endpoint is on loopback and dangerous the moment it is not, so the panel has to make that state legible at a glance rather than bury it in a field. */ .pt-card{padding:20px 22px;} .pt-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px; flex-wrap:wrap;margin-bottom:8px;} .pt-state{font-size:var(--fs-xs);color:var(--text-2);display:inline-flex; align-items:center;gap:7px;} /* Two channels, never colour alone: the dot changes fill AND the words change. Roughly 6% of men cannot separate this palette's red from its green. */ .pt-dot{width:8px;height:8px;border-radius:var(--r-full);flex:none;} .pt-ok{background:var(--success);} .pt-off{background:var(--text-muted);} .pt-lede{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:14px;max-width:64ch; line-height:1.5;} .pt-note{border-radius:var(--r-md);padding:12px 14px;font-size:var(--fs-xs); line-height:1.55;margin-bottom:16px;border:1px solid;} .pt-warn{background:var(--tone-amber-bg);border-color:var(--tone-amber-bd); color:var(--tone-amber-fg);} .pt-bad{background:var(--tone-red-bg);border-color:var(--tone-red-bd); color:var(--tone-red-fg);} .pt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;} .pt-k{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase; color:var(--text-muted);margin-bottom:4px;} .pt-v{font-size:var(--fs-sm);font-weight:560;} .pt-h{font-size:var(--fs-2xs);color:var(--text-muted);margin-top:3px;line-height:1.45;} .pt-origins{list-style:none;margin-top:6px;display:flex;flex-direction:column;gap:6px;} .pt-origins li{font-family:var(--ff-mono);font-size:var(--fs-xs);padding:7px 10px; border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2); display:flex;align-items:center;gap:8px;} /* The local origin is the one that has to come out later, so it is marked rather than sitting anonymously in a list of three. */ .pt-origins li.pt-local{border-color:var(--tone-amber-bd);background:var(--tone-amber-bg); color:var(--tone-amber-fg);} .pt-tag{margin-left:auto;font-family:var(--ff);font-size:var(--fs-2xs);font-weight:600; text-transform:uppercase;letter-spacing:.06em;} .pt-origins li.pt-none{font-family:var(--ff);color:var(--text-muted);background:none; border-style:dashed;} /* ── A ticket card folded down to one line ───────────────────────────────── The clutter fix. Seven equally loud cards made the reader do the ranking the screen should have done; nothing was removed, it just stays shut until it is wanted. The header carries a summary so the whole ticket is readable without opening anything — see tkFold/tkFoldSummary in 01-core.js. The card keeps .card, so padding and border come from there and a fold can never drift away from the cards it sits between. */ .tk-fold{padding:0!important;overflow:hidden;} .tk-fold-h{display:flex;align-items:center;gap:10px;width:100%; min-height:var(--tap);padding:12px 20px;border:0;background:none;cursor:pointer; font:inherit;text-align:left;color:var(--text);} .tk-fold-h:hover{background:var(--surface-2);} .tk-fold-h:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;} .tk-fold-t{font-size:var(--fs-sm);font-weight:600;display:flex;align-items:center;gap:8px;} /* The summary is the whole point of folding, so it gets room and the title does not push it off the end. */ .tk-fold-s{margin-left:auto;font-size:var(--fs-xs);color:var(--text-muted); text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tk-fold .chev{color:var(--text-muted);flex:none;transition:transform .16s;} .tk-fold.open .chev{transform:rotate(90deg);} .tk-fold-b{display:none;} .tk-fold.open .tk-fold-b{display:block;} /* The card inside a fold already carries its own padding and border, so it must not draw a second one within the fold's frame. */ .tk-fold-b > .card{border:0;box-shadow:none;margin-top:0!important;} /* ── The one thing to do about this repair ───────────────────────────────── Reads the same nextActionFor rule the dashboard uses. Amber rather than the accent: it is a state worth noticing, not a link, and accent already means "this is an action" 29 times over in this app. */ .tk-next{display:flex;align-items:center;gap:14px;padding:13px 20px; border:1px solid var(--tone-blue-bd);background:var(--tone-blue-bg); border-radius:var(--r-md);margin-top:16px;} .tk-next-t{font-size:var(--fs-sm);font-weight:650;color:var(--tone-blue-fg);} .tk-next-s{font-size:var(--fs-xs);color:var(--tone-blue-fg);opacity:.85;margin-top:2px;} .tk-next-late{border-color:var(--tone-amber-bd);background:var(--tone-amber-bg);} .tk-next-late .tk-next-t,.tk-next-late .tk-next-s{color:var(--tone-amber-fg);} /* Waiting on somebody else is information, not an alarm. */ .tk-next-wait{border-color:var(--border);background:var(--surface-2);} .tk-next-wait .tk-next-t{color:var(--text-2);} .tk-next-wait .tk-next-s{color:var(--text-muted);} /* ── The queue cards ─────────────────────────────────────────────────────── 🔴 Four things were changed on 2026-08-12 because together they were the whole reason this screen read as generated rather than designed. None of them is about colour, and none changed a word of the content. 1. EVERY CARD WAS THE SAME WIDTH. `flex:1 1 210px` on every child is the single most recognisable dashboard tell there is: a row of identical boxes where nothing is more important than anything else, so the eye has nowhere to land and the reader has to do the ranking the screen should have done. The cards now have a floor and no ceiling, so a card carrying a longer headline takes the room it needs and the row stops being a grid. 2. THE CARDS LIFTED ON HOVER. `transform:translateY(-1px)` is decoration that says nothing true — a queue card does not become closer when you point at it. It also fights the focus ring, which moves with it. 3. EVERY CARD TURNED BLUE ON HOVER. Accent is this app's "this is a link or an action" signal, spent 29 times inline in app.js on that meaning. Spending it again on "the mouse is here" devalues it everywhere else. 4. 12px RADIUS ON A DENSE OPERATIONAL CARD. --r-lg is right for a container somebody reads; these are instruments in a row and --r-md sits tighter under a 28px figure. */ .q-grid{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;} .q-grid>*{flex:1 1 auto;min-width:210px;} .q-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left; padding:16px 18px;border:1px solid var(--border);border-radius:var(--r-md); background:var(--surface);cursor:pointer;font:inherit;min-height:var(--tap); transition:background-color .12s,border-color .12s;} /* Background only. The first version reached for a --border-strong that this app has never defined — carried in from a standalone mockup with its own tokens. A shift in ground is enough signal for a hover, and it needs no new token in two theme maps that must stay identical. */ .q-card:hover{background:var(--surface-2);} .q-card:focus-visible{outline:3px solid var(--focus);outline-offset:2px;} /* Tighter than the default. At 28px, default tracking makes a figure look like body copy that grew; -0.02em makes it look like a measurement. */ .q-n{font-size:var(--fs-3xl);font-weight:650;line-height:1.05;letter-spacing:-.02em; font-variant-numeric:tabular-nums;} /* A zero on an attention block is the win condition and should look calm, not absent: muted numeral, unlit lamp. If every block shouts all the time the strip is decoration. */ .q-card.q-calm .q-n{color:var(--text-muted);font-weight:500} /* 🔴 A block with nothing to count renders NO NUMERAL AT ALL. It used to render an em-dash in the numeral slot. At body weight that read as a stray rule sitting under the caption — it looked like a broken progress bar, and was most of what made the top of this dashboard feel cluttered. Sizing the dash up to numeral scale only made it a longer rule. A block with no number should show no number; its caption and qualifier already say what is true, and the strip's shared anatomy tolerates the gap better than it tolerates a mark nobody can read. */ /* The caption is a label in plain sentence case, the same size and weight as a stat card's label (.stat-label), so a number on Home and a number on Money → Today read as one family. The tracked all-caps version was an eyebrow, and eyebrows over every number were a tell. */ .q-l{font-size:var(--fs-sm);font-weight:500;color:var(--text-2)} /* No lamp. The numeral's colour carries the state (.q-crit / .q-warn below), and a dot beside every caption was one of the generated-dashboard tells the 2026-09-04 direction removed. */ /* The critical card's second channel: a shape, not a colour. Only the critical tone carries it, so it is a marker rather than a decoration on every caption. */ .q-mark{display:inline-flex;align-items:center;color:var(--tone-red-fg);flex:none} .q-mark svg{width:14px;height:14px} .q-cap{display:flex;align-items:center;gap:7px;width:100%; padding-right:18px} /* clears the corner chevron so context text never sits under the handle */ .q-cap .q-of{margin-left:auto} /* Age leading a quiet row: bold, fixed width so six rows align as a column. */ .q-row-idle-lead{flex:none;width:44px;text-align:right;font-weight:700; font-variant-numeric:tabular-nums} /* The page's closing line: a door plus what it currently means. Replaces a whole section that existed to disclaim its own signal. */ .dash-foot{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; padding:14px 2px 0;border-top:1px solid var(--border);margin-top:4px} .dash-foot-note{font-size:var(--fs-xs);color:var(--text-muted)} .q-s{font-size:var(--fs-xs);color:var(--text-muted);} .q-crit .q-n{color:var(--tone-red-fg);} .q-warn .q-n{color:var(--tone-amber-fg);} /* ── The ownership card's segmented bar ────────────────────────────────── One card, an honest headline, and the rest of the population in proportion underneath. Chosen over four separate cards (the row is already the widest thing on the screen) and over leaving one number at 700 (which names a condition rather than a task). Built from the same construction as .sbar-t below — a track with children sized by percentage — so this adds a class, not a charting library. 🔴 The segments carry a border between them rather than relying on hue alone. Amber and green at 8px tall, abutting, is exactly the comparison that fails under deuteranopia, and the legend beneath is what actually carries the meaning. */ .qseg{display:flex;width:100%;height:8px;border-radius:4px;overflow:hidden; background:var(--surface-2);margin-top:10px} .qseg>i{display:block;height:100%} .qseg>i+i{border-left:1px solid var(--surface)} .qseg-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:7px; font-size:var(--fs-2xs);color:var(--text-muted)} .qkey{display:inline-flex;align-items:center;gap:5px;white-space:nowrap; font-size:var(--fs-2xs);color:var(--text-muted);font-family:inherit; font-variant-numeric:tabular-nums} .qseg-key i,.qkey>i{width:8px;height:8px;border-radius:var(--r-xs);flex:none} /* The one legend entry that is also a destination. It looks like the others until you touch it, because it is first a fact about the queue and only second a place to go — promoting it to a button would put a second call to action on a card that already has one. */ /* Public safety, wherever it jumps the queue. Roger's instruction is that these go to the front, so the marker has to read at a glance. Indigo deliberately: it is the one tone the status badge set does not use, and the flag is a fact about the CUSTOMER rather than about the repair — if it shared a colour with a status it would be read as one. The icon is not decoration either. Tone alone fails under deuteranopia against the amber and red already on this row, so the shield carries the meaning and the colour reinforces it. */ .ps-flag{display:inline-flex;align-items:center;gap:4px;padding:2px 7px; border-radius:var(--r-full);font-size:var(--fs-2xs);font-weight:600; white-space:nowrap;background:var(--tone-indigo-bg);color:var(--tone-indigo-fg); box-shadow:inset 0 0 0 1px var(--tone-indigo-bd)} .ps-flag .ic{width:12px;height:12px} .qkey-door{border:0;background:none;padding:0;cursor:pointer;border-radius:var(--r-sm)} .qkey-door b{color:var(--accent);font-weight:600} .qkey-door:hover{color:var(--text-2)} .qkey-door:hover b{text-decoration:underline} .qkey-door:focus-visible{outline:3px solid var(--focus);outline-offset:3px} /* Number, label and denominator on one line instead of three. The number is the anchor and keeps its size; the other two are set against it rather than stacked under it. */ .q-head{display:flex;align-items:baseline;gap:10px;width:100%;flex-wrap:wrap} .q-of{margin-left:auto;font-size:var(--fs-xs);color:var(--text-muted); font-variant-numeric:tabular-nums} /* A card with two destinations cannot itself be a button — a button inside a button is invalid HTML and, more practically, a keyboard user tabbing to the card then to the link has no way to tell which one the Enter key will take. So the headline becomes its own hit area and the card becomes a container. */ .q-card-hit{display:flex;flex-direction:column;align-items:flex-start;gap:2px; width:100%;padding:0;border:0;background:none;cursor:pointer;font:inherit; text-align:left;border-radius:var(--r-sm)} .q-card-hit:focus-visible{outline:3px solid var(--focus);outline-offset:3px} /* A second destination out of one card. The population it opens is not something a technician can act on, so it reads as a line of prose with a link rather than as another button competing with the headline. */ .qdoor{display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;margin-top:12px;padding-top:11px;border-top:1px solid var(--border); font-size:var(--fs-xs);color:var(--text-2);background:none;border-left:0; border-right:0;border-bottom:0;cursor:pointer;font-family:inherit;text-align:left} /* The ownership card was given 1.55× the width of its neighbours, on the argument that it carries more and matters more. Seeing it built, that reads as three cards of uneven size rather than as emphasis — the eye registers the mismatch before the meaning, and a row of tiles that are almost but not quite equal looks like a layout fault. Equal thirds. The card earns its emphasis from the bar and the legend it alone has, which is a stronger signal than 200px of extra width and does not cost the row its rhythm. */ .q-grid>.q-wide{flex:1 1 210px} /* the same basis as its siblings — a different flex-basis with the same grow factor still produces different widths, which is how the first attempt at "equal" came out 358 / 448 / 358 */ /* Horizontal magnitude bars. Sorted, labelled, and comparable at a glance — which arcs in a doughnut are not, especially at eleven categories. */ /* 11px rather than 7px, so a status row is ~38px instead of 30px. Two things at once, which is why it is worth the note. The row beside this panel ("Quietest tickets") is 44px, so seven 30px rows came to 283px against its 337px and the pair read as ragged — Robert, seeing it: "still uneven". The fix is not padding the short panel out; it is that 30px was mean for a full-width clickable row in the first place. The nav settled on 40px for the same reason. */ .sbar{display:flex;align-items:center;gap:10px;width:100%;padding:11px 4px;border:0; background:none;cursor:pointer;font:inherit;text-align:left;border-radius:var(--r-sm);} .sbar:hover{background:var(--surface-2);} .sbar:focus-visible{outline:3px solid var(--focus);outline-offset:-2px;} .sbar-l{flex:0 0 42%;font-size:var(--fs-sm);color:var(--text-2);overflow:hidden; text-overflow:ellipsis;white-space:nowrap;} /* ⚠️ The track is a hairline, not a filled well. Seven bars each with a solid 8px track put twice the ink on this panel as the data did, and the track carries no information the number at the end does not already give. */ .sbar-t{flex:1;height:6px;border-radius:var(--r-full);background:var(--border);overflow:hidden;} .sbar-t>i{display:block;height:100%;border-radius:var(--r-full);background:var(--accent-fill);} .sbar-n{flex:0 0 44px;text-align:right;font-size:var(--fs-sm);font-weight:600; font-variant-numeric:tabular-nums;} .q-row{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap); padding:8px 4px;border:0;border-bottom:1px solid var(--border);background:none; cursor:pointer;font:inherit;text-align:left;} .q-row:last-of-type{border-bottom:0;} .q-row:hover{background:var(--surface-2);} .q-row:focus-visible{outline:3px solid var(--focus);outline-offset:-2px;} .q-row-id{flex:0 0 96px;font-weight:700;color:var(--accent);font-size:var(--fs-sm);} .q-row-cust{flex:1;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .q-row-idle{flex:0 0 46px;text-align:right;font-size:var(--fs-sm);font-weight:600; font-variant-numeric:tabular-nums;} /* A queue row that carries its own action. The row stays a link to the ticket and the button sits beside it, so the two targets never overlap — a single element that both navigates and acts is how you get people opening a ticket when they meant to press the button. .q-row itself is a