/* Basil's Garage Parts Tracker — THE theme file.
   Every token and every component lives here. No screen has its own CSS,
   and no hex value appears anywhere but the token block below.

   The design system is apps/parts-tracker/DESIGN.md. Each colour has one job:
     orange       something you can do — buttons, selection, focus
     tape blue    the order's identity — the SM number chip, nothing else
     green / red  status — in hand / problem
     yellow       needs a human — order today, stale sync, no deposit
     greys        everything else
   Hover and pressed shades are derived with color-mix(), never new hexes.

   Brand colours confirmed by Basil 10/22: #F9AE42 logo orange, #F6921E deeper
   orange, charcoal #1F1F1F. Tape chip is a plain rectangle with 3px corners
   (Basil, 10/23). */

/* ---------- display face: Barlow Condensed, self-hosted, OFL (fonts/OFL.txt) ---------- */
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/barlow-condensed-latin-ext-600-normal.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/barlow-condensed-latin-ext-700-normal.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root {
    /* brand — the same in light and dark */
    --accent: #F9AE42;          /* primary buttons, selected-row bar, focus ring */
    --accent-pressed: #F6921E;  /* pressed state, active nav marker */
    --on-accent: #161616;       /* text on orange is always this: ~10:1 */
    --tape: #5FA8E0;            /* the tape chip, and nothing else */
    --on-tape: #161616;
    --chrome: #1F1F1F;          /* the sidebar; the phone top bar */
    --on-chrome: #FFFFFF;
    --on-chrome-2: #C8C8C8;
    --logo: var(--accent);

    /* surfaces and type */
    --page: #F2F2F2;
    --surface: #FFFFFF;
    --surface-2: #F7F7F7;
    --line: #D6D6D6;
    --ink: #161616;
    --ink-2: #5C5C5C;           /* secondary text, ≥6:1 on surface and surface-2 */

    /* status — never on a button */
    --ok: #1B7F3B;              /* in hand */
    --problem: #C62828;         /* problem, overdue, Shopmonkey failing */
    --on-problem: #FFFFFF;      /* text on --problem: 5.6:1 light; dark mode flips it (AUDIT FE-9) */
    --warn-bg: #FFF1A8;         /* amber, one meaning everywhere (Basil, 10/26): look at it soon, someone needs to check or answer it */
    --warn-ink: #161616;
    /* Tints. Plain colours first for iOS Safari 16.0–16.1 (no color-mix);
       the color-mix versions below replace them everywhere else. */
    --ok-bg: #E1EEE6;
    --ok-ink: #1A6C34;          /* status text on its own tint, ≥4.5:1 */
    --problem-bg: #F9E7E7;
    --problem-ink: #B12626;
    --neutral-bg: #ECECEC;

    --overlay: rgb(0 0 0 / 0.5);
    --shadow-float: 0 12px 40px rgb(0 0 0 / 0.22), 0 2px 8px rgb(0 0 0 / 0.12);  /* floating things only */

    /* type */
    --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Barlow Condensed", system-ui, sans-serif;

    /* shape — radius follows hierarchy */
    --r-panel: 10px;
    --r-control: 6px;
    --r-chip: 3px;
    --tap: 52px;                /* phone tap target */

    /* motion */
    --t-color: 150ms ease-out;
    --t-panel: 200ms ease-out;
    --t-row: 120ms ease-out;

    color-scheme: light;
}

/* Dark: the device's setting (Auto), unless this device chose Light; or chosen outright. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --chrome: #161616;
        --page: #121212;
        --surface: #1E1E1E;
        --surface-2: #262626;
        --line: #333333;
        --ink: #F2F2F2;
        --ink-2: #B5B5B5;
        --ok: #4ABF73;
        --problem: #FF7A70;
        --on-problem: #161616;
        --warn-bg: #3D3500;
        --warn-ink: #FFE27A;
        --ok-bg: #263B2D;
        --ok-ink: #68C88A;
        --problem-bg: #472F2D;
        --problem-ink: #FD8880;
        --neutral-bg: #333333;
        --overlay: rgb(0 0 0 / 0.65);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --chrome: #161616;
    --page: #121212;
    --surface: #1E1E1E;
    --surface-2: #262626;
    --line: #333333;
    --ink: #F2F2F2;
    --ink-2: #B5B5B5;
    --ok: #4ABF73;
    --problem: #FF7A70;
    --on-problem: #161616;
    --warn-bg: #3D3500;
    --warn-ink: #FFE27A;
    --ok-bg: #263B2D;
    --ok-ink: #68C88A;
    --problem-bg: #472F2D;
    --problem-ink: #FD8880;
    --neutral-bg: #333333;
    --overlay: rgb(0 0 0 / 0.65);
    color-scheme: dark;
}

@supports (color: color-mix(in oklch, red 50%, blue)) {
    :root {
        --ok-bg: color-mix(in oklch, var(--ok) 13%, var(--surface));
        --ok-ink: color-mix(in oklch, var(--ok) 82%, var(--ink));
        --problem-bg: color-mix(in oklch, var(--problem) 11%, var(--surface));
        --problem-ink: color-mix(in oklch, var(--problem) 88%, var(--ink));
        --neutral-bg: color-mix(in oklch, var(--ink) 8%, var(--surface));
    }
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            --ok-bg: color-mix(in oklch, var(--ok) 18%, var(--surface));
            --problem-bg: color-mix(in oklch, var(--problem) 18%, var(--surface));
            --neutral-bg: color-mix(in oklch, var(--ink) 10%, var(--surface));
        }
    }
    :root[data-theme="dark"] {
        --ok-bg: color-mix(in oklch, var(--ok) 18%, var(--surface));
        --problem-bg: color-mix(in oklch, var(--problem) 18%, var(--surface));
        --neutral-bg: color-mix(in oklch, var(--ink) 10%, var(--surface));
    }
}

@media (prefers-reduced-motion: reduce) {
    :root { --t-color: 0s; --t-panel: 0s; --t-row: 0s; }
    *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
}

/* ---------- base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html {
    font: 17px/1.35 var(--font-ui);
    background: var(--page);
    color: var(--ink);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;   /* every number: money, qty, counts, dates, countdowns */
}
body { margin: 0; min-height: 100vh; background: var(--page); padding-bottom: env(safe-area-inset-bottom); }
button, input, textarea, select { font: inherit; color: inherit; font-variant-numeric: inherit; }
button { touch-action: manipulation; cursor: pointer; border: 0; border-radius: var(--r-control); background: var(--surface); color: var(--ink); min-height: var(--tap); padding: 0 16px; transition: background-color var(--t-color), color var(--t-color), border-color var(--t-color); }
button:disabled { opacity: 0.45; cursor: default; }
input, textarea { width: 100%; min-height: var(--tap); padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: 1; }
textarea { min-height: 88px; resize: vertical; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
.muted { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Focus: a 2px orange ring, 2px out, on everything focusable. Never removed.
   Orange alone is 1.9:1 against white, so a 1px ink hairline at the element's
   own edge carries the contrast (18:1); the orange says "this is where you are". */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 1px var(--ink); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; border-color: var(--accent); }

/* ---------- the tape chip ----------
   The SM number exactly as it is on the shelf: painter's-tape blue, marker-black
   condensed digits. A plain rectangle with 3px corners. */
.tape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.1em;
    height: 1.45em;
    padding: 0 0.35em;
    border-radius: var(--r-chip);
    background: var(--tape);
    color: var(--on-tape);
    font: 700 16px/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border: 0;
    min-height: 0;
    vertical-align: middle;
}
button.tape, a.tape { cursor: pointer; text-decoration: none; }
button.tape:hover, a.tape:hover { background: var(--tape); background: color-mix(in oklch, var(--tape) 86%, var(--ink)); }
.tape-sm { font-size: 13px; }
.tape-lg { font-size: 28px; }                       /* phone: every order section opens with one */
.tape-xl { font-size: 32px; }                       /* the order number in the order panel header */

/* ---------- display type (Barlow, never body text or table cells) ---------- */
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; }
.display-bold { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; }

/* ---------- buttons: orange is the only colour a button gets ---------- */
.btn { font-weight: 700; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent); background: color-mix(in oklch, var(--accent) 88%, var(--accent-pressed)); }
.btn-primary:active { background: var(--accent-pressed); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-ghost:active { background: var(--neutral-bg); }
.btn-danger-text { background: transparent; color: var(--problem); border: 1px solid var(--line); }  /* a flag action: red text, plain button */
.btn-danger { background: var(--problem); color: var(--on-problem); }                                     /* confirming something destructive */
.btn-block { width: 100%; }
.btn-big { min-height: 64px; font-size: 19px; }
.btn-small { min-height: 40px; font-size: 14px; padding: 0 12px; }

/* ---------- badges: status, never buttons ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 4px 9px; border-radius: var(--r-chip); line-height: 1.2; white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge-bad { background: var(--problem-bg); color: var(--problem-ink); }
.badge-warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge-muted { background: var(--neutral-bg); color: var(--ink-2); }
/* Sending to Shopmonkey: neutral grey with a small spinner. Blue belongs to the tape chip. */
.badge-pending { background: var(--neutral-bg); color: var(--ink-2); }
.badge-pending::before, .spinner {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pt-spin 0.8s linear infinite;
    flex: 0 0 auto;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }

/* ===================================================================== */
/* Phone screens (Check-In, Supplies, and the office screens on a phone)  */
/* ===================================================================== */

/* ---------- top bar with the cactus guy ---------- */
.topbar { position: sticky; top: 0; z-index: 5; background: var(--chrome); color: var(--on-chrome); padding: calc(8px + env(safe-area-inset-top)) 14px 8px; }
.topbar-row { display: flex; align-items: center; gap: 12px; }
.logo { width: 48px; height: 48px; flex: 0 0 auto; background: var(--logo); -webkit-mask: url(/cactus-guy.svg) center / contain no-repeat; mask: url(/cactus-guy.svg) center / contain no-repeat; }
.topbar h1 { font: 700 24px/1.1 var(--font-display); flex: 1; letter-spacing: 0.01em; }
.chip { background: rgba(255, 255, 255, 0.12); background: color-mix(in oklch, var(--on-chrome) 12%, transparent); color: var(--on-chrome); min-height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.28); border: 1px solid color-mix(in oklch, var(--on-chrome) 28%, transparent); }
.chip:active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.synced { font-size: 13px; color: var(--on-chrome-2); margin-top: 4px; padding-left: 60px; }
.synced.stale { color: #FFE27A; font-weight: 700; }
.searchbar { position: sticky; top: 0; z-index: 4; background: var(--page); padding: 10px 12px; }
.topbar + .searchbar { top: calc(84px + env(safe-area-inset-top)); } /* the topbar grows by the notch in standalone mode (AUDIT FE-6) */
.searchbar input { font-size: 18px; }

/* ---------- screens ---------- */
.screen { padding: 12px 12px 40px; max-width: 760px; margin: 0 auto; }
.center { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 20px; max-width: 420px; margin: 0 auto; gap: 14px; }
.center .logo { width: 120px; height: 120px; margin: 0 auto 8px; }
.center h1 { font: 700 28px/1.1 var(--font-display); text-align: center; }
.center p { margin: 0; text-align: center; }
.error { color: var(--problem); font-weight: 700; min-height: 1.4em; text-align: center; }

/* ---------- name picker ---------- */
.names { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.names button { min-height: 64px; font-size: 20px; font-weight: 800; border: 2px solid var(--line); background: var(--surface); }
.names button.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* ---------- groups ---------- */
.group { margin: 0 0 14px; }
.group-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 4px 6px; }
.group-head h2 { font: 600 19px/1.15 var(--font-display); letter-spacing: 0.01em; flex: 1; }
.group-head .count { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.group-head .btn-small { margin-left: 6px; }

/* ---------- part rows ---------- */
.part { background: var(--surface); border-radius: var(--r-panel); padding: 12px 12px 10px; margin-bottom: 8px; border-left: 6px solid transparent; }
.part.in-hand { border-left-color: var(--ok); }
.part.problem { border-left-color: var(--problem); }
.part.tire { border-left-color: var(--line); }
.part.tire .part-name { color: var(--ink-2); }
.part-main { display: flex; gap: 12px; align-items: stretch; }
.part-text { flex: 1; min-width: 0; }
.part-name { font-weight: 600; font-size: 17px; word-break: break-word; }
.part-sub { color: var(--ink-2); font-size: 14px; margin-top: 2px; }
.part-sub b { color: var(--ink); }
.part-act { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; }
.part-act .btn { min-width: 96px; min-height: 60px; font-size: 18px; }
.part-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.part-foot .btn { min-height: 44px; font-size: 15px; padding: 0 14px; }
.problem-note { color: var(--problem); font-size: 14px; margin-top: 6px; font-weight: 700; }
.empty { text-align: center; color: var(--ink-2); padding: 48px 12px; font-size: 18px; text-wrap: balance; }

/* ---------- bottom sheet (phone only; the desktop uses the inspector) ---------- */
.sheet-back { position: fixed; inset: 0; background: var(--overlay); z-index: 20; display: flex; align-items: flex-end; }
.sheet { background: var(--surface); width: 100%; max-width: 760px; margin: 0 auto; border-radius: 18px 18px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto; }
.sheet h2 { font: 700 22px/1.15 var(--font-display); margin-bottom: 4px; }
.sheet .sub { color: var(--ink-2); margin-bottom: 14px; }
.sheet .options { display: grid; gap: 8px; margin-bottom: 12px; }
.sheet .options button { border: 2px solid var(--line); background: var(--surface); min-height: 56px; font-size: 18px; font-weight: 700; text-align: left; }
.sheet .options button.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.sheet .row { display: flex; gap: 10px; margin-top: 12px; }
.sheet .row .btn { flex: 1; }
.toast { position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--surface); padding: 14px 16px; border-radius: var(--r-panel); z-index: 30; font-weight: 700; text-align: center; box-shadow: var(--shadow-float); }
.toast.bad { background: var(--problem); color: var(--on-problem); }

/* ---------- bottom nav (office on a phone) ---------- */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; background: var(--chrome); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 6px; }
.nav a { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--on-chrome); text-decoration: none; font-weight: 800; font-size: 15px; min-height: 48px; padding: 0 2px; border-radius: var(--r-control); opacity: 0.85; white-space: nowrap; }
.nav:has(a:nth-child(5)) { gap: 2px; padding-left: 4px; padding-right: 4px; }
.nav:has(a:nth-child(5)) a { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; }
.nav a.on { background: var(--accent); color: var(--on-accent); opacity: 1; }
body:has(.nav) .screen { padding-bottom: 150px; }

/* ---------- toolbar: sort, filters ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 6px; align-items: center; max-width: 760px; margin: 0 auto; }
.select { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 12px; min-height: 44px; font-size: 15px; font-weight: 600; }
.select span { color: var(--ink-2); }
.select select { border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--ink); min-height: 40px; max-width: 46vw; }
.chip-toggle { min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; font-weight: 700; padding: 0 14px; }
.chip-toggle.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---------- groups on To Order (phone) ---------- */
.group-meta { font-size: 14px; color: var(--ink-2); padding: 0 4px 8px; display: grid; gap: 3px; }
.group-meta b { color: var(--ink); font-weight: 700; }
.group-meta .badge { vertical-align: middle; }
.group-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.group-actions .btn { flex: 1; min-height: 48px; font-size: 16px; }
.group.supplies .group-head .badge { margin-left: auto; }
.meta { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.meta .badge { vertical-align: middle; }

/* ---------- selectable rows (phone) ---------- */
.check { flex: 0 0 auto; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: var(--r-control); border: 2px solid var(--line); background: var(--surface); font-size: 22px; font-weight: 800; color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; align-self: center; }
.check.on { background: var(--accent); border-color: var(--accent); }
.part.selectable.on { outline: 2px solid var(--accent); outline-offset: -2px; }
.selbar { position: fixed; left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 11; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 8px 10px; box-shadow: var(--shadow-float); max-width: 744px; margin: 0 auto; }
.selbar span { font-weight: 800; flex: 1; }
.selbar .btn { min-height: 44px; font-size: 15px; padding: 0 12px; }

/* ---------- waiting on deposit, order sections (phone) ---------- */
.group.waiting { margin-top: 20px; }
.group-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; background: transparent; border: 1px dashed var(--line); font-weight: 800; font-size: 16px; text-align: left; }
.group-toggle .count { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.order-box { background: var(--surface); border-radius: var(--r-panel); padding: 10px 12px; margin-top: 8px; border-left: 6px solid var(--line); }
.order-head { font-size: 15px; margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.order-head .btn-small { margin-left: auto; }
.order-part { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; padding: 6px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.order-part span:first-child { color: var(--ink); }
.order-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px 6px; font-size: 15px; color: var(--ink-2); }
.order-row b { color: var(--ink); }

/* ---------- Mark Ordered, Pick Vendor, bulk check-in sheets (phone) ---------- */
.po { display: flex; align-items: center; gap: 10px; background: var(--page); border-radius: var(--r-panel); padding: 10px 12px; margin-bottom: 12px; }
.po > div { flex: 1; min-width: 0; }
.po .muted { font-size: 13px; }
.po-value { font: 700 30px/1.1 var(--font-display); letter-spacing: 0.02em; word-break: break-all; }
.field { display: block; margin-bottom: 10px; }
.field > .muted, .field > span { display: block; font-size: 13px; margin-bottom: 4px; }
.field-value { font-size: 18px; font-weight: 700; min-height: 32px; }
.field select { width: 100%; min-height: var(--tap); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); padding: 0 12px; font-weight: 700; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ticklist { display: grid; gap: 6px; margin-bottom: 12px; max-height: 36vh; overflow: auto; }
.tick { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--surface); padding: 6px 8px; min-height: 56px; }
.tick.on { border-color: var(--accent); }
.tick.muted { opacity: 0.6; }
.tick .check { width: 36px; height: 36px; min-height: 36px; font-size: 18px; }
.tick-text { display: flex; flex-direction: column; min-width: 0; font-size: 15px; font-weight: 600; }
.tick-text .muted { font-size: 13px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.chips .muted { font-size: 13px; width: 100%; }
.chip-pick { min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; padding: 0 14px; }
.chip-pick.suggested { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---------- order view (phone) ---------- */
.matches { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); margin-top: 6px; overflow: hidden; }
.matches button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border-radius: 0; border-bottom: 1px solid var(--line); min-height: 56px; padding: 8px 14px; gap: 2px; }
.matches button:last-child { border-bottom: 0; }
.matches .muted { font-size: 14px; }
.matches > .muted { padding: 12px 14px; }
.ordercard { background: var(--surface); border-radius: var(--r-panel); padding: 14px; margin-bottom: 12px; border-left: 6px solid var(--line); }
.ordercard.ready { border-left-color: var(--ok); }
.ordercard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ordercard-num { font: 700 28px/1 var(--font-display); }
.ordercard-cust { font-size: 16px; font-weight: 500; }
.ordercard-title { font: 600 22px/1.1 var(--font-display); }
.cust-last { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.ordercard-meta { display: grid; gap: 4px; margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.ordercard-meta b { color: var(--ink); }
.badge-big { font-size: 15px; padding: 8px 12px; }
.state-line { font-weight: 700; font-size: 15px; margin-top: 3px; }
.st-wait .state-line { color: var(--ink-2); }
.st-nto .state-line { color: var(--ink); }
.st-ordered .state-line { color: var(--ink-2); }
.st-inhand .state-line { color: var(--ok); }
.st-other .state-line { color: var(--ink-2); font-weight: 600; }
.orderpart.st-wait { opacity: 0.75; }
.orderpart .part-foot .btn { min-height: 40px; font-size: 14px; padding: 0 12px; }

/* ---------- In Transit (phone) ---------- */
.vo { background: var(--surface); border-radius: var(--r-panel); padding: 12px; margin-bottom: 10px; border-left: 6px solid var(--line); }
.vo.red { border-left-color: var(--problem); }
.vo.yellow { border-left-color: var(--warn-bg); }
.vo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.vo-vendor { font: 600 19px/1.15 var(--font-display); }
.vo-days { font-weight: 800; white-space: nowrap; }
.vo-meta { display: grid; gap: 3px; margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.vo-meta b { color: var(--ink); }
.vo-meta a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.eta-hard { color: var(--ink); }
.eta-soft { color: var(--ink-2) !important; font-weight: 600 !important; }
.eta-none { color: var(--ink-2) !important; }
.vo-parts { margin-top: 8px; border-top: 1px solid var(--line); }
.vo-part { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.vo-part.problem { color: var(--problem); }

/* ===================================================================== */
/* Desktop shell — office screens on wide Mac monitors (DESIGN.md)        */
/* The page never scrolls; each pane scrolls on its own.                   */
/* ===================================================================== */

/* Only the inspector's content swap crossfades (View Transitions, 150ms). */
:root:has(.desk) { view-transition-name: none; }
::view-transition-old(insp), ::view-transition-new(insp) { animation-duration: 150ms; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(insp), ::view-transition-new(insp) { animation-duration: 0s; } }

body:has(.desk) { overflow: hidden; padding: 0; font-size: 14px; }
.desk {
    --side-w: 220px;
    --top-h: 56px;
    --row-h: 36px;
    --ghead-h: 40px;
    --insp-w: 480px;
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    grid-template-rows: var(--top-h) minmax(0, 1fr);
    height: 100vh;
    font: 14px/1.4 var(--font-ui);
    color: var(--ink);
    background: var(--page);
}
.desk button { min-height: 0; font-size: inherit; }
.desk input, .desk select, .desk textarea { min-height: 32px; padding: 5px 9px; font-size: 14px; border-radius: var(--r-control); }
.desk textarea { min-height: 72px; }
.desk .btn { height: 32px; padding: 0 12px; border-radius: var(--r-control); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.desk .btn-lg { height: 40px; font-size: 15px; font-weight: 700; padding: 0 16px; }
.desk .btn-quiet { background: transparent; color: var(--ink-2); padding: 0 8px; }
.desk .btn-quiet:hover { background: var(--surface-2); color: var(--ink); }
.desk kbd { font: 600 11px/1 var(--font-ui); color: var(--ink-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; background: var(--surface); }
.desk .btn-primary kbd { color: var(--on-accent); border-color: var(--line); border-color: color-mix(in oklch, var(--on-accent) 30%, transparent); background: transparent; }

/* ---------- sidebar (charcoal) ---------- */
.side { grid-row: 1 / -1; background: var(--chrome); color: var(--on-chrome); display: flex; flex-direction: column; min-height: 0; padding: 12px 10px; gap: 2px; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px; color: var(--on-chrome); text-decoration: none; }
.side-brand .logo { width: 40px; height: 40px; }
.side-brand span { font: 700 19px/1 var(--font-display); letter-spacing: 0.01em; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-sep { height: 1px; background: rgba(255, 255, 255, 0.14); background: color-mix(in oklch, var(--on-chrome) 14%, transparent); margin: 10px 6px; }
/* `background: transparent` because "N held writes" is a <button>, and the page's button rule would paint it a white pill (pass 3). */
.side-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r-control); background: transparent; color: var(--on-chrome-2); text-decoration: none; font-weight: 500; text-align: left; position: relative; transition: background-color var(--t-color), color var(--t-color); }
.side-item:hover { background: rgba(255, 255, 255, 0.08); background: color-mix(in oklch, var(--on-chrome) 8%, transparent); color: var(--on-chrome); }
.side-item.on { background: rgba(255, 255, 255, 0.11); background: color-mix(in oklch, var(--on-chrome) 11%, transparent); color: var(--on-chrome); font-weight: 600; }
.side-item.on::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 2px 2px 0; background: var(--accent-pressed); }
.side-item svg { width: 18px; height: 18px; flex: 0 0 auto; }
.side-item .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item .cnt { font-weight: 600; color: var(--on-chrome-2); }
.side-item .cnt.warn { color: #FFE27A; }
.side-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 6px; }
/* The Shop section (Check-in, Supplies) sits at the bottom, just above the name. */
/* Admin, then Shop: two labelled groups together at the top. Between them, one item's gap plus the label. */
.side-nav + .side-nav { margin-top: 2px; }
.side-sec-label { height: 28px; display: flex; align-items: flex-end; padding: 0 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-chrome-2); }
.side-foot .side-name { flex: 1; min-width: 0; }
.theme-seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--r-control); background: rgba(255, 255, 255, 0.08); background: color-mix(in oklch, var(--on-chrome) 8%, transparent); }
.theme-seg button { min-height: 0; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--on-chrome-2); border-radius: 4px; }
.theme-seg button svg { width: 16px; height: 16px; }
.theme-seg button:hover { color: var(--on-chrome); }
.theme-seg button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.18); background: color-mix(in oklch, var(--on-chrome) 18%, transparent); color: var(--on-chrome); }
.sheet-h3 { margin: 16px 0 8px; font-size: 15px; }
.seg-row { display: flex; gap: 6px; }
.seg-row button { flex: 1; min-height: 44px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; }
.seg-row button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.side-name { width: 100%; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: var(--r-control); background: transparent; color: var(--on-chrome); font-weight: 600; text-align: left; }
.side-name:hover { background: rgba(255, 255, 255, 0.08); background: color-mix(in oklch, var(--on-chrome) 8%, transparent); }
.side-name .who { flex: 1; }
.side-name .avatar { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); background: color-mix(in oklch, var(--on-chrome) 16%, transparent); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.side-name.unset .who { color: #FFE27A; }

/* Below 1440px the sidebar collapses to a 64px icon rail with tooltips. */
@media (max-width: 1439px) {
    .desk { --side-w: 64px; }
    .side { padding: 12px 8px; align-items: center; }
    .side-brand { padding: 2px 0 14px; }
    .side-brand span, .side-item .lbl, .side-name .who, .side-name .caret { display: none; }
    .side-item { width: 48px; justify-content: center; padding: 0; }
    .side-item .cnt { position: absolute; top: 2px; right: 2px; font-size: 10px; line-height: 14px; min-width: 16px; text-align: center; border-radius: 7px; background: rgba(255, 255, 255, 0.18); background: color-mix(in oklch, var(--on-chrome) 18%, transparent); color: var(--on-chrome); padding: 0 3px; }
    .side-item.on::before { left: -8px; }
    .side-sec-label { display: none; }
    .side-nav + .side-nav { border-top: 1px solid rgba(255, 255, 255, 0.14); border-top: 1px solid color-mix(in oklch, var(--on-chrome) 14%, transparent); margin-top: 8px; padding-top: 8px; }
    .side-name { width: 48px; justify-content: center; padding: 0; }
    .side-foot { flex-direction: column; }
    .side-foot .side-name { flex: none; }
    .theme-seg { background: transparent; }
    .theme-seg button:not([aria-pressed="true"]) { display: none; }
}

/* ---------- top bar (white) ---------- */
.top .spacer { flex: 1; }
.top { grid-column: 2; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); min-width: 0; }
.top-search { display: flex; align-items: center; gap: 10px; width: 340px; flex: 0 0 auto; height: 34px; padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); color: var(--ink-2); text-align: left; font-weight: 400; }
.top-search:hover { border-color: var(--line); border-color: color-mix(in oklch, var(--line) 60%, var(--ink-2)); }
.top-search svg { width: 16px; height: 16px; }
.top-search .ph { flex: 1; }
.syncst { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--ink-2); font-size: 13px; flex: 0 0 auto; }
.syncst .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.syncst.warn { background: var(--warn-bg); color: var(--warn-ink); padding: 4px 10px; border-radius: var(--r-chip); font-weight: 600; }
.syncst.down { background: var(--problem-bg); color: var(--problem-ink); padding: 4px 10px; border-radius: var(--r-chip); font-weight: 600; }
.syncst.warn .dot, .syncst.down .dot { display: none; }
.qfail { background: var(--problem-bg); color: var(--problem-ink); text-decoration: none; padding: 4px 10px; border-radius: var(--r-chip); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ---------- main: list + inspector ---------- */
.main { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) var(--insp-w); min-height: 0; position: relative; }
.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); }
.list { border-right: 1px solid var(--line); container: list / inline-size; }
.pane-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.pane-title { font: 700 22px/1.1 var(--font-display); letter-spacing: 0.01em; margin-right: 6px; }
.pane-head .spacer { flex: 1; }
.ctl { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 10px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font-size: 13px; }
.ctl select { border: 0; background: transparent; font-weight: 600; color: var(--ink); padding: 0 4px; min-height: 30px; max-width: 150px; }
.ctl select:focus-visible { box-shadow: none; }
.toggle { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font-weight: 500; font-size: 13px; }
.toggle:hover { background: var(--surface-2); }
.toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.filter { position: relative; }
.filter input { width: 240px; padding-left: 28px; }
.filter svg { position: absolute; left: 8px; top: 50%; translate: 0 -50%; width: 14px; height: 14px; color: var(--ink-2); pointer-events: none; }
.filter kbd { position: absolute; right: 6px; top: 50%; translate: 0 -50%; }
.scroller { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }

/* The inspector: drag-resizable 380–720px, width remembered per device. */
.insp { position: relative; min-width: 0; border-left: 0; view-transition-name: insp; }
.resizer { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 3; }
.resizer::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background-color var(--t-color); }
.resizer:hover::after, .resizer.dragging::after { background: var(--accent); }
.insp-body { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; padding: 16px 20px 24px; }
.insp-empty { color: var(--ink-2); padding: 28px 24px; display: grid; gap: 14px; }
.insp-empty h2 { font: 600 17px/1.2 var(--font-display); color: var(--ink); }
.insp-empty dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.insp-empty dt { text-align: right; }
.insp-empty dd { margin: 0; }

/* Below 1920px the inspector is a panel beside the list (the list narrows; see "Inspector open below 1920"). */
@media (max-width: 1919px) {
    .main { grid-template-columns: minmax(0, 1fr); overflow: clip; } /* the parked inspector must not widen the page */
    .insp { position: absolute; right: 0; top: 0; bottom: 0; width: var(--insp-w); z-index: 6; box-shadow: var(--shadow-float); border-left: 1px solid var(--line); transition: translate var(--t-panel); }
    .insp.closed { translate: 100% 0; visibility: hidden; }
}

/* ---------- the grid table: rows 36px, group headers 40px, both sticky ---------- */
/* To Order blocks (Basil, 10/23). Each block is its own grid with the same
   trailing columns (Qty, Retail, Deposit, Drop-off, Waiting, actions) at fixed
   widths, so those line up across every block; the leading columns differ:
   only Needs vendor has a Vendor column, and the other blocks give that width
   to Part and Part #. The Tag column is as wide as the block's longest tag.
   Tiers by the list pane's width:
     narrow  < 1300px — SM #, Part, Tag, Part #, [Vendor], Qty, Drop-off, actions
     normal            — adds Retail and Waiting
     wide   ≥ 1650px  — adds Deposit; vendor blocks also add Vehicle and Service */
.tg { display: flex; flex-direction: column; min-width: 0; }
.tg-block {
    --tag-w: 120px;
    display: grid;
    grid-template-columns:
        [sel] 40px [tape] 124px [part] minmax(280px, 1fr) [tag] var(--tag-w) [pn] minmax(110px, 0.5fr)
        [qty] 44px [drop] 72px [acts] 48px [end];
}
.tg-block.needs {
    grid-template-columns:
        [sel] 40px [tape] 124px [part] minmax(280px, 1fr) [tag] var(--tag-w) [pn] minmax(100px, 0.3fr) [vend] 220px
        [qty] 44px [drop] 72px [acts] 48px [end];
}
.c-veh, .c-svc, .c-dep, .c-ret, .c-flag { display: none !important; }
@container list (min-width: 1300px) {
    .tg-block {
        grid-template-columns:
            [sel] 40px [tape] 124px [part] minmax(280px, 1fr) [tag] var(--tag-w) [pn] minmax(120px, 0.5fr)
            [qty] 48px [drop] 76px [flag] 72px [acts] 48px [end];
    }
    .tg-block.needs {
        grid-template-columns:
            [sel] 40px [tape] 124px [part] minmax(280px, 1fr) [tag] var(--tag-w) [pn] minmax(110px, 0.3fr) [vend] 220px
            [qty] 48px [drop] 76px [flag] 72px [acts] 48px [end];
    }
    .tg .c-flag { display: flex !important; }
}
@container list (min-width: 1650px) {
    .tg-block {
        grid-template-columns:
            [sel] 40px [tape] 124px [veh] minmax(130px, 0.35fr) [part] minmax(280px, 1fr) [tag] var(--tag-w) [svc] minmax(130px, 0.35fr) [pn] minmax(120px, 0.4fr)
            [qty] 48px [dep] 84px [drop] 76px [flag] 72px [acts] 48px [end];
    }
    .tg-block.needs {
        grid-template-columns:
            [sel] 40px [tape] 124px [part] minmax(280px, 1fr) [tag] var(--tag-w) [pn] minmax(120px, 0.3fr) [vend] 220px
            [qty] 48px [dep] 84px [drop] 76px [flag] 72px [acts] 48px [end];
    }
    .tg .c-dep { display: flex !important; }
    .tg-block:not(.needs) .c-veh, .tg-block:not(.needs) .c-svc { display: flex !important; }
}
.tg-cols, .tg-row, .tg-ghead, .tg-note { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.tg-cols { position: sticky; top: var(--ghead-h); z-index: 2; background: var(--surface-2); border-bottom: 1px solid var(--line); height: 28px; }
.tg-cols > div { display: flex; align-items: center; padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; min-width: 0; }
.tg-cols .c-qty, .tg-cols .c-ret, .tg-cols .c-dep, .tg-cols .c-drop, .tg-cols .c-flag { justify-content: flex-end; }
.tg-group { position: relative; }
.tg-ghead { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); min-height: var(--ghead-h); align-items: center; cursor: pointer; }
.tg-ghead:hover { background: var(--surface-2); }
.tg-ghead.sel { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.tg-ghead .g-sel { grid-column: sel; display: flex; justify-content: center; }
.tg-ghead .g-main { grid-column: tape / end; display: flex; align-items: center; gap: 12px; padding-right: 12px; min-width: 0; }
.g-name { font: 600 17px/1 var(--font-display); letter-spacing: 0.01em; white-space: nowrap; }
.g-count { color: var(--ink-2); white-space: nowrap; }
.g-first { margin-left: auto; color: var(--ink-2); white-space: nowrap; }
.g-first b { color: var(--ink); font-weight: 600; }
.tg-row { min-height: var(--row-h); border-bottom: 1px solid var(--line); align-items: center; transition: background-color var(--t-row); }
.tg-row:hover { background: var(--surface-2); }
.tg-row.sel { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.tg-row:focus-visible { outline-offset: -2px; box-shadow: inset 0 0 0 1px var(--ink); }
.tg-row.sel:focus-visible { box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--ink); }
.tg-row > div, .tg-head > div { min-width: 0; }
.tg-row > div { display: flex; align-items: center; gap: 6px; padding: 0 8px; height: var(--row-h); white-space: nowrap; overflow: hidden; }
.tg-row .ell, .tg-row > div > span.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.c-sel { grid-column: sel; justify-content: center; padding: 0 !important; }
.c-tape { grid-column: tape; }
.c-veh { grid-column: veh; color: var(--ink-2); }
.c-part { grid-column: part; }
.c-tag { grid-column: tag; }
.c-svc { grid-column: svc; color: var(--ink-2); }
.c-pn { grid-column: pn; color: var(--ink-2); }
.c-vend { grid-column: vend; }
.c-qty { grid-column: qty; justify-content: flex-end; }
.c-ret { grid-column: ret; justify-content: flex-end; }
.c-dep { grid-column: dep; justify-content: flex-end; color: var(--ink-2); }
.c-drop { grid-column: drop; justify-content: flex-end; }
.c-flag { grid-column: flag; justify-content: flex-end; color: var(--ink-2); }
.c-acts { grid-column: acts; justify-content: flex-end; }
@container list (max-width: 1299px) {
    .filter input { width: 150px; }
    .pane-head { gap: 8px; }
    .ctl select { max-width: 116px; }
}
/* The SM # cell: tape chip, then the customer's last name, small and grey. */
.c-tape .cust-last { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* The Tag cell: SM pills, never truncated; two tags wrap onto a second line. */
.tg-row > .c-tag { flex-wrap: wrap; gap: 4px; height: auto; min-height: var(--row-h); padding-top: 4px; padding-bottom: 4px; overflow: visible; }
.quiet { color: var(--ink-2); } /* was 0.6 opacity (~2.7:1); --ink-2 is ≥6:1 (AUDIT FE-9) */
/* Row actions live in their own column: blank until hover, keyboard focus or selection. */
.tg-row > .c-acts { padding: 0 8px 0 0; justify-content: flex-end; overflow: visible; }
/* Needs vendor: the suggestion is a dashed button with the full vendor name. */
.c-vend .sugg { max-width: 100%; display: inline-flex; align-items: center; }
.c-vend .sugg .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-part .pname { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.due-past { color: var(--problem); font-weight: 600; }
.due-soon { font-weight: 600; }
/* One order, new appointment (10/24): every visit past, parts still coming. Amber; red only In the Shop. */
.visit-need { display: inline-block; padding: 0 6px; border-radius: 3px; font-weight: 600; line-height: 1.35; white-space: normal; }
.visit-need.amber { background: var(--warn-bg); color: var(--warn-ink); }
.visit-need.red { background: var(--problem); color: var(--on-problem); }
.tg-note { min-height: var(--row-h); border-bottom: 1px solid var(--line); }
.tg-note > div { grid-column: tape / end; display: flex; align-items: center; color: var(--ink-2); padding: 8px 8px; }
.tg input[type=checkbox] { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--accent); cursor: pointer; }
.tg-group.waiting .tg-ghead { color: var(--ink-2); }
.tg-group.waiting .tg-row { color: var(--ink-2); }
.tg-group.waiting .tg-row:hover { background: transparent; }
.chev { display: inline-block; width: 12px; color: var(--ink-2); transition: rotate var(--t-color); }
.open > .tg-ghead .chev { rotate: 90deg; }
.list-empty { padding: 48px 24px; color: var(--ink-2); max-width: 560px; text-wrap: pretty; }
.list-empty b { color: var(--ink); }

/* ---------- To Order blocks (10/23): one shared grid, each group its own bordered block ---------- */
.desk .tg { padding: 0 16px 24px; }
.tg-block {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    background: var(--surface);
    overflow: clip;                 /* rounds the corners; not a scroll box, so the header can still stick */
}
.tg > .tg-block:first-child { margin-top: 12px; }
.tg-block > .tg-ghead { top: 0; border-radius: var(--r-panel) var(--r-panel) 0 0; height: var(--ghead-h); }
.tg-block.collapsed > .tg-ghead { border-bottom: 0; border-radius: var(--r-panel); }
.tg-block > .tg-row:last-child, .tg-block > .tg-note:last-child { border-bottom: 0; }
.tg-block .tg-ghead { cursor: default; }
.tg-block .tg-ghead:hover { background: var(--surface); }
.tg-block .tg-ghead.sel, .tg-block .tg-ghead.sel:hover { background: var(--surface-2); }
.tg-block .g-name[data-act] { cursor: pointer; }
.tg-block .g-name[data-act]:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-chev { min-height: 0; height: 24px; width: 24px; padding: 0; margin-left: -6px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border-radius: var(--r-control); }
.g-chev:hover { background: var(--neutral-bg); }
.g-chev .chev { width: 14px; height: 14px; color: var(--ink-2); transition: rotate var(--t-color); }
.tg-block:not(.collapsed) > .tg-ghead .chev { rotate: 90deg; }
.g-hint { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tg-block.needs > .tg-ghead { box-shadow: inset 3px 0 0 var(--warn-bg); }
.tg-block.review > .tg-ghead { background: var(--warn-bg); color: var(--warn-ink); }
.tg-block.review > .tg-ghead .g-hint, .tg-block.review > .tg-ghead .g-count { color: var(--warn-ink); }
.tg-block.waiting > .tg-ghead, .tg-block.waiting .tg-row { color: var(--ink-2); }
.tg-row.plain:hover { background: transparent; }

/* small buttons */
.desk .btn-sm { height: 26px; min-height: 0; padding: 0 10px; font-size: 13px; }

/* The Review rows: five answers, always visible. */
.tg-row.review-order { background: var(--surface-2); }
.tg-row > .review-order-info { grid-column: part / end; gap: 6px; font-weight: 600; }
.review-bulk { display: flex; align-items: center; gap: 6px; min-width: 0; }
.review-bulk b { white-space: nowrap; margin-right: 4px; }

/* One-tap vendor suggestion in Needs vendor. */
.sugg { min-height: 0; height: 22px; padding: 0 8px; border-radius: var(--r-chip); background: transparent; border: 1px dashed var(--ink-2); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.sugg:hover { background: var(--neutral-bg); border-style: solid; }

/* Shopmonkey's tags, in Shopmonkey's own names and colours (read from label.list at sync). */
.smtag {
    display: inline-flex; align-items: center; flex: none;
    height: 22px; padding: 0 8px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
    background: var(--pill-bg, #9A9A9A); color: var(--pill-ink, #161616);
}
.smtag[data-c="black"] { box-shadow: inset 0 0 0 1px var(--line); }
.otags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.op-title { font: 600 22px/1.1 var(--font-display); letter-spacing: 0.01em; }

/* ---------- pills, tags inside the desktop ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-chip); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill-ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill-bad { background: var(--problem-bg); color: var(--problem-ink); }
.pill-muted { background: var(--neutral-bg); color: var(--ink-2); }
.pill-sending { background: var(--neutral-bg); color: var(--ink-2); }
.pill-sending::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pt-spin 0.8s linear infinite; }

/* ---------- inspector sections ---------- */
.ins-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ins-title { font: 700 22px/1.1 var(--font-display); letter-spacing: 0.01em; }
.ins-sub { color: var(--ink-2); margin-bottom: 16px; }
.ins-back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); background: transparent; padding: 0; margin-bottom: 12px; font-size: 13px; }
.ins-back:hover { color: var(--ink); }
.kv { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.kv:first-of-type { border-top: 0; }
.kv > .k { color: var(--ink-2); font-size: 13px; }
.kv > .v { min-width: 0; overflow-wrap: anywhere; }
.kv > .v.big { font: 700 32px/1 var(--font-display); letter-spacing: 0.02em; }
.ins-sec { margin-top: 18px; }
.ins-sec > h3 { font: 600 17px/1.2 var(--font-display); letter-spacing: 0.01em; margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; }
.ins-sec > h3 .muted { font: 400 13px var(--font-ui); }
.checklist { display: grid; border: 1px solid var(--line); border-radius: var(--r-control); overflow: hidden; }
.checklist label { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--line); cursor: pointer; }
.checklist label:first-child { border-top: 0; }
.checklist label:hover { background: var(--surface-2); }
.checklist input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--accent); }
.checklist .t { min-width: 0; }
.checklist .t div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checklist .t div:first-child { white-space: normal; overflow-wrap: anywhere; } /* the full part name, always */
.checklist .t .muted { font-size: 12px; }
.checklist label.held .t div:first-child { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--line); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.fields label { display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
.fields input { width: 100%; }
.cta { margin-top: 20px; display: grid; gap: 8px; }
.cta .btn { width: 100%; }
.cta .hint { color: var(--ink-2); font-size: 12px; text-align: center; }
.vchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vchip { height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); font-weight: 500; }
.vchip:hover { background: var(--surface-2); }
.vchip.suggest { border-color: var(--accent); }
.vlist { display: grid; border: 1px solid var(--line); border-radius: var(--r-control); margin-top: 8px; max-height: 320px; overflow: auto; }
.vlist button { text-align: left; padding: 8px 12px; height: auto; background: transparent; border-top: 1px solid var(--line); border-radius: 0; }
.vlist button:first-child { border-top: 0; }
.vlist button:hover, .vlist button.hl { background: var(--surface-2); }

/* ---------- order panel ---------- */
.op-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: start; }
.op-ready { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.op-head .tape { grid-row: span 2; }
.op-cust { font-size: 17px; font-weight: 600; line-height: 1.25; }
.op-veh { color: var(--ink-2); }
.op-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 12px; color: var(--ink-2); font-size: 13px; }
.op-meta b { color: var(--ink); font-weight: 600; }
.ready-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-chip); background: var(--ok); color: var(--surface); font: 700 15px/1 var(--font-display); letter-spacing: 0.02em; }
.count-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-chip); background: var(--neutral-bg); color: var(--ink-2); font-weight: 600; font-size: 13px; white-space: nowrap; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 16px 0 12px; }
.tab { height: 34px; padding: 0 12px; background: transparent; color: var(--ink-2); font-weight: 500; border-radius: var(--r-control) var(--r-control) 0 0; position: relative; }
.tab:hover { color: var(--ink); background: var(--surface-2); }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--accent-pressed); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-control); overflow: hidden; }
.seg button { height: 28px; padding: 0 10px; background: var(--surface); border-radius: 0; font-size: 13px; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.op-group { margin-top: 14px; }
.op-group > h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font: 600 15px/1.2 var(--font-display); letter-spacing: 0.01em; }
.op-group > h4 .muted { font: 400 12px var(--font-ui); }
.op-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 10px; border: 1px solid var(--line); border-top-width: 0; position: relative; }
.op-row:first-of-type { border-top-width: 1px; border-radius: var(--r-control) var(--r-control) 0 0; }
.op-row:last-child { border-radius: 0 0 var(--r-control) var(--r-control); }
.op-row:only-of-type { border-radius: var(--r-control); }
.op-row:hover, .op-row:focus-within { background: var(--surface-2); }
.op-row .nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-row .st { font-size: 13px; color: var(--ink-2); grid-column: 1; }
.op-row .st.ok { color: var(--ok); }
.op-row .st.bad { color: var(--problem); font-weight: 600; }
.op-row .money { grid-row: 1; grid-column: 2; color: var(--ink-2); font-size: 13px; text-align: right; }
.op-row.tire .nm { color: var(--ink-2); }
.op-acts { grid-column: 1 / -1; display: none; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.op-row:hover .op-acts, .op-row:focus-within .op-acts, .op-row.editing .op-acts { display: flex; }
.op-acts .btn { height: 28px; font-size: 13px; padding: 0 10px; }
.op-edit { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; padding-top: 6px; }
.op-edit input { flex: 1; }
.dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.dl dt { color: var(--ink-2); font-size: 13px; }
.dl dd { margin: 0; overflow-wrap: anywhere; }
.dl a { color: var(--ink); text-underline-offset: 2px; }
.minilist { display: grid; gap: 4px; margin-top: 6px; }
.minilist button { display: flex; align-items: center; gap: 8px; text-align: left; background: transparent; padding: 4px 0; height: auto; }
.minilist button:hover .t { text-decoration: underline; }
.hist { display: grid; gap: 0; }
.hist div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.hist div:first-child { border-top: 0; }
.hist .when { color: var(--ink-2); }
.hist .what b { font-weight: 600; }
.hist .what .muted { display: block; }
.smnote { background: var(--warn-bg); color: var(--warn-ink); padding: 8px 10px; border-radius: var(--r-control); font-size: 13px; margin-bottom: 12px; }

/* ---------- readiness strip: only green and red carry colour ---------- */
.strip { display: flex; height: 10px; gap: 2px; border-radius: 2px; overflow: hidden; }
.strip > i { display: block; min-width: 4px; }
.strip .s-hand { background: var(--ok); }
.strip .s-ord { background: var(--ink-2); }
.strip .s-to { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.strip .s-tag { background: repeating-linear-gradient(135deg, var(--ink-2) 0 1.5px, transparent 1.5px 5px); box-shadow: inset 0 0 0 1px var(--line); }
.strip .s-prob { background: var(--problem); }
.strip-wide { height: 12px; margin-bottom: 4px; }

/* ---------- desktop placeholders for screens still to come ---------- */
.soon { padding: 40px 32px; max-width: 640px; display: grid; gap: 12px; color: var(--ink-2); }
.soon h2 { font: 700 22px/1.1 var(--font-display); color: var(--ink); }
.soon .btn { justify-self: start; }

/* ---------- toasts: bottom-left, one at a time ---------- */
.dtoast { position: fixed; left: calc(var(--side-w, 220px) + 16px); bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 14px; background: var(--ink); color: var(--surface); padding: 10px 12px 10px 16px; border-radius: var(--r-control); box-shadow: var(--shadow-float); font-weight: 500; max-width: 560px; }
.dtoast.bad { background: var(--problem); color: var(--on-problem); }
.dtoast .btn { height: 28px; background: transparent; color: var(--surface); border: 1px solid var(--line); border: 1px solid color-mix(in oklch, var(--surface) 40%, transparent); }
.dtoast .btn:hover { background: transparent; background: color-mix(in oklch, var(--surface) 12%, transparent); }

/* ---------- command palette and shortcut sheet ---------- */
dialog.palette, dialog.sheetdlg { padding: 0; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); width: min(640px, calc(100vw - 48px)); margin-top: 12vh; }
dialog::backdrop { background: rgb(0 0 0 / 0.28); }
dialog:focus-visible { outline: none; box-shadow: var(--shadow-float); }
.palette-in { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.palette-in svg { width: 16px; height: 16px; color: var(--ink-2); flex: 0 0 auto; }
.palette-in input { border: 0; height: 52px; font-size: 16px; padding: 0; background: transparent; }
.palette-in input:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--accent-pressed); } /* keyboard focus shows (AUDIT FE-11) */
.palette-res { max-height: min(60vh, 520px); overflow: auto; padding: 6px 0; }
.palette-sec { padding: 8px 16px 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.palette-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 16px; height: auto; background: transparent; border-radius: 0; text-align: left; }
.palette-item.hl { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.palette-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item .t .muted { margin-left: 8px; }
.palette-item .kind { font-size: 12px; color: var(--ink-2); }
.palette-foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 12px; }
.palette-empty { padding: 18px 16px; color: var(--ink-2); }
.sheetdlg-body { padding: 18px 22px 22px; }
.sheetdlg-body h2 { font: 700 22px/1.1 var(--font-display); margin-bottom: 12px; }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; align-items: center; }
.keys .k { display: flex; gap: 4px; justify-content: flex-end; }

/* ---------- tooltips and menus: native popover + anchor positioning ---------- */
.tip { position: fixed; inset: auto; margin: 0; position-anchor: --tip-anchor; position-area: bottom; position-try-fallbacks: flip-block, flip-inline; translate: 0 6px; padding: 5px 8px; border: 0; border-radius: var(--r-control); background: var(--ink); color: var(--surface); font: 500 12px/1.3 var(--font-ui); pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-float); }
.tip.right { position-area: right; translate: 8px 0; }
.tip kbd { color: var(--surface); border-color: var(--line); border-color: color-mix(in oklch, var(--surface) 35%, transparent); background: transparent; margin-left: 6px; }
.menu { position: fixed; inset: auto; margin: 0; position-anchor: --menu-anchor; position-area: top span-right; position-try-fallbacks: flip-block; translate: 0 -6px; padding: 4px; min-width: 180px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); }
.menu button { display: flex; align-items: center; width: 100%; height: 32px; padding: 0 10px; background: transparent; text-align: left; border-radius: 4px; }
.menu button:hover, .menu button:focus-visible { background: var(--surface-2); }
.menu button[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--ink-2); }
.menu .menu-h { padding: 6px 10px 4px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
/* No anchor positioning (Safari < 26, Firefox): desk.js places tips and menus by script (AUDIT FE-1). */
.no-anchor .tip, .no-anchor .menu { translate: none; }

/* ---------- WRITES_PAUSED: one full-width banner on every screen ---------- */
.paused-banner {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 36px; padding: 6px 16px;
    background: var(--warn-bg); color: var(--warn-ink);
    font-weight: 700; text-align: center;
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 40;
}
.paused-banner[hidden] { display: none; }
.paused-banner .btn { background: transparent; border: 1px solid currentColor; color: inherit; }
/* The banners and the desk share the viewport as a column (pass 3): each banner takes what it needs
   (the "N held writes" button makes the paused one two lines tall) and the desk gets the rest, so the
   page never scrolls and the sidebar's foot ("Something's wrong") is never clipped. */
#app:has(> .desk) { display: flex; flex-direction: column; height: 100vh; }
#app:has(> .desk) > .paused-banner { flex: none; }
#app:has(> .desk) > .desk { flex: 1 1 auto; min-height: 0; height: auto; }
.paused-banner.first-sync { position: static; background: var(--surface-2); color: var(--ink); font-weight: 600; }
.held { display: grid; gap: 0; margin: 12px 0; max-height: 60vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-control); }
dialog.sheetdlg#heldDlg { width: min(1240px, calc(100vw - 48px)); margin-top: 8vh; }
.held .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.held-row { display: grid; grid-template-columns: 28px 64px minmax(80px, 0.7fr) minmax(0, 1.6fr) minmax(0, 2fr) minmax(60px, 0.6fr) 104px; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.held-row.on { background: var(--sel-bg, var(--warn-bg)); background: var(--sel-bg, color-mix(in oklch, var(--accent) 12%, var(--surface))); }
.held-headrow { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: default; }
.held-check { display: grid; place-items: center; }
.held-check input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--accent-pressed); }
.held-count { margin-right: auto; align-self: center; }
.held-row:last-child { border-bottom: 0; }
.mono { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- phone screens hosted inside the desktop shell ---------- */
.embed-scroll { flex: 1; min-height: 0; overflow: auto; }
.embed { font-size: 16px; max-width: 880px; padding: 0 16px 120px; }
.embed .pane-head { padding-left: 0; }
.main.no-insp { grid-template-columns: minmax(0, 1fr); }
.main.no-insp .insp { display: none; }

.ins-quick .quick-row { display: flex; gap: 8px; }
.pillrow { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* ---------- step 3: Orders, In Transit, Supplies (desktop), same bordered blocks as To Order ---------- */
.side-item .cnt.red { color: var(--on-problem); background: var(--problem); border-radius: 9px; padding: 0 6px; min-width: 18px; text-align: center; }
.tg-ghead .lb-main { grid-column: 1 / -1; padding-left: 8px; }
.tg-row.lrow { cursor: pointer; }
.tg-row.lrow > div { gap: 8px; }
.orders-block { display: grid; grid-template-columns: [tape] 132px [title] minmax(240px, 1fr) [otags] minmax(390px, 0.8fr) [drop] 250px [strip] minmax(140px, 200px) [count] 100px [end]; }
.orders-block .c-otags { grid-column: otags; gap: 4px; overflow: hidden; }
.more-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--neutral-bg); color: var(--ink-2); font-size: 12px; font-weight: 700; flex: none; cursor: default; }
.orders-block .c-tape { grid-column: tape; } .orders-block .c-title { grid-column: title; } .orders-block .c-veh2 { grid-column: veh; }
.orders-block .c-drop2 { grid-column: drop; } .orders-block .c-strip { grid-column: strip; } .orders-block .c-count { grid-column: count; justify-content: flex-end; }
.orders-block .tg-cols > div, .transit-block .tg-cols > div, .supply-block .tg-cols > div { padding: 0 8px; }
.orders-block .c-strip .strip { width: 100%; }
.tg-row.ready { box-shadow: inset 3px 0 0 var(--ok); }
.strip.ready i { background: var(--ok); }
.ready-badge.sm { height: 22px; font-size: 13px; padding: 0 8px; }
.transit-block { display: grid; grid-template-columns: [sel] 40px [tape] 150px [parts] minmax(240px, 1fr) [ord] 88px [trk] minmax(110px, 0.4fr) [eta] 100px [drop] 230px [strip] 130px [acts] 48px [end]; }
.transit-block .c-sel { grid-column: sel; justify-content: center; padding: 0 !important; display: flex; align-items: center; }
.transit-block .c-acts { grid-column: acts; justify-content: flex-end; padding-right: 12px; }
.transit-block input[type=checkbox] { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--accent); }
.ri-sec { display: grid; gap: 6px; }
.confirm { min-width: 360px; }
.confirm-text { font-size: 17px; font-weight: 600; margin: 0 0 16px; }
.tg-block.hold > .tg-ghead { box-shadow: inset 3px 0 0 #7E4CC4; }
.transit-block .c-tape { grid-column: tape; } .transit-block .c-parts { grid-column: parts; } .transit-block .c-ord { grid-column: ord; }
.transit-block .c-trk { grid-column: trk; } .transit-block .c-eta { grid-column: eta; } .transit-block .c-drop3 { grid-column: drop; } .transit-block .c-strip2 { grid-column: strip; }
/* The "Archived in Shopmonkey" block (AUDIT M12) puts Archive PO / Received in the strip column: it gets the
   room two buttons need at every width, instead of the 130px strip that cut "Received" off at 1440 (pass 3). */
.transit-block.archived-block { grid-template-columns: [sel] 40px [tape] 150px [parts] minmax(200px, 1fr) [ord] 88px [trk] minmax(140px, 0.5fr) [eta] 0 [drop] 0 [strip] 200px [acts] 48px [end]; }
.transit-block.archived-block .c-strip2 { display: flex !important; gap: 6px; justify-content: flex-end; overflow: visible; }
.transit-block .tg-row.late { box-shadow: inset 3px 0 0 var(--problem); }
.transit-block .tg-row.amber { box-shadow: inset 3px 0 0 #E0B000; }
.c-parts .pcount { display: inline-flex; min-width: 22px; height: 20px; padding: 0 6px; align-items: center; justify-content: center; border-radius: 999px; background: var(--neutral-bg); font-size: 12px; font-weight: 700; flex: none; }
.quiet-note { font-size: 12px; color: var(--ink-2); white-space: nowrap; flex: none; }
.c-tape .more { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.eta-wrap { display: inline-flex; width: 100%; }
.eta-strip { width: 100%; height: 12px; }
.eta-strip .track { fill: var(--line); }
.eta-strip .fill { fill: var(--ink-2); }
.eta-strip .drop { fill: var(--ink); }
.eta-strip.red .fill, .eta-strip.red .drop { fill: var(--problem); }
.supply-block { display: grid; grid-template-columns: [sel] 40px [item] minmax(240px, 1fr) [qty] 56px [pn] minmax(90px, 0.3fr) [cat] 170px [who] 90px [ago] 110px [note] minmax(120px, 0.6fr) [acts] 48px [end]; }
.supply-block .c-sel { grid-column: sel; } .supply-block .c-item { grid-column: item; } .supply-block .c-qty { grid-column: qty; justify-content: flex-end; }
.supply-block .c-pn2 { grid-column: pn; } .supply-block .c-cat { grid-column: cat; } .supply-block .c-who { grid-column: who; } .supply-block .c-ago { grid-column: ago; }
.supply-block .c-note { grid-column: note; } .supply-block .c-acts { grid-column: acts; justify-content: flex-end; }
.supply-block.urgent > .tg-ghead { box-shadow: inset 3px 0 0 var(--problem); }
.supply-block.done .tg-row { color: var(--ink-2); }
.pane-head .btn { height: 32px; }

/* the order panel: Shopmonkey-style service sections */
.op-head.ready { background: var(--ok-bg); border-radius: var(--r-panel); padding: 10px 12px; box-shadow: inset 4px 0 0 var(--ok); }
.op-parts-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cost-summary { margin-left: auto; font-size: 13px; }
.svc { border: 1px solid var(--line); border-radius: var(--r-control); margin-top: 10px; overflow: clip; background: var(--surface); }
.svc-head { width: 100%; min-height: 0; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--surface-2); border: 0; border-radius: 0; text-align: left; font-weight: 600; color: var(--ink); }
.svc-head.static { cursor: default; }
.svc-head .chev { width: 12px; height: 12px; color: var(--ink-2); transition: rotate var(--t-color); rotate: 90deg; flex: none; }
.svc.collapsed .svc-head .chev { rotate: 0deg; }
.svc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.svc-count { margin-left: auto; color: var(--ink-2); font-weight: 500; font-size: 13px; white-space: nowrap; }
.svc.na .svc-head { color: var(--ink-2); }
.svc.na .ptr { color: var(--ink-2); }
.ptable { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 0.4fr) minmax(70px, 0.4fr) auto 46px minmax(74px, auto); }
/* An estimated cost is loud (Basil, 10/24, AUDIT H1/Q1): a yellow "needs a human" badge, never plain text. */
.cost-est { display: inline-block; padding: 0 6px; border-radius: 3px; border: 1px dashed var(--line); color: var(--ink-2); font-weight: 600; }
.ptr { display: contents; }
.ptr > span { padding: 6px 8px; border-top: 1px solid var(--line); min-width: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; line-height: 22px; }
.ptr > span.pt-tags { display: flex; align-items: center; overflow: visible; }
.ptr-head > span { font-size: 12px; font-weight: 600; color: var(--ink-2); padding-top: 4px; padding-bottom: 4px; }
.ptr[data-act] { cursor: pointer; }
.ptr[data-act]:hover > span, .ptr.open > span { background: var(--surface-2); }
.ptr .pt-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 22px; }
.pt-tags { flex-wrap: wrap; gap: 4px; }
.ptr .num { justify-content: flex-end; }
.pdetail { grid-column: 1 / -1; padding: 8px 10px 10px; background: var(--surface-2); border-top: 1px dashed var(--line); display: grid; gap: 8px; }
.pdetail .st { font-size: 13px; color: var(--ink-2); }
.pdetail .st.ok { color: var(--ok); } .pdetail .st.bad { color: var(--problem); font-weight: 600; }
.cost-box { display: grid; gap: 6px; }
.kv2 { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13px; }
.kv2 .k { color: var(--ink-2); }
.kv2 .v { display: flex; align-items: center; gap: 8px; }
.kv2 input { width: 110px; }
.cost-meta { display: flex; gap: 10px; font-size: 12px; padding-left: 84px; }
.cost-warn { color: var(--warn-ink); background: var(--warn-bg); border-radius: var(--r-chip); padding: 0 6px; font-size: 12px; font-weight: 600; }
.cost-warn:empty { display: none; }
.pdetail .op-acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* Mark Ordered: optional cost per part */
.mo-list { gap: 0; }
.mo-part { border-top: 1px solid var(--line); }
.mo-part:first-child { border-top: 0; }
.mo-part > label { border-top: 0 !important; }
.mo-part.held .t div:first-child { color: var(--ink-2); text-decoration: line-through; }
.mo-cost { display: flex; align-items: center; gap: 10px; padding: 0 10px 8px 40px; font-size: 13px; flex-wrap: wrap; }
.cost-in { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.cost-in input { width: 96px; min-height: 28px; padding: 3px 8px; }

/* In Transit inspector */
.po-order { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.po-order:first-of-type { border-top: 0; }
.po-parts { border: 1px solid var(--line); border-radius: var(--r-control); }
.po-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); }
.po-part:first-child { border-top: 0; }
.po-part .t div:first-child { white-space: normal; overflow-wrap: anywhere; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fields-2 .span2 { grid-column: 1 / -1; }
.fields-2 label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.fields-2 .chk { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.fields-2 .chk input { width: 18px; height: 18px; min-height: 0; }
.hist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13px; }
.sup-hits { display: grid; gap: 4px; font-size: 13px; }
.sup-hit { padding: 6px 8px; border-radius: var(--r-control); background: var(--warn-bg); color: var(--warn-ink); }
.cats { display: grid; gap: 6px; margin: 12px 0; max-height: 50vh; overflow: auto; }
.cat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.cat-row.retired input { color: var(--ink-2); text-decoration: line-through; }

/* ---------- Supplies on the phone, and the nav badge ---------- */
.nav a { position: relative; }
.nav-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; line-height: 16px; font-weight: 800; background: rgba(255, 255, 255, 0.25); background: color-mix(in oklch, var(--on-chrome) 25%, transparent); color: var(--on-chrome); }
.nav-badge.red { background: var(--problem); color: var(--on-problem); }
.nav a.on .nav-badge { background: var(--on-accent); color: var(--accent); }
.nav a.on .nav-badge.red { background: var(--problem); color: var(--on-problem); }
.sup-form { background: var(--surface); border-radius: var(--r-panel); padding: 14px; margin-bottom: 16px; display: grid; gap: 10px; }
.sup-form h2 { margin: 0; font-size: 18px; }
.urgent-toggle { align-self: end; min-height: var(--tap); }
.urgent-toggle[aria-pressed="true"] { background: var(--problem); color: var(--on-problem); border-color: var(--problem); }
.btn-wide { width: 100%; }
.sup-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sup-row.done { opacity: 0.75; }
.tape-cell { display: inline-flex; align-items: center; gap: 6px; }
.po-order .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checklist > .mo-part > .t { padding: 8px 10px; }

/* ---------- Check-In polish and Order lookup (step 4, phone; iOS Safari 16+) ---------- */
.tape-lg { font-size: 24px; height: 38px; min-width: 76px; padding: 0 10px; }
.order-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 8px; }
.order-sec-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.order-sec-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.order-sec-text b { font-size: 17px; }
.order-sec-text .muted { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-group .group-meta { margin-bottom: 4px; }
.ck-make > .group-head h2::before, .ck-pull > .group-head h2::before, .ck-supply > .group-head h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.ck-make > .group-head h2::before { background: #C93535; }
.ck-pull > .group-head h2::before { background: #85583A; }
.ck-supply > .group-head h2::before { background: var(--tape); }
/* The undo bar: a ring empties over the 120 seconds. */
.undo-bar { gap: 10px; }
.undo-bar > span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ring { position: relative; width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 36px; height: 36px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.5; }
.ring-track { stroke: var(--line); }
.ring-fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.ring b { position: relative; font-size: 12px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .ring-fill { transition: none; } }
/* Sheets: the action row is a bottom bar that stays above the home indicator. */
.sheet .action-bar { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); margin: 12px -16px calc(-20px - env(safe-area-inset-bottom)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.sheet .action-bar .btn { flex: 1; }
/* Order lookup: read-only. */
.lookup-card { display: grid; gap: 8px; }
.lk-ready { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lk-strip { display: flex; flex: 1; min-width: 120px; height: 10px; gap: 2px; border-radius: 3px; overflow: hidden; background: var(--neutral-bg); }
.lk-strip i { display: block; }
.lk-strip .s-hand { background: var(--ok); } .lk-strip .s-ord { background: var(--ink-2); } .lk-strip .s-to { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink-2); } .lk-strip .s-tag { background: var(--problem); }
.lk-svc.na .part-name, .lk-svc.na h2 { color: var(--ink-2); }
.lk-part { display: block; }
.lk-words { font-size: 13px; color: var(--ink-2); align-self: center; margin-left: 2px; }
.selbar.undo-bar > .ring { flex: none; }
.selbar.undo-bar > span:not(.ring) { flex: 1; min-width: 0; }

/* ---------- Check-In (rework, 10/23): one part, one tap. Phone first; iOS Safari 16+ ---------- */
.ck-search { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.search-field { position: relative; }
.search-field input { padding-right: 48px; font-size: 17px; }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; min-height: 0; padding: 0; background: transparent; color: var(--ink-2); font-size: 24px; line-height: 1; border-radius: 50%; }
.search-x:hover { color: var(--ink); background: var(--surface-2); }
.search-x[hidden] { display: none; }
.ck-screen { display: flex; flex-direction: column; gap: 14px; padding: 14px 12px 40px; }
.ck-screen > .empty { padding: 40px 12px; }
.ck-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.ck-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.ck-head h2 { font: 600 19px/1.15 var(--font-display); letter-spacing: 0.01em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-head .count { color: var(--ink-2); font-size: 14px; font-weight: 600; white-space: nowrap; }
.ck-made .ck-head h2::before, .ck-pulled .ck-head h2::before, .ck-supply .ck-head h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 1px; }
.ck-made .ck-head h2::before { background: #C93535; }
.ck-pulled .ck-head h2::before { background: #85583A; }
.ck-supply .ck-head h2::before { background: var(--tape); }
.ck-note { margin: 0; padding: 8px 14px; color: var(--ink-2); font-size: 13px; border-bottom: 1px solid var(--line); }
.ck-orderblock + .ck-orderblock { border-top: 1px solid var(--line); }
.ck-order { display: flex; align-items: center; gap: 10px; padding: 12px 14px 2px; min-width: 0; white-space: nowrap; }
.ck-order .tape { flex: none; }
.ck-last { flex: none; max-width: 45%; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ck-title { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.ck-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 14px; min-height: 64px; }
.ck-row + .ck-row { border-top: 1px solid var(--line); border-top: 1px solid color-mix(in oklch, var(--line) 55%, transparent); }
.ck-row.done { background: var(--ok-bg); }
.ck-row.problem { box-shadow: inset 4px 0 0 var(--problem); }
.ck-text { flex: 1; min-width: 0; }
.ck-name { display: block; width: 100%; min-height: 0; padding: 0; background: none; text-align: left; font-size: 16px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-name.open { white-space: normal; overflow-wrap: anywhere; }
.ck-row.tire .ck-name { color: var(--ink-2); }
.ck-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.ck-sub .badge { font-size: 12px; padding: 2px 7px; }
.ck-pn { font-variant-numeric: tabular-nums; }
.ck-done { color: var(--ok-ink); font-weight: 600; }
.ck-undo { min-height: 0; height: auto; padding: 2px 4px; margin: -2px 0; background: none; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ck-problem { margin-top: 4px; color: var(--problem); font-size: 13px; font-weight: 700; }
.ck-more { flex: none; width: 40px; height: 48px; min-height: 0; padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 20px; line-height: 1; }
.ck-more:hover { background: var(--surface-2); color: var(--ink); }
.ck-go, .ck-slot { flex: none; width: 92px; height: 48px; }
.ck-go { min-height: 48px; padding: 0; font-size: 17px; }
.ck-slot { display: grid; place-items: center; text-align: center; }
.ck-check { color: var(--ok); }
.ck-check svg { width: 28px; height: 28px; }
.ck-tire { font-size: 12px; line-height: 1.2; color: var(--ink-2); }
.sheet .sheet-name { overflow-wrap: anywhere; }
.sheet .options button.opt-danger { color: var(--problem); }
/* On a computer: the same layout in a centered column inside the shell. */
.embed.embed-checkin { max-width: 640px; margin: 0 auto; padding: 0 0 120px; }
.embed.embed-checkin .pane-head { padding: 0 12px; }
.embed.embed-checkin .ck-search { border-bottom: 0; background: var(--page); }
/* Inside the desktop shell the undo bar rides at the bottom of the column, not the window. */
.embed .selbar { position: sticky; left: auto; right: auto; bottom: 16px; margin: 0 12px; max-width: none; }

/* ---------- Supplies on a phone (rework, 10/23): request-first ---------- */
.sup-screen { display: flex; flex-direction: column; gap: 14px; padding: 14px 12px 40px; }
.sup-screen .sup-form { margin: 0; border: 1px solid var(--line); border-radius: var(--r-panel); padding: 14px; gap: 12px; }
.sup-form h2 { font: 600 19px/1.15 var(--font-display); letter-spacing: 0.01em; }
/* One swipeable row of category chips, so the description stays near the top. */
.sup-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -14px; padding: 2px 14px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.sup-chips::-webkit-scrollbar { display: none; }
.sup-chips .chip-pick { flex: none; white-space: nowrap; }
.sup-chips .chip-pick { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 15px; border-radius: 999px; }
.sup-chips .chip-pick.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.sup-desc { min-height: 72px; font-size: 18px; resize: none; }
.sup-line { display: flex; gap: 12px; align-items: flex-end; }
.sup-line > .field { flex: 1; min-width: 0; }
.sup-line > .field:last-child { flex: 0 0 auto; }
.stepper { display: flex; align-items: stretch; height: 48px; border: 1px solid var(--line); border-radius: var(--r-control); overflow: hidden; background: var(--surface); }
.stepper button { width: 52px; min-height: 0; padding: 0; background: var(--surface-2); font-size: 22px; font-weight: 700; border-radius: 0; }
.stepper input { flex: 1; min-width: 0; min-height: 0; border: 0; border-radius: 0; text-align: center; font-size: 18px; font-weight: 700; padding: 0 4px; }
.switch { display: inline-flex; align-items: center; gap: 10px; height: 48px; min-height: 0; padding: 0 14px 0 6px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; }
.switch .knob { width: 44px; height: 26px; border-radius: 13px; background: var(--neutral-bg); position: relative; transition: background-color var(--t-color); }
.switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 30%); transition: transform var(--t-color); }
.switch[aria-checked="true"] { border-color: var(--problem); color: var(--problem); }
.switch[aria-checked="true"] .knob { background: var(--problem); }
.switch[aria-checked="true"] .knob::after { transform: translateX(18px); }
.switch-word { min-width: 2em; }
.sup-panel.sup-urgent { border-color: var(--problem); border-color: color-mix(in oklch, var(--problem) 55%, var(--line)); }
.sup-panel.sup-urgent .ck-head h2 { color: var(--problem); }
.sup-item { min-height: 60px; }
.sup-item > .badge { flex: none; }
.sup-item.past .ck-name { color: var(--ink-2); }
.sup-toggle { width: 100%; min-height: 0; background: none; text-align: left; border-radius: 0; border-bottom: 0; }
.sup-done[open], .sup-toggle[aria-expanded="true"] { border-bottom: 1px solid var(--line); }
.sup-toggle .caret { color: var(--ink-2); }
.sup-ask { min-height: 48px; }
.embed.embed-supplies, .embed.embed-lookup { max-width: 640px; margin: 0 auto; padding: 0 0 120px; }
.embed.embed-supplies .pane-head, .embed.embed-lookup .pane-head { padding: 0 12px; }
.sup-form .field { margin: 0; }
.sup-form > * { min-width: 0; }
.embed .ck-go, .embed .ck-more { height: 40px; min-height: 40px; }
.toast-undo { margin-left: 10px; min-height: 0; height: 32px; padding: 0 12px; background: transparent; color: inherit; border: 1px solid currentColor; font-weight: 700; }

/* ---------- Activity (office): every History event, newest first ---------- */
.act-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.act-f input[type="date"] { height: 32px; min-height: 0; padding: 0 8px; width: auto; font-size: 13px; }
.act-list { padding: 0 16px 40px; }
.act-day { position: sticky; top: 0; z-index: 1; background: var(--page); padding: 14px 0 6px; font: 600 15px/1.2 var(--font-display); letter-spacing: 0.01em; color: var(--ink-2); }
.act-row { display: grid; grid-template-columns: 76px minmax(180px, 1.1fr) minmax(220px, 1.4fr) minmax(0, 2fr) minmax(80px, 0.5fr); align-items: center; gap: 12px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-top: 0; background: var(--surface); font-size: 13px; cursor: pointer; }
.act-day + .act-row { border-top: 1px solid var(--line); border-radius: var(--r-panel) var(--r-panel) 0 0; }
.act-row:has(+ .act-day), .act-row:last-of-type { border-radius: 0 0 var(--r-panel) var(--r-panel); }
.act-day + .act-row:has(+ .act-day) { border-radius: var(--r-panel); }
.act-row:hover { background: var(--surface-2); }
.act-row.sel { box-shadow: inset 3px 0 0 var(--accent-pressed); background: var(--warn-bg); background: color-mix(in oklch, var(--accent) 10%, var(--surface)); }
.act-row.no-order { cursor: default; }
.act-time { color: var(--ink-2); }
.act-what b { font-weight: 600; }
.act-order { display: flex; align-items: center; gap: 8px; min-width: 0; }
.act-order .ell { min-width: 0; }
.act-who { color: var(--ink-2); text-align: right; }
.act-more { display: flex; justify-content: center; padding: 16px; }
.hist .when .muted { display: block; font-size: 12px; }
.hist .what .by { color: var(--ink-2); }
.hist .what .parts { display: block; }
.hist .hist-order_ready .what b { color: var(--ok-ink); }
.hist .hist-flag_problem .what b { color: var(--problem); }

/* ---------- Vendors (10/23): Vendors, Brands and Shop info, a spreadsheet you edit in place ---------- */
.ven-notice { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border: 1px solid color-mix(in oklch, var(--warn-ink) 30%, var(--line)); border-radius: var(--r-panel); background: var(--warn-bg); color: var(--warn-ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ven-notice .btn { margin-left: auto; }
.vg-tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.vg-tabs button .muted { font-weight: 400; }
.vg-status { height: 32px; min-height: 0; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); padding: 0 8px; font-size: 13px; }
.vg-saved { font-size: 12px; color: var(--ok-ink); opacity: 0; transition: opacity 300ms ease-out; }
.vg-saved.on { opacity: 1; }
.vg-scroll { padding: 0 0 24px; }
.vg-wrap { outline: none; }
.vg { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
.vg th, .vg td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0; height: 32px; max-width: 280px; background: var(--surface); text-align: left; vertical-align: middle; }
.vg thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); height: 34px; }
.vg thead th button { all: unset; display: block; box-sizing: border-box; width: 100%; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer; line-height: 34px; }
.vg thead th button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vg .vg-first { position: sticky; left: 0; z-index: 1; min-width: 210px; font-weight: 600; box-shadow: 1px 0 0 var(--line); }
.vg thead .vg-first { z-index: 3; }
.vg .vg-v { padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; line-height: 32px; }
.vg td.k-bool .vg-v, .vg th.k-bool button { text-align: center; }
.vg td.k-percent .vg-v { text-align: right; font-variant-numeric: tabular-nums; }
.vg td.vg-c { cursor: cell; }
.vg td.vg-c.on { box-shadow: inset 0 0 0 2px var(--accent); }
.vg td.vg-c.editing { box-shadow: inset 0 0 0 2px var(--accent); position: relative; overflow: visible; z-index: 4; }
.vg td.editing input, .vg td.editing select { width: 100%; min-width: 160px; height: 32px; min-height: 0; border: 0; border-radius: 0; padding: 0 9px; background: var(--surface); color: var(--ink); font: inherit; outline: none; }
.vg-err { position: absolute; left: 0; top: 100%; z-index: 5; padding: 6px 10px; max-width: 360px; white-space: normal; border-radius: 0 0 var(--r-control) var(--r-control); background: var(--problem-bg); color: var(--problem-ink); font-size: 12px; font-weight: 600; box-shadow: var(--shadow-float); }
.vg tr.retired td { color: var(--ink-2); }
.vg tr.retired td.vg-first { text-decoration: line-through; text-decoration-color: var(--ink-2); text-decoration-color: color-mix(in oklch, var(--ink-2) 50%, transparent); }
.vg .vg-yn { color: var(--ink-2); } .vg .vg-yn.y { color: var(--ink); font-weight: 600; }
.vg .vg-url { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.vg td.vg-more, .vg th.vg-more { width: 44px; text-align: center; border-right: 0; }
.vg td.vg-more .row-more { width: 28px; height: 26px; font-size: 16px; }
.vg tfoot td { border-bottom: 0; }
.vg .vg-add input { width: 260px; height: 32px; min-height: 0; border: 0; padding: 0 10px; background: transparent; color: var(--ink); font: inherit; font-weight: 400; }
.vg .vg-add input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.vg .vg-none td { padding: 14px 10px; color: var(--ink-2); }
.vg-unmapped { margin-top: 24px; padding: 0 16px; }
.vg-colsmenu { display: grid; gap: 2px; padding: 6px 8px; max-height: 60vh; overflow: auto; }
.vg-colsmenu .chk { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 13px; }
.vg-perr { margin: 10px 0; padding: 10px 12px; border-radius: var(--r-control); background: var(--problem-bg); color: var(--problem-ink); font-size: 13px; }
.vg-perr ul { margin: 6px 0 0; padding-left: 18px; }
.vg-plist { margin: 6px 0 12px; padding-left: 18px; font-size: 13px; max-height: 240px; overflow: auto; }
.vg-plist li { margin: 2px 0; }
#importDlg h3 { font-size: 13px; margin: 12px 0 0; }
.shop-card { max-width: 760px; margin: 20px 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.shop-card h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 22px; }
.shop-card .fields-2 { margin-top: 14px; }
.shop-card input, .shop-card textarea { width: 100%; min-height: 34px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); padding: 6px 10px; font: inherit; font-size: 14px; }
/* codes and quick links on a To Order vendor header and in the inspector */
.code-chip { display: inline-flex; align-items: center; height: 22px; min-height: 0; padding: 0 7px; margin-right: 4px; border: 1px dashed var(--ink-2); border: 1px dashed color-mix(in oklch, var(--ink-2) 55%, var(--line)); border-radius: var(--r-chip); background: transparent; color: var(--ink); font: 600 12px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.02em; }
button.code-chip { cursor: copy; } button.code-chip:hover { background: var(--surface-2); }
.vq { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; font-size: 12px; font-weight: 400; }
.vq-how { color: var(--ink-2); }
.vq-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-color: color-mix(in oklch, var(--accent) 70%, transparent); text-underline-offset: 3px; white-space: nowrap; }
.vq-link:hover { text-decoration-color: var(--accent); }
.vlist-scroll .vlist { max-height: 340px; }
/* Shop stock (10/23) */
.vg-help { margin: 12px 16px 10px; max-width: 980px; font-size: 13px; color: var(--ink-2); }
.rule-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; margin-right: 4px; border-radius: var(--r-chip); background: var(--neutral-bg); color: var(--ink); font-size: 12px; }
.stock-item { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; flex: none; }
.sugg.shelf { border-style: solid; border-color: var(--ok); border-color: color-mix(in oklch, var(--ok) 55%, var(--line)); color: var(--ok-ink); background: var(--ok-bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.shelf-chip { margin-left: 8px; height: 22px; min-height: 0; padding: 0 8px; border: 1px solid var(--ok); border: 1px solid color-mix(in oklch, var(--ok) 55%, var(--line)); border-radius: var(--r-chip); background: var(--ok-bg); color: var(--ok-ink); font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.btn.stock-pre { height: 24px; }
.sup-cat { display: grid; gap: 4px; margin: 4px 0 8px; }
.sup-cat-item { display: flex; align-items: baseline; gap: 8px; height: auto; min-height: 34px; padding: 6px 10px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); }
.sup-cat-item:hover, .sup-cat-item:focus-visible { background: var(--surface-2); }
.sup-cat-item .muted { font-size: 12px; }
/* Supplies, search-first (10/23) */
.sup-cat-item { align-items: center; }
.sup-cat-item .t { flex: 1; min-width: 0; }
.sup-thumb { width: 40px; height: 40px; flex: none; border-radius: var(--r-control); object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.sup-thumb.blank { display: inline-block; background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--neutral-bg) 6px 12px); }
.sup-picked { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 4px 0 10px; border: 1px solid var(--accent); border: 1px solid color-mix(in oklch, var(--accent) 60%, var(--line)); border-radius: var(--r-control); background: var(--surface); }
.sup-picked .t { flex: 1; min-width: 0; }
.sup-none { margin: 4px 0 10px; font-size: 13px; }
.sup-photo-link { display: block; margin: 2px 0 14px; color: var(--ink-2); font-size: 14px; cursor: pointer; }
.sup-photo-link b { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.sup-photo-prev { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; }
.sup-photo-prev img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-control); border: 1px solid var(--line); }
.sup-qty button { min-height: 44px; }
.sup-again { margin: 18px 0 8px; }
.sup-again h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); margin: 0 0 8px; }
.sup-again-list { display: grid; gap: 6px; }
.sup-again-item { display: flex; align-items: center; gap: 10px; min-height: 52px; height: auto; padding: 6px 10px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); }
.sup-again-item .t { flex: 1; min-width: 0; display: grid; }
.sup-again-item .sub { font-size: 12px; }
.sup-again-item .again { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.sup-row-photo { width: 36px; height: 36px; flex: none; margin-right: 8px; border-radius: var(--r-chip); object-fit: cover; border: 1px solid var(--line); }
.sup-row-photo.big { width: 72px; height: 72px; }
.needs-match .tg-row { min-height: 84px; }
.sup-link-btn { margin-left: auto; flex: none; }
.sup-photo-big { display: block; width: 100%; max-height: 420px; object-fit: contain; margin: 0 0 10px; border-radius: var(--r-panel); background: var(--surface-2); border: 1px solid var(--line); }
.vg-photo { display: inline-flex; align-items: center; cursor: pointer; }
.vg-photo img { width: 26px; height: 26px; object-fit: cover; border-radius: var(--r-chip); border: 1px solid var(--line); }
.vg-ro { color: var(--ink-2); }
.st.grey, .ptr.stock { color: var(--ink-2); }
.vlist .vlist-div { padding: 6px 12px 4px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.vlist button[disabled] { color: var(--ink-2); cursor: not-allowed; }
.vlist button .pill { margin-left: 8px; height: 18px; font-size: 11px; }
.unmapped-block { display: grid; grid-template-columns: [uname] minmax(240px, 1fr) [uparts] 90px [umap] 260px [end]; }
.unmapped-block .c-uname { grid-column: uname; } .unmapped-block .c-uparts { grid-column: uparts; justify-content: flex-end; } .unmapped-block .c-umap { grid-column: umap; }
.unmapped-block select { height: 30px; min-height: 0; width: 100%; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); padding: 0 8px; }
.warn-text { color: var(--warn-ink); }
.ven-aliases, .ven-rules { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-control); }
.ven-alias, .ven-rule { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-top: 1px solid var(--line); font-size: 13px; }
.ven-alias:first-child, .ven-rule:first-child { border-top: 0; }
.ven-alias label { flex: 1; display: flex; align-items: center; gap: 8px; }
.ven-rule > span:first-child { flex: 1; }
.ven-preview { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); font-size: 13px; }
.ven-preview p { margin: 0 0 4px; }
#importDlg textarea { width: 100%; font: 12px/1.4 ui-monospace, Menlo, monospace; }
dialog.sheetdlg#importDlg { width: min(760px, calc(100vw - 48px)); }
.row-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.row-acts select { height: 32px; min-height: 0; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); padding: 0 8px; }
.muted.small, p.small { font-size: 12px; margin: 6px 0 0; }
.fields-2 select { height: 32px; min-height: 0; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); padding: 0 8px; }

/* ---------- row actions: one ⋯ per row, always visible, inside the block (10/23) ---------- */
.row-more { width: 32px; height: 32px; min-height: 0; padding: 0; flex: none; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font-size: 18px; line-height: 1; }
.row-more:hover, .row-more[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.transit-block .c-acts, .supply-block .c-acts { padding-right: 8px; }
.rowmenu { position: fixed; inset: auto; margin: 0; padding: 4px; min-width: 220px; max-width: 320px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); }
.rowmenu [role="menuitem"] { display: grid; gap: 1px; width: 100%; min-height: 0; padding: 7px 10px; border: 0; border-radius: var(--r-control); background: transparent; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.rowmenu [role="menuitem"] .muted { font-size: 12px; font-weight: 400; }
.rowmenu [role="menuitem"]:hover { background: var(--surface-2); }
.rowmenu [role="menuitem"]:focus-visible { background: var(--surface-2); outline: 2px solid var(--accent-pressed); outline-offset: -2px; } /* keyboard focus shows (AUDIT FE-11) */

/* ---------- Check-In: vendor sections and collapsible order cards (10/23) ---------- */
.ck-screen { gap: 24px; }
.ck-group { display: block; }
.ck-ghead { position: sticky; top: var(--ck-stick, 0px); z-index: 3; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--page); background: color-mix(in oklch, var(--ink) 7%, var(--page)); }
.ck-ghead h2 { font: 600 19px/1.15 var(--font-display); letter-spacing: 0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-ghead .count { margin-left: auto; color: var(--ink-2); font-size: 14px; font-weight: 600; white-space: nowrap; }
.ck-all { min-height: 0; height: 32px; padding: 0 4px; background: none; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.ck-made .ck-ghead h2::before, .ck-pulled .ck-ghead h2::before, .ck-supply .ck-ghead h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 1px; }
.ck-made .ck-ghead h2::before { background: #C93535; }
.ck-pulled .ck-ghead h2::before { background: #85583A; }
.ck-supply .ck-ghead h2::before { background: var(--tape); }
.ck-group > .ck-note { margin: 8px 4px 0; padding: 0; border: 0; }
.ck-cards { display: grid; gap: 12px; margin-top: 12px; }
.ck-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.ck-card-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 14px; border-radius: 0; background: none; color: var(--ink); text-align: left; white-space: nowrap; }
.ck-card-head:hover { background: var(--surface-2); }
.ck-card.open > .ck-card-head { border-bottom: 1px solid var(--line); }
.ck-card-head .tape { flex: none; }
.ck-card-head .ck-last { flex: none; max-width: 38%; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ck-card-head .ck-title { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.ck-left { flex: none; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.ck-visit { flex: none; font-size: 12px; font-weight: 600; }
.ck-chev { flex: none; width: 20px; height: 20px; color: var(--ink-2); transition: transform var(--t-color); }
.ck-card.open .ck-chev { transform: rotate(180deg); }
.ck-card-body .ck-row { padding: 8px 16px; }
.ck-row.hit { background: var(--warn-bg); background: color-mix(in oklch, var(--accent) 16%, var(--surface)); }
.ck-row.hit.done { background: var(--ok-bg); }
.pill-fresh { background: var(--warn-bg); background: color-mix(in oklch, var(--tape) 22%, var(--surface)); color: var(--ink); }
.oldboard-block { display: grid; grid-template-columns: [tape] 110px [vendor] minmax(160px, 0.6fr) [note] minmax(0, 1fr) [who] 180px [end]; }
.oldboard-block .ob-tape { grid-column: tape; padding: 0 8px; } .oldboard-block .ob-vendor { grid-column: vendor; } .oldboard-block .ob-note { grid-column: note; } .oldboard-block .ob-who { grid-column: who; justify-content: flex-end; padding-right: 12px; }

/* ---------- Inspector open below 1920 (10/23): the list makes room instead of sliding under it ----------
   The drawer no longer covers rows: the list pane narrows beside it, and the
   blocks drop their least-needed columns, so every row's ⋯ stays inside its
   block border at any width, with or without the inspector. */
@media (max-width: 1919px) {
    .main:has(> .insp:not(.closed)) > .list { margin-right: var(--insp-w); }
    .main:has(> .insp:not(.closed)) > .insp { box-shadow: none; }
}
@container list (min-width: 900px) and (max-width: 1099px) {
    .tg-block.needs { grid-template-columns: [sel] 40px [tape] 124px [part] minmax(200px, 1fr) [tag] var(--tag-w) [vend] 200px [qty] 44px [drop] 72px [acts] 48px [end]; }
    .tg-block.needs .c-pn { display: none !important; }
}
/* 700–899 px — a 1280 screen with the inspector open is a 736 px list — keeps Part #, Qty and the
   visit date, narrower; only Deposit, Waiting and the Retail columns go (AUDIT FE-8). */
@container list (max-width: 899px) {
    .tg-block { grid-template-columns: [sel] 40px [tape] 124px [part] minmax(130px, 1fr) [tag] var(--tag-w) [pn] 84px [qty] 40px [drop] 72px [acts] 48px [end]; }
    .tg-block.needs { grid-template-columns: [sel] 40px [tape] 124px [part] minmax(130px, 1fr) [tag] var(--tag-w) [vend] 150px [qty] 40px [drop] 72px [acts] 48px [end]; }
    .tg-block .c-dep, .tg-block .c-flag, .tg-block .c-svc, .tg-block .c-ret { display: none !important; }
    .tg-block.needs .c-pn { display: none !important; }
}
@container list (max-width: 699px) {
    .tg-block { grid-template-columns: [sel] 40px [tape] 124px [part] minmax(150px, 1fr) [tag] var(--tag-w) [acts] 48px [end]; }
    .tg-block.needs { grid-template-columns: [sel] 40px [tape] 124px [part] minmax(150px, 1fr) [tag] var(--tag-w) [vend] 170px [acts] 48px [end]; }
    .tg-block .c-pn, .tg-block .c-qty, .tg-block .c-drop { display: none !important; }
}
@container list (max-width: 1149px) {
    .transit-block { grid-template-columns: [sel] 40px [tape] 150px [parts] minmax(200px, 1fr) [ord] 88px [eta] 100px [drop] 190px [acts] 48px [end]; }
    .transit-block .c-trk, .transit-block .c-strip2 { display: none !important; }
}
@container list (max-width: 859px) {
    .transit-block { grid-template-columns: [sel] 40px [tape] 150px [parts] minmax(180px, 1fr) [drop] 180px [acts] 48px [end]; }
    .transit-block .c-ord, .transit-block .c-eta { display: none !important; }
    .transit-block.archived-block { grid-template-columns: [sel] 40px [tape] 150px [parts] minmax(160px, 1fr) [ord] 0 [trk] 0 [eta] 0 [drop] 0 [strip] 200px [acts] 48px [end]; }
    .transit-block.archived-block .c-trk { display: none !important; }
}
@container list (max-width: 999px) {
    .supply-block { grid-template-columns: [sel] 40px [item] minmax(200px, 1fr) [qty] 56px [cat] 160px [who] 90px [ago] 100px [acts] 48px [end]; }
    .supply-block .c-note, .supply-block .c-pn2 { display: none !important; }
}
@container list (max-width: 779px) {
    .supply-block { grid-template-columns: [sel] 40px [item] minmax(180px, 1fr) [qty] 56px [who] 90px [ago] 100px [acts] 48px [end]; }
    .supply-block .c-cat { display: none !important; }
}
.act-row > span { min-width: 0; }
.act-row .act-parts, .act-row .act-what, .act-order .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist .what .parts { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Purchase history (10/23): last price paid, in Pick Vendor and the inspectors */
.vchip-paid { margin-left: 6px; color: var(--ink-2); font-weight: 400; font-size: 12px; }
.ph-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ph-table th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 4px 6px; border-bottom: 1px solid var(--line); }
.ph-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ph-table td.num, .ph-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ph-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px; font-size: 13px; }
.ph-facts dt { color: var(--ink-2); }
.ph-facts dd { margin: 0; }
.trend-up { color: var(--problem); }
.trend-down { color: var(--ok); }
.ph-table tr.this td { font-weight: 600; }
.ph-part { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.ph-part h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.stock-hero { max-width: 100%; max-height: 180px; border-radius: var(--r-control); margin: 4px 0 8px; object-fit: contain; background: var(--surface-2); }
.um-table { margin: 0 16px 24px; width: calc(100% - 32px); }

/* "Something's wrong" (10/23): a quiet link at the foot of the sidebar, and Admin → Problem reports */
.side-foot { flex-wrap: wrap; }
.side-report { order: 3; flex: 1 0 100%; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--r-control); background: transparent; color: var(--on-chrome-2); font-weight: 500; font-size: 13px; text-align: left; }
.side-report svg { width: 16px; height: 16px; flex: 0 0 auto; }
.side-report:hover { background: rgba(255, 255, 255, 0.08); background: color-mix(in oklch, var(--on-chrome) 8%, transparent); color: var(--on-chrome); }
@media (max-width: 1439px) {
    .side-report { flex: none; width: 48px; justify-content: center; padding: 0; }
    .side-report .lbl { display: none; }
}
.pr-group { padding: 0 16px 12px; }
.pr-h { font-size: 13px; font-weight: 600; margin: 12px 0 6px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.pr-row { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; margin: 0 0 6px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); text-align: left; font-weight: 400; }
.pr-row:hover { background: var(--surface-2); }
.pr-row.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pr-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-meta { font-size: 12px; white-space: nowrap; }
.pr-text { white-space: pre-wrap; font-size: 15px; line-height: 1.45; margin: 4px 0 10px; }
.report-dlg { max-width: 520px; width: calc(100vw - 32px); }
.report-form h2 { margin: 0 0 12px; }
.report-form textarea { width: 100%; font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); resize: vertical; }
.report-photo { display: flex; align-items: center; gap: 10px; margin: 10px 0; cursor: pointer; }
.report-form .field { display: grid; gap: 6px; }
.report-form .dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.topbar-report { width: 36px; height: 36px; min-height: 0; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; background: transparent; color: var(--on-chrome-2); flex: 0 0 auto; }
.topbar-report svg { width: 20px; height: 20px; }
.topbar-report:hover, .topbar-report:active { background: rgba(255, 255, 255, 0.12); background: color-mix(in oklch, var(--on-chrome) 12%, transparent); color: var(--on-chrome); }
.op-before { display: grid; gap: 6px; margin: 6px 0 4px; }
.op-before .muted { font-size: 12px; }
.report-photo .btn { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px; border-radius: var(--r-control); }
.report-photo .btn .muted { font-weight: 400; }
dialog.report-dlg::backdrop { background: rgb(0 0 0 / 0.5); }
.side-name .who { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Supplies → Ordered: one row per item, its quantity at the right */
.sup-qtys .mo-part { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
.sup-qtys .mo-part .t { flex: 1; min-width: 0; }
.sup-qtys .mo-cost { padding: 0; flex-wrap: nowrap; }
.sup-qtys .mo-cost input { width: 72px; height: 32px; padding: 0 8px; text-align: right; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: inherit; }

/* Admin → System (AUDIT G6) */
.sys { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; padding: 16px; align-items: start; }
.sys-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.sys-card h2 { font-size: 15px; margin: 0 0 10px; }
.sys-card h3 { font-size: 13px; margin: 12px 0 6px; color: var(--ink-2); }
.sys-wide { grid-column: 1 / -1; }
.sys-list { margin: 0; padding-left: 18px; }
.sys-list li { margin: 4px 0; }
.sys-writes td, .sys-writes th { white-space: nowrap; }

/* ---------- can't reach the tracker (AUDIT FE-3): one strip, both layouts ---------- */
.net-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; gap: 12px; padding: calc(6px + env(safe-area-inset-top)) 16px 6px; background: var(--problem); color: var(--on-problem); font-weight: 600; font-size: 14px; text-align: center; }
.net-strip button { min-height: 44px; padding: 0 14px; border-radius: var(--r-control, 6px); border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.net-strip[hidden] { display: none; }
.fallback-note { margin: 0; padding: 8px 16px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13px; text-align: center; }

/* Phone To Order: the desktop-only blocks, read-only (AUDIT FE-2) */
.desk-note { margin: 16px 16px 4px; color: var(--ink-2); font-size: 14px; }
.desk-only summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.desk-only summary::-webkit-details-marker { display: none; }
.ro-line { padding: 8px 16px; border-top: 1px solid var(--line); font-size: 14px; }

/* Touch targets (AUDIT FE-11): 44 px wherever a finger is the pointer. */
@media (pointer: coarse) {
    .ck-all, .tick .check, .btn-small, .btn-sm, .chip, .ck-undo, .row-more, .code-chip, .shelf-chip, .net-strip button { min-height: 44px; }
    .ck-more, .row-more, .tick .check { min-width: 44px; }
    .ck-undo { padding: 8px 10px; margin: -8px 0; }
    .tick .check { width: 44px; height: 44px; }
}

/* ---------- Vendor passwords (10/25): hidden by default, eye for 30 s, copy without showing ---------- */
.vg td.k-secret .vg-v { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.vg th.k-secret .vg-hlabel { padding: 0 8px; font-weight: 600; }
.vs-dots { letter-spacing: 1px; color: var(--ink-2, var(--ink)); }
.vs-val { user-select: all; padding: 1px 4px; border-radius: 4px; background: var(--surface-2, var(--surface)); border: 1px solid var(--line); color: var(--ink); }
.vs-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font-size: 12px; }
.vs-btn:hover, .vs-btn:focus-visible { border-color: var(--line); background: var(--surface-2); }
.vs-btn svg { width: 15px; height: 15px; }
.vs-btn[data-act="vs-hide"] { width: auto; padding: 0 6px; }
.vs-set { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; }
.vs-err:empty { display: none; }
.vs-err { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r-control); background: var(--problem-bg); color: var(--problem-ink); font-size: 13px; font-weight: 600; }

/* ---------- Safe updates (Part A, 10/25): the Update bar, "Saving…", What's new ---------- */
/* The bar sits above everything and pushes the page down by its own height (--pt-upd-h), so it never
   covers the top bar or a button. Big enough to tap on a phone; it stays until it's tapped. */
.pt-update { position: fixed; top: 0; left: 0; right: 0; z-index: 9600; padding-top: env(safe-area-inset-top); background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); }
.pt-update[hidden] { display: none; }
.pt-update button { display: block; width: 100%; min-height: 52px; padding: 10px 16px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; text-align: center; cursor: pointer; }
.pt-update button:disabled { cursor: progress; opacity: 0.8; }
.pt-update.required { background: var(--problem); color: var(--on-problem); }
body.pt-upd-on { padding-top: var(--pt-upd-h, 0px); }
body.pt-upd-on .net-strip { top: var(--pt-upd-h, 0px); }
body.pt-upd-on #app:has(> .desk) { height: calc(100vh - var(--pt-upd-h, 0px)); }
body.pt-upd-on .nav { bottom: 0; }
/* A required update: the screen behind the bar takes no taps until it's updated. */
.pt-update-shield { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.45); }
.pt-update-shield[hidden] { display: none; }
.pt-update-shield p { max-width: 420px; margin: 0; padding: 18px 20px; border-radius: var(--r-panel, 10px); background: var(--surface); color: var(--ink); font-size: 16px; line-height: 1.4; text-align: center; box-shadow: var(--shadow-float); }

/* "Saving…" / "Saved" / a tap that didn't save: a small pill, top centre (under the Update bar), clear of
   the screen's own messages, the What's new card and the phone nav at the bottom. */
.pt-saving { position: fixed; left: 50%; top: calc(var(--pt-upd-h, 0px) + 10px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 9400; max-width: calc(100vw - 32px); padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--surface); font-weight: 700; font-size: 14px; text-align: center; box-shadow: var(--shadow-float); }
.pt-saving[hidden] { display: none; }
.pt-saving.ok { background: var(--ok); color: var(--surface); }
.pt-saving.bad { border-radius: 12px; background: var(--problem); color: var(--on-problem); }
.pt-saving button { margin-left: 8px; min-height: 32px; padding: 0 12px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
body:has(.desk) .pt-saving { top: calc(var(--pt-upd-h, 0px) + 12px); }

/* What's new: a small card, dismissed with Got it; the full history opens the same card. */
.pt-news { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 9300; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-panel, 10px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); }
body:has(.desk) .pt-news { bottom: 20px; }
.pt-news-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 6px; font-size: 16px; }
.pt-news-x { min-width: 36px; min-height: 36px; border: 0; background: transparent; color: var(--ink-2); font-size: 16px; cursor: pointer; }
.pt-news-body { overflow: auto; padding: 0 14px; }
.pt-news-body h3 { margin: 10px 0 4px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.pt-news-body ul { margin: 0; padding-left: 18px; }
.pt-news-body li { margin: 4px 0; line-height: 1.4; }
.pt-news-foot { display: flex; justify-content: flex-end; padding: 10px 14px 12px; }
.side-news, .topbar-news { color: inherit; }

/* ---------- Sending a held list (B1): progress, then where each write ended up ---------- */
.held-progress { height: 10px; margin: 12px 0 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.held-progress span { display: block; height: 100%; background: var(--accent); transition: width 0.25s ease; }
.held-stop { padding: 10px 12px; border-radius: var(--r-control, 6px); background: var(--warn-bg); color: var(--warn-ink); }
.held-sum { margin: 8px 0; border: 1px solid var(--line); border-radius: var(--r-control, 6px); }
.held-sum summary { padding: 8px 12px; cursor: pointer; }
.held-sum ul { margin: 0; padding: 0 12px 10px 32px; max-height: 30vh; overflow: auto; }
.held-sum li { margin: 3px 0; overflow-wrap: anywhere; }

/* ---------- Dates on big builds (Part D): On site, Parts needed by, the quiet "No upcoming date" ---------- */
.pill-onsite { margin-left: 6px; background: var(--ok); color: var(--surface); }
.needed-by { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.visit-quiet { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
.op-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0; }
.op-date { display: inline-flex; align-items: center; gap: 8px; }
.op-date input[type="date"] { height: 32px; min-height: 0; padding: 0 8px; width: auto; }
.badge-muted.ck-visit { font-weight: 600; }

/* ---------- System in ten seconds (F3) ---------- */
.sys-card.plain { border-left: 4px solid var(--ok); }
.sys-card.plain.bad { border-left-color: var(--problem); }
.plain-head { margin: 0 0 4px; font-size: 20px; }
.sys-card.plain.ok .plain-head { color: var(--ok); }
.sys-card.plain.bad .plain-head { color: var(--problem); }
.plain-reason { margin: 0 0 12px; font-size: 15px; }
.plain-list { display: grid; gap: 8px; margin: 0; }
.plain-row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 12px; align-items: baseline; }
.plain-row dt { color: var(--ink-2); font-weight: 600; }
.plain-row dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .plain-row { grid-template-columns: 1fr; gap: 2px; } }
.sys-nerd { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; font-weight: 600; }
.sys-more { margin: 4px 2px 24px; }

/* ---------- Half a MacBook screen (~900px) and a 13-inch MacBook Air (~1280px) (F2, 10/25 batch) ----------
   The office gets the desk from 860px. Below 1100px the inspector slides over the list instead of squeezing
   it (a 900px screen would leave the list ~350px), and is never wider than the screen. The top search
   shrinks before anything else does. */
@media (max-width: 1099px) {
    .insp { width: min(var(--insp-w), calc(100vw - 96px)); }
    .main:has(> .insp:not(.closed)) > .list { margin-right: 0; }
    .main:has(> .insp:not(.closed)) > .insp { box-shadow: var(--shadow-float); }
    .top { gap: 8px; padding: 0 10px; }
    .top-search { width: auto; flex: 1 1 160px; min-width: 120px; max-width: 340px; }
    .pane-head { padding: 12px 12px 10px; gap: 8px; }
    .filter input { width: 180px; }
}
/* Orders at a 13-inch MacBook Air and at half a screen (F2): its six columns wanted 1,252px. The tags column
   gives way first, then hides (the order panel has them), then the readiness strip; titles truncate, with
   the whole title on hover. */
@container list (max-width: 1299px) {
    .orders-block { grid-template-columns: [tape] 124px [title] minmax(180px, 1fr) [otags] minmax(160px, 0.6fr) [drop] 190px [strip] minmax(120px, 170px) [count] 90px [end]; }
}
@container list (max-width: 999px) {
    .orders-block { grid-template-columns: [tape] 124px [title] minmax(160px, 1fr) [drop] 170px [strip] minmax(110px, 150px) [count] 84px [end]; }
    .orders-block .c-otags { display: none !important; }
}
@container list (max-width: 759px) {
    .orders-block { grid-template-columns: [tape] 124px [title] minmax(150px, 1fr) [drop] 160px [count] 80px [end]; }
    .orders-block .c-strip { display: none !important; }
}
.orders-block .c-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-search .ph { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.desk .sys-nerd { white-space: nowrap; }
.desk .sys-nerd input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; }
.sys > .sys-card.plain, .sys > .sys-more { grid-column: 1 / -1; max-width: 900px; }
.desk .op-onsite { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.desk .op-onsite input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; }

/* ---------- "Parts in inventory, Shop consumables, or neither?" (10/26): a slim line under the part ---------- */
.tg-row.ask-row { min-height: 0; background: var(--warn-bg); color: var(--warn-ink); border-bottom: 1px solid var(--line); }
.tg-row.ask-row:hover { background: var(--warn-bg); }
.tg-row > .ask-cell { grid-column: tape / end; height: auto; min-height: 34px; flex-wrap: wrap; gap: 6px; padding: 4px 8px; white-space: normal; }
.ask-q { font-weight: 600; margin-right: 4px; }
.ask-row .btn { height: 26px; padding: 0 10px; background: var(--surface); color: var(--ink); }
.ask-why { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 160px; color: inherit; opacity: 0.8; }

/* ---------- How to (10/26): a page over the screen, both layouts ---------- */
.pt-howto { position: fixed; inset: 0; z-index: 9200; display: flex; flex-direction: column; background: var(--page); color: var(--ink); padding-top: var(--pt-upd-h, 0px); }
.howto-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.howto-head h1 { margin: 0; font: 700 22px/1.1 var(--font-display, inherit); }
.howto-x { min-height: 40px; }
.howto-body { flex: 1; overflow: auto; padding: 12px 16px 48px; max-width: 760px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.howto-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.howto-toc a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 14px; background: var(--surface); }
.howto-sec { padding: 12px 14px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r-panel, 10px); background: var(--surface); transition: box-shadow 0.4s; }
.howto-sec.flash { box-shadow: 0 0 0 3px var(--accent); }
.howto-sec h2 { margin: 0 0 6px; font-size: 18px; }
.howto-sec p { margin: 0 0 6px; }
.howto-sec ul { margin: 0; padding-left: 20px; }
.howto-sec li { margin: 4px 0; line-height: 1.4; }
.howto-link { font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; background: transparent; border: 0; padding: 0 4px; cursor: pointer; min-height: 0; }
.topbar-sub { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; padding-left: 60px; min-height: 18px; }
.topbar-sub .synced { margin-top: 0; padding-left: 0; flex: 1; min-width: 0; }
.topbar-sub .howto-link { margin-left: auto; color: var(--on-chrome-2); font-size: 13px; }