/* Staff app shell. The "Calm" look: light grey ground, white surfaces, hairline borders, red only for identity and
   meaning, near-black ink. Builds on web/shared/tokens.css (loaded first); new tokens are added here only.
   Order: tokens, page, skip link, shell layout, sidebar, top bar, dock, sign-in, pages, touch screens. */

:root {
  --font: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ticket numbers only */
  --side: #0F0F11;
  --side-ink: #C4C4CC;
  --side-ink-strong: #FFFFFF;
  --side-hover: #1C1C21;
  --dock: #16161A;
  /* The red marker on the dark menus: UGA red is 2.6-2.9:1 there; this is the lightest step of it reaching 3:1 on
     #0F0F11 (3.48), #16161A (3.28) and the active item #1C1C21 (3.08). UGA red stays everywhere else. */
  --accent-on-dark: #D0103A;
  /* The sign-in panel (board V) and its three text steps: 19.2, 11.6 and 8.1 to 1 on the panel. */
  --signin-panel: #0F0F11;
  --signin-ink: #FFFFFF;
  --signin-ink-soft: #C9C9CE;
  --signin-ink-quiet: #A8A8B0;
  --signin-rule: #2A2A30;
  /* Here today time bars (old .sh-in / .sh-later / .sh-left, Index.html:2282-2284). Decorative: every bar has its
     times as text. On the white card: 8.8, 2.2 and 1.6 to 1; the now-line is --accent (6.6 to 1). */
  --bar-in: #2F4A7A;
  --bar-later: #9FB0CB;
  --bar-left: #C7CDD8;
  --bar-track: #F0F0F2;
  --row-hover: #FAFAFB;
  --sidebar-w: 208px; /* canvas 10.1: the sidebar under the header bar */
  --fs-tiny: 0.75rem; /* 12px: dock labels */
  --fs-title: 1.625rem;
}

html, body { min-height: 100%; }
body { -webkit-font-smoothing: antialiased; }
h1, h2 { margin: 0; letter-spacing: -0.01em; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: var(--radius-button);
  background: var(--text);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Shell layout ---------- */
.shell { --hdr-h: 0px; min-height: 100vh; min-height: 100dvh; }
.shell[data-layout="sidebar"] .shell-row {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}
.shell-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--hdr-h));
  min-height: calc(100dvh - var(--hdr-h));
}
#main { flex: 1; outline: none; }
#main:focus-visible { outline: none; }
.shell[data-layout="dock"] #main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }

/* ---------- Brand ---------- */
/* The shop logo and name: one link to Home. 24x28 shield beside the name; the name may wrap to two lines. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-radius: var(--radius-button);
  color: inherit;
  text-decoration: none;
}
.brand-logo { display: block; flex: none; width: 24px; height: 28px; }
.brand-name { font-weight: 600; font-size: var(--fs-base); line-height: 1.2; }
.brand:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Sidebar ---------- */
.shell-side { display: none; }
.shell[data-layout="sidebar"] .shell-side { display: block; background: var(--side); }
.sidebar-nav ul, .dock-list { list-style: none; margin: 0; padding: 0; }

/* === relayout: shell === */
/* The sidebar under the header bar (canvas 10.1 `.sb`): 208 px (--sidebar-w), padding 12px 10px, 44 px items (52 on
   touch), radius 6 px; the current item #1F1F23 white 600 with a 3 px red bar at its left edge; Settings in the foot at
   the bottom. On the sidebar layout the header bar sticks at the top and the sidebar sticks under it, so the dark column
   runs to the bottom of the screen after a scroll. #top-root holds the bar alone; the save notices have their own root
   (#notice-root) below it and scroll away with the page. */
@media screen {
  .shell[data-layout="sidebar"] #top-root { position: sticky; top: 0; z-index: 40; } /* over page menus (30), under the drawer (90) */
}
@media print {
  #notice-root { display: none; } /* screen alerts; they printed only where the header did */
  /* Every staff print is the page alone: no skip link, header bar, sidebar or dock, and the shell rows are plain blocks, so
     a print never keeps the sidebar's empty grid column (these were the schedule's unscoped print rules until the site
     review's I-1 fix scoped them; the page box itself stays the printer's portrait). */
  .skip-link, .shell-side, #top-root, .shell-dock { display: none !important; }
  .shell, .shell-row, .shell[data-layout="sidebar"] .shell-row, .shell-column { display: block; min-height: 0; }
  #main, .shell[data-layout="dock"] #main { padding: 0; }
}
html:has(.shell[data-layout="sidebar"]) { scroll-padding-top: 56px; } /* focus and scrollIntoView stop below the bar (--hdr-h) */
.sidebar {
  position: sticky;
  top: var(--hdr-h);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--hdr-h));
  height: calc(100dvh - var(--hdr-h));
  overflow-y: auto;
  padding: 12px 10px;
  background: var(--side);
  color: var(--side-ink);
}
.sidebar-nav { flex: 1 0 auto; display: flex; flex-direction: column; }
.sidebar-nav ul { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav .sidebar-foot { margin-top: auto; padding-top: 12px; } /* beats `.sidebar-nav ul { margin: 0 }` */
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-button);
  color: var(--side-ink);
  font-weight: 600;
  text-decoration: none;
}
.sidebar-link:hover { background: var(--side-hover); color: var(--side-ink-strong); }
.sidebar-link[aria-current="page"] { background: #1F1F23; color: var(--side-ink-strong); }
.sidebar-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent-on-dark); /* the shell's red on the dark column: 3.5:1 (--accent is 2.9:1 on #0F0F11) */
}
.sidebar :focus-visible, .dock :focus-visible { outline-color: #8FB4FF; }
@media (min-width: 1200px) {
  /* the Stock split's sticky part panel stops under the header bar */
  .shell[data-layout="sidebar"] .sk-split .sk-panel {
    top: calc(var(--hdr-h) + 12px);
    max-height: calc(100vh - var(--hdr-h) - 24px);
    max-height: calc(100dvh - var(--hdr-h) - 24px);
  }
}
@media (pointer: coarse) {
  .sidebar-link { min-height: 52px; }
}
/* === end relayout: shell === */
.icon { flex: none; display: block; }

/* === relayout: header === */
/* The header bar over the shell (canvas 10.1 `.ab`; board 11.2 `.tb`): dark 56 px with the sidebar, light 64 px with the
   dock (L1). Logo block 172 px, the empty search slot (L4) takes the field's room, the avatar is a 36 px circle (L5). */
.shell[data-layout="sidebar"] { --hdr-h: 56px; }
.shell[data-layout="dock"] { --hdr-h: 64px; }
.hdr-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 0 20px;
  padding-top: max(0px, env(safe-area-inset-top));
  background: var(--side);
  color: #FFFFFF;
}
.hdr-bar[data-tone="light"] {
  min-height: 64px;
  padding-left: 28px;
  padding-right: 28px;
  border-bottom: 1px solid var(--line);
  background: #FFFFFF;
  color: var(--text);
}
.hdr-logo { flex: none; width: 172px; min-width: 0; }
.hdr-bar .brand { min-height: 44px; color: inherit; }
.hdr-bar .brand-name { font-size: 1.0625rem; font-weight: 700; white-space: nowrap; } /* 17px */
.hdr-search { flex: 1 1 auto; max-width: 520px; min-width: 0; }
.hdr-spacer { flex: 1 1 0; min-width: 0; }
.hdr-bar .note { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-bar .live { flex: none; white-space: nowrap; }
.hdr-bar[data-tone="dark"] .live { color: #C9C9CE; }
.hdr-bar[data-tone="dark"] .live .status-ok { color: #C9C9CE; } /* the green word is 3.6:1 on #0F0F11; the dot keeps the green */
.hdr-bar[data-tone="dark"] .note { border-color: #2A2A30; color: #C9C9CE; }
.hdr-bar[data-tone="dark"] .note-warn { border-color: var(--warn); color: #FFFFFF; }
.hdr-bar[data-tone="dark"] .nf-button { color: #FFFFFF; }
.hdr-bar[data-tone="dark"] .nf-button:hover, .hdr-bar[data-tone="dark"] .brand:hover { background: var(--side-hover); }
.hdr-bar[data-tone="dark"] :focus-visible { outline-color: #8FB4FF; }
.hdr-bar .nf-button { flex: none; }
/* Task 10: the notifications panel renders inside the bar; it takes the page ink and focus ring back (not the dark bar's). */
.hdr-bar .dialog-backdrop { color: var(--text); }
.hdr-bar[data-tone="dark"] .dialog :focus-visible { outline-color: var(--focus); }
.hdr-new { flex: none; min-height: 38px; padding: 0 14px; font-size: 0.90625rem; white-space: nowrap; } /* 14.5px */
.hdr-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.hdr-avatar:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hdr-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E4E4E8;
  color: var(--text);
  font-size: 0.8125rem; /* 13px */
  font-weight: 700;
}
.hdr-name { display: none; white-space: nowrap; }
@media (min-width: 1280px) {
  .hdr-name { display: inline; }
  .hdr-avatar { padding-right: 4px; }
}
@media (max-width: 640px) {
  .hdr-bar, .hdr-bar[data-tone="light"] { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .hdr-logo { width: auto; }
}
@media (pointer: coarse) {
  .hdr-new { min-height: 44px; }
}
/* === end relayout: header === */

/* ---------- Header notes and the live dot ---------- */
.live { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.live .status-ok { color: var(--ok); }
.note {
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-small);
  color: var(--muted);
}
.note-warn { color: var(--text); border-color: var(--warn); }

/* ---------- Dock ---------- */
.shell-dock { display: none; }
.shell[data-layout="dock"] .shell-dock { display: block; }
.dock {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 50;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border: 1px solid #2A2A30;
  border-radius: 16px;
  background: var(--dock);
  color: var(--side-ink);
}
.dock-new {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 52px;
  margin-right: 4px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #FFFFFF;
  cursor: pointer;
}
.dock-new:hover { background: var(--accent-hover); }
.dock-new .icon { width: 22px; height: 22px; }
.dock-list { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.dock-list::-webkit-scrollbar { display: none; }
.dock-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 64px;
  height: 52px;
  padding: 0 6px;
  border-radius: 10px;
  color: var(--side-ink);
  font-size: var(--fs-tiny);
  font-weight: 600;
  text-decoration: none;
}
.dock-link:hover { background: var(--side-hover); color: var(--side-ink-strong); }
/* The marker: the current page's link, or More when the current page is in its sheet (aria-current="true"). */
.dock-link[aria-current] { background: var(--side-hover); color: var(--side-ink-strong); }
.dock-link[aria-current]::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent-on-dark);
}
/* More: a real button that looks like the links beside it. */
.dock-more { border: 0; background: transparent; font-family: inherit; line-height: inherit; cursor: pointer; }
.dock-more[aria-expanded="true"] { background: var(--side-hover); color: var(--side-ink-strong); }

/* === relayout: dock === */
/* Compact dock (phones: below DOCK_ALL_MIN in nav.js, where every item no longer fits at its full width): the + keeps its
   48 px (DOCK_SIZES.plus), the four destinations and More share the rest equally, 48 px each on a 320 px screen
   (dockCompactSlot). Every target 44 x 44 px and up. */
.dock-compact { left: 6px; right: 6px; transform: none; max-width: 480px; margin: 0 auto; padding: 4px; gap: 2px; border-radius: 14px; }
.dock-compact .dock-new { flex: none; width: 48px; padding: 0; margin-right: 0; border-radius: 10px; }
.dock-compact .dock-list { flex: 5 1 0; min-width: 0; }
.dock-compact .dock-list > li { display: flex; flex: 1 1 0; min-width: 0; }
.dock-compact .dock-link { flex: 1; min-width: 0; padding: 0 1px; font-size: 0.6875rem; letter-spacing: -0.02em; }
/* === end relayout: dock === */

/* More's sheet: above the dock at its right end, one 48px row per destination. Not a dialog: nothing is trapped. */
.dock-sheet {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: min(240px, 100%);
  padding: 6px;
  border: 1px solid #2A2A30;
  border-radius: 14px;
  background: var(--dock);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.dock-sheet[hidden] { display: none; }
.dock-sheet-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.dock-sheet-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--side-ink);
  font-weight: 600;
  text-decoration: none;
}
.dock-sheet-link:hover { background: var(--side-hover); color: var(--side-ink-strong); }
.dock-sheet-link[aria-current="page"] { background: var(--side-hover); color: var(--side-ink-strong); }
.dock-sheet-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent-on-dark);
}

/* ---------- Sign-in (board V) ----------
   Two columns from 900px: the dark panel (logo, clock, date, two quiet numbers, today's hours and people) and the PIN
   pad on the grey ground. Below 900px they stack, the panel first and compact (the numbers in one row). */
.signin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr); /* stacked: the panel takes only its height, the pad the rest */
  min-height: 100vh;
  min-height: 100dvh;
}
.signin-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px 16px 18px;
  padding-top: max(18px, env(safe-area-inset-top));
  background: var(--signin-panel);
  color: var(--signin-ink);
}
.signin-panel p, .signin-facts, .signin-facts dd { margin: 0; }
.signin-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.signin-logo { display: block; flex: none; width: 32px; height: auto; }
.signin-brand-name { font-size: var(--fs-base); font-weight: 600; color: var(--signin-ink); overflow-wrap: anywhere; }
.signin-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.signin-clock {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--signin-ink);
}
.signin-date { font-size: 1.0625rem; color: var(--signin-ink-soft); }
.signin-facts { display: flex; flex-wrap: wrap; gap: 12px 36px; }
.signin-fact { display: flex; flex-direction: column-reverse; gap: 2px; }
.signin-fact-value {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--signin-ink);
}
.signin-fact-label { font-size: var(--fs-small); color: var(--signin-ink-quiet); }
.signin-today {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  min-height: calc(14px + 1.4em); /* the rule stays put when there are no facts */
  padding-top: 14px;
  border-top: 1px solid var(--signin-rule);
  font-size: var(--fs-base);
  color: var(--signin-ink-soft);
}
.signin-people { color: var(--signin-ink-quiet); }

.signin-form {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 22px 16px 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.signin-form-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; max-width: 100%; }
.signin-title { font-size: 1.875rem; font-weight: 700; text-align: center; outline: none; }
.signin-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.signin-error {
  min-height: 1.4em;
  max-width: 300px;
  margin: -6px 0 0;
  color: var(--accent-text);
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}
.signin-live { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }

@media (min-width: 900px) {
  .signin { grid-template-columns: clamp(380px, 40vw, 520px) minmax(0, 1fr); grid-template-rows: auto; }
  .signin-panel {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    gap: 0;
    padding: 44px 48px 40px;
  }
  .signin-logo { width: 40px; }
  .signin-now { display: block; margin-top: auto; }
  .signin-clock { font-size: 4rem; }
  .signin-date { margin-top: 10px; font-size: 1.25rem; }
  .signin-facts { gap: 40px; margin-top: 36px; }
  .signin-today { display: block; min-height: calc(22px + 2.8em); margin-top: auto; padding-top: 18px; }
  .signin-today p + p { margin-top: 4px; }
  .signin-form { padding: 40px 32px; }
  .signin-form-inner { gap: 22px; }
}

/* === relayout: enter === */
/* The sign-in motion (Round 11, canvas note r11-time; boards 11.1, 11.2, 11.4; enter.js). One aria-hidden overlay over
   the real signed-in page: the PIN side on the sign-in ground, the panel's info, and the solid #0F0F11 layers that move
   (sidebar: the body narrowing to 208 px and the 56 px bar stretching right, one L-shaped move, plus the mark flying to
   the header spot; dock: the panel clipping down into the dock pill). The header bar, sidebar and dock sit above the
   overlay with their own grounds cleared while it plays, so their contents fade in on the moving layers. Each row of
   enterLayers is one @keyframes enter-<name> played as `<end-start>ms <ease> <start>ms both`. With reduced motion the
   overlay sits over everything and only fades: one 200 ms linear crossfade, nothing moves or blurs. */
.enter { position: fixed; inset: 0; z-index: 39; overflow: hidden; pointer-events: none; } /* over the page and its menus (30), under the bar (40) */
.enter-layer, .enter-at { position: absolute; }
.enter-at > .signin-panel, .enter-at > .signin-form { position: static; width: 100%; height: 100%; }
.enter-pin { inset: 0; background: var(--bg); }
.enter-body { left: 0; top: 0; bottom: 0; width: var(--enter-body-w, 520px); background: var(--side); transform-origin: 0 0; }
.enter-bar { left: 0; top: 0; width: 100%; height: 56px; background: var(--side); transform-origin: 0 0; transform: scaleX(var(--enter-bar-from, 1)); }
.enter-pill { inset: 0; background: var(--side); clip-path: var(--enter-pill-from); }
.enter-logo { transform-origin: 0 0; transform: var(--enter-logo-from, none); }
.enter-logo > img { display: block; width: 100%; height: 100%; }
.enter-block { position: fixed; inset: 0; z-index: 99; } /* input off from 0 to 360 ms: it eats every press */

@media (prefers-reduced-motion: no-preference) {
  .shell[data-enter="play"] .enter-info .signin-panel { background: transparent; } /* the body or pill layer is its ground */
  .shell[data-enter="play"] .enter[data-layout="sidebar"] .enter-info .signin-logo { visibility: hidden; } /* the mark flies */
  .shell[data-enter="play"] .enter-pin { animation: enter-pin 200ms cubic-bezier(.4,0,1,1) 0ms both; }
  .shell[data-enter="play"] .enter-info { animation: enter-info 220ms cubic-bezier(.4,0,1,1) 0ms both; }
  .shell[data-enter="play"] .enter-body { animation: enter-body 480ms cubic-bezier(.32,.72,0,1) 40ms both; }
  .shell[data-enter="play"] .enter-bar { animation: enter-bar 480ms cubic-bezier(.32,.72,0,1) 40ms both; }
  .shell[data-enter="play"] .enter-logo { animation: enter-logo 480ms cubic-bezier(.32,.72,0,1) 40ms both; }
  .shell[data-enter="play"] .enter-pill { animation: enter-pill 520ms cubic-bezier(.32,.72,0,1) 40ms both; }
  /* the shell's own parts over the overlay, their grounds cleared: the layers below draw the dark shapes */
  .shell[data-enter="play"][data-layout="dock"] #top-root { position: relative; z-index: 41; }
  .shell[data-enter="play"] .sidebar,
  .shell[data-enter="play"] .shell-side,
  .shell[data-enter="play"] .hdr-bar[data-tone="dark"] { z-index: 41; background: transparent; } /* z-index: the sticky sidebar */
  .shell[data-enter="play"] .dock { border-color: transparent; background: transparent; }
  .shell[data-enter="play"] .hdr-bar[data-tone="dark"] .brand-logo { visibility: hidden; } /* the flying mark lands here */
  /* the header contents (search slot, Live, New repair, avatar; the light bar whole) */
  .shell[data-enter="play"] .hdr-bar[data-tone="dark"] > *,
  .shell[data-enter="play"] .hdr-bar[data-tone="light"] { animation: enter-header 240ms cubic-bezier(.2,0,0,1) 320ms both; }

  /* Task 12: the staggered rows, each family one keyframes delayed by --i (enterLayers nav-<i>, dock-<i>, card-<g>) */
  /* the sidebar items, 25 ms apart from 380 (Settings, in the foot, is the 8th) */
  .shell[data-enter="play"] .sidebar-nav li { animation: enter-nav 200ms cubic-bezier(.2,0,0,1) calc(380ms + 25ms * var(--i, 0)) both; }
  .shell[data-enter="play"] .sidebar-nav > ul:not(.sidebar-foot) > li:nth-child(1) { --i: 0; }
  .shell[data-enter="play"] .sidebar-nav > ul:not(.sidebar-foot) > li:nth-child(2) { --i: 1; }
  .shell[data-enter="play"] .sidebar-nav > ul:not(.sidebar-foot) > li:nth-child(3) { --i: 2; }
  .shell[data-enter="play"] .sidebar-nav > ul:not(.sidebar-foot) > li:nth-child(4) { --i: 3; }
  .shell[data-enter="play"] .sidebar-nav > ul:not(.sidebar-foot) > li:nth-child(5) { --i: 4; }
  .shell[data-enter="play"] .sidebar-nav > ul:not(.sidebar-foot) > li:nth-child(6) { --i: 5; }
  .shell[data-enter="play"] .sidebar-nav > ul:not(.sidebar-foot) > li:nth-child(7) { --i: 6; }
  .shell[data-enter="play"] .sidebar-foot > li { --i: 7; }
  /* the dock's + and then its items, 30 ms apart from 420 */
  .shell[data-enter="play"] .dock-new,
  .shell[data-enter="play"] .dock-list > li { animation: enter-dock 200ms cubic-bezier(.2,0,0,1) calc(420ms + 30ms * var(--i, 0)) both; }
  .shell[data-enter="play"] .dock-list > li:nth-child(1) { --i: 1; }
  .shell[data-enter="play"] .dock-list > li:nth-child(2) { --i: 2; }
  .shell[data-enter="play"] .dock-list > li:nth-child(3) { --i: 3; }
  .shell[data-enter="play"] .dock-list > li:nth-child(4) { --i: 4; }
  .shell[data-enter="play"] .dock-list > li:nth-child(5) { --i: 5; }
  .shell[data-enter="play"] .dock-list > li:nth-child(6) { --i: 6; }
  .shell[data-enter="play"] .dock-list > li:nth-child(7) { --i: 7; }
  .shell[data-enter="play"] .dock-list > li:nth-child(8) { --i: 8; }
  /* Home's six groups (home.js; another page: #main whole is group 1), 35 ms apart from 360: they fade in and rise
     while the frost over each clears. The frost exists only while this plays, so nothing blurs after 900 ms. */
  .shell[data-enter="play"] [data-enter-group] {
    position: relative;
    animation: enter-card-fade 180ms linear calc(360ms + 35ms * var(--i, 0)) both, enter-card-rise 320ms cubic-bezier(.2,.8,.2,1) calc(360ms + 35ms * var(--i, 0)) both;
  }
  .shell[data-enter="play"] [data-enter-group]::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: 2;
    border-radius: 10px;
    pointer-events: none;
    background: rgba(245, 245, 246, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    animation: enter-frost 260ms cubic-bezier(.2,0,0,1) calc(440ms + 35ms * var(--i, 0)) both;
  }
  .shell[data-enter="play"] [data-enter-group="1"] { --i: 0; }
  .shell[data-enter="play"] [data-enter-group="2"] { --i: 1; }
  .shell[data-enter="play"] [data-enter-group="3"] { --i: 2; }
  .shell[data-enter="play"] [data-enter-group="4"] { --i: 3; }
  .shell[data-enter="play"] [data-enter-group="5"] { --i: 4; }
  .shell[data-enter="play"] [data-enter-group="6"] { --i: 5; }
  /* a part drawn after 360 ms (enter.js marks the ones on screen then): Home's data just appears, no second motion */
  .shell[data-enter="play"][data-enter-live] [data-enter-group]:not([data-enter-on]) { animation: none; }
  .shell[data-enter="play"][data-enter-live] [data-enter-group]:not([data-enter-on])::before { content: none; }
}
@keyframes enter-pin { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.98); } }
@keyframes enter-info { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-32px); } }
@keyframes enter-body { from { transform: none; } to { transform: scaleX(var(--enter-body-to, .4)); } }
@keyframes enter-bar { from { transform: scaleX(var(--enter-bar-from, 1)); } to { transform: none; } }
@keyframes enter-logo { from { transform: var(--enter-logo-from, none); } to { transform: none; } }
@keyframes enter-pill {
  from { clip-path: var(--enter-pill-from); background-color: var(--side); }
  to { clip-path: var(--enter-pill-to); background-color: var(--dock); }
}
@keyframes enter-header { from { opacity: 0; } to { opacity: 1; } }
@keyframes enter-nav { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes enter-dock { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes enter-card-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes enter-card-rise { from { transform: translateY(12px) scale(.985); } to { transform: none; } }
@keyframes enter-frost { from { opacity: 1; } to { opacity: 0; } }
@keyframes enter-fade { from { opacity: 1; } to { opacity: 0; } }

.shell[data-enter="reduced"] .enter { z-index: 60; animation: enter-fade 200ms linear 0ms both; } /* over the shell and the dock (50) */
@media (prefers-reduced-motion: reduce) {
  /* also when the setting changes during the motion; !important beats the 0.01ms rule for everything under reduce */
  .shell[data-enter] .enter { z-index: 60; animation: enter-fade 200ms linear 0ms both !important; }
}
/* === end relayout: enter === */

/* ---------- Pages ---------- */
.page { max-width: 1040px; padding: 28px 28px 40px; }
.page-title { width: fit-content; font-size: var(--fs-title); margin-bottom: 20px; outline: none; }
.page-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.row-label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--muted);
}

.empty { color: var(--muted); }
.empty {
  padding: 28px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.panel {
  max-width: 640px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.panel-title { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: var(--fs-base); }
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row-end { justify-content: flex-end; }
.row-label { font-size: var(--fs-base); color: var(--text); }

.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.segmented-item {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.segmented-item:hover { color: var(--text); }
.segmented-item[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); }

/* ---------- Home (board X) ----------
   The DOM order is the reading order at every width (ruling R55): the main column (header, stats, lists), then the
   side column (actions, Here today, checklists, Notes). Under 1100px they simply stack in that order. From 1100px
   the grid places them side by side in two rows: the header row (greeting | buttons) and the content row (stats and
   lists | side cards). Both columns are subgrids of the page's rows, so the side cards start at the top of the stats
   however tall the greeting is; nothing is reordered. */
.home {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1440px;
}
.home-main, .home-side, .home-main-body, .home-side-body { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.home-main > *, .home-main-body > * { min-width: 0; }
@media (min-width: 1100px) {
  .home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 380px);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 20px 28px;
  }
  .home-main { grid-column: 1; grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; }
  .home-side { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; }
  .home-header { grid-row: 1; }
  .home-actions { grid-row: 1; align-self: end; justify-content: flex-end; }
  .home-main-body { grid-row: 2; }
  .home-side-body { grid-row: 2; }
}

.home-header { display: flex; flex-direction: column; gap: 4px; }
.home-eyebrow {
  margin: 0;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.home-title { margin: 0; font-size: var(--fs-title); font-weight: 700; overflow-wrap: anywhere; }
.home-stale { margin: 2px 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.home-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 8px;
  font-weight: 600;
  color: var(--accent-text);
}

.section-label {
  margin: 0;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-panel { min-width: 0; }
.home-panel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.section-count { font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Stats: two short rows, value over label. */
.stats { display: flex; flex-direction: column; gap: 14px; }
.stats-row-label { margin-bottom: 8px; }
.stats-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.stat-link:hover { border-color: #B9B9C0; }
.stat-value { font-size: 1.375rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-label { font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); line-height: 1.25; }
.stat-zero .stat-value { color: var(--muted); font-weight: 600; }
.stat-attention .stat-value { color: var(--accent-text); }
.stats-compact .stat { min-height: 0; padding: 8px 10px; }
.stats-compact .stat-value { font-size: 1.125rem; }
@media (max-width: 699px) {
  .stat-wide-only { display: none; }
  .stats-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Lists: white bordered panels, one row per item. Long typed text wraps and is clamped, never widens the page. */
.list-card { padding: 0; overflow: hidden; }
.list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  min-height: 52px;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
.list-row:first-child { border-top: 0; }
a.list-row:hover { background: var(--row-hover); }
a.list-row:focus-visible, .list-more:focus-visible { outline-offset: -3px; }
.li-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.li-name, .li-sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.li-name { font-weight: 600; }
.li-sub { font-size: var(--fs-small); color: var(--muted); }
.li-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
  max-width: 11rem;
  text-align: right;
}
.li-state { font-size: var(--fs-small); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.li-strong { font-size: var(--fs-base); }
.li-note { font-size: var(--fs-tiny); color: var(--muted); }
.li-flag { color: var(--text); font-weight: 600; }
.li-num, .li-code {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  color: var(--muted);
}
.age-hot { color: var(--accent-text); }
.tag {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: var(--fs-tiny);
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
  vertical-align: 1px;
  overflow-wrap: anywhere;
}
.list-more {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.list-more:hover { background: var(--row-hover); }
.list-more::after { content: " \203A"; white-space: pre; }
button.list-more { width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
button.list-more[aria-expanded="true"]::after { content: none; }
.list-empty { margin: 0; padding: 16px 14px; color: var(--muted); }

/* The two new buttons (not built in 2a). */
.home-actions { display: flex; gap: 10px; }
.home-action { flex: 1 1 0; min-width: 0; min-height: 44px; }
/* Not built yet: quiet, so they never look like they work (muted text 6.25:1 on white); still focusable. */
.home-action[aria-disabled="true"],
.home-action.btn-primary[aria-disabled="true"],
.home-action.btn-primary[aria-disabled="true"]:hover {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  cursor: not-allowed;
}

/* Here today: time bars. */
.ht-card { --ht-name: 72px; padding: 0; }
@media (max-width: 1099px) { .ht-card { --ht-name: 120px; } }
@media (max-width: 520px) { .ht-card { --ht-name: 76px; } }
.ht-body { padding: 12px 14px 14px; }
.ht-axis { position: relative; height: 18px; margin-left: calc(var(--ht-name) + 10px); container-type: inline-size; font-size: var(--fs-tiny); color: var(--muted); }
.ht-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ht-axis span:first-child { transform: none; }
.ht-axis span:last-child:not(:first-child) { transform: translateX(-100%); }
/* Labels read '10 AM' (about 37px): up to seven of them need about 53px a step, 318px in all. A narrower axis (phones,
   the wide Home's right column) shows every other one; the axis is decoration, every bar has its times as text. */
@container (max-width: 340px) {
  .ht-axis span:nth-child(even) { visibility: hidden; }
}
.ht-rows { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.ht-row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 22px; border-radius: 4px; cursor: default; }
.ht-row:focus-visible { outline-offset: 2px; }
.ht-name {
  flex: 0 0 var(--ht-name);
  width: var(--ht-name);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: 600;
}
.ht-track { position: relative; flex: 1; min-width: 0; height: 20px; border-radius: 3px; background: var(--bar-track); }
.ht-seg { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.ht-in { background: var(--bar-in); }
.ht-later { background: var(--bar-later); }
.ht-left { background: var(--bar-left); }
.ht-nowwrap { position: absolute; top: -3px; bottom: -3px; left: calc(var(--ht-name) + 10px); right: 0; pointer-events: none; }
.ht-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); }
.ht-tip {
  position: absolute;
  top: calc(100% + 4px);
  left: calc(var(--ht-name) + 10px);
  right: 0;
  z-index: 5;
  padding: 6px 10px;
  border-radius: var(--radius-button);
  background: var(--text);
  color: #FFFFFF;
  font-size: var(--fs-small);
  line-height: 1.35;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  pointer-events: none;
}
.ht-empty { margin: 0; padding: 16px 14px; color: var(--muted); }
.ht-daynote {
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.ht-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 14px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--bg);
}
.ht-hours { min-width: 0; font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.ht-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-left: auto;
  padding: 0 2px 0 10px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.ht-link:hover { text-decoration: underline; }

/* Today's checklists */
.cl-card { padding: 0; }
.cl-item { padding: 12px 14px; border-top: 1px solid var(--line); min-width: 0; }
.cl-item:first-child { border-top: 0; }
.cl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.cl-title { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cl-count { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-complete .cl-count { color: var(--ok); font-weight: 600; }

/* Notes: Handoff / My notes tabs, read-only. */
.nt-card { padding: 0; }
.nt-tabs { display: flex; gap: 4px; padding: 0 8px; border-bottom: 1px solid var(--line); }
.nt-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.nt-tab:hover { color: var(--text); }
.nt-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.nt-tab:focus-visible { outline-offset: -3px; }
.nt-badge {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bar-track);
  color: var(--text);
  font-size: var(--fs-tiny);
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nt-panel { max-height: 420px; overflow-y: auto; border-radius: 0 0 var(--radius-card) var(--radius-card); }
.nt-panel:focus-visible { outline-offset: -3px; }
.nt-list { margin: 0; padding: 0; list-style: none; }
.nt-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-top: 1px solid var(--line); min-width: 0; }
.nt-item:first-child { border-top: 0; }
.nt-text {
  overflow-wrap: anywhere;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.nt-done .nt-text { color: var(--muted); text-decoration: line-through; }
.nt-meta { font-size: var(--fs-tiny); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Repairs board (CalmBoard) ----------
   The header (title, Board | List, search), the KPI strip (filters), then the lanes: grey lanes (--lane) holding white
   cards with hairline borders. Lanes sit side by side and scroll inside; when five do not fit (iPad widths) the row
   scrolls sideways with snap and a shaded edge where more lanes are (#26; a shadow, no gradient). Under 700px one lane
   per screen width, swiped sideways, the page scrolling instead of the lane. Red (--accent-text) only for flags and Late.
   Contrast: --muted on white 6.25, on --lane 5.30; --accent-text on white 7.98; the search border #8A8A93 3.42 on white. */
.page-wide { max-width: none; }
.rb-page {
  --lane: #ECECEF;
  --hairline: #DEDEE2;
  --rb-top: 300px; /* top bar, title row, KPI strip and lane heading above a lane's list; owner 2026-11-13: lanes reach nearer the bottom */
  --rb-dock: 0px;
  --rb-lane-h: max(320px, calc(100dvh - var(--rb-top) - var(--rb-dock)));
}
.shell[data-layout="dock"] .rb-page { --rb-dock: 110px; } /* the floating dock covers the bottom */
.mono { font-family: var(--font-mono); }
.rb-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.rb-title { margin-bottom: 0; }
.rb-view { display: inline-flex; align-items: center; text-decoration: none; }
.rb-view[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.rb-search { flex: 0 1 340px; min-width: 200px; margin-left: auto; }
.rb-new { min-height: 44px; text-decoration: none; white-space: nowrap; } /* Polish P1: + New repair (the header bar's moved here) */
.rb-search-box { position: relative; }
.rb-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.rb-search-input {
  width: 100%;
  min-height: var(--tap);
  padding: 6px 10px 6px 34px;
  border: 1px solid #8A8A93;
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  -webkit-appearance: none;
  appearance: none;
}
.rb-search-input::placeholder { color: var(--muted); }

.rb-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.rb-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.rb-kpi:hover { border-color: #B9B9C0; }
.rb-kpi[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.rb-kpi-value { font-size: 1.25rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rb-kpi-label { max-width: 100%; font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); line-height: 1.25; }
.rb-kpi-zero .rb-kpi-value { color: var(--muted); font-weight: 600; }
.rb-kpi-attention .rb-kpi-value { color: var(--accent-text); }
.rb-stale { margin: -6px 0 10px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.rb-error { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.rb-loading, .rb-none { margin: 0; padding: 28px 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--muted); }

.rb-scroll { position: relative; }
.rb-scroll::before, .rb-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 6px;
  z-index: 1;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.rb-scroll::before { left: 0; box-shadow: inset 22px 0 16px -14px rgba(22, 22, 26, 0.22); }
.rb-scroll::after { right: 0; box-shadow: inset -22px 0 16px -14px rgba(22, 22, 26, 0.22); }
.rb-scroll[data-more-left="true"]::before, .rb-scroll[data-more-right="true"]::after { opacity: 1; }
.rb-lanes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr); /* five fit from 1366 wide with the sidebar */
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}
.rb-lanes[data-lanes="1"] { grid-auto-columns: minmax(0, 1fr); }
.rb-lane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 8px 8px;
  border-radius: var(--radius-card);
  background: var(--lane);
  scroll-snap-align: start;
}
.rb-lane-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; padding: 0 4px 8px; }
.rb-lane-title { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 0.875rem; font-weight: 700; }
.rb-lane-count { font-size: var(--fs-small); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.rb-lane-sub { font-size: var(--fs-tiny); color: var(--muted); }
.rb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: var(--rb-lane-h);
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  list-style: none;
}
.rb-lanes[data-lanes="1"] .rb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: start; max-height: none; }
.rb-list > li { min-width: 0; }
.rb-empty { margin: 0; padding: 6px 4px 8px; font-size: var(--fs-small); color: var(--muted); }
.rb-lane-foot { margin: 6px 4px 0; font-size: var(--fs-small); color: var(--muted); }
.rb-lane-foot a { color: var(--text); font-weight: 600; }

.rb-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
a.rb-card:hover { border-color: #B9B9C0; }
a.rb-card:focus-visible { outline-offset: 1px; }
.rb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.rb-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
  font-weight: 700;
}
.rb-num { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-tiny); color: var(--muted); }
.rb-problem, .rb-device { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; font-size: var(--fs-small); }
.rb-device { color: var(--muted); }
.rb-flag { display: flex; align-items: flex-start; gap: 5px; min-width: 0; font-size: var(--fs-small); font-weight: 600; color: var(--accent-text); }
.rb-flag .rb-icon { margin-top: 3px; }
.rb-flag-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
}
.rb-icon { flex: none; display: block; }
.rb-foot { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 3px; }
.rb-foot .tag { flex: none; white-space: nowrap; }
.rb-age { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--fs-tiny); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-left: auto;
  overflow: hidden;
  border-radius: 50%;
  background: var(--lane);
  color: var(--text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (max-width: 699px) {
  .rb-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rb-header { gap: 10px 12px; }
  .rb-search { flex: 1 1 100%; margin-left: 0; }
  .rb-lanes { grid-auto-columns: calc(100% - 28px); gap: 10px; }
  .rb-lanes[data-lanes="1"] { grid-auto-columns: 100%; }
  .rb-list, .rb-lanes[data-lanes="1"] .rb-list { display: flex; align-items: stretch; max-height: none; overflow: visible; }
}

/* ---------- Repairs list (CalmList) ----------
   The chip row (a pressed chip has an ink border), the Done status filter, then a white bordered table: muted small
   header labels, 46px rows, the customer bold with the ticket in mono beneath, the status as a dot and words, the age
   red (--accent-text, with a triangle and the word "late" for screen readers) when hot. table-layout: fixed and
   ellipsis keep typed text from widening the page. Under 700px each row is a stacked card with the same cells.
   Contrast: --muted on white 6.25, on --bg 5.74; --accent-text on white 7.98; chip border #B9B9C0 is decoration, the
   pressed state is also aria-pressed and the ink border (15.3 on white). */
.rl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; }
.rl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: var(--tap);
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-button);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
}
.rl-chip:hover { border-color: #B9B9C0; }
.rl-chip[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.rl-chip-count { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.rl-status { flex: none; }
.rl-page { --hairline: #DEDEE2; }

.rl-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.rl-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.rl-w-customer { width: 22%; }
.rl-w-device { width: 17%; }
.rl-w-status { width: 152px; } /* "Waiting on Parts" with its dot */
.rl-w-by { width: 13%; }
.rl-w-age { width: 104px; } /* the late triangle and "365 days" */
.rl-table th {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-table td {
  height: 46px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  unicode-bidi: isolate;
}
.rl-table tbody tr:last-child td { border-bottom: 0; }
.rl-table tbody tr:hover td { background: var(--row-hover); }
.rl-who { display: flex; flex-direction: column; min-width: 0; color: var(--text); text-decoration: none; }
a.rl-who:hover .rl-name { text-decoration: underline; }
a.rl-who:focus-visible { outline-offset: 1px; }
.rl-name, .rl-num, .rl-cut { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.rl-name { font-size: var(--fs-base); font-weight: 700; line-height: 1.25; }
.rl-num { font-size: var(--fs-tiny); color: var(--muted); line-height: 1.3; }
.rl-c-device { color: var(--muted); }
.rl-dev { display: flex; align-items: center; gap: 4px; min-width: 0; } /* the text truncates, the Mail-in tag never clips */
.rl-dev .tag { flex: none; white-space: nowrap; }
.rl-by-word { display: none; } /* the column header says it on wide screens */
.rl-hint { margin: -6px 0 12px; font-size: var(--fs-small); color: var(--muted); }
/* A newer answer is on its way (a chip, status or search change): the old rows stay, dimmed, with no layout change. */
.rb-board.is-pending, .rl-body.is-pending { opacity: 0.6; }
.rl-c-age { font-variant-numeric: tabular-nums; color: var(--muted); }
.rl-hot { color: var(--accent-text); font-weight: 600; }
.rl-icon { display: inline-block; margin-right: 4px; vertical-align: -1px; }
.status-in .status-dot { background: var(--bar-in); }
.rl-none { margin: 0; padding: 28px 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--muted); }
.rl-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.rl-shown { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }

/* iPad portrait and other mid widths: tighter cells so Problem keeps room. */
@media (min-width: 700px) and (max-width: 899px) {
  .rl-table th, .rl-table td { padding-left: 8px; padding-right: 8px; }
  .rl-w-status { width: 136px; }
  .rl-w-age { width: 86px; }
  .rl-w-device { width: 15%; }
  .rl-table th { white-space: normal; }
}

@media (max-width: 699px) {
  .rl-table-wrap { border: 0; background: transparent; overflow: visible; }
  .rl-table, .rl-table tbody, .rl-table tr, .rl-table td { display: block; width: 100%; }
  .rl-table colgroup { display: none; }
  /* Visually hidden, still read: screen readers keep the column names for the stacked rows. */
  .rl-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .rl-table tbody { display: flex; flex-direction: column; gap: 8px; }
  .rl-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
  }
  .rl-table td { height: auto; padding: 0; border: 0; }
  .rl-table tbody tr:hover td { background: transparent; }
  .rl-c-customer { grid-column: 1; grid-row: 1; }
  .rl-c-age { grid-column: 2; grid-row: 1; align-self: start; text-align: right; }
  .rl-c-device, .rl-c-problem { grid-column: 1 / -1; }
  .rl-c-status { grid-column: 1; margin-top: 4px; }
  .rl-c-by { grid-column: 2; margin-top: 4px; text-align: right; color: var(--muted); }
  .rl-c-by .rl-cut { display: inline; }
  .rl-by-word { display: inline; }
  .rl-blank { display: none !important; } /* a dash on its own line says nothing on a card */
  .rl-filters { gap: 8px; }
}

/* ---------- Repair record (CalmRepair) ----------
   A record to read: Back to repairs, the name, the ticket (mono), the device, the status chip (dot + word), the timer
   and the tags; then white panels with hairline borders in two columns from 1100px, one below. Typed text keeps its
   line breaks (pre-wrap), breaks anywhere rather than widening the page, and long text scrolls inside a bounded box.
   Contrast on white: --muted 6.25, --ok (the check) 5.33, --accent-text 7.98; nothing here is under 12px. */
.rr-page { --hairline: #DEDEE2; max-width: 1320px; min-width: 0; }
.rr-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  margin: -6px 0 10px -4px;
  padding: 0 6px 0 2px;
  border-radius: var(--radius-button);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.rr-back:hover { color: var(--text); text-decoration: underline; }
.rr-back-icon { flex: none; }
/* The header card's rules (name, ticket, timer, tags, device): the relayout: workspace block below. */

/* The two columns and the cards: the relayout: columns block. */
.rr-mgr { border-color: var(--text); border-style: dashed; }

.rr-dl { margin: 0; }
.rr-item { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 2px 16px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.rr-item:last-child { border-bottom: 0; }
.rr-dl dt { color: var(--muted); font-size: var(--fs-small); font-weight: 600; line-height: 1.5; }
.rr-dl dd { min-width: 0; margin: 0; overflow-wrap: anywhere; unicode-bidi: isolate; }
.rr-dl dd.mono { font-size: var(--fs-small); line-height: 1.6; }
.rr-contact { display: block; }
.rr-link { color: var(--text); text-decoration: underline; text-decoration-color: #9A9AA2; text-underline-offset: 2px; }
.rr-link:hover { text-decoration-color: currentColor; }
.rr-quiet { color: var(--muted); font-size: var(--fs-small); }
.rr-note { margin: 10px 0 2px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.rr-none { margin: 10px 0; color: var(--muted); }
.rr-older { margin: 8px 0 0; font-size: var(--fs-small); color: var(--muted); }

.rr-text { white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; min-width: 0; }
.rr-long {
  max-height: 14em;
  overflow-y: auto;
  padding: 6px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-field);
  background: #FAFAFB;
}

.rr-events { margin: 0; padding: 0; list-style: none; }
.rr-event { padding: 10px 0; border-bottom: 1px solid var(--hairline); min-width: 0; }
.rr-event:last-child { border-bottom: 0; }
.rr-ev-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; margin-bottom: 2px; }
.rr-ev-kind { font-weight: 700; overflow-wrap: anywhere; }
.rr-ev-when { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.rr-ev-who { min-width: 0; font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }

.rr-checks { margin: 0; padding: 0; list-style: none; }
.rr-check { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.rr-check:last-child { border-bottom: 0; }
.rr-icon { display: block; margin-top: 2px; }
.rr-icon-check { color: var(--ok); }
.rr-icon-dash { color: var(--muted); }
.rr-check-main { display: flex; flex-direction: column; min-width: 0; }
.rr-check-label { font-weight: 600; overflow-wrap: anywhere; }
.rr-check-detail { font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.rr-check-state { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.rr-check[data-state="present"] .rr-check-state { color: var(--ok); }
.rr-check[data-state="missing"] .rr-check-state { color: var(--muted); }

.rr-table { width: 100%; margin: 6px 0 4px; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-base); }
.rr-table th { padding: 8px 8px 6px 0; border-bottom: 1px solid var(--hairline); color: var(--muted); font-size: var(--fs-small); font-weight: 600; text-align: left; }
.rr-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; overflow-wrap: anywhere; unicode-bidi: isolate; }
.rr-table .rr-num-col { width: 88px; padding-right: 0; text-align: right; font-variant-numeric: tabular-nums; }
.rr-table th.rr-num-col:nth-last-child(2), .rr-table td.rr-num-col:nth-last-child(2) { width: 48px; padding-right: 8px; }
.rr-memo { margin-top: 12px; }
.rr-memo th:last-child, .rr-memo td:last-child { width: 84px; padding-left: 8px; padding-right: 0; }
.rr-caption { padding: 4px 0; text-align: left; font-size: var(--fs-small); font-weight: 700; }

@media (max-width: 640px) {
  .rr-item { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 640px) {
  .page { padding: 20px 16px 32px; }
  .brand-compact .brand-name { display: none; }
}

/* ---------- Touch screens: tap targets (16px typed text comes from tokens.css) ---------- */
@media (any-pointer: coarse) {
  .segmented-item { min-height: 44px; }
  .brand { min-height: 44px; min-width: 44px; }
  .nt-tab, .ht-link, .list-more { min-height: 44px; }
  .ht-row { min-height: 44px; }
  .rb-kpi, .rb-view, .rb-search-input { min-height: 44px; }
  .rb-search-input { font-size: 16px; } /* typed text 16px on touch (#111); the class rule above would win over tokens.css */
  .rb-lane-foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .rl-chip, .rl-more, .rb-retry { min-height: 44px; }
  a.rl-who { justify-content: center; min-height: 44px; }
  .rr-back { min-height: 44px; }
  .rr-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* No motion is used on these screens; anything added later stops for people who ask the system for less. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* === 2b: workspace === */
/* The record as the tech workspace (canvas boards R7Workspace, R7Complete, R7iPad): the header is a white card whose last
   row is the status changer (its menu holds the moves); the note composer opens the Log, the GSX field sits in Before
   closing; drawers slide in from the right (full screen under 700px). Bigger targets on touch screens.
   Contrast on white: --muted 6.25, --accent-text 7.98, white on --accent 6.9, white on --text 18. Nothing under 13px. */
/* The card itself, the owner and the actions row's place: the relayout: workspace block. */
/* The move row (status changer, Pick up): the relayout: status changer block. */
.ws-alert, .ws-status, .ws-line-alert, .ws-line-status { margin: 0; overflow-wrap: anywhere; unicode-bidi: plaintext; }
/* Owner 2026-11-13 (polish batch 1): `Moved to <status>` with Undo beside it for 10 seconds. */
.ws-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-status-row:has(.ws-undo) .ws-status { margin-top: 0; }
.ws-undo { min-height: 44px; padding: 0 14px; }
.ws-alert:not(:empty), .ws-line-alert:not(:empty) { margin-top: 8px; color: var(--accent-text); font-weight: 600; }
.ws-status:not(:empty), .ws-line-status:not(:empty) { margin-top: 8px; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.ws-confirm { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-confirm .btn { min-height: 46px; flex: 1 1 140px; }
.btn-dark { background: var(--text); border-color: var(--text); color: #FFFFFF; }
.btn-dark:not(:disabled):hover { background: #2E2E35; }

.ws-compose { padding: 12px 0 14px; border-bottom: 1px solid var(--hairline); }
.ws-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-chip { min-height: 36px; padding: 0 12px; }
.ws-say { display: flex; gap: 8px; margin-top: 10px; }
.ws-note-input { flex: 1; min-width: 0; min-height: 40px; }
.ws-note-add { min-height: 40px; padding: 0 18px; }

.ws-gsx { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.ws-gsx-row { display: flex; gap: 8px; margin-top: 6px; }
.ws-gsx-input { width: 12.5em; min-width: 0; min-height: 40px; letter-spacing: 0.02em; }
.ws-gsx-input[aria-invalid="true"] { border-color: var(--accent-text); }
.ws-gsx-save { min-height: 40px; }
.rr-check-has-add { grid-template-columns: 16px minmax(0, 1fr) auto auto; align-items: center; }
.rr-check-add { min-height: 30px; padding: 0 12px; font-size: var(--fs-small); }

.ws-lbl { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.ws-lbl-note { font-weight: 400; letter-spacing: 0; text-transform: none; } /* owner 2026-11-13: `· optional, goes to the Log` */
.ws-field { display: flex; flex-direction: column; min-width: 0; }
.ws-chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-chipset-big { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ws-pick { min-height: 40px; padding: 0 14px; }
.ws-pick[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #FFFFFF; }
.ws-pick[aria-pressed="true"]:not(:disabled):hover { background: #2E2E35; }
.ws-box { width: 100%; margin-top: 10px; }
.ws-area { min-height: 64px; resize: vertical; line-height: 1.4; }
.ws-field .ws-lbl + .ws-box { margin-top: 0; }
.ws-stamp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.ws-stamp-who { font-weight: 600; overflow-wrap: anywhere; }
.ws-stamp-note { margin-left: auto; color: var(--muted); font-size: var(--fs-small); }
.ws-kv { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.ws-kv-key { color: var(--muted); }
.ws-kv-val { font-weight: 600; overflow-wrap: anywhere; }
.ws-text-message {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-field);
  background: #FAFAFB;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
  user-select: all;
  -webkit-user-select: all;
}
.ws-copied { margin: 0; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }

/* The drawer (components.js Drawer). */
.drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(15, 15, 17, 0.38); }
.drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  background: var(--surface);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.14);
  outline: none;
}
.drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 14px; padding-top: max(18px, env(safe-area-inset-top)); border-bottom: 1px solid var(--hairline); }
.drawer-heading { flex: 1; min-width: 0; }
.drawer-title { margin: 0; font-size: 1.375rem; line-height: 1.2; }
.drawer-sub { margin: 2px 0 0; color: var(--muted); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.drawer-close { flex: none; }
.drawer-body { flex: 1; display: flex; flex-direction: column; gap: 18px; min-height: 0; padding: 16px 22px; overflow-y: auto; overscroll-behavior: contain; }
.drawer-foot { display: flex; gap: 10px; padding: 14px 22px; padding-bottom: max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); }
.ws-foot-btn { flex: 1; min-height: 46px; font-size: 1rem; }
.ws-foot-main { flex: 2; }
.drawer-alert { margin: 0; color: var(--accent-text); font-weight: 600; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.drawer-alert:empty { display: none; }

/* The refused-save notices under the top bar (pages.js SaveNotices). */
.save-notices { display: flex; flex-direction: column; gap: 6px; padding: 8px 28px; border-bottom: 1px solid var(--line); background: var(--surface); }
.save-notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-field); font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 699px) {
  .drawer { width: 100%; }
  .drawer-head, .drawer-body, .drawer-foot { padding-left: 16px; padding-right: 16px; }
  .ws-gsx-input { width: auto; flex: 1; }
  .save-notices { padding: 8px 16px; }
}
@media (any-pointer: coarse) {
  .drawer { width: min(640px, 100%); }
  .ws-chip, .ws-pick, .rr-check-add, .ws-gsx-save, .ws-note-add, .drawer-close { min-height: 44px; }
  .ws-chipset-big .ws-pick { min-height: 64px; font-size: 1.125rem; }
  .ws-foot-btn { min-height: 60px; font-size: 1.125rem; }
  .ws-note-input, .ws-gsx-input { min-height: 48px; }
}
/* === end 2b: workspace === */

/* === 2b: pickup === */
/* The pickup screen (pickup.js, the old pickupOpen: Index.html:11669) and the signature pad (shared/signature-pad.js): a full
   page the customer holds, so big targets, the wording in a quiet box, the pad full width under it, the checkout on the
   right from 900px. The canvas takes every touch (touch-action: none), so a finger draws and never scrolls the page. */
.pk-page { --hairline: #DEDEE2; max-width: 1320px; min-width: 0; }
.pk-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 16px; padding: 16px 20px;
  border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); margin-bottom: 16px; }
.pk-head-main { min-width: 0; }
.pk-title { margin-bottom: 4px; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.pk-sub { margin: 0; color: var(--muted); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.pk-when { margin: 4px 0 0; font-weight: 700; white-space: nowrap; }
.pk-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.pk-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pk-sec { min-width: 0; padding: 14px 18px 16px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); }
.pk-hd { margin: 0 0 10px; color: var(--muted); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.pk-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.pk-strong { margin: 0 0 4px; font-weight: 700; overflow-wrap: anywhere; }
.pk-quiet { margin: 6px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.pk-none { margin: 0 0 14px; font-weight: 600; }
.pk-back { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.pk-kv { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0; padding: 6px 0; }
a.ws-pickup { text-decoration: none; } /* the workspace's Pick up is a link to the pickup page */
.pk-sign .pk-kv { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.pk-k { color: var(--muted); }
.pk-v { font-weight: 600; text-align: right; overflow-wrap: anywhere; unicode-bidi: plaintext; min-width: 0; }
.pk-check { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 6px; font-weight: 600; cursor: pointer; }
.pk-check input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--text); }
.pk-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.pk-who { flex: 1 1 160px; min-height: 48px; font-size: 1rem; overflow-wrap: anywhere; }
.pk-name { width: 100%; margin-top: 10px; min-height: 48px; font-size: 1rem; }
.pk-wording { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--radius-field); background: #FAFAFB;
  white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.sig { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 12px; }
.sig-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 3;
  border: 1px solid var(--hairline);
  border-bottom: 2px solid var(--text);
  border-radius: var(--radius-field) var(--radius-field) 0 0;
  background: #FFFFFF;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: crosshair;
}
.sig-clear { align-self: flex-end; min-height: 40px; padding: 0 14px; }
.pk-lines { margin: 0; padding: 0; list-style: none; }
.pk-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.pk-line-name { min-width: 0; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.pk-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-tax { color: var(--muted); }
.pk-total { border-bottom: 0; padding-top: 10px; font-size: 1.25rem; font-weight: 700; }
.pk-charged { border-bottom: 0; border-top: 1px solid var(--hairline); }
.pk-nocharge { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-field); background: var(--bg); font-weight: 700; text-align: center; }
.pk-alert, .pk-status { margin: 0; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.pk-alert:not(:empty) { margin-top: 14px; color: var(--accent-text); font-weight: 600; }
.pk-status:not(:empty) { margin-top: 14px; color: var(--muted); font-weight: 600; }
.pk-foot { display: flex; gap: 12px; margin-top: 16px; padding: 14px 18px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); }
.pk-foot-btn { flex: 1; min-height: 56px; font-size: 1.0625rem; }
.pk-done { flex: 2; }
@media (min-width: 900px) {
  .pk-cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .pk-head, .pk-sec, .pk-foot { padding-left: 14px; padding-right: 14px; }
  .pk-when { margin-top: 0; }
}
@media (any-pointer: coarse) {
  .sig-clear { min-height: 44px; }
  .pk-who { min-height: 56px; font-size: 1.125rem; }
  .pk-foot-btn { min-height: 64px; font-size: 1.125rem; }
  .pk-name { min-height: 52px; }
}
/* Fix round 1: the customer holds the iPad, so the pickup page shows no staff navigation (main.js sets data-pickup on the
   shell): no dock, no sidebar. Relayout Task 10: the header shows the logo (not a link) and Live only: no search slot, no
   notes, no notifications, no New repair, no avatar link. Cancel is the way out. */
.shell[data-pickup="true"] .shell-dock, .shell[data-pickup="true"] .shell-side, .shell[data-pickup="true"] .hdr-search,
.shell[data-pickup="true"] .hdr-bar .note, .shell[data-pickup="true"] .hdr-bar .nf-button,
.shell[data-pickup="true"] .hdr-new, .shell[data-pickup="true"] .hdr-avatar { display: none; }
.shell[data-pickup="true"] .hdr-bar .brand { pointer-events: none; }
.shell[data-pickup="true"][data-layout="sidebar"] .shell-row { grid-template-columns: minmax(0, 1fr); }
.shell[data-pickup="true"][data-layout="dock"] #main { padding-bottom: env(safe-area-inset-bottom); }
/* === M7 === final fix wave (I1): the command bar's Undo toast is never over the customer's pickup */
.shell[data-pickup="true"] .ut-region { display: none; }
/* === end M7 === */
/* === end 2b: pickup === */

/* === 2b: money === */
/* The money screens (money-drawers.js, Task 14): the Charges block's buttons and payments list, the Charges, Payment,
   Estimate and Oral consent drawers, Take payment in the pickup checkout. Every block stands alone (a re-layout moves it).
   Contrast on white as the workspace block; nothing under 13px; 44px targets and 16px typed text on touch (tokens.css). */
.mn-act { min-height: 40px; padding: 0 14px; }
.mn-pays { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--hairline); }
.mn-pay { gap: 10px; }
.mn-pay-day { flex: none; min-width: 3.6em; color: var(--muted); font-size: var(--fs-small); }
.mn-pay .pk-line-name { flex: 1; }
.mn-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 6px 0; }
.mn-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mn-total { font-weight: 700; }
.mn-due { font-weight: 700; }
.mn-owed { color: var(--accent-text); }
.mn-sum { padding: 8px 12px; border-radius: var(--radius-field); background: var(--bg); }
.mn-sum .mn-total { font-size: 1.25rem; }
.mn-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.mn-money-input { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.mn-money-input:disabled { background: var(--bg); color: var(--muted); }
.mn-suggested, .mn-quiet { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--bg); color: var(--text); font-size: var(--fs-small);
  letter-spacing: 0; text-transform: none; }
.mn-paid-row { display: flex; gap: 8px; }
.mn-paid-row .field-input { flex: 1; min-width: 0; }
.mn-today { flex: none; }
.mn-bad { margin: 4px 0 0; color: var(--accent-text); font-weight: 600; }
.mn-none { margin: 0; padding: 10px 12px; border-radius: var(--radius-field); background: var(--bg); font-weight: 700; text-align: center; }
.mn-wording { margin: 0; font-weight: 600; overflow-wrap: anywhere; unicode-bidi: plaintext; white-space: pre-wrap; }
.mn-refund { margin-top: 0; }
.pk-pay { width: 100%; min-height: 46px; margin-top: 12px; }
@media (any-pointer: coarse) {
  .mn-act, .mn-today { min-height: 44px; }
}
/* Owner round 2026-11-08: Needs re-approval (charges above the pre-approved amount), a flag in the record header. */
.tag.mn-over { border-color: var(--accent-text); color: var(--accent-text); font-weight: 700; }
/* === end 2b: money === */

/* === 2b: check-in === */
/* The New repair page (checkin.js, canvas CalmCheckIn; the old form Index.html:3885-4010): one screen per step in a white card
   under a step bar, big one-tap chips first and a few boxes, the foot with Back and Next. Its own page component: nothing here
   touches the workspace. While the customer holds the iPad (Agreement, Questions) the shell shows no staff navigation. */
.ci-page { --hairline: #DEDEE2; max-width: 860px; min-width: 0; }
.ci-head { margin-bottom: 14px; }
.ci-title { margin-bottom: 12px; }
.ci-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ci-step { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 0 0; border-top: 4px solid var(--line); color: var(--muted);
  font-size: var(--fs-small); font-weight: 600; }
.ci-step-n { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ci-step-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-step-done { border-top-color: var(--text); color: var(--text); }
.ci-step-on { border-top-color: var(--accent); color: var(--text); font-weight: 700; }
.ci-step-on .ci-step-n { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.ci-card-sec { min-width: 0; padding: 18px 20px 20px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); }
.ci-screen[hidden] { display: none; }
.ci-h { margin: 0 0 14px; font-size: var(--fs-large); outline: none; }
.ci-h:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ci-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.ci-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 16px; }
.ci-lbl { margin: 0; font-weight: 600; }
.ci-input { width: 100%; min-width: 0; min-height: 44px; font-size: 1rem; }
textarea.ci-input { min-height: 96px; resize: vertical; }
.ci-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; }
.ci-warn { margin: 0; color: #7A4A00; font-size: var(--fs-small); font-weight: 600; } /* amber text at 4.5:1 or more */
.ci-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-chips-big { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ci-chip { min-height: 44px; padding: 0 16px; overflow-wrap: anywhere; }
.ci-chips-big .ci-chip { min-height: 56px; font-size: 1.0625rem; }
.ci-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #FFFFFF; }
.ci-chip[aria-pressed="true"]:not(:disabled):hover { background: #2E2E35; }
.ci-cands { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: #FAFAFB; }
.ci-card-list { margin: 8px 0 10px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ci-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px;
  border: 1px solid var(--hairline); border-radius: var(--radius-field); background: var(--surface); }
.ci-card-on { border-color: var(--text); }
.ci-card-main { min-width: 0; flex: 1 1 220px; }
.ci-card-name { margin: 0; font-weight: 700; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.ci-card-sub { margin: 2px 0 0; color: var(--muted); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.ci-terms { max-height: 300px; overflow-y: auto; margin-bottom: 4px; padding: 12px 14px; border: 1px solid var(--hairline);
  border-radius: var(--radius-field); background: #FAFAFB; line-height: 1.55; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.ci-terms-hd { margin: 0 0 4px; font-weight: 700; }
.ci-terms-p { margin: 0 0 10px; }
.ci-note { margin: -8px 0 16px; color: var(--muted); font-size: var(--fs-small); }
.ci-handback { margin: 0; padding: 28px 20px; border: 2px solid var(--accent); border-radius: var(--radius-card); background: #FBEFF1;
  font-size: 1.625rem; font-weight: 700; line-height: 1.35; text-align: center; }
.ci-uni { margin: -4px 0 16px; padding: 12px 14px 0; border: 1px solid var(--line); border-radius: var(--radius-field); }
.ci-stock { margin: 0 0 16px; color: #7A4A00; font-weight: 600; }
.ci-stock.ci-stock-ok { color: var(--muted); font-weight: 400; } /* Task 18: everything needed is in stock */
.ci-load { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--muted); font-weight: 600; }
.ci-sum { margin: 0; }
.ci-sum-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.ci-sum-k { color: var(--muted); }
.ci-sum-v { margin: 0; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.ci-queued { margin: 0 0 12px; font-weight: 600; }
.ci-alert, .ci-status { margin: 0; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.ci-alert:not(:empty) { margin-top: 12px; color: var(--accent-text); font-weight: 600; }
.ci-status:not(:empty) { margin-top: 12px; color: var(--muted); font-weight: 600; }
.ci-foot { display: flex; gap: 12px; margin-top: 14px; }
.ci-foot-in { margin-top: 16px; }
.ci-foot-btn { flex: 1; min-height: 52px; font-size: 1.0625rem; text-decoration: none; }
.ci-foot-main { flex: 2; }
a.home-action { text-decoration: none; } /* Home's + New repair is a link to this page */
.ci-flash { max-width: 1320px; margin: 16px 28px 0; padding: 10px 14px; border: 1px solid var(--ok); border-radius: var(--radius-card);
  background: #EEF7F1; color: var(--ok); font-weight: 700; }
@media (max-width: 699px) {
  .ci-row { grid-template-columns: minmax(0, 1fr); }
  .ci-row > span:empty { display: none; }
  .ci-card-sec { padding-left: 14px; padding-right: 14px; }
  .ci-step-label { display: none; }
  .ci-step-on .ci-step-label { display: inline; }
  .ci-steps { grid-template-columns: repeat(5, auto); justify-content: start; gap: 6px 10px; }
  .ci-handback { font-size: 1.375rem; padding: 20px 14px; }
  .ci-flash { margin: 12px 16px 0; }
}
@media (any-pointer: coarse) {
  .ci-chip { min-height: 48px; }
  .ci-chips-big .ci-chip { min-height: 64px; font-size: 1.125rem; }
  .ci-foot-btn { min-height: 64px; font-size: 1.125rem; }
  .ci-input { min-height: 52px; }
}
/* Relayout Task 10: as on the pickup page, the header shows the logo (not a link) and Live only. */
.shell[data-checkin="customer"] .shell-dock, .shell[data-checkin="customer"] .shell-side, .shell[data-checkin="customer"] .hdr-search,
.shell[data-checkin="customer"] .hdr-bar .note, .shell[data-checkin="customer"] .hdr-bar .nf-button,
.shell[data-checkin="customer"] .hdr-new, .shell[data-checkin="customer"] .hdr-avatar { display: none; }
.shell[data-checkin="customer"] .hdr-bar .brand { pointer-events: none; }
.shell[data-checkin="customer"][data-layout="sidebar"] .shell-row { grid-template-columns: minmax(0, 1fr); }
.shell[data-checkin="customer"][data-layout="dock"] #main { padding-bottom: env(safe-area-inset-bottom); }
/* === M7 === final fix wave (I1): nor over the customer-held check-in */
.shell[data-checkin="customer"] .ut-region { display: none; }
/* === end M7 === */
/* === end 2b: check-in === */

/* === 2b: parts === */
/* Task 18: the record's Parts block (the stock note and Old part not returned). */
.rp-note { margin: 10px 0 0; font-weight: 600; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.rp-check { margin-top: 10px; }
/* === end 2b: parts === */

/* === 2b: edit === */
/* Task 19 (edit-drawers.js): the Edit details form in groups (the Repair settings menu: the relayout: repair settings block), the Timeline's Remove on a person's own line and a manager's mark on a voided line. */
.ed-group { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ed-legend { margin: 0 0 4px; padding: 0; font-size: 1.0625rem; font-weight: 700; }
.ed-check { margin-top: 0; }
.ed-note { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-small); }
.rr-ev-remove { min-height: 30px; margin-left: auto; padding: 0 10px; font-size: var(--fs-small); }
.rr-ev-voided > .rr-text { color: var(--muted); text-decoration: line-through; }
.rr-ev-void { margin: 4px 0 0; color: var(--accent-text); font-size: var(--fs-small); font-weight: 600; overflow-wrap: anywhere; unicode-bidi: plaintext; }
@media (any-pointer: coarse) {
  .rr-ev-remove { min-height: 44px; }
}
/* === end 2b: edit === */

/* === relayout: workspace === */
/* Task 5: the repair header card (canvas 10.1 Ws10Desk `.hdr .sbar .trk .hr1 .hr2 .tk .timer .tag .own .acts`; touch sizes
   from Ws10Port/Ws10Land under pointer: coarse). The stage strip on top with a rule under it; row 1 the name, ticket chip,
   timer, tags and the owner on the right; row 2 the device (larger, ink), serial and check-in; row 3 the
   actions slot (today's moves and Repair settings, Tasks 6-7 rework them). Empty wrappers (Loading) are hidden.
   Contrast on white: --muted 6.2, --accent-text 8.0, the red dot --accent 6.6 (non-text, 3:1 needed). Nothing under 11px. */
.rr-card { --line2: #EBEBEE; min-width: 0; margin-bottom: 16px; padding: 14px 18px 0; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); }
.rr-stage { padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line2); }
.rr-stage:empty, .rr-row2:empty, .rr-acts:empty { display: none; }
.rr-card:has(> .rr-row2:empty) { padding-bottom: 14px; } /* Loading, not found, error: the h1 alone */
.stage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.stage-step { position: relative; display: flex; align-items: center; min-width: 0; padding-right: 12px; color: var(--muted); font-weight: 600; }
.stage-step::after { content: ""; position: absolute; left: 22px; right: 8px; top: 50%; height: 2px; background: #D5D5DA; }
.stage-step:last-child::after { display: none; }
.stage-dot { position: relative; z-index: 1; display: block; flex: none; box-sizing: border-box; width: 22px; height: 22px; border: 2px solid #A8A8B0; border-radius: 50%; background: var(--surface); }
.stage-label, .stage-step small { position: relative; z-index: 1; padding-right: 10px; background: var(--surface); white-space: nowrap; }
.stage-label { flex: none; padding-left: 10px; }
.stage-step small { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 0.88em; font-weight: 500; }
.stage-step[data-state="done"] { color: var(--text); }
.stage-step[data-state="done"] .stage-dot { border-color: var(--text); background: var(--text); }
.stage-step[data-state="done"]::after { background: var(--text); }
.stage-step[data-state="current"] { color: var(--accent-text); }
.stage-step[data-state="current"] .stage-dot { border: 7px solid var(--accent); }
/* L9: Abandoned (the Purgatory last step) is the red current step, drawn as a filled red dot: it is where the repair ended. */
.stage-step[data-key="picked_up"][data-state="current"] .stage-dot { border-width: 2px; background: var(--accent); }
.rr-row1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.rr-title { max-width: 100%; margin: 0; font-size: 30px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; unicode-bidi: isolate; }
.rr-num { flex: none; padding: 2px 7px; border: 1px solid var(--hairline); border-radius: 4px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.rr-timer { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.rr-clock { flex: none; }
.rr-tags { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.rr-row1 .tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-color: var(--hairline); background: #FAFAFB; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.rr-row1 .tag.mn-over { border-color: var(--accent-text); color: var(--accent-text); }
.rr-own { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; font-size: 15px; font-weight: 600; }
.rr-av { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #E4E4E8; color: var(--text); font-size: 11.5px; font-weight: 700; }
.ws-owner { min-width: 0; overflow-wrap: anywhere; unicode-bidi: isolate; }
.rr-row2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; min-width: 0; margin-top: 6px; padding-bottom: 12px; color: var(--muted); font-size: 16px; }
.rr-device { min-width: 0; color: var(--text); font-size: 18px; font-weight: 600; overflow-wrap: anywhere; unicode-bidi: isolate; }
.rr-serial .mono { color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
.rr-acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 12px 0 13px; border-top: 1px solid var(--line2); }
.rr-acts .ws-acts { flex: 1 1 auto; min-width: 0; }
.rr-acts .rs { margin-left: auto; align-items: flex-end; }
@media (max-width: 699px) {
  .rr-card { padding: 12px 14px 0; }
  .rr-title { font-size: 26px; }
  .rr-own { margin-left: 0; }
  .stage-step { flex-direction: column; align-items: flex-start; gap: 4px; padding-right: 4px; font-size: 13px; }
  .stage-step::after { top: 11px; left: 26px; right: 4px; }
  .stage-label, .stage-step small { padding: 0; background: none; white-space: normal; overflow-wrap: anywhere; }
  .rr-acts { flex-direction: column; align-items: stretch; }
  .rr-acts .rs { margin-left: 0; align-items: stretch; }
}
@media (pointer: coarse) {
  .rr-card { font-size: 17px; }
  .rr-title { font-size: 38px; }
  .rr-row2 { font-size: 18px; }
  .rr-device { font-size: 20px; }
  .stage-step { font-size: 17px; }
}
@media (pointer: coarse) and (max-width: 699px) {
  .rr-title { font-size: 30px; }
  .stage-step { font-size: 14px; }
}
/* === end relayout: workspace === */
/* === repair flow 2026-11-13: the step bar's buttons and the Tech picker (canvas Main.dc.html) === */
/* A step is a real button (44 px), the dot and words inside it; the current step stays text (aria-current). The next step
   has the dashed outline. A disabled step (Picked up before Complete, a held move) is quiet. */
.stage-btn { position: relative; z-index: 1; display: flex; align-items: center; gap: 0; min-width: 0; min-height: 44px; margin: 0; padding: 0 6px 0 0;
  border: 1px solid transparent; border-radius: 6px; background: var(--surface); color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.stage-btn:hover:not(:disabled) { background: #F5F5F6; }
.stage-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.stage-btn:disabled { cursor: default; opacity: 0.6; }
.stage-step[data-next="true"] .stage-btn { border: 1px dashed #8A8A93; }
.tech { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: auto; }
.tech-k { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tech-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.tech-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0; border: 1px solid var(--hairline);
  border-radius: 22px; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.tech-btn[aria-pressed="true"] { border: 2px solid var(--text); background: var(--text); color: var(--surface); }
.tech-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tech-btn:disabled { cursor: default; opacity: 0.7; }
.tech-none { padding: 0 12px; border-style: dashed; border-color: #8A8A93; color: var(--muted); font-weight: 400; }
.tech-none[aria-pressed="true"] { border-style: solid; }
.tech-line:empty { display: none; }
@media (max-width: 699px) {
  .stage-btn { flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px; background: none; }
  .tech { align-items: flex-start; margin-left: 0; }
  .tech-row { justify-content: flex-start; }
}
/* The GSX bar (owner 2026-11-13: was Before closing; canvas AuthReply.dc.html top): GSX, the number, Copy, Edit on one row. */
.rr-gsxbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.rr-gsxbar-row .rr-panel-title { margin: 0; }
.rr-gsxbar-row .rr-gsx-num { font-size: 16px; overflow-wrap: anywhere; }
.rr-gsxbar-row .rr-gsx-btn { display: inline-flex; align-items: center; gap: 6px; }
.rr-gsxbar .ws-gsx { margin-top: 10px; }
.rr-gsxbar .rr-gsx-status:empty { display: none; }
/* The Customer card's Contacted panel (canvas Contacted.dc.html): How? chips, a note, Save. */
.ws-contacted { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 14px; border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface); }
.ws-contacted .ws-lbl { margin: 0; }
.ws-contacted-save { align-self: flex-end; min-height: 44px; padding: 0 20px; }
.ws-contacted-open[aria-expanded="true"] { border-color: var(--text); }
/* Authorization by email (canvas Authorization.dc.html, AuthReply.dc.html): the drawer's preview, the reply box at the top of
   the Log (amber edge, Approved green), View email on the sent line. */
.au-price { max-width: 180px; font-size: 18px; font-weight: 700; }
.au-preview { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 6px; background: #FAFAFB; line-height: 1.5; }
.au-preview .ws-lbl { margin: 0; }
.au-subject, .au-para, .au-view-to { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; unicode-bidi: plaintext; }
.au-view { display: flex; flex-direction: column; gap: 10px; }
.au-view-to { color: var(--muted); }
.au-reply { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; padding: 14px 16px; border: 2px solid #B26A00; border-radius: 6px; background: #FFF8EC; }
.au-reply-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.au-reply-k { color: #7A4900; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.au-reply-meta { color: var(--muted); font-size: 14px; }
.au-reply-text { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; unicode-bidi: plaintext; }
.au-reply-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.au-reply-amt { font-weight: 700; }
.au-approve { min-height: 44px; padding: 0 18px; border-color: #1E7B45; background: #1E7B45; color: #FFFFFF; font-weight: 700; }
.au-decline { min-height: 44px; padding: 0 18px; font-weight: 700; }
.au-inbox { margin-left: auto; }
.au-reply .ws-line-alert:empty, .au-reply .ws-line-status:empty { display: none; }
.rr-ev-view { min-height: 44px; padding: 0 4px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* === end repair flow: steps and tech === */

/* === relayout: status changer === */
/* Task 6: the move buttons and More become one status changer (canvas 10.1 Ws10Desk `.stc`, the Ws10Menus `.pop` "Move to"):
   a bordered control, a Status label (grey ground) and a button with the status words and a chevron; the menu is a popover
   under it (268 px, 44 px items, radius 8). Pick up (red, the pickup page) sits right of it on Complete (L6). Touch (pointer: coarse): 56 px control, 52 px items. Under 700 px
   the row stacks full width. Contrast on white: --muted 6.2, on #F1F1F3 5.6; the ink border 18:1. Nothing under 12 px. */
.ws-moves { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ws-move { min-height: 44px; padding: 0 22px; font-size: 1rem; }
.ws-move.btn-primary { min-width: 200px; }
.stc-wrap { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.stc { display: flex; align-items: stretch; min-width: 0; min-height: 44px; box-sizing: border-box; border: 1px solid var(--text); border-radius: 6px; overflow: hidden; background: var(--surface); }
.stc-k { display: flex; flex: none; align-items: center; padding: 0 12px; border-right: 1px solid var(--line); background: #FAFAFB; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.stc-btn { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 10px; min-width: 220px; margin: 0; padding: 0 16px; border: 0; background: var(--surface); color: var(--text); font: inherit; font-size: 17px; font-weight: 700; text-align: left; cursor: pointer; }
.stc-btn:hover:not(:disabled) { background: #F7F7F8; }
.stc-btn:focus-visible { outline-offset: -4px; }
.stc-btn:disabled { color: var(--muted); cursor: default; }
.stc-btn svg { flex: none; }
.stc-v { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.stc-v::before, .stc-dot { content: ""; display: block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.stc-static { border-color: var(--line); } /* not a button: the quiet frame */
.stc-static .stc-v { padding: 0 16px; color: var(--text); font-size: 17px; font-weight: 700; }
.stc-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 268px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 14px 34px rgba(0, 0, 0, .16); }
.stc-ph { margin: 0; padding: 8px 10px 4px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.stc-item { display: flex; width: 100%; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 10px; border: 0; border-radius: 5px; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.stc-item svg { flex: none; color: var(--muted); }
.stc-item:hover:not(:disabled), .stc-item:focus { background: #F1F1F3; }
.stc-item:focus-visible { outline-offset: -3px; }
.stc-item small { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.stc-item-label { min-width: 0; overflow-wrap: anywhere; }
.stc-cur, .stc-cur:disabled { background: #F1F1F3; color: var(--text); opacity: 1; cursor: default; }
.stc-cur .stc-dot { margin: 0 4px; }
.stc-menu hr { margin: 4px 0; border: 0; border-top: 1px solid #EBEBEE; }
@media (pointer: coarse) {
  .stc { min-height: 56px; }
  .stc-btn, .stc-static .stc-v { font-size: 19px; }
  .stc-item { min-height: 52px; font-size: 17px; }
  .ws-move { min-height: 56px; }
}
@media (max-width: 699px) {
  .ws-moves { flex-direction: column; align-items: stretch; }
  .stc-wrap { display: flex; }
  .stc { flex: 1 1 auto; }
  .stc-btn { min-width: 0; }
  .stc-menu { right: 0; width: auto; max-width: none; }
}
/* === end relayout: status changer === */

/* === relayout: repair settings === */
/* Task 7 (edit-drawers.js SettingsMenu): the Repair settings button at the right of the actions row (canvas
   10.1 `.btn.set`: gear, words, chevron; an ink border while open) and its menu (Ws10Menus `.pop` "Repair settings": 268 px,
   44 px items with a grey icon, the Manager heading, Void red under its own rule), aligned to the button's right edge (the
   Reassign sheet left with owner 2026-11-13: the Tech picker). Touch (pointer: coarse): 56 px button, 52 px items. Under 700 px the button and menu are full width. The row's tops line up (the relayout: workspace
   block), so a Saved line under either side no longer shifts the other. Contrast on white: --muted 6.2, --accent-text 8.0. */
.rs { display: flex; flex-direction: column; align-items: flex-start; }
.rs-wrap { position: relative; }
.rs-btn { min-height: 44px; }
.rs-btn svg { flex: none; }
.rs-btn[aria-expanded="true"] { border-color: var(--text); }
.rs-line:empty { display: none; }
.rs-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 268px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 14px 34px rgba(0, 0, 0, .16); }
.rs-ph { margin: 0; padding: 8px 10px 4px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.rs-item { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 10px; border: 0; border-radius: 5px; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.rs-item svg { flex: none; color: var(--muted); }
.rs-item:hover, .rs-item:focus { background: #F1F1F3; }
.rs-item:focus-visible { outline-offset: -3px; }
.rs-item-label { min-width: 0; overflow-wrap: anywhere; }
.rs-item-void { color: var(--accent-text); }
.rs-item-void svg { color: var(--accent-text); }
.rs-item[aria-disabled="true"], .rs-item[aria-disabled="true"] svg { color: var(--muted); cursor: not-allowed; }
.rs-item[aria-disabled="true"]:hover { background: var(--surface); }
.rs-menu hr { margin: 4px 0; border: 0; border-top: 1px solid #EBEBEE; }
@media (pointer: coarse) {
  .rs-btn { min-height: 56px; font-size: 17px; }
  .rs-item { min-height: 52px; font-size: 17px; }
}
@media (max-width: 699px) {
  .rs-wrap, .rs-btn { width: 100%; }
  .rs-menu { left: 0; right: 0; width: auto; max-width: none; }
}
/* === end relayout: repair settings === */

/* === relayout: columns === */
/* Task 8: the record's two columns and its cards (canvas 10.1 Ws10Desk `.cols .card .rc .log .kv .cl .bt2`, 10.2 Ws10Land
   with Log a call open, 10.3 Ws10Port; touch values under pointer: coarse). One column under 900px (the Log first); from
   900px the Log fills the left column, the right one is 420px (440px on touch). Every block is a card: radius 8, padding
   14px 16px, the heading with its quiet words on one line. Contrast on white: --muted 6.2, --text 18. Nothing under 11px. */
.rr-cols { --line2: #EBEBEE; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
@media (min-width: 900px) {
  .rr-cols { grid-template-columns: minmax(0, 1fr) 420px; gap: 12px; }
}
@media (min-width: 900px) and (pointer: coarse) {
  .rr-cols { grid-template-columns: minmax(0, 1fr) 440px; gap: 14px; }
}
/* The Sidebar layout's 208px column leaves too little room for two columns under 1100px: one column (the Log first). */
@media (min-width: 900px) and (max-width: 1099px) { .shell[data-layout="sidebar"] .rr-cols { grid-template-columns: minmax(0, 1fr); } }
.rr-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rr-col-log { align-self: stretch; }
.rr-log { align-self: stretch; flex: 1 1 auto; }
.rr-cols .card { display: flex; flex-direction: column; gap: 8px; min-width: 0; border-color: var(--hairline); border-radius: 8px; padding: 14px 16px; }
.rr-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.rr-panel-title { margin: 0; font-size: 16px; font-weight: 700; }
.rr-panel-head .rr-quiet { font-size: 0.86em; font-weight: 500; white-space: nowrap; }
.rr-panel-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rr-cols .rr-item { grid-template-columns: 120px minmax(0, 1fr); gap: 2px 12px; padding: 6px 0; border-bottom: 0; border-top: 1px solid var(--line2); }
.rr-cols .rr-dl > .rr-item:first-child { border-top: 0; }
.rr-cols .rr-dl dt { font-size: inherit; font-weight: 400; }
.rr-cols .rr-dl dd { font-weight: 600; }
.rr-dev .rr-panel-body > * + .rr-dl { border-top: 1px solid var(--line2); }
.rr-sub { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 8px; border-top: 1px solid var(--line2); }
.rr-sub-title { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.rr-sub .rp-note, .rr-sub .rp-check { margin-top: 4px; }
/* The Log: quick notes and the note box (40px chips, 48 on touch), then the lines. */
.rr-log .ws-compose { padding: 0 0 4px; border-bottom: 0; }
.rr-log .ws-chip { min-height: 40px; padding: 0 13px; font-size: 14px; }
.rr-log .ws-note-input, .rr-log .ws-note-add { min-height: 40px; }
.rr-log .rr-event { padding: 9px 0; border-top: 1px solid var(--line2); border-bottom: 0; }
.rr-log .rr-event:first-child { border-top: 0; }
.rr-log .rr-ev-kind { color: var(--muted); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
/* Customer: the name, the phone in mono, the email; the last contact line; the two buttons and the Log a call row. */
.rr-cust-dl .rr-cust-row { min-width: 0; }
.rr-cols .rr-cust-dl dd { margin: 0; font-weight: 400; }
.rr-cols .rr-cust-dl .rr-cust-name { font-size: 1.1em; font-weight: 700; overflow-wrap: anywhere; unicode-bidi: isolate; }
.rr-cust-phone .mono { font-size: 0.94em; }
.rr-cust-email, .rr-cust-email .rr-link { color: var(--muted); }
.rr-cust-pref { font-size: inherit; }
.rr-cust-last { margin: 0; padding: 5px 0; border-top: 1px solid var(--line2); color: var(--muted); font-size: 0.92em; overflow-wrap: anywhere; } /* owner 2026-11-13: Last contact: <how>, <when> */
.ws-call { display: flex; flex-direction: column; min-width: 0; }
.ws-cust-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ws-cust-acts .btn { min-height: 44px; min-width: 0; white-space: normal; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.ws-call-open[aria-expanded="true"] { border-color: var(--text); }
/* === M8 === Task 27: Email <first name> joins Text and Log a call (three in a row) */
.ws-cust-acts:has(.ws-email-open) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* === end M8 === */
/* owner 2026-11-13: Contacted joins them (Text, Log a call, Contacted: three equal; with Email, two rows of two) */
.ws-cust-acts:has(.ws-contacted-open) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ws-cust-acts:has(.ws-contacted-open):has(.ws-email-open) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ws-call-row { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.ws-call-row .ws-lbl { margin: 0; }
.ws-call-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-call-pick { min-height: 44px; padding: 0 13px; }
.ws-call-quiet { color: var(--muted); }
.rr-cols .rr-mgr { border-color: var(--text); } /* Managers only keeps its dashed ink border over the card's */
@media (max-width: 640px) {
  .rr-cols .rr-item { grid-template-columns: minmax(0, 1fr); } /* labels stack on phones */
}
@media (pointer: coarse) {
  .rr-cols { font-size: 17px; }
  .rr-col { gap: 10px; }
  .rr-panel-title { font-size: 18px; }
  .rr-log .ws-chip, .rr-log .ws-note-input, .rr-log .ws-note-add { min-height: 48px; }
  .rr-log .rr-event { padding: 11px 0; }
  .ws-cust-acts .btn { min-height: 52px; }
  .ws-call-pick { min-height: 48px; }
}
/* === end relayout: columns === */

/* === relayout: before closing and charges === */
/* Task 9 (canvas 10.1 Ws10Desk `.todo .chk .money .est .bt2`, Ws10Menus inset: Charges before signing). Before closing: a
   red `<n> to do` or a green `All done` beside the heading, the GSX number in mono with Copy (and Edit) at the right; only
   the missing items (a red ring, Missing in red, Add), Show all as a quiet link-like button. Charges: the lines with top
   rules, Paid and the Owed total, the estimate line on the grey ground, the two buttons side by side, the payments list.
   Contrast on white: --accent-text 7.1, --ok 5.4, --muted 6.2; on --bg the estimate text is --text. Nothing under 11px. */
.rr-panel-head .rr-todo, .rr-panel-head .rr-alldone { font-size: 0.86em; white-space: nowrap; }
.rr-todo { color: var(--accent-text); font-weight: 700; }
.rr-alldone { color: var(--ok); font-weight: 700; }
.rr-close .rr-panel-head { align-items: center; justify-content: flex-start; flex-wrap: wrap; }
.rr-sp { flex: 1 1 auto; }
.rr-gsx { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rr-gsx-lbl { color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.rr-gsx-num { font-size: 14px; }
.rr-gsx-btn { min-height: 44px; min-width: 44px; padding: 0 9px; }
.rr-gsx-edit[aria-expanded="true"] { border-color: var(--text); }
.rr-gsx-status { color: var(--muted); font-size: 13px; font-weight: 600; }
.ws-gsx-compact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 4px 0 6px; border-bottom: 1px solid var(--line2, var(--hairline)); }
.ws-gsx-compact .ws-lbl { margin: 0; }
.ws-gsx-compact .ws-gsx-row { flex: 1 1 200px; min-width: 0; margin-top: 0; }
.ws-gsx-compact .ws-gsx-input { flex: 1 1 8em; width: 8em; }
.ws-gsx-compact .ws-line-alert, .ws-gsx-compact .ws-line-status { flex-basis: 100%; }
.rr-close .rr-check { align-items: center; min-height: 44px; padding: 4px 0; border-bottom: 0; border-top: 1px solid var(--line2, var(--hairline)); }
.rr-close .rr-check:first-child { border-top: 0; }
.rr-close .rr-icon { width: 20px; height: 20px; margin-top: 0; }
.rr-close .rr-check { grid-template-columns: 20px minmax(0, 1fr) auto; }
.rr-close .rr-check-has-add { grid-template-columns: 20px minmax(0, 1fr) auto auto; }
.rr-close .rr-check:has(.rr-miss) .rr-icon-dash { color: var(--accent-text); }
.rr-miss { color: var(--accent-text); font-weight: 700; }
.rr-close .rr-check[data-state="missing"] .rr-check-state.rr-miss { color: var(--accent-text); }
.rr-close .rr-check-add { min-height: 44px; padding: 0 14px; }
.rr-check-all { align-self: flex-start; min-height: 44px; padding: 0 4px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rr-charges .rr-table { margin: 0; }
.rr-charges .rr-table th { padding-top: 0; font-size: 12.5px; }
.rr-charges .rr-table td { padding: 6px 8px 6px 0; border-bottom: 0; border-top: 1px solid var(--line2, var(--hairline)); }
.rr-charges .rr-table td.rr-num-col:last-child { font-weight: 600; }
.rr-sum { display: flex; flex-direction: column; }
.rr-sum-row { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 5px 0; border-top: 1px solid var(--line2, var(--hairline)); }
.rr-sum-amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rr-sum-tot { font-size: 1.12em; font-weight: 700; border-top-color: var(--line); }
.rr-sum-tot .rr-sum-amt { font-weight: 700; }
.mn-desk > * + * { margin-top: 8px; }
.mn-desk > .ws-line-status:empty { margin-top: 0; } /* the empty live line takes no room (never display: none) */
.mn-est { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-radius: 6px; background: var(--bg); font-size: 0.94em; }
.mn-est-text { min-width: 0; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.mn-est-text b { font-weight: 700; }
.mn-est-ok { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: #E3F1E8; color: var(--ok); }
.mn-est-signed .mn-est-text { flex: 1 1 12em; } /* the tick and the words share a line; View and Oral consent wrap together */
.mn-est-links { display: inline-flex; flex: none; gap: 4px; margin-left: auto; }
.mn-est-link { min-height: 44px; padding: 0 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mn-est-acts { display: grid; flex: 1 1 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mn-est:not(.mn-est-signed) { padding: 0; background: transparent; }
.mn-est:not(.mn-est-signed) > .mn-est-text { padding: 8px 12px; border-radius: 6px; background: var(--bg); flex: 1 1 100%; }
.mn-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mn-acts .mn-act, .mn-est-acts .mn-act { min-height: 44px; min-width: 0; }
.mn-acts .mn-act:only-child { grid-column: 1 / -1; }
.rr-charges .mn-pays { margin-top: 0; }
@media (pointer: coarse) {
  .rr-gsx-btn { min-height: 52px; min-width: 52px; }
  .rr-check-all, .mn-est-link { min-height: 52px; min-width: 44px; }
  .rr-close .rr-check { min-height: 52px; }
  .rr-close .rr-check-add { min-height: 52px; }
  .mn-acts .mn-act, .mn-est-acts .mn-act { min-height: 52px; }
}
/* === end relayout: before closing and charges === */

/* === Stock: list and product === */
/* Canvas board 7.8 (Stock: products and stock history): the title with the view links (the current one ink), the scan
   or search box, the chips (a pressed chip has an ink border), the category choice and Show hidden, the kind switch and
   the totals; then each kind under its heading in a white bordered list whose rows are one link each (Item, Barcode in
   mono, On hand big with its word, Min, Price; 52px rows; typed text cut with an ellipsis, never widening the page).
   From 1200px a product opens in a panel beside the list (sticky, scrolling inside); below that the product is the page.
   Under 700px each row is a two-line card. Status is never colour alone: the word is always there.
   Contrast on white: --muted 6.25, --accent-text 7.98, --ok 5.33; ink tab text #FFFFFF on --text 17.4. */
.sk-page { --hairline: #DEDEE2; --sk-cols: minmax(0, 1fr) 148px 124px 52px 92px; }
.sk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-bottom: 16px; }
.sk-title { margin-bottom: 0; }
.sk-views {
  display: flex;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.sk-view {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-field);
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.sk-view:hover { color: var(--text); background: var(--bg); }
.sk-view[aria-current="page"] { background: var(--text); color: #FFFFFF; }
.sk-view:focus-visible { outline-offset: -1px; }

.sk-main { min-width: 0; }
.sk-list-col { min-width: 0; }
.sk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.sk-search { flex: 0 1 340px; min-width: 220px; }
.sk-search-box { position: relative; }
.sk-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.sk-search-input {
  width: 100%;
  min-height: var(--tap);
  padding: 6px 10px 6px 36px;
  border: 1px solid #8A8A93;
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  -webkit-appearance: none;
  appearance: none;
}
.sk-search-input::placeholder { color: var(--muted); }
.sk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-button);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
}
.sk-chip:hover { border-color: #B9B9C0; }
.sk-chip[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.sk-chip-count { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.sk-chip-hot { color: var(--accent-text); font-weight: 700; }
.sk-select {
  min-height: var(--tap);
  max-width: 260px;
  padding: 4px 8px;
  border: 1px solid #8A8A93;
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  text-overflow: ellipsis;
}
/* The one labelled checkbox look (#50): the label is the target; the box keeps the system look. */
.tv-check { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-weight: 600; cursor: pointer; }
.tv-check input { width: 18px; height: 18px; margin: 0; flex: none; }

.sk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.sk-kind-count { font-size: var(--fs-small); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sk-kind[aria-pressed="true"] .sk-kind-count { color: var(--text); }
.sk-totals { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: var(--fs-small); color: var(--muted); }
.sk-total-label { font-weight: 600; }
.sk-total-value { font-size: 1.125rem; color: var(--text); font-variant-numeric: tabular-nums; }
.sk-total-units { font-variant-numeric: tabular-nums; }
.sk-cut { margin: -4px 0 10px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.sk-body.is-pending { opacity: 0.6; }
.sk-none { margin: 0; padding: 28px 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--muted); }

.sk-group { margin-bottom: 18px; }
.sk-group-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: var(--fs-base); font-weight: 700; }
.sk-group-count { font-size: var(--fs-small); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sk-table { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.sk-th {
  display: grid;
  grid-template-columns: var(--sk-cols);
  gap: 0 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--row-hover);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.sk-n { text-align: right; }
.sk-rows { margin: 0; padding: 0; list-style: none; }
.sk-rows > li + li { border-top: 1px solid var(--hairline); }
.sk-row {
  display: grid;
  grid-template-columns: var(--sk-cols);
  gap: 0 12px;
  align-items: center;
  min-height: 52px;
  padding: 6px 14px;
  color: var(--text);
  text-decoration: none;
}
.sk-row:hover { background: var(--row-hover); }
.sk-row:hover .sk-name { text-decoration: underline; }
.sk-row:focus-visible { outline-offset: -3px; }
.sk-row.is-current { background: #F3F3F5; box-shadow: inset 3px 0 0 var(--text); }
.sk-c-item { display: flex; flex-direction: column; min-width: 0; }
.sk-name, .sk-sub, .sk-code { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.sk-name { font-weight: 600; line-height: 1.3; }
.sk-sub { font-size: var(--fs-tiny); color: var(--muted); line-height: 1.35; }
.sk-c-code { min-width: 0; overflow: hidden; }
.sk-code { font-size: var(--fs-small); color: var(--muted); }
.sk-blank { color: var(--muted); }
.sk-c-qty { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; min-width: 0; white-space: nowrap; }
.sk-qty { font-size: 1.25rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sk-word { font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); }
.sk-st-low .sk-qty, .sk-st-low .sk-word, .sk-st-out .sk-qty, .sk-st-out .sk-word,
.sk-st-negative .sk-qty, .sk-st-negative .sk-word { color: var(--accent-text); }
.sk-c-min, .sk-c-price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-c-min { color: var(--muted); }
.sk-foot { padding: 10px 0 0; }

/* The product: a white panel; beside the list from 1200px. */
.sk-panel {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 960px;
  padding: 16px 18px 18px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}
.sk-panel > * { flex-shrink: 0; } /* the panel scrolls; its parts never squash (an overflow: hidden title would) */
.sk-split .sk-list-col { display: none; }
@media (min-width: 1200px) {
  .sk-split .sk-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); gap: 16px; align-items: start; }
  .sk-split .sk-list-col { display: block; }
  .sk-split .sk-panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
  .sk-split { --sk-cols: minmax(0, 1fr) 112px 104px 36px 80px; }
}
.sk-back { align-self: flex-start; margin: -6px 0 -4px -4px; }
.sk-p-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 1.375rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.sk-p-code { margin: -6px 0 0; font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.sk-p-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sk-p-tags .tag { max-width: 100%; padding: 1px 8px; overflow: hidden; font-size: var(--fs-small); text-overflow: ellipsis; white-space: nowrap; }
.sk-p-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--hairline); border-radius: var(--radius-card); }
.sk-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; padding: 9px 12px; border-left: 1px solid var(--hairline); }
.sk-num:first-child { border-left: 0; }
.sk-num-value { font-size: 1.5rem; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-num-word { font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); }
.sk-num-label { flex-basis: 100%; font-size: var(--fs-small); color: var(--muted); }
.sk-num.sk-st-low .sk-num-value, .sk-num.sk-st-low .sk-num-word, .sk-num.sk-st-out .sk-num-value, .sk-num.sk-st-out .sk-num-word,
.sk-num.sk-st-negative .sk-num-value, .sk-num.sk-st-negative .sk-num-word { color: var(--accent-text); }
.sk-p-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sk-p-action { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 10px; text-decoration: none; }
.sk-p-dl { margin: 0; }
.sk-p-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.sk-p-item:last-child { border-bottom: 0; }
.sk-p-dl dt { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.sk-p-dl dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.sk-p-dl dd.mono { font-size: var(--fs-small); }
.sk-p-history { min-width: 0; }
.sk-p-h2 { margin: 4px 0 6px; font-size: var(--fs-base); font-weight: 700; }
.sk-p-none { margin: 6px 0; color: var(--muted); }
.sk-hist { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-small); }
.sk-hist th { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); text-align: left; }
.sk-hist td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; overflow-wrap: anywhere; unicode-bidi: isolate; }
.sk-h-when { width: 128px; }
.sk-h-n { width: 64px; text-align: right; }
.sk-h-by { width: 18%; }
.sk-hist .sk-h-by, .sk-hist .sk-d-by { padding-left: 14px; } /* a gap after the right-aligned Balance */
.sk-h-note { width: 30%; }
.sk-d-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.sk-d-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-d-bal { font-weight: 600; color: var(--muted); }
.sk-up { color: var(--ok); }
.sk-down { color: var(--accent-text); }
.sk-what { display: block; font-weight: 600; }
.sk-ref { font-size: var(--fs-tiny); color: var(--text); text-decoration: underline; text-decoration-color: #9A9AA2; text-underline-offset: 2px; }
.sk-ref:hover { text-decoration-color: currentColor; }
.sk-note { white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.sk-note-long { display: block; max-height: 8em; overflow-y: auto; padding: 4px 6px; border: 1px solid var(--hairline); border-radius: var(--radius-field); background: var(--row-hover); }
.sk-older { margin: 8px 0 0; font-size: var(--fs-small); color: var(--muted); }
/* A narrow panel (beside the list, or a phone): each movement is a short card, What with its change and balance first. */
@container (max-width: 560px) {
  .sk-hist thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .sk-hist, .sk-hist tbody { display: block; }
  .sk-hist tr { display: grid; grid-template-columns: minmax(0, 1fr) 52px 44px; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
  .sk-hist td { display: block; padding: 0; border: 0; }
  .sk-d-what { grid-column: 1; grid-row: 1; }
  .sk-hist .sk-d-n { grid-column: 2; grid-row: 1; }
  .sk-hist .sk-d-bal { grid-column: 3; grid-row: 1; }
  .sk-d-when { grid-column: 1; grid-row: 2; font-size: var(--fs-tiny); }
  .sk-hist .sk-d-by { grid-column: 2 / -1; grid-row: 2; overflow: hidden; padding-left: 0; font-size: var(--fs-tiny); color: var(--muted); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .sk-d-note { grid-column: 1 / -1; grid-row: 3; color: var(--muted); }
  .sk-hist .sk-d-empty { display: none; } /* a dash on its own line says nothing on a card */
}

/* Copy (Parts needed, the Order list) */
.sk-copied { font-size: var(--fs-small); font-weight: 600; color: var(--ok); }
.sk-copy-failed { color: var(--accent-text); }
.sk-copy-area { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; } /* the copy fallback's box; 16px so iOS does not zoom when it is selected */

/* Mid widths: tighter columns. */
@media (max-width: 899px) {
  .sk-page { --sk-cols: minmax(0, 1fr) 120px 112px 40px 80px; }
  .sk-row, .sk-th { padding-left: 12px; padding-right: 12px; gap: 0 10px; }
}
/* Phones: each product is a two-line card (name and on hand; barcode, tags and price), the movements and parts stack. */
@media (max-width: 699px) {
  .sk-search { flex-basis: 100%; }
  .sk-th { display: none; }
  .sk-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "item qty" "code price";
    gap: 2px 12px;
    padding: 8px 12px;
  }
  .sk-c-item { grid-area: item; }
  .sk-c-qty { grid-area: qty; }
  .sk-c-code { grid-area: code; }
  .sk-c-price { grid-area: price; color: var(--muted); font-size: var(--fs-small); }
  .sk-c-min { display: none; }
  .sk-select { max-width: 100%; }
  .sk-panel { padding: 14px; }
  .sk-num-value { font-size: 1.25rem; }
}
@media (any-pointer: coarse) {
  .sk-chip, .sk-view, .sk-kind, .sk-more, .sk-select, .tv-check, .sk-search-input, .sk-copy, .sk-p-action, .sk-back { min-height: 44px; }
  .sk-search-input, .sk-select { font-size: 16px; } /* typed text 16px on touch (#111) */
  .sk-ref { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Ruling R61: Below zero is its own chip, shown only when something is below zero; its count is red (--accent-text). */
.sk-chip-below .sk-chip-label { color: var(--accent-text); }

/* === Stock: edit === */
/* Task 6: the adjust panel on a product (the on hand big, the pending number beside it, − / +, Set to, the reason chips,
   Save and Cancel), the edit form under the product's buttons, Add product (#/stock/new), the list's Add product offer
   and the header's Add product link. Typed fields (.sk-in) are 16px on touch (#111); every target is 44px on touch.
   The pending number is said in words too (a hidden "New on hand"), never colour alone. */
.sk-in {
  width: 100%;
  min-width: 0;
  min-height: var(--tap);
  padding: 6px 10px;
  border: 1px solid #8A8A93;
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  -webkit-appearance: none;
  appearance: none;
}
.sk-a-code { font-family: var(--font-mono); }
.sk-head .sk-add { margin-left: auto; text-decoration: none; }

.sk-adj { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--radius-card); }
.sk-adj-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "now live steps" "set set set";
  align-items: center;
  gap: 10px 12px;
}
.sk-adj-now { grid-area: now; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.sk-adj-value { font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-adj-now.sk-st-low .sk-adj-value, .sk-adj-now.sk-st-low .sk-num-word, .sk-adj-now.sk-st-out .sk-adj-value, .sk-adj-now.sk-st-out .sk-num-word,
.sk-adj-now.sk-st-negative .sk-adj-value, .sk-adj-now.sk-st-negative .sk-num-word { color: var(--accent-text); }
.sk-adj-live { grid-area: live; min-width: 0; }
.sk-adj-pending { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; font-size: 1.25rem; }
.sk-adj-to { font-variant-numeric: tabular-nums; }
.sk-adj-by { font-size: var(--fs-small); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sk-adj-steps { grid-area: steps; display: flex; gap: 8px; }
.sk-adj-step { min-width: 44px; padding: 0; font-size: 1.25rem; font-weight: 700; line-height: 1; }
.sk-adj-setbox { grid-area: set; display: flex; align-items: center; gap: 8px; }
.sk-adj-label { font-size: var(--fs-small); font-weight: 600; color: var(--muted); white-space: nowrap; }
.sk-adj-input { width: 120px; }
.sk-adj-more { display: flex; flex-direction: column; gap: 10px; }
.sk-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-reason { font-size: var(--fs-small); }
.sk-adj-buttons, .sk-e-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-adj-save, .sk-e-save, .sk-a-save { min-width: 96px; }
.sk-adj-error, .sk-e-error, .sk-a-error { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--accent-text); overflow-wrap: anywhere; }
.sk-adj-status, .sk-e-status, .sk-a-status { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--ok); overflow-wrap: anywhere; }
.sk-p-nums-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-p-acts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.sk-edit, .sk-add-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sk-edit { padding: 12px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--row-hover); }
.sk-add-form { max-width: 560px; padding: 16px 18px 18px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); }
.sk-e-field { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.sk-e-label { font-size: var(--fs-small); font-weight: 600; }
.sk-e-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.sk-e-kinds { align-self: flex-start; }
.sk-e-checks { display: flex; flex-wrap: wrap; gap: 0 18px; }
.sk-e-changed {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--accent-text);
  border-radius: var(--radius-field);
  background: var(--surface);
  font-size: var(--fs-small);
  font-weight: 600;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}
.sk-a-link { color: var(--text); text-decoration: underline; overflow-wrap: anywhere; unicode-bidi: isolate; }

.sk-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; }
.sk-add-offer { text-decoration: none; }
.sk-offer-code { min-width: 0; font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }

@media (max-width: 699px) {
  .sk-add-form { padding: 14px; }
  .sk-adj-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "now steps" "live live" "set set"; }
}
@media (any-pointer: coarse) {
  .sk-in { font-size: 16px; } /* typed text 16px on touch (#111): no zoom into the field on iOS */
  .sk-in, .sk-adj-step, .sk-reason, .sk-e-kind, .sk-add, .sk-add-offer, .sk-adj-save, .sk-adj-cancel, .sk-e-save, .sk-e-cancel, .sk-a-save,
  .sk-p-edit { min-height: 44px; }
}

/* === Stock: scan kit === */
/* web/shared/scan.js ScanBox, shared by Receive and the counts (Task 8; its own section since Task 11). The scan box is
   18px everywhere, mono, with a clear ink focus ring: it is where every scan lands. */
.scan { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.scan-label { font-size: var(--fs-small); font-weight: 600; }
.scan-input { min-height: 48px; font-family: var(--font-mono); font-size: 1.125rem; letter-spacing: 0.02em; }
.scan-input:focus-visible, .scan-input:focus { outline: 2px solid var(--text); outline-offset: 1px; }

/* === Stock: receiving === */
/* Task 8: Receive (#/stock/receive), the receipts (#/stock/receipts) and one receipt (?id=). The scan box: see the scan
   kit section. Lines are a white bordered list, the
   newest on top; a new product line has a hairline accent on the left and says `New product` in words. The footer sticks
   to the bottom of the screen so `Check in shipment` and the count are always in reach. Typed fields are .sk-in (16px on
   touch, #111); every target is 44px on touch. Short / over are words, never colour alone. Print shows only the receipt. */

.sk-receive { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 980px; padding-bottom: 8px; }
.sk-r-top {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px 12px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}
.sk-r-poin { font-family: var(--font-mono); }
.sk-r-poin, .sk-r-sound { min-height: 48px; }
.sk-r-sound[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
.sk-r-last { min-height: 1.2em; margin: -4px 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--muted); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.sk-r-note { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.sk-r-done {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ok);
  border-radius: var(--radius-field);
  background: var(--surface);
  font-weight: 600;
}
.sk-r-done-title { color: var(--ok); }
.sk-r-done-link { color: var(--text); text-decoration: underline; overflow-wrap: anywhere; }
.sk-r-presales { color: var(--accent-text); }

.sk-r-lines { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.sk-r-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "what nums" "new new";
  align-items: center;
  gap: 8px 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.sk-r-line:last-child { border-bottom: 0; }
.sk-r-is-new { box-shadow: inset 3px 0 0 var(--accent-text); }
.sk-r-what { grid-area: what; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sk-r-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.sk-r-tag { align-self: flex-start; font-size: var(--fs-small); font-weight: 700; color: var(--accent-text); }
.sk-r-code { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.sk-r-newbox { grid-area: new; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.sk-r-namefield { flex: 1 1 260px; }
.sk-r-nums { grid-area: nums; display: flex; align-items: flex-end; gap: 10px; }
.sk-r-field { display: flex; flex-direction: column; gap: 4px; }
.sk-r-steps { display: flex; gap: 6px; }
.sk-r-qty { width: 64px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.sk-r-exp { width: 72px; text-align: center; font-variant-numeric: tabular-nums; }
.sk-r-remove { color: var(--muted); }

.sk-r-foot {
  position: sticky;
  bottom: var(--sk-r-dock, 0px);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 -6px 16px -12px rgba(0, 0, 0, 0.25);
}
.shell[data-layout="dock"] .sk-receive { --sk-r-dock: calc(96px + env(safe-area-inset-bottom)); } /* above the floating dock */
.sk-r-sum { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-r-msg { flex: 1 1 200px; margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--accent-text); overflow-wrap: anywhere; }
.sk-r-go { min-height: 48px; margin-left: auto; padding: 0 20px; }
.sk-r-go[aria-busy="true"] { opacity: 0.7; }

.sk-receipts { min-width: 0; max-width: 980px; }
.sk-rc-search { display: flex; flex-direction: column; gap: 4px; }
.sk-rc-body.is-pending { opacity: 0.6; }
.sk-rc-rows { margin: 0 0 12px; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.sk-rc-rows li + li { border-top: 1px solid var(--line); }
.sk-rc-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 150px minmax(0, 1fr) 140px 120px;
  align-items: center;
  gap: 4px 12px;
  min-height: 52px;
  padding: 8px 14px;
  color: var(--text);
  text-decoration: none;
}
.sk-rc-row:hover { background: var(--row-hover); }
.sk-rc-row:focus-visible { outline-offset: -2px; }
.sk-rc-po { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.sk-rc-when, .sk-rc-by, .sk-rc-size { font-size: var(--fs-small); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-rc-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-rc-flag { font-size: var(--fs-small); font-weight: 700; color: var(--accent-text); white-space: nowrap; }

.sk-receipt-page { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 860px; }
.sk-receipt { padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); }
.sk-rc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.sk-rc-title { margin: 0; font-size: var(--fs-large); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.sk-rc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 12px; font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.sk-rc-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sk-rc-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sk-rc-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sk-rc-name { font-weight: 600; color: var(--text); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.sk-rc-qty { text-align: right; font-variant-numeric: tabular-nums; }
.sk-rc-received { font-size: 1.125rem; }
.sk-rc-note { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.sk-rc-note.sk-rc-short, .sk-rc-note.sk-rc-over { color: var(--accent-text); }

@media (max-width: 699px) {
  .sk-r-top { grid-template-columns: minmax(0, 1fr) auto; padding: 12px; }
  .sk-r-scan { grid-column: 1 / -1; grid-row: 1; }
  .sk-r-line { grid-template-columns: minmax(0, 1fr); grid-template-areas: "what" "new" "nums"; padding: 10px 12px; }
  .sk-r-nums { gap: 8px; }
  .sk-r-qty { width: 52px; }
  .sk-r-exp { width: 60px; }
  .sk-r-remove { margin-left: auto; padding: 0 6px; }
  .sk-r-foot { padding: 10px 12px; }
  .sk-r-go { flex: 1 1 100%; }
  .sk-rc-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sk-rc-when, .sk-rc-by { grid-column: 1; }
  .sk-rc-size, .sk-rc-flags { grid-column: 2; justify-self: end; }
  .sk-rc-line { grid-template-columns: minmax(0, 1fr); }
  .sk-rc-qty { text-align: left; }
}
@media (any-pointer: coarse) {
  .sk-r-remove, .sk-r-sound, .sk-r-retry, .sk-rc-more, .sk-rc-print, .sk-rc-row { min-height: 44px; }
  .sk-rc-name { display: flex; align-items: center; min-height: 44px; }
}
@media print {
  body:has(.sk-receipt) #side-root, body:has(.sk-receipt) #top-root, body:has(.sk-receipt) #dock-root,
  body:has(.sk-receipt) .skip-link, body:has(.sk-receipt) .sk-head, body:has(.sk-receipt) .sk-noprint { display: none !important; }
  body:has(.sk-receipt) { background: #FFFFFF; }
  .sk-receipt { padding: 0; border: 0; }
  .sk-rc-name { color: #000000; text-decoration: none; }
  .sk-rc-line { break-inside: avoid; }
}

/* === Stock: counts === */
/* Task 11: the Counts page (#/counts), a scan count and a list count (#/counts/<id> while open), the review, the done panel
   and a finished count. The calm look of Stock: white bordered panels on the grey ground, hairlines, 6px corners. The
   last scan carries a green or red edge AND its word; every status is a word (Match, Short 2, Over 3, Not in inventory,
   Not in this list), colour only adds weight. Typed fields are .sk-in (16px on touch); every target is 44px on touch.
   The footer with Review sticks to the bottom so it is always in reach. Print shows only a finished count. */
/* --warn (#B26A00, 4.24:1) is for borders and dots; warn words use this darker shade (6.33:1 on white, 5.8:1 on --bg). */
.cnt-page { --cnt-warn-text: #8A5300; min-width: 0; max-width: 1100px; }
.cnt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 16px; }
.cnt-title { margin: 0; }
.cnt-crumb { flex: 1 0 100%; color: var(--muted); font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.cnt-crumb:hover { color: var(--text); text-decoration: underline; }
.cnt-sub { color: var(--muted); font-weight: 600; }
.cnt-h2 { margin: 0 0 10px; font-size: var(--fs-base); font-weight: 700; }
.cnt-h3 { margin: 14px 0 6px; font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.cnt-msg { min-height: 1.2em; margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--accent-text); overflow-wrap: anywhere; }
.cnt-label { font-size: var(--fs-small); font-weight: 600; }
.cnt-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cnt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cnt-name { font-weight: 600; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.cnt-code { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }

.cnt-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--accent-text);
  border-radius: 8px;
  background: var(--surface);
}
.cnt-banner-words { overflow-wrap: anywhere; unicode-bidi: plaintext; }
.cnt-continue { min-height: 44px; padding: 0 22px; text-decoration: none; }
.cnt-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; margin-bottom: 20px; }
.cnt-start-card { min-width: 0; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); }
.cnt-start-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.cnt-go { min-height: 44px; padding: 0 20px; }
.cnt-go[aria-busy="true"], .cnt-finish[aria-busy="true"] { opacity: 0.7; }
.cnt-start .cnt-msg { grid-column: 1 / -1; }
.cnt-scope { min-width: 200px; }

.cnt-history { min-width: 0; }
.cnt-table-wrap { min-width: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.cnt-table { width: 100%; border-collapse: collapse; }
.cnt-table th { padding: 8px 12px; border-bottom: 1px solid var(--hairline); color: var(--muted); font-size: var(--fs-small); font-weight: 600; text-align: left; white-space: nowrap; }
.cnt-table th.cnt-num { text-align: right; }
.cnt-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cnt-table tbody tr:last-child td { border-bottom: 0; }
.cnt-table tbody tr:hover td { background: var(--row-hover); }
.cnt-link { color: var(--text); font-weight: 700; }
.cnt-cancelled { color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.cnt-when, .cnt-by { color: var(--muted); white-space: nowrap; }
.cnt-by { max-width: 180px; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.cnt-more { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-small); }

.cnt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.cnt-tile { min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); }
.cnt-tile dt { color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.cnt-tile dd { margin: 2px 0 0; font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cnt-tile-ok dd { color: var(--ok); }
.cnt-tile-bad dd { color: var(--accent-text); }

.cnt-words { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.cnt-status { font-size: var(--fs-small); font-weight: 700; white-space: nowrap; }
.cnt-is-match { color: var(--ok); }
.cnt-is-short, .cnt-is-unknown { color: var(--accent-text); }
.cnt-is-over { color: var(--cnt-warn-text); }
.cnt-is-not_counted { color: var(--muted); font-weight: 600; }
.cnt-outside { font-size: var(--fs-small); font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.cnt-waiting { align-self: flex-start; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }

.cnt-scan, .cnt-list, .cnt-review { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cnt-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 12px; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); }
.cnt-sound { min-height: 48px; }
.cnt-sound[aria-checked="false"] { color: var(--muted); text-decoration: line-through; }

.cnt-last {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 18px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.cnt-last-ok { border-color: var(--ok); }
.cnt-last-bad { border-color: var(--accent-text); }
.cnt-last-idle { color: var(--muted); font-weight: 600; }
.cnt-last-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cnt-last-name { font-size: 1.125rem; font-weight: 700; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.cnt-last-n { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cnt-last-word .cnt-status { font-size: var(--fs-base); }

.cnt-lines, .cnt-rv-lines { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.cnt-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 64px 150px auto;
  align-items: center;
  gap: 6px 14px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}
.cnt-line:last-child, .cnt-rv-line:last-child { border-bottom: 0; }
.cnt-line-unknown { box-shadow: inset 3px 0 0 var(--accent-text); }
.cnt-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cnt-steps { display: flex; align-items: center; gap: 6px; }
.cnt-step { min-width: 40px; padding: 0; font-size: 1.25rem; font-weight: 700; line-height: 1; }
.cnt-n { min-width: 56px; padding: 0 8px; font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cnt-n-in { width: 64px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cnt-site { display: flex; flex-direction: column; align-items: flex-end; }
.cnt-site-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.cnt-site-label { color: var(--muted); font-size: var(--fs-small); }
.cnt-remove { color: var(--muted); }

.cnt-foot {
  position: sticky;
  bottom: var(--cnt-dock, 0px);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 -6px 16px -12px rgba(0, 0, 0, 0.25);
}
.shell[data-layout="dock"] .cnt-page { --cnt-dock: calc(96px + env(safe-area-inset-bottom)); } /* above the floating dock */
.cnt-foot .cnt-msg { flex: 1 1 200px; }
.cnt-foot .cnt-msg:empty { display: none; } /* nothing to say: the buttons share one row */
.cnt-review-go, .cnt-finish { min-height: 48px; margin-left: auto; padding: 0 22px; }
.cnt-clear, .cnt-back { min-height: 44px; }

.cnt-list-table .cnt-idx { color: var(--muted); font-size: var(--fs-small); }
.cnt-device { min-width: 130px; }
.cnt-device .cnt-name { display: block; }
.cnt-code-under { display: none; }
.cnt-counted { width: 76px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cnt-row-outside td:first-child { box-shadow: inset 3px 0 0 var(--accent-text); }
.cnt-notes { max-width: 640px; }
.cnt-notes-in { resize: vertical; min-height: 60px; }

.cnt-rv-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 16px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.cnt-rv-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cnt-rv-n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cnt-changed { grid-column: 1 / -1; font-size: var(--fs-small); font-weight: 700; color: var(--cnt-warn-text); }
.cnt-notes-words { display: flex; flex-direction: column; gap: 4px; }
.cnt-note { margin: 0; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.cnt-note-changed { color: var(--cnt-warn-text); }

.cnt-done {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
  padding: 16px 18px;
  border: 1px solid var(--ok);
  border-radius: 8px;
  background: var(--surface);
}
.cnt-done-title { margin: 0; color: var(--ok); font-size: var(--fs-large); }
.cnt-done-words { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.cnt-done-acts { display: flex; flex-wrap: wrap; gap: 8px; }

.cnt-detail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cnt-detail-head { display: flex; justify-content: flex-end; }
.cnt-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); }
.cnt-meta dt { color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.cnt-meta dd { margin: 2px 0 0; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.cnt-outcome { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }

@media (max-width: 899px) {
  .cnt-start { grid-template-columns: minmax(0, 1fr); }
  .cnt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .cnt-top { padding: 12px; }
  .cnt-last { grid-template-columns: minmax(0, 1fr) auto; }
  .cnt-last-word { grid-column: 1 / -1; }
  .cnt-line { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what what" "steps site" "word remove"; padding: 10px 12px; }
  .cnt-line > .cnt-what { grid-area: what; }
  .cnt-line > .cnt-steps { grid-area: steps; }
  .cnt-line > .cnt-site { grid-area: site; }
  .cnt-line > .cnt-words { grid-area: word; }
  .cnt-line > .cnt-remove { grid-area: remove; justify-self: end; }
  .cnt-rv-line { grid-template-columns: minmax(0, 1fr); }
  .cnt-foot { padding: 10px 12px; }
  .cnt-review-go, .cnt-finish { flex: 1 1 auto; }
  .cnt-scope { min-width: 0; width: 100%; }
  .cnt-start-row > .cnt-field { flex: 1 1 100%; }
  .cnt-table th, .cnt-table td { padding: 8px; }
  .cnt-list-table .cnt-col-idx, .cnt-list-table .cnt-col-code, .cnt-list-table .cnt-col-var { display: none; } /* the status word says Short 2 */
  .cnt-list-table th, .cnt-list-table td { padding: 8px 6px; }
  .cnt-device { min-width: 110px; }
  .cnt-counted { width: 60px; }
  .cnt-code-under { display: block; }
}
@media (any-pointer: coarse) {
  .cnt-step, .cnt-n, .cnt-remove, .cnt-sound, .cnt-retry, .cnt-print, .cnt-kind, .cnt-done-acts .btn, .cnt-crumb { min-height: 44px; }
  .cnt-step { min-width: 44px; }
  .cnt-crumb { display: inline-flex; align-items: center; flex: 0 0 auto; }
  .cnt-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}
@media print {
  body:has(.cnt-printable) #side-root, body:has(.cnt-printable) #top-root, body:has(.cnt-printable) #dock-root,
  body:has(.cnt-printable) .skip-link, body:has(.cnt-printable) .cnt-crumb, body:has(.cnt-printable) .sk-noprint { display: none !important; }
  body:has(.cnt-printable) { background: #FFFFFF; }
  .cnt-printable .cnt-table-wrap, .cnt-printable .cnt-meta, .cnt-printable .cnt-tile { border-color: #000000; }
  .cnt-printable .cnt-table tr { break-inside: avoid; }
}
/* === Stock: repair parts === */
/* Task 14: the Repair parts page (#/stock/parts, and ?filter=parts at Needs ordering). The bar (Search models, All
   models, Needs ordering N, managers' Edit lists, not built until Operations); the grid, a real table that scrolls
   sideways inside its own box (never the page) with the Model column held at the left and a shaded edge where more
   parts are (#26, a shadow as on the Repairs board); each cell a button with its number, a low cell tinted with the word
   Low (never colour alone). Needs ordering and On order are white bordered lists, one row per line. The panel is the
   shared Dialog. Typed fields are .sk-in (16px on touch, the Stock: edit section); every target is 44px on touch. */
.sk-pp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.sk-pp-search { flex: 1 1 220px; max-width: 320px; }
.sk-pp-empty { margin: 0; padding: 28px 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--muted); }

.sk-grid-scroll { position: relative; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.sk-grid-scroll::before, .sk-grid-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.sk-grid-scroll::before { left: var(--sk-grid-model, 120px); box-shadow: inset 22px 0 16px -14px rgba(22, 22, 26, 0.22); }
.sk-grid-scroll::after { right: 0; box-shadow: inset -22px 0 16px -14px rgba(22, 22, 26, 0.22); }
.sk-grid-scroll[data-more-left="true"]::before, .sk-grid-scroll[data-more-right="true"]::after { opacity: 1; }
.sk-grid-box { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radius-card); }
.sk-grid { min-width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.sk-grid th, .sk-grid td { padding: 6px; border-bottom: 1px solid var(--hairline); text-align: center; white-space: nowrap; }
.sk-grid tbody tr:last-child th, .sk-grid tbody tr:last-child td { border-bottom: 0; }
.sk-grid thead th { background: var(--row-hover); font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); }
.sk-grid .sk-grid-model {
  position: sticky;
  left: 0;
  z-index: 1;
  width: var(--sk-grid-model, 120px);
  min-width: var(--sk-grid-model, 120px);
  max-width: var(--sk-grid-model, 120px);
  padding-left: 12px;
  border-right: 1px solid var(--hairline);
  background: var(--surface);
  text-align: left;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
}
.sk-grid thead .sk-grid-model { background: var(--row-hover); }
.sk-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 56px;
  min-height: var(--tap);
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-button);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
}
.sk-cell:hover { border-color: #B9B9C0; }
.sk-cell-zero { color: var(--muted); font-weight: 400; }
.sk-cell-low { border-color: #E7B3BE; background: #FCEFF2; color: var(--accent-text); }
.sk-cell-word { font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }

.sk-pp-error { margin: 10px 0 0; color: var(--accent-text); font-weight: 600; }
.sk-pp-status:empty, .sk-pp-saved:empty { display: none; }
.sk-pp-status, .sk-pp-saved { margin: 10px 0 0; color: var(--muted); font-weight: 600; }
.sk-need { margin-top: 22px; }
.sk-need-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.sk-need-title { margin: 0; font-size: var(--fs-large); }
.sk-need-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.sk-need-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px 14px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
}
.sk-onorder .sk-need-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.sk-need-row:last-child { border-bottom: 0; }
.sk-need-text { min-width: 0; }
.sk-need-name { display: block; font-weight: 600; overflow-wrap: anywhere; unicode-bidi: isolate; }
.sk-need-no { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.sk-need-meta { display: block; font-size: var(--fs-small); color: var(--muted); }
.sk-need-order { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-need-btn[aria-busy="true"] { opacity: 0.6; }

.sk-pp-panel { display: grid; gap: 14px; }
.sk-pp-label { display: block; margin-bottom: 4px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.sk-pp-steps { display: flex; align-items: center; gap: 8px; }
.sk-pp-step { min-width: 44px; min-height: 44px; font-size: var(--fs-large); }
.sk-pp-step[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.sk-pp .sk-pp-qty { width: 84px; text-align: center; font-variant-numeric: tabular-nums; }
.sk-pp-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-pp-onorder { margin: 0; font-weight: 600; }
.sk-pp-order { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.sk-pp-order .sk-pp-label { flex: 1 0 100%; margin-bottom: 0; }
.sk-pp .sk-pp-oqty { width: 72px; text-align: center; }
.sk-pp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.sk-pp-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; }
.sk-pp-facts dt { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.sk-pp-facts dd { margin: 0; overflow-wrap: anywhere; unicode-bidi: isolate; }
.sk-pp-prices p { margin: 0 0 4px; }
.sk-pp-done { width: 100%; }
@media (max-width: 700px) {
  .sk-pp-search { flex-basis: 100%; max-width: none; }
  .sk-page { --sk-grid-model: 96px; }
  .sk-need-row, .sk-onorder .sk-need-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sk-need-text { grid-column: 1 / -1; }
  .sk-pp-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (any-pointer: coarse) {
  .sk-cell, .sk-pp-all, .sk-pp-needs, .sk-need-btn, .sk-pp-ordered, .sk-pp-done { min-height: 44px; }
  .sk-cell { min-width: 56px; }
}

/* === Stock: import === */
/* Task 16: the import page (#/stock/import, managers only). Three white cards: the file (Choose file is a label on a
   visually hidden file input, so its focus ring shows on the label; or paste cells), the columns (a grid of labelled
   selects, the three options) and What would change (the counts as tiles, warnings with an accent bar and in words, the
   lists as tables that scroll inside their own box, never the page). Apply asks in the page. Typed fields are .sk-in
   (16px on touch, the Stock: edit section); every target is 44px on touch. */
.imp { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 1080px; }
.imp-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px 18px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); }
.imp-h { margin: 0; font-size: 1rem; font-weight: 700; }
.imp-h:focus { outline: none; }
.imp-h:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.imp-sub { margin: 6px 0 0; font-size: var(--fs-small); font-weight: 700; text-transform: none; }
.imp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.imp-choose { cursor: pointer; }
.imp-file:focus-visible + .imp-choose { outline: 2px solid var(--text); outline-offset: 2px; }
.imp-file-name { min-width: 0; font-size: var(--fs-small); font-weight: 600; color: var(--muted); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.imp-paste-box { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.imp-paste { min-height: 72px; resize: vertical; font-family: var(--font-mono); font-size: var(--fs-small); }
.imp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.imp-select { padding-right: 28px; text-overflow: ellipsis; }
.imp-opts { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; border: 0; }
.imp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.imp-check, .imp-apply { min-width: 112px; }

.imp-error, .imp-done {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--accent-text);
  border-radius: var(--radius-field);
  background: var(--surface);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.imp-error { color: var(--accent-text); }
.imp-done { border-color: var(--ok); }
.imp-done:focus { outline: none; }
.imp-done:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.imp-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.imp-count { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-field); font-weight: 600; font-variant-numeric: tabular-nums; }
.imp-warn, .imp-note { margin: 0; padding: 8px 12px; border: 1px solid var(--accent-text); border-radius: var(--radius-field); font-size: var(--fs-small); font-weight: 600; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.imp-warn { color: var(--accent-text); }
.imp-note { border-color: var(--line); color: var(--muted); }
.imp-more, .imp-nothing { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }

.imp-scroll { max-width: 100%; max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-card); }
.imp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.imp-table th { position: sticky; top: 0; z-index: 1; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--surface); text-align: left; font-weight: 700; white-space: nowrap; }
.imp-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.imp-table tbody tr:last-child td { border-bottom: 0; }
.imp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.imp-table th.imp-num { text-align: right; }
.imp-code { font-family: var(--font-mono); white-space: nowrap; }
.imp-name { min-width: 160px; max-width: 420px; }
.imp-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.imp-change { display: block; white-space: nowrap; }

.imp-confirm { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--text); border-radius: var(--radius-card); }
.imp-confirm-text { margin: 0; font-weight: 600; }
.imp-confirm-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.imp-go { min-width: 112px; }

@media (max-width: 699px) {
  .imp-card { padding: 14px; }
  .imp-grid { grid-template-columns: minmax(0, 1fr); }
  .imp-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imp-name { min-width: 104px; }
  .imp-table td, .imp-table th { padding: 6px 8px; }
}
@media (any-pointer: coarse) {
  .imp-choose, .imp-use, .imp-check, .imp-apply, .imp-go, .imp-back { min-height: 44px; }
  .imp-paste { font-size: 16px; }
}

/* === Stock: order list === */
/* Task 17: the Order list (#/stock/order). One white bordered list, a row per product: the tick, the name with
   `SKU · N on hand, minimum M` under it (the whole label ticks), and Order with its quantity field; the buttons below
   (Copy list, Print, Download CSV) with their word (`Copied`, `Nothing selected`). Typed fields are .sk-in (16px on touch,
   the Stock: edit section); every target is 44px on touch. The print sheet (.sk-ol-print) is hidden on screen; in print
   it is all there is: Reorder list, the date · prepared by, and the table, black on white. */
.sk-ol { min-width: 0; max-width: 860px; }
.sk-ol-empty { margin: 0; padding: 28px 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--muted); }
.sk-ol-rows { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.sk-ol-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.sk-ol-row:last-child { border-bottom: 0; }
.sk-ol-tickcell { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -6px 0 -6px -10px; cursor: pointer; } /* the whole 44px cell ticks */
.sk-ol-tick { width: 20px; height: 20px; margin: 0; accent-color: var(--text); }
.sk-ol-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; }
.sk-ol-name { font-weight: 600; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.sk-ol-meta { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sk-ol-order { display: flex; align-items: center; gap: 8px; }
.sk-ol-qlabel { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.sk-ol-qty { width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.sk-ol-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.sk-ol-print { display: none; }

@media (max-width: 699px) {
  .sk-ol-row { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 10px 12px; }
  .sk-ol-order { grid-column: 2; }
  .sk-ol-foot .btn { flex: 1 1 auto; }
}
@media (any-pointer: coarse) {
  .sk-ol-tick { width: 24px; height: 24px; }
  .sk-ol-row { min-height: 44px; }
  .sk-ol-what { min-height: 44px; justify-content: center; }
  .sk-ol-foot .btn { min-height: 44px; }
}
@media print {
  body:has(.sk-ol-print) #side-root, body:has(.sk-ol-print) #top-root, body:has(.sk-ol-print) #dock-root,
  body:has(.sk-ol-print) .skip-link, body:has(.sk-ol-print) .sk-head, body:has(.sk-ol-print) .sk-ol-screen { display: none !important; }
  body:has(.sk-ol-print) { background: #FFFFFF; }
  .sk-ol { max-width: none; }
  .sk-ol-print { display: block; color: #000000; font-family: Arial, Helvetica, sans-serif; }
  .sk-ol-print-title { margin: 0 0 4px; font-size: 20px; }
  .sk-ol-print-meta { margin: 0 0 16px; font-size: 12px; color: #555555; }
  .sk-ol-print-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .sk-ol-print-table th, .sk-ol-print-table td { padding: 7px 8px; border-bottom: 1px solid #CCCCCC; text-align: left; }
  .sk-ol-print-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #555555; }
  .sk-ol-print-table .sk-ol-n { text-align: right; }
  .sk-ol-print-table tr { break-inside: avoid; }
}

/* === Operations: tasks === */
/* ops/tasks-page.js: the Tasks page, Checklists tab.
   The cards view: the date line, a header row (the title, the Checklists | Schedule | Notes tabs, the search), the daily
   cards (two side by side when they fit) and the How to cards in a grid. A card is one link. The open list: Back to tasks,
   the title, the bar and one big button per step (56px at least, the whole row is the target); a done step has a filled
   box with a check mark (and the word Done for screen readers), its text struck through, and who and when below it. */
.tk-page { max-width: 1040px; }
.tk-open { max-width: 820px; }
.tk-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.tk-eyebrow {
  margin: 0;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tk-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-width: 0; }
.tk-header .ts { margin-bottom: 0; }
.tk-tab { display: inline-flex; align-items: center; text-decoration: none; }
.tk-tab[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.tk-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.tk-search { flex: 0 1 300px; }
.tk-stale { margin: -10px 0 14px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.tk-loading, .tk-empty { margin: 0; padding: 16px 2px; color: var(--muted); }
.tk-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-weight: 600; color: var(--accent-text); }

.tk-group + .tk-group { margin-top: 28px; }
.tk-group-title { margin-bottom: 10px; }
.tk-cards { display: grid; gap: 12px; }
.tk-cards-daily { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.tk-cards-how { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.tk-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.tk-card:hover { background: var(--row-hover); border-color: #C6C6CC; }
.tk-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tk-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.tk-card-title { min-width: 0; font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.tk-chip {
  flex: none;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tk-complete .tk-chip { color: var(--ok); }
.tk-bar { height: 6px; border-radius: 3px; background: var(--bar-track); overflow: hidden; }
.tk-fill { display: block; height: 100%; border-radius: 3px; background: var(--bar-in); }
.tk-bar-done .tk-fill { background: var(--ok); }
.tk-count { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.tk-left { margin: 0; padding: 0 0 0 18px; font-size: var(--fs-small); color: var(--text); }
.tk-left li { overflow-wrap: anywhere; }
.tk-left li + li { margin-top: 2px; }
.tk-left li::marker { color: var(--muted); }
.tk-more { margin-left: 18px; font-size: var(--fs-small); color: var(--muted); }

.tk-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  margin: -6px 0 6px -4px;
  padding: 0 6px 0 2px;
  border-radius: var(--radius-button);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.tk-back:hover { color: var(--text); text-decoration: underline; }
.tk-back-icon { flex: none; }
.tk-none { margin-top: 8px; }
.tk-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; margin-bottom: 12px; }
.tk-list-title { min-width: 0; font-size: var(--fs-large); font-weight: 700; overflow-wrap: anywhere; }
.tk-reset { flex: none; }
.tk-open .tk-bar { height: 8px; border-radius: 4px; background: #E4E4E8; } /* on the grey ground, not a card */
.tk-list-count { margin: 8px 0 0; }
.tk-alert { margin: 0; color: var(--accent-text); font-weight: 600; }
.tk-alert:not(:empty) { margin-top: 10px; }
.tk-steps { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.tk-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tk-step:hover { border-color: #B9B9C0; }
.tk-step:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tk-on { background: var(--bg); }
.tk-box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid #8A8A93;
  border-radius: 6px;
  background: var(--surface);
  color: #FFFFFF;
}
.tk-on .tk-box { border-color: var(--ok); background: var(--ok); }
.tk-check { display: block; }
.tk-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 3px; }
.tk-line { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.tk-on .tk-line { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.tk-note { font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.tk-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.tk-wait { border-color: var(--warn); color: var(--text); }
.tk-alldone { margin: 18px 0 0; padding: 14px; border: 1px solid var(--ok); border-radius: var(--radius-card); background: var(--surface);
  color: var(--ok); font-weight: 700; text-align: center; }

@media (max-width: 640px) {
  .tk-search { flex: 1 1 100%; margin-left: 0; }
  .tk-step { padding: 12px 14px; gap: 12px; }
}
@media (any-pointer: coarse) {
  .tk-tab, .tk-back, .tk-reset, .tk-search .rb-search-input { min-height: 44px; }
  .tk-search .rb-search-input { font-size: 16px; }
}

/* === Operations: checklist editor and history === */
/* ops/checklist-editor.js (#/tasks/edit, managers): one card per list (the name, Daily | Reference, Up / Down / Remove),
   its numbered steps (step and tip fields, Up / Down / Remove), Add step; then Add checklist and Load examples, and a bar
   that stays in view at the bottom (above the dock) with the message line, Cancel and Save. Phones: the buttons go under
   the fields.
   ops/checklist-history.js (#/tasks/history, managers): a table, one row per daily list, one square per day; empty, half
   or filled (never colour alone); the day and count show on hover or focus. Tasks page: the managers' links. */
.tk-manage { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.tk-manage-link { text-decoration: none; }

.ch-page { max-width: 880px; }
.ce-heading, .ch-heading { margin-bottom: 16px; }
.ce-lists { display: flex; flex-direction: column; gap: 14px; }
.ce-list {
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.ce-list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.ce-name { flex: 1 1 240px; min-width: 0; }
.ce-kind { flex: none; }
.ce-acts { display: flex; flex: none; gap: 6px; }
.ce-act { padding: 0 12px; }
.ce-input {
  width: 100%;
  min-height: var(--tap);
  padding: 6px 10px;
  border: 1px solid #8A8A93;
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
}
.ce-input::placeholder { color: var(--muted); }
.ce-title { font-size: 1.0625rem; font-weight: 600; }
.ce-steps { margin: 14px 0 0; padding: 0; list-style: none; }
.ce-step-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.ce-num { padding-top: 8px; color: var(--muted); font-size: var(--fs-small); font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums; }
.ce-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
@media (min-width: 900px) { .ce-fields { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } } /* step and tip side by side */
.ce-add { margin: 4px 0 0 34px; }
.ce-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ce-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 16px -4px 0;
  padding: 12px 4px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.shell[data-layout="dock"] .ce-bar { bottom: calc(84px + env(safe-area-inset-bottom)); }
/* with the dock, the strip under the bar is filled too, so the lists never show between the bar and the dock */
.shell[data-layout="dock"] .ce-bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: calc(84px + env(safe-area-inset-bottom)); background: var(--bg); }
.ce-msg { display: flex; flex: 1 1 200px; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.ce-alert, .ce-status { margin: 0; font-weight: 600; }
.ce-alert { color: var(--accent-text); }
.ce-status { color: var(--ok); }
.ce-alert:empty, .ce-status:empty { display: none; }
.ce-bar-row { display: flex; gap: 8px; margin-left: auto; }
.ce-bar-row a.btn { text-decoration: none; }
.ce-bar-row .btn-primary { min-width: 96px; }

@media (max-width: 640px) {
  .ce-list { padding: 12px; }
  .ce-name { flex-basis: 100%; }
  .ce-list-head .ce-acts { margin-left: auto; }
  .ce-step-row { grid-template-columns: 22px minmax(0, 1fr); }
  .ce-step-row .ce-acts { grid-column: 2; }
  .ce-add { margin-left: 32px; }
}

.ch-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.ch-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ch-table th, .ch-table td { padding: 0; }
.ch-table thead th { padding: 10px 2px 8px; border-bottom: 1px solid var(--line); font-size: var(--fs-tiny); font-weight: 600;
  color: var(--muted); text-align: center; white-space: nowrap; }
.ch-table thead th.ch-list { padding-left: 16px; text-align: left; }
.ch-wd, .ch-md { display: block; }
.ch-table tbody th.ch-list { min-width: 104px; max-width: 220px; padding: 10px 12px 10px 16px; font-weight: 600; text-align: left;
  overflow-wrap: anywhere; }
.ch-table tbody tr + tr > * { border-top: 1px solid var(--line); }
.ch-table .ch-list { position: sticky; left: 0; z-index: 1; background: var(--surface); } /* the names stay while the days scroll */
.ch-cell { position: relative; min-width: 34px; height: 44px; text-align: center; vertical-align: middle; outline: none; }
.ch-mark {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #8A8A93;
  border-radius: 4px;
  background: var(--surface);
  vertical-align: middle;
}
.part > .ch-mark { border-color: var(--bar-in); box-shadow: inset 0 -8px 0 var(--bar-in); } /* half filled */
.ch-key.part { border-color: var(--bar-in); box-shadow: inset 0 -5px 0 var(--bar-in); }
.full > .ch-mark, .ch-key.full { background: var(--ok); border-color: var(--ok); }
.ch-cell:focus-visible .ch-mark { outline: 3px solid var(--focus); outline-offset: 2px; }
.ch-tip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ch-cell:hover .ch-tip, .ch-cell:focus .ch-tip {
  bottom: calc(100% - 4px);
  left: 50%;
  z-index: 10;
  width: auto;
  height: auto;
  padding: 5px 9px;
  overflow: visible;
  clip: auto;
  border-radius: var(--radius-button);
  background: var(--text);
  color: #FFFFFF;
  font-size: var(--fs-small);
  font-weight: 600;
  transform: translateX(-50%);
  pointer-events: none;
}
/* the last days' boxes open to the left, so they stay inside the table */
.ch-cell:nth-last-child(-n+3):hover .ch-tip, .ch-cell:nth-last-child(-n+3):focus .ch-tip { left: auto; right: 2px; transform: none; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--muted);
  font-size: var(--fs-small); }
.ch-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ch-key { width: 14px; height: 14px; border-radius: 3px; }

@media (any-pointer: coarse) {
  .ce-input { font-size: 16px; min-height: 44px; }
  .ce-act, .ce-add, .tk-manage-link, .ce-kind .segmented-item { min-height: 44px; }
  .ch-cell { min-width: 44px; } /* focusable day boxes: 44 px touch target (the table scrolls inside .ch-scroll) */
}

/* === Operations: notes panel === */
/* ops/notes-panel.js: the notes panel (Tasks > Notes in full; Home in compact form, Task 8). One card: the tabs (Home's
   nt-tab look), the add box (typed text 16px), the alert line, then the rows. A row: on My notes and To-do a 56px check
   button (a 28px box inside it; filled green with a check mark when done, the text struck through, the word Done for
   screen readers), the text with its line breaks, who and when, and Edit / Remove (Remove? in red while it asks). On
   phones Edit / Remove move under the text. Compact: the text is cut to four lines and All notes closes the card. */
.np-page { max-width: 820px; }
.np { padding: 0; }
.np-add { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.np-add-input, .np-edit-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #8A8A93;
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  resize: vertical;
}
.np-add-input { height: 44px; max-height: 240px; }
.np-add-input:not(:placeholder-shown) { height: 88px; } /* grows with text, never on focus: a click below never moves */
.np-add-input::placeholder, .np-edit-input::placeholder { color: var(--muted); }
.np-add-btn { flex: none; min-height: 44px; padding: 0 18px; }
.np-alert { margin: 0; padding: 0 14px; color: var(--accent-text); font-weight: 600; }
.np-alert:not(:empty) { padding: 10px 14px 0; }
.np-empty { margin: 0; padding: 16px 14px; color: var(--muted); }
.np-list { margin: 0; padding: 0; list-style: none; }
.np-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px 14px; border-top: 1px solid var(--line); }
.np-row:first-child { border-top: 0; }
.np-row:focus { outline: none; }
.np-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.np-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-height: 56px;
  margin: -8px -4px -8px -12px; /* the whole 56px is the target; the row stays as tall as its text */
  padding: 0;
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.np-check:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; }
.np-check:disabled { cursor: default; opacity: 0.5; }
.np-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid #8A8A93;
  border-radius: 6px;
  background: var(--surface);
}
.np-check:not(:disabled):hover .np-box { border-color: var(--text); }
.np-check[aria-pressed="true"] .np-box { border-color: var(--ok); background: var(--ok); }
.np-tick { display: block; }
.np-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.np-checkrow .np-body { padding-top: 7px; }
.np-text { margin: 0; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.np-done .np-text { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.np-gone .np-text { color: var(--muted); }
.np-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.np-actions { display: flex; flex: none; gap: 2px; margin: -4px -8px -4px 0; }
.np-act { min-height: 36px; padding: 0 10px; color: var(--muted); font-weight: 600; }
.np-act:hover { color: var(--text); }
.np-asking, .np-asking:hover { color: var(--accent-text); }
.np-editor { display: flex; flex-direction: column; gap: 8px; }
.np-edit-input { min-height: 88px; }
.np-edit-actions { display: flex; gap: 8px; }
.np-compact .np-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }

@media (max-width: 560px) {
  .np-row { flex-wrap: wrap; }
  .np-actions { flex-basis: 100%; justify-content: flex-end; margin: -6px -8px -6px 0; }
}
@media (any-pointer: coarse) {
  .np-act, .np-edit-actions .btn { min-height: 44px; }
}

/* === Operations: Home links === */
/* The checklist title on Home opens that list on Tasks: it keeps the title's look, underlined on hover. */
a.cl-title { display: inline-flex; align-items: center; min-height: 32px; color: var(--text); text-decoration: none; }
a.cl-title:hover { text-decoration: underline; }
a.cl-title:focus-visible { outline-offset: 2px; }
@media (any-pointer: coarse) {
  a.cl-title { min-height: 44px; }
}
/* === end Operations: Home links === */

/* === Operations: schedule === */
/* ops/schedule-page.js and ops/schedule-edit.js: Tasks > Schedule. The bar (week paging, View menu, Print, the managers'
   Edit schedule and Store hours), the week as a table (days across, the Open and Coverage rows, one row per person), one
   card per day under 700px, the managers' editor (a table of time fields that stacks into one card per person on a phone)
   and the print sheet (the week table alone, one landscape page, D17). Today is a tint plus the hidden word Today; my
   rows a tint, a bar and the hidden word You (never colour alone). */
.sc-page { max-width: 1280px; }
.tk-header > .tk-title { margin-bottom: 0; padding: 0 2px; } /* the plain title (no stats popover) sits like the stats title */
.sc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.sc-nav, .sc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-sq { width: var(--tap); padding: 0; font-size: 1.375rem; line-height: 1; }
.sc-range { min-width: 132px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-tools a.btn { text-decoration: none; }
.sc-viewwrap { position: relative; }
.sc-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 270px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(22, 22, 26, 0.12);
}
.sc-pf { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.sc-pf select { min-height: var(--tap); padding: 0 8px; border: 1px solid var(--muted); border-radius: var(--radius-field); background: var(--surface); font: inherit; font-weight: 400; }
.sc-pc { display: flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; }
.sc-pc input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--accent); }
.sc-status:empty { display: none; }
.sc-status { margin: -6px 0 12px; }

/* the week table */
.sc-week { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.sc-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sc-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sc-table th, .sc-table td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.sc-table thead th { padding-top: 12px; padding-bottom: 10px; border-bottom-color: #C6C6CC; font-weight: 400; background: var(--surface); }
.sc-table tbody th { width: 150px; font-weight: 600; }
.sc-corner { width: 150px; color: var(--muted); font-size: var(--fs-small); }
.sc-dow { display: block; font-weight: 700; }
.sc-date { display: block; color: var(--muted); font-size: var(--fs-small); }
.sc-table tr:last-child > * { border-bottom: 0; }
.sc-table .sc-today { background: #F3F6FC; }
.sc-table thead .sc-today { box-shadow: inset 0 3px 0 var(--focus); }
.sc-table thead .sc-today .sc-date { color: var(--text); font-weight: 600; }
.sc-open th, .sc-open td { background: #FAFAFB; font-size: var(--fs-small); }
.sc-open .sc-today { background: #EDF1FA; }
.sc-hours { display: block; }
.sc-closed { color: var(--muted); }
.sc-note { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: 1.3; }
.sc-coverage th, .sc-coverage td { font-size: var(--fs-small); }
.sc-gap { line-height: 1.35; }
.sc-gap + .sc-gap { margin-top: 4px; }
.sc-seg { line-height: 1.35; }
.sc-seg + .sc-seg { margin-top: 6px; }
.sc-time { font-variant-numeric: tabular-nums; font-size: var(--fs-small); font-weight: 600; }
.sc-table .sc-me th, .sc-table .sc-me td { background: #FBF4F5; }
.sc-table .sc-me th { box-shadow: inset 3px 0 0 var(--accent); }
.sc-none { padding: 18px 10px; color: var(--muted); }

/* one card per day (narrow screens) */
.sc-cards { display: none; }
.sc-days { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sc-day { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.sc-day.sc-today { border-color: var(--focus); box-shadow: inset 3px 0 0 var(--focus); }
.sc-day-title { margin: 0 0 2px; font-size: var(--fs-base); }
.sc-day-open { margin: 0; font-size: var(--fs-small); }
.sc-day-gaps { margin-top: 6px; font-size: var(--fs-small); }
.sc-day-people { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); list-style: none; }
.sc-day-person { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.sc-day-person .sc-name { font-weight: 600; }
.sc-day-person.sc-me { margin: -4px -8px; padding: 4px 8px; border-radius: 4px; background: #FBF4F5; box-shadow: inset 3px 0 0 var(--accent); }
.sc-day-shifts { text-align: right; }

@media (max-width: 899px) {
  .sc-table tbody th, .sc-corner { width: 108px; }
  .sc-table th, .sc-table td { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 699px) {
  .sc-week { display: none; }
  .sc-cards { display: block; }
  .sc-range { min-width: 0; }
  .sc-bar { gap: 10px; }
  .sc-menu { left: 0; right: auto; width: min(270px, calc(100vw - 32px)); }
}

/* the editor */
.se-editor { min-width: 0; }
.se-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.se-table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; }
.se-table th, .se-table td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.se-table thead th { font-weight: 400; }
.se-table .se-corner { width: 112px; color: var(--muted); font-size: var(--fs-small); }
.se-table .se-today { background: #F3F6FC; }
.se-table thead .se-today { box-shadow: inset 0 3px 0 var(--focus); }
.se-dayrow > * { background: #FAFAFB; }
.se-who { width: 112px; }
.se-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.se-rm { min-height: 28px; margin-top: 4px; padding: 0 8px; color: var(--muted); font-size: var(--fs-small); }
.se-rm:hover { color: var(--accent-text); }
.se-cell { display: table-cell; }
.se-dlabel { display: none; }
.se-shift { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed var(--line); }
.se-times { display: flex; flex-direction: column; gap: 4px; }
.se-noterow { display: flex; gap: 4px; }
.se-time, .se-note, .se-mode, .se-addp, .se-rep select {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 2px 6px;
  border: 1px solid var(--muted);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-small);
}
.se-daycell { display: table-cell; }
.se-daycell > * + * { margin-top: 4px; }
.se-x { flex: none; width: 32px; min-height: 32px; padding: 0; color: var(--muted); font-size: 1.125rem; }
.se-x:hover { color: var(--accent-text); }
.se-add { width: 100%; min-height: 32px; padding: 0 6px; font-size: var(--fs-small); color: var(--muted); border-style: dashed; }
.se-add:hover { color: var(--text); }
.se-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; }
.se-addp { width: auto; min-width: 200px; min-height: var(--tap); font-size: var(--fs-base); }
.se-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.se-rep { display: inline-flex; gap: 6px; }
.se-rep select { width: auto; min-height: var(--tap); font-size: var(--fs-base); }
.se-ask { margin: 0 0 16px; }
.se-ask-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* a phone or a tablet held upright: the editor's table becomes one card per row (the Day row, then each person), each
   day labelled */
@media (max-width: 899px) {
  .se-scroll { overflow: visible; border: 0; background: transparent; }
  .se-table, .se-table tbody, .se-table tr, .se-table th, .se-table td { display: block; width: 100%; min-width: 0; }
  .se-table thead { display: none; }
  .se-table tr { margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
  .se-table th.se-who { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: #FAFAFB; }
  .se-rm { margin-top: 0; }
  .se-table td.se-cell { display: grid; grid-template-columns: 92px minmax(0, 340px); gap: 6px 10px; align-items: start;
    border-bottom: 1px solid var(--line); }
  .se-table td.se-cell > *:not(.se-dlabel) { grid-column: 2; margin-top: 0; }
  .se-table tr > td.se-cell:last-child { border-bottom: 0; }
  .se-dlabel { display: block; grid-column: 1; grid-row: 1 / span 4; padding-top: 6px; font-size: var(--fs-small); font-weight: 600; }
  .se-times { flex-direction: row; }
  .se-addp { width: 100%; }
}
@media (max-width: 520px) {
  .se-table td.se-cell { grid-template-columns: 64px minmax(0, 1fr); }
  .se-times { flex-direction: column; }
}
@media (any-pointer: coarse) {
  .se-time, .se-note, .se-mode, .se-addp, .se-rep select, .sc-pf select { min-height: 44px; font-size: 16px; }
  .se-x, .se-add, .se-rm { min-height: 44px; }
  .se-x { width: 44px; }
  .sc-sq { width: 44px; }
  .se-table { min-width: 1040px; }
}
@media (any-pointer: coarse) and (max-width: 899px) {
  .se-table { min-width: 0; }
}

/* print: the week table alone on one landscape page (D17; the old print sheet, Index.html:15314-15359). The landscape page
   box is a named page only the schedule asks for, and every shell rule is scoped to a page that holds it: every other staff
   print keeps the printer's portrait page. */
.sc-page { page: sched; }
/* the body takes the same page name, so no default (portrait) page is opened before or after the week (a named page on an
   inner box alone starts a page of its own, with a blank page on each side in Chrome) */
@media print { body:has(.sc-page) { page: sched; } }
@page sched { size: letter landscape; margin: 0.4in; }
@media print {
  body:has(.sc-page) { background: #FFFFFF; }
  body:has(.sc-page) .skip-link, body:has(.sc-page) .shell-side, body:has(.sc-page) #top-root, body:has(.sc-page) #notice-root,
  body:has(.sc-page) .shell-dock, body:has(.sc-page) .tk-head, .sc-bar, .sc-cards, .sc-status, body:has(.sc-page) .tk-stale, .sc-menu,
  .sc-coverage { display: none !important; }
  body:has(.sc-page) .shell, body:has(.sc-page) .shell-row, body:has(.sc-page) .shell[data-layout="sidebar"] .shell-row { display: block; min-height: 0; }
  body:has(.sc-page) .shell-column { display: block; min-height: 0; }
  body:has(.sc-page) #main, body:has(.sc-page) .shell[data-layout="dock"] #main { padding: 0; }
  .page.sc-page { max-width: none; padding: 0; }
  .sc-week { display: block !important; border: 0; border-radius: 0; overflow: visible; }
  .sc-table { font-size: 10pt; color: #000000; }
  .sc-caption { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    caption-side: top; padding: 0 0 10px; text-align: left; font-size: 16pt; font-weight: 700; }
  .sc-table th, .sc-table td, .sc-table tr:last-child > * { padding: 5px 6px; border: 1px solid #444444; }
  .sc-table thead th { background: #E8E8E8; }
  .sc-table tbody th, .sc-corner { width: 1.3in; }
  .sc-table .sc-today, .sc-table thead .sc-today, .sc-table .sc-me th, .sc-table .sc-me td, .sc-open th, .sc-open td { background: transparent; box-shadow: none; }
  .sc-table tr { break-inside: avoid; }
  .sc-note, .sc-date, .sc-closed, .sc-corner { color: #333333; }
}
/* === end Operations: schedule === */

/* === Operations: store hours === */
/* ops/hours-page.js (#/tasks/hours): the today line; Weekly hours, one row per weekday (the name, Open | Closed, the two
   times when open) and the save bar; Days, one row per dated exception (the date, the hours, the note, Change / Clear),
   the message line and Add a day (its form: the day, Normal hours | Closed | Special hours, the times, a note). Staff see
   the rows as text. Phones: a row's control and times go under the day name.
   ops/leave-guard.js: the leave question's button row (the same look the dialog had with the checklist bar's row). */
.lg-row { display: flex; gap: 8px; }
.lg-row a.btn { text-decoration: none; }
.lg-row .btn-primary { min-width: 96px; }

.sh-page { max-width: 760px; }
.sh-heading { margin-bottom: 8px; }
.sh-today { margin: 0 0 20px; font-size: 1.0625rem; font-weight: 600; }
.sh-section { margin-top: 24px; }
.sh-h { margin: 0 0 6px; font-size: var(--fs-base); font-weight: 700; }
.sh-from { margin: 0 0 8px; color: var(--muted); font-size: var(--fs-small); }
.sh-week, .sh-exs {
  margin: 8px 0 0;
  padding: 0 16px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.sh-day, .sh-ex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-height: 56px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.sh-day:first-child, .sh-ex:first-child { border-top: 0; }
.sh-dname { flex: none; width: 104px; font-weight: 600; }
.sh-hours { font-variant-numeric: tabular-nums; }
.sh-closed { color: var(--muted); }
.sh-unless { color: var(--muted); font-size: var(--fs-small); }
.sh-times { display: inline-flex; align-items: center; gap: 8px; }
.sh-to { color: var(--muted); }
.sh-time, .sh-input {
  min-height: var(--tap);
  padding: 4px 8px;
  border: 1px solid #8A8A93;
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
}
.sh-time { width: 128px; }
.sh-week-bar { position: static; margin-top: 12px; padding: 0; border-top: 0; background: transparent; }
.shell[data-layout="dock"] .sh-week-bar::after { content: none; }
.sh-ex-day { flex: none; width: 104px; font-weight: 600; }
.sh-ex-hours { font-variant-numeric: tabular-nums; }
.sh-ex-note { flex: 1 1 120px; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.sh-ex-acts { display: flex; gap: 6px; margin-left: auto; }
.sh-act { padding: 0 12px; }
.sh-none { margin: 8px 0 0; }
.sh-days-msg { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; }
.sh-days-msg:has(> .ce-alert:empty + .ce-status:empty) { display: none; }
.sh-add { margin-top: 12px; }
.sh-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.sh-field { display: inline-flex; align-items: center; gap: 8px; }
.sh-flabel { font-weight: 600; }
.sh-form-day { margin: 0; font-weight: 700; }
.sh-note { flex: 1 1 200px; min-width: 0; }
.sh-form-row { display: flex; gap: 8px; flex-basis: 100%; justify-content: flex-end; }
.sh-form-row .btn-primary { min-width: 96px; }

@media (max-width: 640px) {
  .sh-week, .sh-exs { padding: 0 12px; }
  .sh-dname { flex: 1 1 auto; width: auto; }
  .sh-ex-day { width: 100%; }
  .sh-times { display: flex; flex-basis: 100%; }
  .sh-time { flex: 1 1 0; width: auto; min-width: 0; }
  .sh-ex-acts { flex-basis: 100%; margin-left: 0; }
  .sh-form { padding: 12px; }
  .sh-field, .sh-note { flex-basis: 100%; }
  .sh-date { flex: 1; min-width: 0; }
  .sh-mode { display: flex; width: 100%; }
  .sh-mode .segmented-item { flex: 1 1 auto; padding: 0 8px; white-space: nowrap; font-size: var(--fs-small); }
}
@media (any-pointer: coarse) {
  .sh-time, .sh-input { min-height: 44px; font-size: 16px; }
  .sh-oc .segmented-item, .sh-mode .segmented-item { min-height: 44px; }
}
/* === end Operations: store hours === */

/* === Operations: settings === */
/* ops/settings-page.js (#/settings and its sections): the section list (a left column from 1100 px, a wrapping row of
   links above the section below that), then the section (My settings, Sign-in and alerts: two selects and Save). */
.st-layout { display: grid; gap: 16px; }
.st-list { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.st-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: 8px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.st-link:hover { background: var(--line); }
.st-link[aria-current="page"] { background: var(--text); color: var(--surface); }
.st-body { min-width: 0; }
.st-select {
  min-height: var(--tap);
  min-width: 160px;
  padding: 0 8px;
  border: 1px solid var(--muted);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.st-stale { margin: 10px 18px 0; }
.st-bar { justify-content: flex-end; }
.st-msg { display: flex; flex-wrap: wrap; gap: 4px 12px; flex: 1 1 auto; min-width: 0; }
.st-alert, .st-status { margin: 0; font-weight: 600; }
.st-alert { color: var(--accent-text); }
.st-status { color: var(--muted); }
.st-save { min-width: 96px; }
@media (min-width: 1100px) {
  .st-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
  .st-list { flex-direction: column; flex-wrap: nowrap; }
  .st-link { display: flex; }
}
@media (any-pointer: coarse) {
  .st-link, .st-select { min-height: 44px; }
  .st-select { font-size: 16px; }
}
/* === end Operations: settings === */
/* === Operations: staff === */
/* ops/staff-page.js (#/settings/staff) and ops/pin-dialog.js; My settings' Change name and Change PIN rows. */
.sf-panel { max-width: 880px; }
.sf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 18px; border-bottom: 1px solid var(--line); }
.sf-title { border-bottom: 0; }
.sf-stale { margin: 10px 18px 0; }
.sf-msg { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 18px; }
.sf-msg p:empty { display: none; }
.sf-msg p { margin: 10px 0 0; }
.sf-list { margin: 0; padding: 0; list-style: none; }
.sf-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.sf-row:last-child { border-bottom: 0; }
.sf-who { min-width: 0; flex: 1 1 100%; }
.sf-name { font-weight: 600; overflow-wrap: anywhere; }
.sf-off .sf-name { color: var(--muted); text-decoration: line-through; }
.sf-facts { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); }
.sf-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sf-row-alert { flex: 1 1 100%; } /* a row's refusal, on its own line under the row (final review F2) */
.sf-shop[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--surface); }
.sf-shop[aria-pressed="true"]:not(:disabled):hover { background: var(--text); } /* outranks the shared .btn hover */
.sf-add { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sf-add .field { max-width: 360px; }
.sf-add-role { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: var(--gap); }
.sf-add-bar { display: flex; justify-content: flex-end; gap: 8px; }
.pd-body { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pd-step { margin: 0; font-size: var(--fs-base); }
.pd-error { min-height: 1.4em; margin: 0; color: var(--accent-text); font-weight: 600; text-align: center; }
.st-name-field { flex: 1 1 220px; min-width: 0; }
.st-name-field .field { margin-bottom: 0; }
@media (any-pointer: coarse) {
  .sf-roles .segmented-item, .sf-add .segmented-item { min-height: 44px; }
}
/* === end Operations: staff === */

/* === Operations: notifications === (Task 19; old .nf-* rules, Index.html CSS 2104-2118). The button and chips are 44px
   targets everywhere. Badge: white on --text (15.3:1). New rows: the red edge is decoration, the visually hidden New and
   the heavier title say it too. */
.nf-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px -10px -6px -8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.nf-button:hover { background: var(--bg); }
.nf-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.nf-badge {
  position: absolute;
  top: 4px;
  left: 24px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--text);
  color: var(--surface);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--surface);
}
/* A steady height, so a chip that shortens the list never moves the chips under the pointer. */
.dialog:has(.nf-bar) { max-width: 580px; height: min(640px, calc(100dvh - 32px)); }
.nf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.nf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-chip {
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
}
.nf-chip:hover { border-color: #B9B9C0; }
.nf-chip[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.nf-all { min-height: 44px; }
.nf-list { margin: 0; padding: 0; list-style: none; }
.nf-row { border-top: 1px solid var(--line); border-left: 3px solid transparent; }
.nf-row.new { border-left-color: var(--accent); }
.nf-link, .nf-plain { display: block; min-height: 44px; padding: 11px 8px 11px 12px; color: inherit; text-decoration: none; }
.nf-link { border-radius: 2px; }
.nf-link:hover { background: var(--bg); }
.nf-link:hover .nf-title { text-decoration: underline; }
.nf-link:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.nf-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nf-title { font-weight: 600; overflow-wrap: anywhere; }
.nf-row.new .nf-title { font-weight: 800; }
.nf-when { flex: none; color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.nf-detail { display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-small); white-space: pre-wrap; overflow-wrap: anywhere; }
.nf-detail:focus { outline: none; }
.nf-more { min-height: 44px; margin: -6px 0 6px 4px; }
.nf-empty { margin: 0; padding: 22px 0; text-align: center; color: var(--muted); }
/* === end Operations: notifications === */
/* === Operations: history === */
/* ops/history-page.js (#/settings/history): From, To and Search in a wrapping bar, then the changes table, which scrolls
   sideways inside its own box on a narrow screen (never the page). */
.hs-panel { max-width: 1100px; }
.hs-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 14px 18px 0; }
.hs-bar .field { margin-bottom: 0; }
.hs-day { flex: 1 1 130px; max-width: 190px; min-width: 0; }
.hs-q { flex: 1 1 220px; min-width: 0; }
.hs-bar .field-input { width: 100%; min-height: var(--tap); box-sizing: border-box; }
.hs-alert { margin: 6px 18px 0; color: var(--accent-text); font-weight: 600; }
.hs-alert:empty { margin: 0; }
.hs-results { padding: 8px 0 4px; }
.hs-results .tk-error, .hs-results .tk-loading { padding: 12px 18px; }
.hs-note { margin: 0; padding: 4px 18px 8px; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.hs-empty { margin: 0; padding: 16px 18px; border: 0; border-radius: 0; background: none; }
.hs-scroll { overflow-x: auto; border-top: 1px solid var(--line); }
.hs-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.hs-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.hs-table th, .hs-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.hs-table th:first-child, .hs-table td:first-child { padding-left: 18px; }
.hs-table th:last-child, .hs-table td:last-child { padding-right: 18px; }
.hs-table th { font-size: var(--fs-small); color: var(--muted); font-weight: 600; white-space: nowrap; }
.hs-table tbody tr:last-child td { border-bottom: 0; }
.hs-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hs-table td { overflow-wrap: break-word; }
.hs-table td.hs-change { min-width: 220px; overflow-wrap: anywhere; }
@media (any-pointer: coarse) {
  .hs-bar .field-input { min-height: 44px; font-size: 16px; }
}
/* === end Operations: history === */

/* === 2c: pending === the pending check-ins above the Repairs board (pending.js PendingPanel: S1 rows on the desktop,
   S3 cards on the iPad), the count on Repairs (NavBadge) and the kiosk help bar under the top bar (HelpBar). */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sidebar-link .nav-badge { margin-left: auto; }
.dock-link .nav-badge, .dock-sheet-link .nav-badge { position: absolute; top: 3px; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 5px; font-size: 0.6875rem; }
.dock-sheet-link { position: relative; }
.dock-sheet-link .nav-badge { position: static; margin-left: auto; }

.help-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-height: 48px;
  padding: 6px 28px;
  background: var(--accent);
  color: #FFFFFF;
  font-size: var(--fs-base);
  font-weight: 600;
}
.help-bar-icon { flex: none; }
.help-bar-text { margin: 0; }
.help-bar-age { font-weight: 400; }
.help-bar-error { font-weight: 400; }
.help-bar-got { margin-left: auto; background: #FFFFFF; border-color: #FFFFFF; color: var(--accent-text); font-weight: 700; }
.help-bar-got:not(:disabled):hover { background: #F5F5F6; }
.help-bar :focus-visible { outline-color: #FFFFFF; }

.pd-panel { margin-bottom: 16px; }
.pd-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-base); font-weight: 700; }
.pd-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 4px; background: var(--text); color: #FFFFFF; font-size: 0.75rem; font-variant-numeric: tabular-nums;
}
.pd-alert { margin: 0; color: var(--accent-text); font-weight: 600; }
.pd-alert:empty { display: none; }
.pd-list { list-style: none; margin: 0; padding: 0; }
.pd-name { font-weight: 700; overflow-wrap: anywhere; }
.pd-phone, .pd-problem { color: var(--muted); font-size: var(--fs-small); }
.pd-device { font-weight: 600; }
.pd-device, .pd-problem { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-age { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-uni { border-color: var(--warn); color: #8A5200; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; min-width: 0; }
.pd-tags .tag, .pd-line .tag { white-space: nowrap; }
.pd-actions { display: flex; gap: 8px; flex: none; }
.pd-finish { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* S1: one bordered panel, one row per check-in */
.pd-rows { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.pd-rows .pd-title { padding: 10px 14px; }
.pd-rows .pd-alert { padding: 8px 14px; border-top: 1px solid var(--line); }
.pd-rows .pd-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.pd-rows .pd-who { display: flex; flex-direction: column; flex: 0 0 190px; min-width: 0; }
.pd-rows .pd-what { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.pd-rows .pd-age { flex: 0 0 56px; text-align: right; }
.pd-rows .pd-tags { flex: 0 1 auto; max-width: 40%; } /* a long UGA department ends in an ellipsis, never widens the row */

/* S3: a heading, then one card per check-in with 56px buttons; more than four behind Show all */
.pd-cards { display: flex; flex-direction: column; gap: 10px; }
.pd-cards .pd-title { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.pd-cards .pd-list { display: flex; flex-direction: column; gap: 10px; }
.pd-cards .pd-item {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface);
}
.pd-cards .pd-main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.pd-cards .pd-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pd-cards .pd-name { font-size: 1.1875rem; }
.pd-cards .pd-what { display: flex; min-width: 0; font-size: 1rem; }
.pd-cards .pd-what .pd-problem { color: var(--text); font-size: 1rem; }
.pd-cards .pd-device + .pd-problem::before { content: " · "; white-space: pre; }
.pd-cards .pd-device { font-weight: 400; flex: none; max-width: 60%; }
.pd-cards .pd-phone { font-size: var(--fs-base); }
.pd-cards .pd-actions .btn { min-height: 56px; padding: 0 22px; font-size: 1rem; }
.pd-all { align-self: flex-start; min-height: 44px; }
@media (max-width: 699px) {
  .help-bar { padding: 6px 16px; }
  .pd-cards .pd-item { flex-direction: column; align-items: stretch; gap: 12px; }
  .pd-cards .pd-actions .btn { flex: 1 1 0; padding: 0 12px; }
  .pd-cards .pd-what { flex-wrap: wrap; }
  .pd-cards .pd-device { max-width: 100%; }
}
/* === end 2c: pending === */

/* === 2c: finish === the Finish check-in page (finish.js, canvas S2): the customer's side locked on the left, Same person?
   and the tech fields on the right, Discard / Keep for later / Check in below; the kept draft's `Signed 10:41 AM` (checkin.js).
   The chips, boxes and cards reuse the 2b check-in classes. */
.fc-page { --hairline: #DEDEE2; max-width: 1240px; min-width: 0; }
.fc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.fc-title { margin-bottom: 0; }
.fc-tag { padding: 2px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.fc-cols { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; align-items: start; }
.fc-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fc-card { min-width: 0; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); }
.fc-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1.0625rem; }
.fc-lock { margin-left: auto; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.fc-kvs { margin: 0; }
.fc-kv { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid #EDEDF0; }
.fc-kv dt { color: var(--muted); }
.fc-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.fc-signed { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-field); color: var(--muted);
  font-size: var(--fs-small); font-weight: 600; }
.fc-match { padding: 0; border: none; background: none; }
.fc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.fc-field { margin-bottom: 14px; }
.fc-box-row { display: flex; gap: 8px; min-width: 0; }
.fc-input { flex: 1 1 auto; }
.fc-side-btn { flex: none; min-height: 44px; }
.fc-uni { padding-top: 12px; border-top: 1px solid #EDEDF0; }
.fc-alert:empty, .fc-status:empty { display: none; }
.fc-alert { margin: 12px 0 0; }
.fc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.fc-gap { flex: 1 1 auto; }
.fc-prints { color: var(--muted); font-size: var(--fs-small); }
.fc-foot-btn { min-height: 52px; padding: 0 20px; font-size: 1.0625rem; }
.fc-foot-main { min-width: 180px; }
.fc-done { max-width: 560px; }
.fc-done-text { margin: 0 0 12px; font-size: var(--fs-large); font-weight: 700; }
.fc-bad { color: var(--accent-text); }
.fc-back { min-height: 44px; text-decoration: none; }
.kd-signed { margin: 0; padding: 18px 16px; border: 1px solid var(--hairline); border-radius: var(--radius-field); background: #FAFAFB; font-weight: 700; }
@media (max-width: 1099px) {
  .fc-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .fc-two { grid-template-columns: minmax(0, 1fr); }
  .fc-foot .fc-gap { display: none; }
  .fc-prints { flex-basis: 100%; }
  .fc-foot-btn { flex: 1 1 auto; }
}
/* === end 2c: finish === */
/* === 2c: settings === Settings > Kiosk and monitor (ops/kiosk-settings-page.js) and Settings > Devices
   (ops/devices-page.js): stacked panels, On / Off switches, the Save bar kept in view, the pairing code in 64 px mono. */
.ks-page { display: grid; gap: 16px; max-width: 640px; }
.ks-panel { max-width: none; }
.ks-row { min-height: 44px; }
.ks-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  min-width: 88px;
  padding: 0 10px 0 4px;
  border: 1px solid var(--muted);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ks-knob { width: 26px; height: 26px; border-radius: 50%; background: var(--line); border: 1px solid var(--muted); }
.ks-switch[aria-checked="true"] { border-color: var(--ok); }
.ks-switch[aria-checked="true"] .ks-knob { background: var(--ok); border-color: var(--ok); }
.ks-switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ks-hook, .ks-address { flex: 1 1 260px; min-width: 0; }
.ks-hook .field, .ks-address .field { margin-bottom: 0; }
.ks-hook .field-input { width: 100%; }
.ks-address .field-input { max-width: 220px; }
.ks-remove { align-self: flex-end; }
.ks-act { justify-content: flex-end; }
.ks-msg p:empty { display: none; }
.ks-state { margin: 0; font-weight: 600; }
.ks-state .row-label { margin-right: 10px; }
.ks-trusted { color: var(--ok); }
.ks-bar { position: sticky; bottom: var(--ks-dock, 12px); z-index: 2; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
.shell[data-layout="dock"] .ks-page { --ks-dock: calc(96px + env(safe-area-inset-bottom)); } /* above the floating dock */
.dv-list { margin: 0; padding: 0; list-style: none; }
.dv-what { display: grid; gap: 2px; min-width: 0; }
.dv-name-text { font-weight: 600; overflow-wrap: anywhere; }
.dv-sub { font-size: var(--fs-small); }
.dv-none { margin: 0; padding: 14px 18px; }
.dv-alert { margin: 0; padding: 0 18px; }
.dv-alert:empty { display: none; }
.dv-name { flex: 1 1 220px; min-width: 0; }
.dv-name .field { margin-bottom: 0; }
.dv-name-row { align-items: flex-end; }
.dv-pair-code { display: grid; justify-items: center; gap: 8px; padding: 22px 18px; text-align: center; }
.dv-code { margin: 0; font-family: var(--font-mono); font-size: 64px; line-height: 1.1; font-weight: 600; letter-spacing: 0.12em; }
.dv-hint { margin: 0; }
.dv-left-row { margin: 0; }
.dv-left { font-family: var(--font-mono); font-size: var(--fs-large); color: var(--muted); }
.dv-msg { padding: 0 18px 12px; }
.dv-msg p:empty { display: none; }
.dv-confirm-name { margin: 0 0 12px; font-weight: 600; }
@media (max-width: 420px) {
  .dv-code { font-size: 52px; letter-spacing: 0.06em; }
}
@media (any-pointer: coarse) {
  .ks-switch { min-height: 44px; }
}
/* === end 2c: settings === */

/* === Sales: new sale === The Sales area head (sales-routes.js: the title, the tabs New sale / Presales / Returns with the
   Device In badge, All sales) and the New sale page (sale-new.js). Board 1.2 (counter iPad, layout A) under 1200 px: one
   column, scan box 64 px, top seller chips, the cart (lines 56 px, − / + 52 px, remove 48 px), the customer card, the pay
   card (Complete 72 px). On a tall iPad in portrait the page fits the screen above the dock and the cart scrolls inside its
   card, so Complete is always in reach. Board 1.1 from 1200 px (.sn-wide): the cart left, pay right at 420 px. Owner request
   (customer bar): the customer card runs across the top above both, its fields open and flowing across the width.
   Typed fields are .sk-in (16 px on touch); every target is 44 px and up on touch. */
.sl-page { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; }
.sl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.sl-title { margin-bottom: 0; }
.sl-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--hairline); border-radius: var(--radius-button); background: var(--surface); }
.sl-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 4px; color: var(--muted);
  font-weight: 600; text-decoration: none; white-space: nowrap; }
.sl-tab:hover { color: var(--text); }
.sl-tab[aria-current="page"] { background: var(--text); color: #FFFFFF; }
.sl-badge { padding: 0 7px; border-radius: 10px; background: #FBEAED; color: var(--accent-text); font-size: var(--fs-small); }
.sl-all { margin-left: auto; min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; }

.sn-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sn-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sn-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px; border-color: var(--hairline); border-radius: 8px; }
.sn-h2 { display: flex; align-items: baseline; gap: 8px; font-size: 1.0625rem; font-weight: 700; }
.sn-h2-note { color: var(--muted); font-size: var(--fs-small); font-weight: 500; }
.sn-cart-h { justify-content: space-between; }
.sn-lbl { display: block; margin: 0 0 6px; color: var(--muted); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.sn-req { color: var(--accent-text); }
.sn-opt { color: var(--muted); font-weight: 600; }
.sn-in { min-height: 44px; font-size: 1rem; }
.sn-mono { font-family: var(--font-mono); }
.sn-scan label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sn-scan input { min-height: 56px; border: 1.5px solid var(--text); border-radius: var(--radius-button); font-size: 1.0625rem; }
.sn-msg { min-height: 0; margin: -6px 0 0; color: var(--accent-text); font-weight: 600; }
.sn-msg:empty { display: none; }
.sn-note { color: var(--muted); }
.sn-suggs { margin: -6px 0 0; padding: 4px; list-style: none; border: 1px solid var(--hairline); border-radius: var(--radius-button); background: var(--surface);
  display: flex; flex-direction: column; gap: 2px; }
.sn-sugg { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; width: 100%; min-height: 44px;
  padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sn-sugg:hover { background: var(--bg); }
.sn-sugg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sn-sugg-code { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-small); }
.sn-sugg-price { font-variant-numeric: tabular-nums; }
.sn-chips, .sn-tops { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-chip { min-height: 44px; padding: 0 14px; font-weight: 600; }
.sn-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #FFFFFF; }
.sn-chip[aria-pressed="true"]:not(:disabled):hover { background: #2E2E35; }
.sn-lines-box { min-height: 0; }
.sn-lines { margin: 0; padding: 0; list-style: none; }
.sn-empty { margin: 0; padding: 18px 0; color: var(--muted); }
.sn-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 104px 96px 48px; gap: 12px; align-items: center; min-height: 56px; padding: 10px 0;
  border-top: 1px solid #EBEBEE; }
.sn-line:first-child { border-top: 0; }
.sn-what { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sn-name { font-weight: 600; font-size: 1.0625rem; overflow-wrap: anywhere; }
.sn-tag, .sn-word, .sn-signed { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--hairline); border-radius: 4px;
  background: #FAFAFB; color: var(--muted); font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.sn-word { border-color: #F1C98F; background: #FEF3E2; color: #92400E; }
.sn-signed { border-color: #B7DEC4; background: #E7F5EC; color: #166534; }
.sn-each, .sn-list { flex-basis: 100%; color: var(--muted); font-size: var(--fs-small); }
.sn-sn { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sn-sn-label { color: var(--muted); font-size: var(--fs-small); font-weight: 700; }
.sn-serial { max-width: 260px; min-height: 40px; font-family: var(--font-mono); }
.sn-qty { display: inline-flex; align-items: center; border: 1px solid var(--hairline); border-radius: var(--radius-button); overflow: hidden; }
.sn-step { width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; color: var(--muted); font-size: 1.25rem; font-weight: 700; }
.sn-qty-n { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.sn-one { min-width: 44px; text-align: center; color: var(--muted); }
.sn-price { text-align: right; font-variant-numeric: tabular-nums; }
.sn-price-btn { min-height: 44px; padding: 0 10px; font-variant-numeric: tabular-nums; }
.sn-price-in { min-height: 40px; text-align: right; }
.sn-line-total { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sn-remove { width: 48px; min-height: 48px; padding: 0; color: var(--muted); }
.sn-cust-top { display: flex; align-items: center; gap: 10px 12px; }
.sn-cust-top .sn-h2 { margin-right: 4px; }
.sn-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: #E4E4E8; font-size: var(--fs-small); font-weight: 700; }
.sn-cust-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 0; }
.sn-cust-name { overflow-wrap: anywhere; }
.sn-cust-sub, .sn-cust-none { color: var(--muted); font-size: var(--fs-small); }
.sn-cust-sub { overflow-wrap: anywhere; unicode-bidi: plaintext; } /* Task 19: a long unbroken department wraps */
.sn-cust-none { flex: 1 1 auto; }
.sn-change { margin-left: auto; min-height: 44px; }
.sn-c-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 12px; }
.sn-cust-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sn-cust-foot .sn-sign { margin-left: auto; }
.sn-c-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sn-c-one { grid-template-columns: minmax(0, 1fr); }
.sn-c-field { min-width: 0; }
.sn-new { align-self: flex-start; min-height: 44px; }
.sn-sign { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sn-sign-btn { min-height: 48px; }
.sn-wording { margin: 0 0 4px; font-size: 1.0625rem; line-height: 1.45; }
.sn-pay-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sn-inst-btn { justify-content: flex-start; }
.sn-inst-fields { display: flex; flex-direction: column; gap: 10px; }
.sn-billed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sn-pay-bottom { display: flex; flex-direction: column; gap: 12px; }
.sn-kv { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.sn-kv span:first-child { color: var(--muted); }
.sn-big { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--hairline);
  font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sn-big span:first-child { font-size: 1.125rem; }
.sn-go { display: flex; flex-direction: column; gap: 8px; }
.sn-complete { gap: 8px; min-height: 56px; font-size: 1.125rem; font-weight: 700; }
.sn-why, .sn-err { margin: 0; font-size: var(--fs-small); }
.sn-why { color: var(--muted); }
.sn-why:empty, .sn-err:empty { display: none; }
.sn-err { color: var(--accent-text); font-weight: 600; }
.sn-dup { padding: 12px 14px; border: 1px solid #F1C98F; border-radius: var(--radius-button); background: #FEF3E2; }
.sn-dup-q { margin: 0 0 10px; font-weight: 700; }
.sn-dup-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sn-dup-btns .btn { min-height: 44px; }

/* board 1.1: the customer bar across the top, the cart left, pay right at 420 px */
.sn-wide { display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
.sn-wide .sn-customer { grid-column: 1 / -1; }

/* board 1.2: one column; the scan box, chips and lines sit on the ground, the lines in their own card */
.sn-narrow .sn-cart { padding: 0; border: 0; background: transparent; }
.sn-narrow .sn-cart-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sn-narrow .sn-scan input { min-height: 64px; font-size: 1.1875rem; }
.sn-narrow .sn-lines-box { padding: 6px 18px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); }
.sn-narrow .sn-customer, .sn-narrow .sn-pay { gap: 10px; }
.sn-narrow .sn-pay .sn-h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sn-narrow .sn-complete { min-height: 72px; font-size: 1.3125rem; }
@media (min-width: 700px) {
  .sn-narrow .sn-pay-top { grid-template-columns: minmax(0, 1fr) 260px; align-items: end; }
  .sn-narrow .sn-pay-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: center;
    padding-top: 12px; border-top: 1px solid var(--hairline); }
  .sn-narrow .sn-big { padding-top: 4px; border-top: 0; font-size: 2.125rem; }
  .sn-narrow .sn-line { min-height: 56px; padding: 12px 0; }
  .sn-narrow .sn-step { width: 52px; min-height: 52px; }
}
/* layout A on a tall iPad (portrait 1024 x 1366, and the 11-inch 834 x 1194): the page fits the screen above the dock, the
   cart scrolls inside its card */
@media (min-width: 700px) and (max-width: 1199px) and (min-height: 1000px) {
  .shell[data-layout="dock"] .sl-page:has(.sn-narrow) { height: calc(100dvh - 64px - 104px - env(safe-area-inset-bottom)); box-sizing: border-box;
    padding-bottom: 0; }
  .sl-page:has(.sn-narrow) .sn-narrow { flex: 1; min-height: 0; }
  .sn-narrow .sn-cart { flex: 1; min-height: 0; }
  .sn-narrow .sn-lines-box { flex: 1; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; }
}
/* phones: the line wraps, name over its numbers; no sideways scroll */
@media (max-width: 699px) {
  .sl-all { margin-left: 0; }
  .sn-line { grid-template-columns: auto minmax(0, 1fr) auto 44px; grid-template-areas: "what what what what" "qty price total remove"; row-gap: 8px; }
  .sn-what { grid-area: what; }
  .sn-qty, .sn-one { grid-area: qty; }
  .sn-price { grid-area: price; }
  .sn-line-total { grid-area: total; }
  .sn-remove { grid-area: remove; width: 44px; min-height: 44px; }
  .sn-c-row { grid-template-columns: minmax(0, 1fr); }
  /* the customer bar on a phone: first and last side by side, phone and UGA ID, the email and a department across */
  .sn-c-form { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .sn-c-form .sn-c-email, .sn-c-form .sn-c-org { grid-column: 1 / -1; }
  .sn-billed { grid-template-columns: minmax(0, 1fr); }
  .sn-tops { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sn-tops .sn-chip { flex: none; }
  .sn-cust-top { flex-wrap: wrap; }
  .sn-cust-top .sn-h2 { flex-basis: 100%; } /* Task 19: the chosen name gets the row below, never a squeezed column */
  .sn-cust-none { flex-basis: 0; }
}
.sn-change { white-space: nowrap; }
@media (any-pointer: coarse) {
  .sl-tab { min-height: 48px; }
  .sn-in, .sn-serial, .sn-price-in { font-size: 16px; min-height: 44px; }
  .sn-chip { min-height: 52px; }
}
/* === end Sales: new sale === */

/* === Sales: done === Sale complete (sale-done.js, board 1.4): the head card (the green tick, Sale complete, receipt and
   register, the total; Customer, Paid, Items, Sold by), the receipt card (ReceiptChoice: three equal 120 px choices Print /
   Email / No receipt, the second line the printer word, the address or Reprint from the sale; a chosen one is dark, D10),
   the stock card (stockAfter as words, Order list) and New sale (72 px). Task 16 reuses .rc-* for the return receipt.
   Phones: the choices stack, one per row (80 px, icon and words in a line). */
.sd-page { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 920px; min-width: 0; }
.sd-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px 22px; border-color: var(--hairline); border-radius: 8px; }
.sd-h2 { font-size: 1.25rem; font-weight: 700; }
.sd-top { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.sd-ok { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: #E7F5EC; color: #166534; }
.sd-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.sd-title { font-size: 1.875rem; font-weight: 700; line-height: 1.15; }
.sd-sub { color: var(--muted); overflow-wrap: anywhere; }
.sd-total { margin-left: auto; font-size: 2.125rem; font-variant-numeric: tabular-nums; }
.sd-kvs { display: flex; flex-direction: column; }
.sd-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid #EBEBEE; font-variant-numeric: tabular-nums; }
.sd-kv:first-child { border-top: 0; }
.sd-kv span:first-child { flex: none; color: var(--muted); }
.sd-kv span:last-child { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.rc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rc-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 120px;
  padding: 12px; white-space: normal; text-align: center; }
.rc-main { font-size: 1.25rem; font-weight: 700; }
.rc-line { max-width: 100%; color: var(--muted); font-size: var(--fs-small); font-weight: 500; overflow-wrap: anywhere; }
.rc-choice[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #FFFFFF; }
.rc-choice[aria-pressed="true"] .rc-line { color: #D6D6DA; }
.rc-choice[aria-pressed="true"]:not(:disabled):hover { background: #2E2E35; }
.rc-choice:disabled { opacity: 1; background: var(--bg); color: var(--muted); }
.rc-choice:disabled .rc-line { color: var(--text); font-weight: 600; }
.rc-to-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-to-in { flex: 1 1 240px; min-width: 0; }
.rc-send, .rc-cancel { min-height: 44px; }
.rc-err { margin: 0; color: var(--accent-text); font-weight: 600; }
.rc-err:empty { display: none; }
.sd-stock { gap: 8px; }
.sd-stock-top { display: flex; align-items: center; gap: 12px; }
.sd-order { margin-left: auto; min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; }
.sd-stock-rows { margin: 0; padding: 0; list-style: none; }
.sd-stock-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 44px; padding: 6px 0; border-top: 1px solid #EBEBEE; }
.sd-stock-row:first-child { border-top: 0; }
.sd-stock-name { min-width: 0; overflow-wrap: anywhere; }
.sd-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border: 1px solid #F1C98F; border-radius: 4px;
  background: #FEF3E2; color: #92400E; font-size: var(--fs-small); font-weight: 600; }
.sd-tag-neg { border-color: #F2B8C2; background: #FBEAED; color: var(--accent-text); }
.sd-new { min-height: 72px; border-color: var(--text); font-size: 1.3125rem; font-weight: 700; }
@media (max-width: 1199px) {
  .sd-page { max-width: none; }
}
@media (max-width: 699px) {
  .sd-card { padding: 16px; }
  .sd-total { margin-left: 0; font-size: 1.75rem; }
  .sd-kv { flex-wrap: wrap; }
  .rc-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rc-choice { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; min-height: 80px; gap: 4px 12px; text-align: left; }
  .rc-line { flex-basis: 100%; padding-left: 40px; }
  .rc-to-in { flex-basis: 100%; }
}
/* === end Sales: done === */
/* === Sales: list and detail === All sales (sales-list.js, board 4.1): the head (All sales, New sale), the filters (the search
   box, range chips, From/To for Dates, Sold by, status chips), the table inside its own scrolling box (.sl-table-box; a
   narrow screen scrolls the table sideways, never the page), the footer counts and net, Show more. The state is a word on
   a tinted tag (never colour alone). One sale (sale-detail.js, board 4.2): the head card (receipt, state, date, seller,
   register; Print receipt, Email receipt, Return items, Void), then the items with the money and the history beside the
   customer card (EDU wording as text) and the register card; one column under 1100 px. Every target 44 px and up. */
.sl-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sl-list-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.sl-list-title { font-size: 1.25rem; font-weight: 700; }
.sl-back { min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; }
.sl-all[aria-current="page"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.sl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sl-search { flex: 1 1 280px; max-width: 380px; }
.sl-dates { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.sl-date { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.sl-date-in { min-height: 44px; }
.sl-soldby { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.sl-soldby .sk-select { min-width: 0; max-width: 100%; text-overflow: ellipsis; } /* Task 19: a long seller name never widens a phone page */
.sl-soldby-lbl { font-weight: 600; white-space: nowrap; }
.sl-table-box { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--surface); }
.sl-table-box:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.sl-table-box[aria-busy="true"] { opacity: 0.6; }
.sl-table { width: 100%; min-width: 860px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sl-table th { padding: 10px 12px; border-bottom: 1px solid var(--hairline); color: var(--muted); font-size: var(--fs-small); font-weight: 700;
  letter-spacing: 0.03em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.sl-table td { padding: 10px 12px; border-top: 1px solid #EBEBEE; vertical-align: top; overflow-wrap: anywhere; }
.sl-table tbody tr:first-child td { border-top: 0; }
.sl-row:hover { background: var(--row-hover); }
.sl-num { text-align: right; white-space: nowrap; }
.sl-table th.sl-num { text-align: right; }
.sl-when { white-space: nowrap; }
.sl-sub { display: block; color: var(--muted); font-size: var(--fs-small); }
.sl-receipt { display: inline-flex; align-items: center; min-height: 28px; color: var(--text); font-weight: 700; }
.sl-none { color: var(--muted); }
.sl-more { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.sl-state { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border: 1px solid #C9E6D3; border-radius: 4px;
  background: #E7F5EC; color: #166534; font-size: var(--fs-small); font-weight: 700; white-space: nowrap; }
.sl-state-partly_returned { border-color: #F1C98F; background: #FEF3E2; color: #92400E; }
.sl-state-returned { border-color: #D6D6DA; background: var(--bg); color: var(--text); }
.sl-state-void { border-color: #F2B8C2; background: #FBEAED; color: var(--accent-text); }
.sl-empty { margin: 0; border: 0; }
.sl-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 0 4px;
  font-variant-numeric: tabular-nums; }
.sl-foot-counts { color: var(--muted); font-weight: 600; }
.sl-foot-net { font-size: 1.125rem; }
.sl-more-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.sl-more-line { color: var(--muted); }
.sl-more-btn { min-height: 44px; }
.sl-err { margin: 0; color: var(--accent-text); font-weight: 600; }

.sdt-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sdt-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px; border-color: var(--hairline); border-radius: 8px; }
.sdt-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.sdt-title { font-size: 1.625rem; font-weight: 700; line-height: 1.15; }
.sdt-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.sdt-voided { margin: 0; color: var(--accent-text); font-weight: 600; overflow-wrap: anywhere; }
.sdt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sdt-actions .btn { min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; }
.sdt-void { border-color: #F2B8C2; color: var(--accent-text); }
.sdt-printer { color: var(--muted); font-weight: 600; }
.sdt-said { color: #166534; font-weight: 600; overflow-wrap: anywhere; }
.sdt-said:empty { display: none; }
.sdt-to-box { display: flex; flex-direction: column; max-width: 560px; }
.sdt-void-form { display: flex; flex-direction: column; gap: 6px; min-width: min(420px, 80vw); }
.sdt-void-form .sn-lbl { margin-top: 8px; }
.sdt-void-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sdt-void-btns .btn { min-height: 44px; }
.sdt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 14px; align-items: start; }
.sdt-main, .sdt-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sdt-h3 { font-size: 1.0625rem; font-weight: 700; }
.sdt-items-box { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sdt-items { width: 100%; min-width: 520px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sdt-items th { padding: 8px 10px; border-bottom: 1px solid var(--hairline); color: var(--muted); font-size: var(--fs-small); font-weight: 700;
  letter-spacing: 0.03em; text-align: left; text-transform: uppercase; }
.sdt-items th.sl-num { text-align: right; }
.sdt-items td { padding: 8px 10px; border-top: 1px solid #EBEBEE; vertical-align: top; overflow-wrap: anywhere; }
.sdt-items tbody tr:first-child td { border-top: 0; }
.sdt-money { display: flex; flex-direction: column; margin-left: auto; width: 100%; max-width: 320px; font-variant-numeric: tabular-nums; }
.sdt-money-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.sdt-legacy { color: var(--muted); font-weight: 600; }
.sdt-net { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--hairline); font-size: 1.125rem; }
.sdt-events { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.sdt-event { padding: 8px 0; border-top: 1px solid #EBEBEE; overflow-wrap: anywhere; }
.sdt-event:first-child { border-top: 0; }
.sdt-event-at { color: var(--muted); font-variant-numeric: tabular-nums; }
.sdt-event-by { font-weight: 600; }
.sdt-event-body { display: block; }
.sdt-none { margin: 0; color: var(--muted); }
.sdt-name { margin: 0; font-size: 1.0625rem; font-weight: 700; overflow-wrap: anywhere; }
.sdt-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid #EBEBEE; }
.sdt-k { flex: none; color: var(--muted); }
.sdt-v { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.sdt-edu { margin: 6px 0 0; font-weight: 700; }
.sdt-agreed { margin: 0; color: var(--muted); }
.sdt-wording { margin: 0; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-field); background: var(--bg); white-space: pre-wrap; overflow-wrap: anywhere; }
.sdt-signed { margin: 0; color: #166534; font-weight: 600; }
@media (max-width: 1099px) {
  .sdt-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .sl-search { max-width: none; flex-basis: 100%; }
  .sdt-card { padding: 14px; }
  .sdt-money { max-width: none; }
}
@media (any-pointer: coarse) {
  .sl-receipt { min-height: 44px; min-width: 44px; justify-content: center; } /* Task 19: S-91 measured 36 px wide */
  .sl-filters .sk-chip { min-width: 44px; } /* Task 19: All measured 42 px wide */
  .sl-date-in { font-size: 16px; }
}
/* === end Sales: list and detail === */
/* === Sales: returns === Returns find (sale-returns.js, board 3.1): the find card (the search box, the Matched line, each sale
   found with its state word, date, register, customer and Return items for managers; its lines, a line that came back greyed
   with Returned <day>), then Recent returns · This week. The pick page (board 3.2): the sale card (Return from S-<id>, its
   age; one row per line: a 28 px tick, the serial scan box on a device, then − n of m + and Goes to Stock / Defective once
   ticked), the reason and refund card (Reason chips, Refund At the register with the Register refund number or To account,
   Items, Tax, Refund, Complete return 64 px). Return complete reuses Sale complete's .sd-* head and the .rc-* receipt choice.
   Wide screens: the two pick cards side by side from 1100 px. Every target is 44 px and up on touch; typed text 16 px. */
.rf-page, .rp-page { display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; }
.rf-search { flex: none; max-width: 560px; }
.rf-results { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rf-results[aria-busy="true"] { opacity: 0.6; }
.rf-matched { margin: 0; color: var(--muted); font-weight: 600; overflow-wrap: anywhere; }
.rf-sale { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 8px; min-width: 0; }
.rf-sale-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.rf-receipt { font-weight: 700; display: inline-flex; align-items: center; min-height: 32px; }
.rf-sale-sub, .rf-sale-who { color: var(--muted); overflow-wrap: anywhere; }
.rf-sale-who { color: var(--text); font-weight: 600; }
.rf-return { margin-left: auto; min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; }
.rf-lines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.rf-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; border-top: 1px solid #EBEBEE; }
.rf-line:first-child { border-top: 0; }
.rf-line-name { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.rf-line-money { font-variant-numeric: tabular-nums; }
.rf-line-back, .rp-line-back { color: var(--muted); }
.rf-line-back .rf-line-name, .rp-line-back .rp-name { text-decoration: line-through; }
.rf-back { padding: 0 8px; border-radius: 4px; background: #EFEFF2; color: #4A4A55; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.rf-x { color: var(--muted); font-variant-numeric: tabular-nums; }
.rf-first, .rf-more { margin: 0; color: var(--muted); }
.rf-recent-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.rf-recent-row { display: grid; grid-template-columns: 130px 60px minmax(0, 2fr) minmax(0, 3fr) 110px 90px; align-items: center; gap: 4px 12px;
  padding: 6px 0; border-top: 1px solid #EBEBEE; }
.rf-recent-row:first-child { border-top: 0; }
.rf-recent-when, .rf-recent-why { color: var(--muted); }
.rf-recent-who, .rf-recent-what { min-width: 0; overflow-wrap: anywhere; }
.rf-recent-money { text-align: right; font-variant-numeric: tabular-nums; }

.rp-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.rp-age { color: var(--muted); font-weight: 600; }
.rp-sub { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.rp-lines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.rp-line { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid #EBEBEE; }
.rp-line:first-child { border-top: 0; }
.rp-line-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.rp-tick { flex: none; width: 28px; height: 28px; margin: 0; accent-color: var(--text); cursor: pointer; }
.rp-tick:disabled { cursor: not-allowed; }
.rp-name { flex: 1 1 200px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; cursor: pointer; }
.rp-price { margin-left: auto; font-variant-numeric: tabular-nums; }
.rp-serial { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-left: 40px; }
.rp-serial .sn-lbl { flex-basis: 100%; margin: 0; }
.rp-serial-in { flex: 0 1 280px; min-width: 0; text-transform: uppercase; }
.rp-serial-ok { color: #166534; font-weight: 600; }
.rp-serial-bad { color: var(--accent-text); font-weight: 600; }
.rp-line-how { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding-left: 40px; }
.rp-step { display: inline-flex; align-items: center; gap: 8px; }
.rp-step-btn { min-width: 44px; min-height: 44px; padding: 0; font-size: 1.25rem; justify-content: center; }
.rp-qty { min-width: 56px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-goes-lbl, .rp-lbl { color: var(--muted); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.rp-field { display: flex; flex-direction: column; gap: 8px; }
.rp-refund .sn-lbl { margin: 4px 0 0; }
.rp-refund-to { font-weight: 700; overflow-wrap: anywhere; }
.rp-register { max-width: 280px; }
.rp-totals { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.rp-total-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid #EBEBEE; }
.rp-total-refund { font-size: 1.25rem; border-top-color: var(--hairline); }
.rp-err:empty { display: none; }
.rp-complete { min-height: 64px; width: 100%; justify-content: center; font-size: 1.125rem; }
.rp-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.rp-next { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-next-btn { min-height: 52px; text-decoration: none; display: inline-flex; align-items: center; }
/* Task 19 (boards 3.1/3.2): a chosen Goes to or Reason is filled, as the board and New sale's EDU chips; the lines card's
   What comes back count. */
.rp-goes .sk-chip[aria-pressed="true"], .rp-reasons .sk-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; box-shadow: none; }
.rp-what { margin: 0; }
.rp-what-n { margin-left: 8px; font-weight: 600; letter-spacing: 0; text-transform: none; }
@media (min-width: 1100px) {
  .rp-page:has(> .rp-pay) { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  /* Task 19 (board 3.1): Recent returns in a 380 px column beside the find, each return on two short lines. */
  .rf-page:has(> .rf-recent) { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .rf-recent-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rf-recent-row > :nth-child(even) { text-align: right; justify-self: end; }
  .rf-recent-when, .rf-recent-why { font-size: var(--fs-small); }
}
@media (max-width: 699px) {
  .rf-search { max-width: none; }
  .rf-return { margin-left: 0; }
  .rf-recent-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rf-recent-row > :nth-child(even) { text-align: right; justify-self: end; }
  .rf-recent-when, .rf-recent-why { font-size: var(--fs-small); }
  .rp-serial, .rp-line-how { padding-left: 0; }
}
@media (any-pointer: coarse) {
  .rf-receipt { min-height: 44px; min-width: 44px; justify-content: center; } /* Task 19: S-91 measured 36 px wide */
  .rp-tick { width: 32px; height: 32px; }
  .rp-serial-in, .rp-register { font-size: 16px; min-height: 44px; }
}
/* === end Sales: returns === */

/* === Sales: presales === Presales (presales.js, board 2.1): the chips with the server's counts and + New presale, the table
   inside its own scrolling box (.sl-table-box), and one presale beside it from 1200 px (460 px column; below it under that):
   the name, number and status, contact lines, the kv rows (Due at pickup bold), history, Email (52 px; Send? on amber),
   Text / Turn into sale / More in a row, the More group, the prepared text with Copy. The status is a word with a dot (never
   colour alone). New presale (presale-new.js, board 2.2): customer, devices (name, SKU, expected price 170 px, remove 48 px),
   deposit chips in four equal columns, Other amount and the register number, notes, then Due at pickup beside Save and
   Save and print slip (72 px). The Turn into sale bits on New sale (.sn-presale, .sn-confirm). Targets 44 px and up. */
.ps-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ps-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.ps-chips { flex: 1 1 auto; }
.ps-new { min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; margin-left: auto; }
.ps-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.ps-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px; border-color: var(--hairline); border-radius: 8px; }
.ps-list { padding: 12px; }
.ps-detail { gap: 12px; }
.ps-list[aria-busy="true"] { opacity: 0.7; }
.ps-table { min-width: 640px; }
.ps-row.ps-sel td { background: #F0F0F3; }
.ps-row.ps-sel td:first-child { box-shadow: inset 3px 0 0 var(--text); }
.ps-cust { display: inline-flex; align-items: center; min-height: 28px; color: var(--text); font-weight: 700; white-space: nowrap; }
.ps-none { padding: 12px 6px; }
.ps-st { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.ps-st::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #8A8A92; }
.ps-st-new::before, .ps-st-in::before { background: var(--accent-text); }
.ps-st-told::before { background: #16A34A; }
.ps-st-done::before { background: var(--text); }
.ps-st-off { color: var(--muted); }
.ps-d-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ps-d-name { margin: 0; font-size: 1.375rem; font-weight: 700; overflow-wrap: anywhere; }
.ps-d-st { margin-left: auto; }
.ps-contact { margin: -4px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.ps-kvs { display: flex; flex-direction: column; }
.ps-due { font-weight: 700; }
.ps-due .sdt-k { color: var(--text); }
.ps-history .sn-lbl { margin-top: 4px; }
.ps-said { margin: 0; color: #166534; font-weight: 600; overflow-wrap: anywhere; }
.ps-said:empty, .ps-err:empty { display: none; }
.ps-err { margin: 0; }
.ps-email { min-height: 52px; font-size: 1rem; }
.ps-email.ps-confirming { background: #92400E; border-color: #92400E; }
.ps-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ps-actions .btn { min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.ps-tosale { background: var(--text); border-color: var(--text); color: #FFFFFF; }
.ps-menu { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--hairline); border-radius: 6px; background: var(--bg); }
.ps-menu .btn { min-height: 44px; justify-content: flex-start; }
.ps-cancel { color: var(--accent-text); }
.ps-textbox { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--hairline); border-radius: 6px; background: var(--bg); }
.ps-text-to { margin: 0; color: var(--muted); }
.ps-text-msg { margin: 0; user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.ps-text-row { display: flex; align-items: center; gap: 10px; }
.ps-text-row .btn { min-height: 44px; }
.ps-copied { color: #166534; font-weight: 600; }
@media (min-width: 1200px) {
  .ps-with-detail .ps-grid { grid-template-columns: minmax(0, 1fr) 460px; }
}

.pn-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 980px; }
.pn-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pn-head .sl-back { color: var(--muted); font-weight: 600; }
.pn-title { margin: 0; font-size: 1.75rem; font-weight: 700; }
.pn-line { display: grid; grid-template-columns: minmax(0, 1fr) 170px 48px; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid #EBEBEE; }
.pn-line:first-child { border-top: 0; }
.pn-sku { flex-basis: 100%; color: var(--muted); font-size: var(--fs-small); }
.pn-price .sn-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pn-price-in { width: 100%; text-align: right; }
.pn-price-in[aria-invalid="true"], #pn-other[aria-invalid="true"] { border-color: var(--accent-text); }
.pn-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pn-dep-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pn-paid { margin: 0; }
.pn-notes-in { width: 100%; min-height: 80px; padding: 10px 12px; resize: vertical; }
.pn-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.pn-due { display: flex; flex-direction: column; }
.pn-due-k { color: var(--muted); }
.pn-due-v { font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.pn-go { flex: 1 1 360px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.pn-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.pn-btns .btn { min-height: 72px; font-size: 1.125rem; font-weight: 700; }
.sn-presale { margin: 0; padding: 8px 10px; border: 1px solid #B7DEC4; border-radius: 6px; background: #E7F5EC; color: #166534; font-weight: 600; }
.sn-confirm { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sn-confirm-q { font-weight: 600; color: var(--accent-text); margin-right: auto; }
.sn-confirm .btn { min-height: 44px; }
@media (max-width: 699px) {
  .ps-card { padding: 14px; }
  .ps-new { margin-left: 0; }
  /* the New sale phone rules name grid areas on .sn-what and .sn-remove: the device line names its own */
  .pn-line { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "what what" "price remove"; gap: 8px; }
  .pn-line .pn-price { grid-area: price; }
  .pn-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-btns { grid-template-columns: minmax(0, 1fr); }
  .pn-btns .btn { min-height: 56px; }
}
@media (any-pointer: coarse) {
  .ps-cust { min-height: 44px; }
  .pn-price-in, .pn-notes-in { font-size: 16px; }
}
/* === end Sales: presales === */
/* === Reports: apple === */
/* milestone 6 Task 16 (reports/apple-*.js; boards 3.1 and 3.2): Apple payments (the three tiles, the month table and
   Awaiting Apple on the left; Upload and Uploads on the right), Unmatched lines (one card per line: what Apple sent on the
   left, the best guess and the three choices on the right; the upload summary beside the list) and Enter by hand. Tables
   scroll sideways in their own box on a narrow screen (never the page); the columns stack under 1100px (the card list)
   and 900px (the payments page). Green and red words always come with the text that says what they mean. */
.ap-page { display: flex; flex-direction: column; gap: 14px; max-width: 1320px; }
.ap-page .page-title { margin-bottom: 0; }
.ap-back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); font-weight: 600; text-decoration: none; }
.ap-back::before { content: "\2039"; margin-right: 6px; font-size: 1.25rem; line-height: 1; }
.ap-back:hover { color: var(--text); text-decoration: underline; }
.ap-head, .aq-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ap-upload-top { margin-left: auto; }
.ap-warn { margin: 0; padding: 10px 14px; border: 1px solid var(--warn); border-radius: var(--radius-card); background: var(--surface); color: #7A4900; font-weight: 600; }
.ap-h2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 0; font-size: 1rem; font-weight: 700; }
.ap-h2-sub { font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.ap-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; border-radius: 8px; }
.ap-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ap-tile { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); text-decoration: none; }
.ap-tile b { font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-tile > span { display: flex; flex-direction: column; min-width: 0; font-weight: 600; }
.ap-tile small { color: var(--muted); font-size: var(--fs-small); font-weight: 500; overflow-wrap: anywhere; }
a.ap-tile:hover { border-color: #B9B9C0; }
.ap-tile-hot b { color: var(--accent-text); }
.ap-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px; align-items: start; }
.ap-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ap-scroll { overflow-x: auto; }
.ap-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ap-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ap-table th { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ap-table td { padding: 9px 8px; border-bottom: 1px solid #EBEBEE; vertical-align: middle; overflow-wrap: anywhere; }
.ap-table tbody tr:last-child td { border-bottom: 0; }
.ap-table .n { text-align: right; white-space: nowrap; }
.ap-table small { display: block; color: var(--muted); font-size: var(--fs-small); }
.ap-table td.mono { font-size: var(--fs-small); }
#ap-awaiting .ap-table { min-width: 640px; }
#ap-months .ap-table { min-width: 540px; }
.ap-table td b, .ap-table td a { white-space: nowrap; }
.ap-ok, .ap-st-ok { color: var(--ok); font-weight: 600; }
.ap-bad, .ap-st-bad { color: var(--accent-text); font-weight: 600; }
.ap-st-mute { color: var(--muted); font-weight: 600; }
.ap-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px; border: 1.5px dashed #8A8A92; border-radius: 8px; background: #FAFAFB; text-align: center; }
.ap-drop b { font-size: 1rem; }
.ap-drop-hot { border-color: var(--focus); background: #EEF3FC; }
.ap-choose { cursor: pointer; }
#ap-files:focus-visible + .ap-choose, #ap-files:focus-visible ~ .ap-choose { outline: 3px solid var(--focus); outline-offset: 2px; }
.ap-upload-top { cursor: pointer; }
.ap-items, .ap-ups { margin: 0; padding: 0; list-style: none; }
.ap-item, .ap-up { padding: 9px 0; border-top: 1px solid #EBEBEE; }
.ap-item:first-child, .ap-up:first-child { border-top: 0; }
.ap-item-top, .ap-up-top, .ap-up-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ap-item-name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.ap-item-status { flex: none; font-size: var(--fs-small); }
.ap-item-text { margin: 2px 0 0; font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.ap-item-link { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; color: var(--text); }
.ap-import-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ap-import-note { color: var(--muted); font-weight: 600; }
.ap-up-meta { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-up-file { font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; min-width: 0; }
.ap-void { flex: none; min-height: 32px; padding: 0 10px; }
.ap-void-what { margin: 0 0 12px; color: var(--muted); }
.ap-void-reason { width: 100%; resize: vertical; }
.ap-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.ap-links { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin: 0; padding: 0; list-style: none; }
.ap-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none; }
.ap-link:hover { border-color: #B9B9C0; }

.aq-aside { font-weight: 600; min-height: 32px; padding: 0 10px; text-decoration: underline; }
.aq-aside-list { display: flex; flex-direction: column; gap: 10px; }
.aq-aside-rows { margin: 0; padding: 0; list-style: none; }
.aq-aside-row { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 10px 20px; padding: 12px 0; border-top: 1px solid #EBEBEE; }
.aq-aside-row:first-child { border-top: 0; }
.aq-aside-why { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.aq-aside-reason { font-weight: 600; }
.aq-notice { margin: 0; padding: 10px 14px; border: 1px solid var(--accent-text); border-radius: var(--radius-card); background: var(--surface); color: var(--accent-text); font-weight: 600; }
.aq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.aq-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.aq-capped { margin: 0; font-weight: 600; }
.aq-line { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.aq-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aq-file { font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; min-width: 0; }
.aq-amt { margin-top: 4px; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; outline: none; }
.aq-dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 3px 8px; margin: 6px 0 0; font-size: 0.875rem; }
.aq-dl dt { color: var(--muted); }
.aq-dl dd { margin: 0; overflow-wrap: anywhere; }
.aq-choose { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.aq-guess { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid #EBEBEE; border-radius: 6px; background: #FAFAFB; overflow-wrap: anywhere; }
.aq-guess-k { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.aq-guess-name { font-size: 1rem; }
.aq-guess-name a { color: var(--text); }
.aq-acts, .aq-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.aq-acts .btn { min-height: 44px; }
.aq-reasons { padding: 10px 12px; border: 1px solid #EBEBEE; border-radius: 6px; }
.aq-sum { display: flex; flex-direction: column; gap: 4px; }
.aq-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid #EBEBEE; font-variant-numeric: tabular-nums; }
.aq-kv:first-of-type { border-top: 0; }
.aq-kv span:first-child { color: var(--muted); }
.aq-find-q { width: 100%; }
.aq-found-list { margin: 0; padding: 0; list-style: none; }
.aq-found { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid #EBEBEE; }
.aq-found-text { min-width: 0; overflow-wrap: anywhere; }

.ah-page { max-width: 1040px; }
.ah-card { display: flex; flex-direction: column; gap: 10px; }
.ah-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.ah-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ah-label { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.ah-in { width: 100%; min-height: var(--tap); padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-field); background: var(--surface); color: var(--text); font: inherit; box-sizing: border-box; }
.ah-num { text-align: right; font-variant-numeric: tabular-nums; }
.ah-file { margin: 0; }
.ah-lines { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ah-line { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(120px, 0.8fr) minmax(90px, 0.6fr) minmax(0, 1.6fr) auto; gap: 8px; align-items: end; padding-bottom: 8px; border-bottom: 1px solid #EBEBEE; }
.ah-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ah-paste { resize: vertical; }
.ah-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ah-sum { font-weight: 600; font-variant-numeric: tabular-nums; }
.ah-sum-bad { color: var(--accent-text); }
.ah-error { margin: 0; color: var(--accent-text); font-weight: 600; overflow-wrap: anywhere; }
.ah-done { margin: 0; font-weight: 600; }

@media (max-width: 1099px) {
  .aq-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .ap-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .ap-tiles { grid-template-columns: minmax(0, 1fr); }
  .aq-line, .aq-aside-row { grid-template-columns: minmax(0, 1fr); }
  .aq-line { padding: 14px; }
  .ah-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ah-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ah-serial, .ah-desc { grid-column: 1 / -1; }
  .ah-remove { justify-self: start; }
  .ap-upload-top { margin-left: 0; }
}
@media (any-pointer: coarse) {
  .ah-in { min-height: 44px; font-size: 16px; }
  .ap-void, .ap-item-link, .ap-back, .aq-aside { min-height: 44px; }
  .ap-table a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } /* Task 21 */
}
/* === end Reports: apple === */
/* === Reports: apple export === */
/* milestone 6 Task 17 (reports/apple-export.js, board 4.1): the Export card (400px) beside the column list, the preview
   below in its own sideways scroll box; the column list reads down each of its three columns (1-10, 11-20, 21-28) and
   becomes one column on a phone. Range chips are 44px; the chosen one is dark with white text. */
.ap-export-link { margin-left: auto; }
.ap-export-link + .ap-upload-top { margin-left: 0; }
.ax-grid { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 14px; align-items: start; }
.ax-card { gap: 12px; }
.ax-lbl { display: block; margin: 0 0 6px; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.ax-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ax-chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.ax-chip[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--surface); }
.ax-chip:focus-visible, .ax-check input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ax-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ax-dates > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ax-count { margin: 0; padding-top: 10px; border-top: 1px solid #EBEBEE; }
.ax-count b { display: block; font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.ax-count .muted { display: block; }
.ax-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.ax-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--text); }
.ax-download { min-height: 48px; }
.ax-note { margin: 0; font-weight: 600; }
.ax-error { margin: 0; color: var(--accent-text); font-weight: 600; overflow-wrap: anywhere; }
.ax-last { margin: 0; font-size: var(--fs-small); }
.ax-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(10, auto); grid-auto-flow: column; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.ax-cols li { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid #EBEBEE; min-width: 0; overflow-wrap: anywhere; }
.ax-n { min-width: 22px; flex: none; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--muted); }
.ax-table th { text-transform: none; letter-spacing: 0; font-family: var(--font-mono); }
.ax-table td { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-small); }
@media (max-width: 1199px) {
  .ax-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(14, auto); }
}
@media (max-width: 899px) {
  .ax-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .ax-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .ap-export-link { margin-left: 0; }
}
/* === end Reports: apple export === */
/* === Reports: saved === */
/* milestone 6 Task 6 (reports/saved-reports.js, reports/print.js; board 4.3): search and the kind chips in one wrapping row,
   the open copy above the table (a sandboxed frame on white, as it prints), the table scrolling sideways in its own box on a
   phone. The print frame (print.js) is off screen and takes no room. */
.print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }
.sr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sr-q { width: 320px; max-width: 100%; min-height: 44px; }
.sr-card { padding-top: 6px; }
.sr-scroll { position: relative; } /* holds the visually hidden caption and Open heading inside the scroll box */
.sr-table { min-width: 720px; }
.sr-at { white-space: nowrap; }
.sr-title { font-weight: 600; }
.sr-open-cell { text-align: right; }
.sr-open { min-height: 32px; padding: 0 10px; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.sr-open:hover { color: var(--accent-text); }
.sr-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-view-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 16px; }
.sr-view-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.sr-view-names .ap-h2:focus { outline: none; }
.sr-view-names .ap-h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-view-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-frame { display: block; width: 100%; height: 70vh; min-height: 360px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.sr-drive { margin: 0; font-weight: 600; }
.sr-error { margin: 0; color: var(--accent-text); font-weight: 600; }
@media (max-width: 699px) {
  .sr-q { width: 100%; }
  .sr-frame { height: 60vh; }
}
@media (any-pointer: coarse) {
  .sr-q { min-height: 44px; font-size: 16px; }
  .sr-open { min-height: 44px; min-width: 44px; }
}
/* === end Reports: saved === */
/* === Reports: insights === */
/* milestone 6 Task 7 (reports/insights.js, shared/charts.js; boards 5.1-5.3, D1 "look like today"): the dark rail (pages,
   filters, Print) left of the page; under 768 px it stacks above the page and the filters fold behind `Filters`. Charts:
   series 1 near-black, series 2 mid grey (--vz-1 / --vz-2: neutral data; red is kept for identity and meaning, site review
   M-7); every chart
   card has its Chart / Table switch. Tables scroll sideways in their own box, never the page. */
:root { --vz-1: var(--text); --vz-2: #85858D; --vz-line: #EBEBEE; }
.ins-page { display: flex; flex-direction: column; gap: 12px; max-width: 1440px; }
.ins-dash { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; align-items: start; }
.ins-rail { background: #1F1F23; color: #E8E8EA; border-radius: 8px; padding: 10px 0 16px; }
.ins-pages { display: flex; flex-direction: column; }
.ins-pg { display: block; width: 100%; min-height: 44px; padding: 0 18px; border: 0; background: none; color: #E8E8EA; font: inherit; font-size: var(--fs-base); text-align: left; cursor: pointer; }
.ins-pg:hover { background: #2A2A30; }
.ins-pg[aria-current="page"] { background: #3A3A40; font-weight: 700; }
.ins-pg:focus-visible, .ins-fbtn:focus-visible, .ins-print:focus-visible, .ins-more-btn:focus-visible, .ins-rail a:focus-visible { outline: 3px solid #8AB4FF; outline-offset: -3px; }
.ins-fh { padding: 16px 18px 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #B4B4BC; font-weight: 700; }
.ins-fbtn { display: none; }
.ins-f { padding: 4px 18px 8px; }
.ins-f label { display: block; margin-bottom: 3px; font-size: var(--fs-small); color: #C4C4CC; }
.ins-f select, .ins-f input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 8px; border: 1px solid #4A4A52; border-radius: 5px; background: #fff; color: #16161A; font: inherit; font-size: var(--fs-base); }
.ins-f select:disabled { opacity: .5; cursor: not-allowed; }
.ins-f select:focus-visible, .ins-f input:focus-visible { outline: 3px solid #8AB4FF; outline-offset: 1px; }
.ins-acts { display: flex; flex-direction: column; gap: 8px; padding: 10px 18px 0; }
.ins-print { min-height: 44px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.ins-print:disabled { opacity: .6; cursor: default; }
.ins-more-btn { min-height: 44px; border: 1px solid #6A6A72; border-radius: 6px; background: transparent; color: #E8E8EA; font: inherit; font-weight: 600; cursor: pointer; }
.ins-more-list { margin: 0; padding: 4px 0; list-style: none; border-top: 1px solid #3A3A40; }
.ins-more-list a { display: flex; align-items: center; min-height: 44px; padding: 0 4px; color: #fff; font-weight: 600; }
.ins-said { margin: 0; font-size: var(--fs-small); color: #C4C4CC; }
.ins-said.bad { color: #FFB4C0; font-weight: 700; }
.ins-main { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.ins-main .page-title { margin: 0 0 4px; }
.ins-range { margin: 0 2px 12px; color: var(--muted); font-size: 0.875rem; }
.ins-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ins-chip, .ins-clear { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.ins-clear { border-color: transparent; background: none; text-decoration: underline; }
.ins-chip:focus-visible, .ins-clear:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ins-body { display: flex; flex-direction: column; gap: 14px; transition: opacity .15s; }
.ins-loading { opacity: .55; }
.ins-notes { display: flex; flex-direction: column; gap: 4px; }
.ins-note { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.ins-note a { color: var(--accent-text); font-weight: 600; }
.ins-alerts { display: flex; flex-wrap: wrap; gap: 8px; }
.ins-alert { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-small); font-weight: 700; }
.ins-alert.bad { color: var(--accent-text); border-color: #E7B3BE; }
.ins-alert.good { color: var(--ok); border-color: #B5DCC4; }
.ins-group { margin: 10px 0 0; font-size: 1.125rem; }
.ins-links { margin: 8px 0 0; }
.ins-more { align-self: flex-start; margin-top: 8px; }
/* the shared chart pieces (web/shared/charts.js) */
.vz-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.vz-tiles.sm { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.vz-tile { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.vz-tiles.sm .vz-tile { padding: 10px 12px; }
.vz-tl { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.vz-tv { margin-top: 6px; font-size: 1.625rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vz-tiles.sm .vz-tv { margin-top: 4px; font-size: 1.125rem; }
.vz-td { margin-top: 6px; font-size: var(--fs-small); color: var(--muted); }
.vz-td.good { color: var(--ok); font-weight: 700; }
.vz-td.bad { color: var(--accent-text); font-weight: 700; }
.vz-card { min-width: 0; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.vz-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.vz-titles { min-width: 0; }
.vz-title { margin: 0; font-size: 1rem; font-weight: 700; }
.vz-sub { margin-top: 2px; font-size: var(--fs-small); color: var(--muted); }
.vz-tools { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
.vz-tools > .vz-switch { min-width: 0; }
.vz-switch { display: flex; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
.vz-switch button { flex: none; min-height: 36px; padding: 0 14px; border: 0; background: var(--surface); color: var(--muted); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.vz-switch button + button { border-left: 1px solid var(--line); }
.vz-switch button[aria-pressed="true"] { background: #ECECEF; color: var(--text); }
.vz-switch button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.vz-empty { padding: 14px 0; color: var(--muted); }
.vz-chart[hidden] { display: none; }
.vz-grid { display: grid; gap: 14px; }
.vz-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vz-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vz-bars { display: flex; flex-direction: column; }
.vz-brow { display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 36px; padding: 4px 0; font-size: 0.875rem; }
.vz-pick { width: 100%; border: 0; border-top: 1px solid var(--vz-line); background: none; color: var(--text); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; }
.vz-pick:first-child { border-top: 0; }
.vz-pick:hover { background: #F7F7F8; }
.vz-pick:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.vz-pick.sel { font-weight: 700; }
.vz-pick.dim { color: var(--muted); }
.vz-pick.dim .vz-bar { opacity: .35; }
.vz-bl { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.vz-bsub { font-size: 12.5px; color: var(--muted); }
.vz-bt { display: block; min-width: 0; }
.vz-bar { display: block; height: 14px; border-radius: 0 4px 4px 0; background: var(--vz-1); }
.vz-bar.muted { background: #9A9AA2; }
.vz-bv { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vz-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 6px; font-size: var(--fs-small); color: var(--muted); }
.vz-lg { display: inline-flex; align-items: center; gap: 6px; }
.vz-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.vz-svg { display: block; width: 100%; height: auto; overflow: visible; }
.vz-svg .vz-grid { stroke: var(--vz-line); stroke-width: 1; }
.vz-svg .vz-base { stroke: #C9C9CE; stroke-width: 1; }
.vz-svg .vz-axis { fill: var(--muted); font-size: 12px; }
.vz-svg .vz-peak { fill: var(--text); font-size: 12px; font-weight: 600; }
.vz-svg .vz-hit { fill: transparent; }
.vz-svg g:hover > .vz-hit { fill: #F1F1F3; }
.bk-wrap { position: relative; overflow-x: auto; }
.bk { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.bk th { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-small); font-weight: 700; text-align: right; white-space: nowrap; }
.bk td { padding: 8px 10px; border-bottom: 1px solid var(--vz-line); text-align: right; }
.bk .tx { text-align: left; }
.bk td.tx { overflow-wrap: anywhere; min-width: 7em; } /* Task 21: words stay whole in a phone's scroll box; hostile text still wraps */
.bk tr.hd td { padding-top: 18px; border-bottom: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.bk tr.tot td { border-top: 2px solid var(--line); font-weight: 700; }
.bk tr.mut td { color: var(--muted); }
.bk tr.sel td { background: #FBEFF2; font-weight: 700; }
.bk td.good { color: var(--ok); font-weight: 600; }
.bk td.bad { color: var(--accent-text); font-weight: 600; }
.bk td.pc { position: relative; }
.bk td.pc i { position: absolute; left: 0; top: 50%; height: 18px; margin-top: -9px; background: var(--vz-2); opacity: .22; border-radius: 0 4px 4px 0; }
.bk td.pc b { position: relative; font-weight: 600; }
.bk-sort { min-height: 32px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.bk-sort:focus-visible, .bk-pick:focus-visible, .bk a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bk-pick { min-height: 32px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: underline; text-decoration-color: #B9B9C0; cursor: pointer; }
.bk a { color: var(--text); font-weight: 600; white-space: nowrap; }
.br-list { display: flex; flex-direction: column; }
.br-row { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 0.875rem; }
.br-row:last-child { border-top: 1px solid var(--line); font-weight: 700; }
.br-track { position: relative; display: block; height: 16px; }
.br-bar { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.br-bar.rev { background: var(--vz-1); }
.br-bar.cost { background: #9A9AA2; }
.br-bar.profit { background: var(--vz-2); }
.br-val { display: flex; gap: 8px; justify-content: flex-end; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.br-val small { color: var(--muted); font-size: 12.5px; font-weight: 500; }
@media (max-width: 1100px) {
  .vz-grid3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .vz-grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ins-dash { grid-template-columns: minmax(0, 1fr); }
  .ins-rail { padding-bottom: 12px; }
  .ins-pages { flex-direction: row; overflow-x: auto; padding: 0 6px; }
  .ins-pg { flex: none; width: auto; padding: 0 14px; border-radius: 6px; white-space: nowrap; }
  .ins-fh { display: none; }
  .ins-fbtn { display: flex; align-items: center; margin: 8px 18px 0; width: calc(100% - 36px); min-height: 44px; padding: 0 12px; border: 1px solid #6A6A72; border-radius: 6px; background: transparent; color: #E8E8EA; font: inherit; font-weight: 700; cursor: pointer; }
  .ins-fbtn::after { content: "\25BE"; margin-left: auto; }
  .ins-fbtn[aria-expanded="true"]::after { content: "\25B4"; }
  .ins-rail:not(.fopen) .ins-filters { display: none; }
  .ins-acts { flex-direction: row; flex-wrap: wrap; }
  .ins-acts .ins-print, .ins-acts .ins-more-btn { flex: 1 1 140px; }
  .ins-more-list, .ins-said { flex-basis: 100%; }
  .vz-brow { grid-template-columns: minmax(80px, 42%) minmax(0, 1fr) auto; }
  .br-row { grid-template-columns: 96px minmax(0, 1fr) auto; }
}
@media (any-pointer: coarse) {
  .ins-f select, .ins-f input { height: 44px; font-size: 16px; }
  .vz-switch button, .ins-chip, .ins-clear, .bk-pick, .bk-sort { min-height: 44px; }
  .vz-pick { min-height: 44px; }
  .bk-pick, .bk-sort { min-width: 44px; } /* Task 21 */
  .bk a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}
/* === end Reports: insights === */
/* === Reports: day === */
/* milestone 6 Task 8 (reports/day-summary.js; boards 5.4 and 5.5, D2): the Day / Today / Print bar on white, then the lines
   in one 760 px card (managers) or, for staff (board 5.5), 56 px controls and two columns (Sales, Checklists and Stock beside
   the repairs) once the screen is wide enough; one column on a phone. */
.ds-page { max-width: 760px; gap: 12px; }
.ds-page.ds-staff { max-width: 1140px; }
.ds-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 10px 14px; }
.ds-day { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ds-day .ah-in { width: auto; min-height: 44px; font-size: 16px; }
.ds-sp { flex: 1; }
.ds-bar .btn { min-height: 44px; padding: 0 18px; }
.ds-cols { display: flex; flex-direction: column; gap: 14px; }
.ds-card, .ds-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 4px 18px 14px; min-width: 0; }
.ds-group { margin: 0; padding: 16px 2px 4px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ds-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid #EBEBEE; overflow-wrap: anywhere; }
.ds-line b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-empty { margin: 0; padding: 9px 2px; color: var(--muted); }
.ds-said { margin: 0; font-weight: 600; }
.ds-said.bad, .ds-error { margin: 0; color: var(--accent-text); font-weight: 600; }
.ds-staff { font-size: 17px; }
.ds-staff .ds-day .ah-in, .ds-staff .ds-bar .btn { min-height: 56px; font-size: 17px; }
.ds-staff .ds-bar .btn { padding: 0 22px; }
.ds-staff .ap-back { min-height: 44px; }
.ds-staff .ds-group { font-size: 13px; }
.ds-staff .ds-line { padding: 12px 2px; }
@media (min-width: 900px) {
  .ds-staff .ds-cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 599px) {
  .ds-bar { padding: 10px; }
  .ds-day { flex: 1 1 100%; }
  .ds-day .ah-in { flex: 1; }
  .ds-sp { display: none; }
  .ds-bar .btn { flex: 1 1 0; }
  .ds-card, .ds-col { padding: 4px 14px 12px; }
}
@media (any-pointer: coarse) {
  .ap-page.ds-page .ap-back { min-height: 44px; }
}
/* === end Reports: day === */
/* === Reports: staff sales === */
/* milestone 6 Task 9 (reports/staff-sales.js; board 5.7, D3): one 680 px card; the four period buttons in a row (the pressed
   one in ink) with Print beside them, then a line per person (name, total and count, an 8 px share bar) and the Total. */
.ss-page { max-width: 680px; gap: 12px; }
.ss-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 16px 18px; min-width: 0; }
.ss-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.ss-per { flex: 1 1 360px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ss-per button { min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-button); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; font-size: 14px; padding: 0 6px; cursor: pointer; }
.ss-per button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--surface); }
.ss-per button:focus-visible, .ss-print:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ss-print { min-height: 44px; padding: 0 18px; }
.ss-range, .ss-none { margin: 6px 0 0; color: var(--muted); }
.ss-said { margin: 6px 0 0; font-weight: 600; }
.ss-said.bad, .ss-error { margin: 8px 0 0; color: var(--accent-text); font-weight: 600; }
.ss-person { padding: 12px 0; border-bottom: 1px solid #EBEBEE; }
.ss-person:last-child { border-bottom: 0; }
.ss-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.ss-name { font-size: 15.5px; overflow-wrap: anywhere; min-width: 0; }
.ss-amt { text-align: right; white-space: nowrap; }
.ss-amt b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-amt small { display: block; font-size: 13px; color: var(--muted); }
.ss-bar { height: 8px; background: #ECECEF; border-radius: 4px; overflow: hidden; }
.ss-bar i { display: block; height: 100%; background: #2F3138; }
.ss-total { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; padding: 14px 0 2px; font-size: 16px; }
.ss-total b { font-variant-numeric: tabular-nums; }
@media (max-width: 599px) {
  .ss-card { padding: 12px 14px; }
  .ss-per { flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-print { flex: 1 1 100%; }
}
@media (any-pointer: coarse) {
  .ap-page.ss-page .ap-back { min-height: 44px; }
}
/* === end Reports: staff sales === */
/* === Reports: weekly summary === */
/* milestone 6 Task 10 (reports/weekly.js; board 5.6, D5): a 760 px column; the title with the week arrows, Send now and Print
   beside it, then the email as it looks (the red band, a label and value table, the recipients line) and Last sent with
   Waiting to send. Settings > Weekly summary email (reports/summary-email.js): the line and, for an admin, the addresses. */
.wk-page { max-width: 760px; gap: 12px; }
.wk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wk-bar .ap-title { margin: 0; flex: 1 1 auto; }
.wk-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.wk-tools .btn { min-height: 44px; }
.wk-ic { width: 44px; padding: 0; font-size: 20px; line-height: 1; }
.wk-send, .wk-print { padding: 0 16px; }
.wk-tools .btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wk-mail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; min-width: 0; }
.wk-band { background: #BA0C2F; color: #fff; padding: 16px 22px; font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.wk-lines { width: 100%; border-collapse: collapse; }
.wk-lines th, .wk-lines td { padding: 11px 18px; border-bottom: 1px solid #EBEBEE; vertical-align: top; text-align: left; font-size: 15px; }
.wk-lines th { color: var(--muted); font-weight: 400; width: 34%; }
.wk-lines td { font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wk-foot { margin: 0; padding: 12px 18px; font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.wk-foot a { color: var(--text); font-weight: 600; }
.wk-last { margin: 0; color: var(--muted); font-size: 14px; }
.wk-wait { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 4px; background: #FFF4D6; color: #6B4A00; font-weight: 600; }
.wk-said { margin: 0; font-weight: 600; }
.wk-said.bad, .wk-error { margin: 0; color: var(--accent-text); font-weight: 600; }
.se-line { margin: 0; overflow-wrap: anywhere; }
.se-edit { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.se-addr { width: 100%; box-sizing: border-box; min-height: 88px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-button);
  font: inherit; font-size: 16px; color: var(--text); background: var(--surface); resize: vertical; }
.se-addr:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 599px) {
  .wk-bar .ap-title { flex-basis: 100%; }
  .wk-tools { width: 100%; }
  .wk-send, .wk-print { flex: 1 1 0; }
  .wk-lines th, .wk-lines td { display: block; width: auto; padding: 8px 14px; }
  .wk-lines th { padding-bottom: 0; border-bottom: 0; }
  .wk-band { padding: 14px 16px; font-size: 17px; }
}
@media (any-pointer: coarse) {
  .ap-page.wk-page .ap-back { min-height: 44px; }
}
/* === end Reports: weekly summary === */
/* === Reports: statements and downloads === */
/* milestone 6 Task 11 (reports/statements.js, reports/downloads.js; D6, D16): the period fields in a row; the departments
   list beside the chosen department's repairs (stacked under 900 px); Download CSV's one card of fields. */
.st-period { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.st-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 1 220px; }
.st-f .ah-in { font-size: 16px; }
.st-f .ah-in:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.st-grid { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.st-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.st-dept { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; min-height: 44px; padding: 8px 10px;
  border: 1px solid transparent; border-radius: var(--radius-button); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.st-dept:hover { background: var(--surface2, #F4F4F6); }
.st-dept[aria-pressed="true"] { background: var(--surface2, #F4F4F6); border-color: var(--line); }
.st-dept:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.st-dn { font-weight: 600; overflow-wrap: anywhere; }
.st-dm { grid-column: 1; color: var(--muted); font-size: var(--fs-small); }
.st-dt { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 12px; }
.st-sub { margin: 4px 0 0; overflow-wrap: anywhere; }
.st-print, .dl-go { min-height: 44px; padding: 0 16px; }
.st-table td { overflow-wrap: break-word; }
.st-table td:nth-child(2), .st-table td:nth-child(3) { min-width: 96px; }
.st-table td.st-work { min-width: 160px; }
.st-table td:first-child { white-space: nowrap; }
.st-table tfoot td { padding: 9px 8px; border-top: 2px solid var(--text); font-weight: 700; }
.dl-page { max-width: 640px; }
.dl-card { gap: 14px; }
.dl-card .st-f { flex-basis: auto; }
.dl-go { align-self: flex-start; }
@media (max-width: 899px) {
  .st-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .st-f { flex: 1 1 100%; }
  .st-print, .dl-go { width: 100%; }
}
@media (any-pointer: coarse) {
  .ap-page.st-page .ap-back, .ap-page.dl-page .ap-back { min-height: 44px; }
}
/* === end Reports: statements and downloads === */
/* === Reports: low stock === */
/* milestone 6 Task 18 (reports/low-stock.js; board 4.2, D7, D8): the title with the Managers tag, who it is sent to, Print list
   and Send order sheet now on one line (wrapping); the table of products below minimum with Include ticks and - / + order
   steppers (it scrolls in its own box on a phone); the order form's name with Replace. */
.ls-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ls-bar .ap-title { margin: 0; }
.ls-to { flex: 1 1 220px; font-size: 14px; overflow-wrap: anywhere; text-align: right; }
.ls-nowrap { white-space: nowrap; }
.ls-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.ls-tools .btn, .ls-replace { min-height: 44px; padding: 0 16px; }
.ls-tools .btn:focus-visible, .ls-replace:focus-visible, .ls-qty button:focus-visible, .ls-tick:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ls-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px;
  background: #FAFAFB; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.ls-out { border-color: #E3A1AE; background: #FBEAED; color: var(--accent-text); }
.ls-held { border-color: #F1C98F; background: #FEF3E2; color: #7A3A0C; }
.ls-table { min-width: 760px; }
.ls-table th.n, .ls-table td.n { text-align: right; white-space: nowrap; }
.ls-table td { overflow-wrap: break-word; }
.ls-name b { font-weight: 600; }
.ls-sku { font-family: ui-monospace, 'IBM Plex Mono', Menlo, monospace; font-size: 14px; white-space: nowrap; }
.ls-last { white-space: nowrap; }
.ls-hit { display: inline-flex; padding: 11px; margin: -11px; cursor: pointer; } /* a 44 px target around the 22 px box */
.ls-tick { width: 22px; height: 22px; margin: 0; accent-color: #16161A; cursor: pointer; }
.ls-off td:not(:first-child) { color: var(--muted); }
.ls-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-button); overflow: hidden; background: var(--surface); }
.ls-qty button { width: 44px; min-height: 44px; border: 0; background: var(--surface); color: var(--muted); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.ls-qty button:disabled { color: #B9B9C0; cursor: default; }
.ls-qty span { min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.ls-table tfoot td { font-weight: 700; border-top: 1px solid var(--line); border-bottom: 0; }
.ls-table tfoot .ls-left { font-weight: 500; white-space: normal; }
.ls-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ls-form-name { flex: 1 1 200px; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  /* a phone: each product is a small block (tick | name, SKU, then on hand, minimum and the stepper); Last received is left
     to the wider screens and the printed list */
  .ls-scroll { overflow-x: visible; }
  .ls-table { min-width: 0; }
  .ls-table, .ls-table tbody, .ls-table tfoot { display: block; width: 100%; }
  .ls-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ls-table tbody tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "tick name name" "tick sku sku" "tick oh ord" "tick min ord";
    align-items: center; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid #EBEBEE; }
  .ls-table tbody td { display: block; padding: 0; border: 0; }
  .ls-table .ls-c-tick { grid-area: tick; align-self: start; padding-top: 11px; }
  .ls-table .ls-name { grid-area: name; overflow-wrap: anywhere; }
  .ls-table .ls-sku { grid-area: sku; font-size: 13px; color: var(--muted); }
  .ls-table td.ls-oh { grid-area: oh; text-align: left; }
  .ls-table td.ls-min { grid-area: min; text-align: left; }
  .ls-table .ls-oh::before, .ls-table .ls-min::before { content: attr(data-label) " "; color: var(--muted); font-size: 13px; }
  .ls-table .ls-ord { grid-area: ord; justify-self: end; align-self: end; }
  .ls-table .ls-last { display: none; }
  .ls-table tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 10px; }
  .ls-table tfoot td { display: block; padding: 0; border: 0; }
  .ls-table tfoot .ls-gap { display: none; }
  .ls-table tfoot .ls-left { flex-basis: 100%; }
  .ls-bar .ap-title { flex-basis: 100%; }
  .ls-to { text-align: left; flex-basis: 100%; }
  .ls-tools { width: 100%; }
  .ls-tools .btn { flex: 1 1 0; }
  .ls-replace { width: 100%; }
}
@media (any-pointer: coarse) {
  .ap-page.ls-page .ap-back { min-height: 44px; }
}
/* === end Reports: low stock === */
/* === Reports: home and missing information === */
/* milestone 6 Task 19 (reports/reports-home.js, board 1.1; reports/missing-info.js). The home: three cards (a count and two
   lines; the Apple count red while lines wait) over five groups of links, three columns, two at tablet width, one on a
   phone. A link row is 44 px high with its side value right-aligned in the muted ink; a row not built yet is muted and not a
   link. Missing information: tabs per list (44 px), then one row per repair with Open and Exempt. */
.rh-page { display: flex; flex-direction: column; gap: 14px; max-width: 1320px; }
.rh-page .page-title { margin-bottom: 0; }
.rh-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rh-need { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 76px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--text); text-decoration: none; }
.rh-need:hover { border-color: #B9B9C0; }
.rh-need b { min-width: 30px; font-size: 1.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rh-hot b { color: var(--accent-text); }
.rh-need > span { display: flex; flex-direction: column; min-width: 0; }
.rh-need strong { font-size: 1rem; font-weight: 600; }
.rh-need small { color: var(--muted); font-size: var(--fs-small); overflow-wrap: anywhere; }
.rh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.rh-group { display: flex; flex-direction: column; min-width: 0; padding: 14px 16px; border-radius: 8px; }
.rh-h2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 4px; font-size: var(--fs-small); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.rh-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: 4px; background: #FAFAFB;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.rh-link { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid #EBEBEE; color: var(--text); font-weight: 600; text-decoration: none; }
.rh-link:first-of-type { border-top: 0; }
.rh-link > span { min-width: 0; overflow-wrap: anywhere; }
.rh-link small { margin-left: auto; color: var(--muted); font-size: var(--fs-small); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
a.rh-link::after { content: "\203A"; flex: none; margin-left: 4px; color: var(--muted); font-size: 1.25rem; line-height: 1; }
a.rh-link:not(:has(small))::after { margin-left: auto; }
a.rh-link:hover > span { text-decoration: underline; }
a.rh-link:focus-visible, .rh-need:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rh-off { color: var(--muted); font-weight: 500; }
@media (max-width: 1099px) {
  .rh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .rh-needs, .rh-grid { grid-template-columns: minmax(0, 1fr); }
  .rh-need { min-height: 64px; }
}
.mi-page .mi-sub { margin: 0; }
.mi-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mi-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.mi-tab b { font-variant-numeric: tabular-nums; }
.mi-tab[aria-selected="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.mi-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mi-rows, .mi-counts { margin: 0; padding: 0; list-style: none; }
.mi-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 0; border-top: 1px solid #EBEBEE; }
.mi-row:first-child { border-top: 0; }
.mi-what { display: flex; flex-direction: column; min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.mi-what b { font-weight: 600; }
.mi-what .muted { font-size: var(--fs-small); }
.mi-do { display: flex; gap: 8px; }
.mi-do .btn { min-height: 44px; text-decoration: none; }
.mi-counts li { display: flex; justify-content: space-between; gap: 12px; min-height: 44px; align-items: center; border-top: 1px solid #EBEBEE; }
.mi-counts li:first-child { border-top: 0; }
.mi-counts b { font-variant-numeric: tabular-nums; }
/* === end Reports: home and missing information === */

/* === Polish: Before closing and Log === */
/* P13 (E7): the Log's day line above the first row of each earlier New York day (Ws10Land `.day`); none above today's. */
.rr-log .rr-day { list-style: none; padding: 10px 0 2px; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; }
/* P3: the At pickup group (pickup signature, payment): always shown, quiet (muted heading and state, no red; Payment keeps a
   plain Add, never the red one). */
.rr-pickup { display: flex; flex-direction: column; min-width: 0; padding-top: 8px; border-top: 1px solid var(--line2, var(--hairline)); }
.rr-pickup-title { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; }
.rr-pickup .rr-check-label { font-weight: 400; }
.rr-pickup .rr-check[data-state="missing"] .rr-check-state { color: var(--muted); font-weight: 600; }
/* === end Polish: Before closing and Log === */

/* === Polish: Store contact === */
/* P5 (E4): Store address and Store phone side by side in the Receipt printer panel, stacked when narrow. */
.ks-store { flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.ks-store .field { flex: 1 1 220px; min-width: 0; margin-bottom: 0; }
.ks-store .field-input { width: 100%; }
/* === end Polish: Store contact === */

/* === Polish: Print state === */
/* P10 (E8): the Print choice reads the receipt job's live state; a failed one reads Not printed, outlined, with Try again. */
.rc-choice.rc-failed[aria-pressed="true"] { background: var(--surface, #FFFFFF); border-color: var(--accent-text); color: var(--accent-text); }
.rc-choice.rc-failed[aria-pressed="true"] .rc-line { color: var(--muted); }
.rc-choice.rc-failed[aria-pressed="true"]:not(:disabled):hover { background: var(--bg); }
.rc-ps { display: flex; justify-content: flex-start; }
.rc-again { min-height: 44px; }
/* === end Polish: Print state === */

/* === Polish: EDU choices === */
/* P12: the old site's long "Other: purchase will be used for educational purposes" chip wraps with room above and below. */
.sn-edu .sn-chip { padding-top: 8px; padding-bottom: 8px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
/* === end Polish: EDU choices === */

/* === Polish: Staff toasts === */
/* P4 (E5): a new kiosk check-in or help call. Bottom right, over the page and the dock (50), under the drawer (90); above the
   dock on the iPad and phone layouts. The live region takes no room or presses while empty. */
.toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.shell[data-layout="dock"] ~ .toast-root .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
.toast { display: flex; align-items: center; gap: 4px; box-sizing: border-box; max-width: 100%; padding: 4px 4px 4px 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--text); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); font-size: var(--fs-base); font-weight: 600; pointer-events: auto; }
.toast-text { min-width: 0; overflow-wrap: anywhere; }
.toast-close { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--radius-button); background: transparent; color: var(--muted); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.toast-close:hover { background: var(--bg); color: var(--text); }
.toast-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* === end Polish: Staff toasts === */

/* === Polish: Kiosk idle === */
/* P15 (E6): Idle reset (minutes) in the Kiosk panel, a short number box under the two switches. */
.ks-idle .field { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.ks-idle .field-input { width: 120px; max-width: 100%; }
/* === end Polish: Kiosk idle === */

/* === Polish: Check-in form === */
/* The letter-size repair form at #/repairs/<id>/form (checkin-form.js), opened by Print repair form in Repair settings.
   Owner change 2026-11-13: the old buildRepairPdfHtml style again (Index.html:8246-8333): front and back, each its own
   8.5 x 11 in page (816 x 1056 px at 96 per inch), the old sizes and spacing, compact / compact2 when the optional blocks
   are there, and the repair receipt page (receiptBlockHtml, 17334-17347). The shop red is the rebuild's #BA0C2F. In print
   only the sheets show: the app shell, the Print and Close buttons and the toasts are hidden (openPrintPopup, 7958). */
.cf-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 1320px; margin: 16px 28px 0; }
.cf-done > [role="status"] { flex: 1 1 260px; margin: 0; }
.cf-page { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 16px; background: #E6E6E6; }
.cf-actions { position: sticky; top: 8px; z-index: 5; display: flex; gap: 8px; align-self: flex-end; }
.cf-btn { min-height: 44px; min-width: 88px; }
/* the sheet itself, at the old print sizes (8-10 px labels): exempt from the screen 11 px floor */
/* --- paper sheet --- */
.cf-sheet { position: relative; box-sizing: border-box; width: 100%; max-width: 816px; min-height: 1056px; padding: 24px 28px; background: #FFFFFF;
  color: #000000; box-shadow: 0 2px 14px rgba(0, 0, 0, .25); font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: normal; }
/* :where() gives the reset no class weight, so every .cf-* margin below wins over it (review I-1) */
:where(.cf-sheet) p, :where(.cf-sheet) h2 { margin: 0; }
.cf-po { position: absolute; top: 20px; right: 26px; width: 150px; padding: 6px 10px; border: 1.5px solid #333333; border-radius: 3px; }
.cf-po-lbl { display: block; color: #666666; font-size: 8px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.cf-po-line { display: block; height: 16px; margin-top: 3px; border-bottom: 1px solid #555555; font-size: 11px; }
.cf-brand { margin-bottom: 14px; padding-bottom: 12px; text-align: center; border-bottom: 3px solid #BA0C2F; }
.cf-logo { display: block; width: auto; height: 52px; margin: 0 auto 5px; }
.cf-brand-name { margin: 4px 0 2px; color: #BA0C2F; font-size: 20px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.cf-brand-line { color: #666666; font-size: 10px; }
.cf-sec { margin: 12px 0 5px; padding-bottom: 2px; border-bottom: 1.5px solid #BA0C2F; color: #BA0C2F; font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; }
.cf-row { display: flex; margin-bottom: 6px; }
.cf-field { flex: 1 1 0; min-width: 0; padding-right: 10px; }
.cf-wide { flex-grow: 2; }
.cf-k { display: block; margin-bottom: 2px; color: #888888; font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.cf-v { display: block; min-height: 17px; padding-bottom: 3px; border-bottom: 1px solid #E0E0E0; color: #000000; font-size: 12px; overflow-wrap: anywhere; }
.cf-lg .cf-k { font-size: 10px; }
.cf-lg .cf-v { min-height: 20px; padding-bottom: 4px; font-size: 14px; font-weight: 600; }
.cf-mono { font-family: "Courier New", monospace; letter-spacing: .5px; }
.cf-amount { color: #BA0C2F; font-size: 18px; font-weight: 900; }
.cf-auth-line { display: block; height: 24px; margin-top: 18px; border-bottom: 1.5px solid #333333; }
.cf-problem { min-height: 48px; margin-top: 2px; padding: 8px; border: 1px solid #DDDDDD; border-radius: 3px; font-size: 11px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.cf-lines { margin-top: 6px; }
.cf-lines span { display: block; height: 22px; margin-bottom: 4px; border-bottom: 1px solid #CCCCCC; }
.cf-foot { margin-top: 16px; padding-top: 8px; border-top: 1px solid #EEEEEE; color: #AAAAAA; font-size: 9px; text-align: center; }
.cf-back-head { margin-bottom: 14px; padding-bottom: 10px; text-align: center; border-bottom: 2px solid #BA0C2F; }
.cf-back-title { color: #BA0C2F; font-size: 16px; font-weight: 900; letter-spacing: .5px; }
.cf-back-head .cf-brand-line { margin-top: 3px; }
.cf-ref { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 14px; padding: 8px 12px; border: 1px solid #E0E0E0; border-radius: 3px;
  background: #F5F5F5; font-size: 10px; }
.cf-ref-k { color: #888888; }
.cf-terms { margin: 10px 0; padding: 12px; border: 1px solid #DDDDDD; border-radius: 3px; background: #F9F9F9; color: #333333; font-size: 10px;
  line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.cf-sig { min-height: 100px; margin-top: 12px; padding: 10px; border: 1px solid #DDDDDD; border-radius: 3px; }
.cf-sig .cf-k { margin-bottom: 6px; letter-spacing: .5px; }
.cf-sig-img { display: block; max-width: 100%; height: 80px; object-fit: contain; object-position: left; border-bottom: 1px solid #CCCCCC; }
.cf-sig-line { margin: 60px 0 4px; border-bottom: 1px solid #333333; }
.cf-sig-name { display: block; color: #888888; font-size: 9px; }
.cf-pickup { display: flex; gap: 16px; align-items: flex-end; margin: 8px 0 14px; }
.cf-pick-sig, .cf-pick-date, .cf-pick-cost { position: relative; flex: 1; height: 36px; border-bottom: 1px solid #333333; }
.cf-pick-sig { flex: 2; }
.cf-plabel { position: absolute; bottom: -14px; left: 0; color: #888888; font-size: 9px; letter-spacing: .4px; text-transform: uppercase; }
.cf-pval { position: absolute; bottom: 4px; left: 0; color: #333333; font-size: 13px; }
.cf-pick-cost .cf-pval { font-weight: 600; }
.cf-pick-img { position: absolute; bottom: 2px; left: 4px; height: 34px; }
.cf-back .cf-foot { margin-top: 30px; }
/* compact / compact2 (Index.html:8301-8327): one or both optional blocks */
.cf-sheet.compact .cf-brand { margin-bottom: 9px; padding-bottom: 8px; }
.cf-sheet.compact .cf-logo { height: 42px; margin-bottom: 3px; }
.cf-sheet.compact .cf-brand-name { margin: 2px 0 1px; font-size: 17px; }
.cf-sheet.compact .cf-sec { margin: 8px 0 4px; padding-bottom: 1.5px; }
.cf-sheet.compact .cf-row { margin-bottom: 4px; }
.cf-sheet.compact .cf-k { margin-bottom: 1px; }
.cf-sheet.compact .cf-v { min-height: 14px; padding-bottom: 2px; }
.cf-sheet.compact .cf-lg .cf-v { min-height: 17px; padding-bottom: 3px; }
.cf-sheet.compact .cf-problem { min-height: 34px; padding: 6px; }
.cf-sheet.compact .cf-lines span { height: 18px; margin-bottom: 3px; }
.cf-sheet.compact .cf-foot { margin-top: 10px; padding-top: 5px; }
.cf-sheet.compact2 { font-size: 10px; }
.cf-sheet.compact2 .cf-brand { margin-bottom: 6px; padding-bottom: 6px; }
.cf-sheet.compact2 .cf-logo { height: 36px; }
.cf-sheet.compact2 .cf-brand-name { font-size: 15px; }
.cf-sheet.compact2 .cf-brand-line { font-size: 9px; }
.cf-sheet.compact2 .cf-v { min-height: 12px; font-size: 11px; }
.cf-sheet.compact2 .cf-lg .cf-v { min-height: 15px; font-size: 12.5px; }
.cf-sheet.compact2 .cf-sec { margin: 6px 0 3px; font-size: 9px; }
.cf-sheet.compact2 .cf-row { margin-bottom: 3px; }
.cf-sheet.compact2 .cf-problem { min-height: 28px; padding: 5px; font-size: 10.5px; }
.cf-sheet.compact2 .cf-lines span { height: 15px; margin-bottom: 2px; }
.cf-sheet.compact2 .cf-foot { margin-top: 7px; font-size: 8px; }
/* the repair receipt page (receiptBlockHtml) */
.cf-rcpt { font-size: 12px; }
.cf-rcpt .cf-brand { margin-bottom: 12px; padding-bottom: 10px; }
.cf-rcpt .cf-logo { height: 44px; margin-bottom: 4px; }
.cf-rcpt .cf-brand-name { font-size: 17px; }
.cf-meta { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; line-height: 1.5; }
.cf-meta b { font-size: 14px; }
.cf-meta-r { text-align: right; }
.cf-rk { color: #666666; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; }
.cf-work { margin: 8px 0 12px; padding: 8px 10px; border: 1px solid #DDDDDD; border-radius: 3px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.cf-rtable { width: 100%; border-collapse: collapse; }
.cf-rtable th { padding: 6px 8px; background: #BA0C2F; color: #FFFFFF; font-size: 10px; letter-spacing: .4px; text-align: left; text-transform: uppercase;
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.cf-rtable td { padding: 10px 8px; border-bottom: 1px solid #E3E3E3; vertical-align: middle; }
.cf-rtable .cf-ra { text-align: right; }
.cf-rd { width: 90px; font-size: 15px; font-weight: 700; }
.cf-ramt { width: 120px; font-family: "Courier New", monospace; font-size: 17px; font-weight: 800; }
.cf-bc { width: 260px; max-width: 100%; }
.cf-bc-svg { display: block; width: 100%; height: 46px; }
.cf-sku { margin-top: 2px; color: #444444; font-family: "Courier New", monospace; font-size: 11px; }
.cf-tot { width: 260px; margin: 10px 0 0 auto; }
.cf-tot div { display: flex; justify-content: space-between; padding: 4px 0; }
.cf-tot .cf-tot-g { margin-top: 4px; padding-top: 7px; border-top: 2px solid #000000; font-size: 16px; font-weight: 900; }
.cf-warr { margin: 14px 0; padding: 14px; border: 2px solid #000000; font-size: 16px; font-weight: 800; text-align: center; }
.cf-acct { margin-top: 14px; padding: 8px 10px; border: 2px solid #000000; font-weight: 700; }
/* --- end paper sheet --- */
@media (max-width: 699px) {
  .cf-done { margin: 12px 16px 0; }
  .cf-page { padding: 12px 0; }
  .cf-actions { margin-right: 16px; }
  .cf-sheet { min-height: 0; padding: 16px; }
  .cf-po { position: static; margin-bottom: 8px; }
  .cf-row { flex-wrap: wrap; }
  .cf-field { flex-basis: 140px; }
}
/* The letter page box is a named page the sheets ask for. In print the shell is taken out of the layout (display: none, as
   the stock prints do) so the sheets stay in-flow blocks and really ask for page cf; the body takes the page name too, so
   no blank default page opens first. Each sheet after the first starts a new page (the old .page page-break-after with
   :last-child avoid): the front, the back, then the receipt when there is one. The old print margins (0.4 in) and padding. */
.cf-sheet { page: cf; }
@page cf { size: letter; margin: 0.4in; }
@media print {
  body:has(.cf-sheet) { page: cf; background: #FFFFFF; }
  body:has(.cf-sheet) .skip-link, body:has(.cf-sheet) #top-root, body:has(.cf-sheet) #notice-root, body:has(.cf-sheet) #side-root,
  body:has(.cf-sheet) #dock-root, body:has(.cf-sheet) .toast-root, .cf-actions, .cf-done { display: none !important; }
  body:has(.cf-sheet) .shell, body:has(.cf-sheet) .shell-row, body:has(.cf-sheet) .shell[data-layout] .shell-row,
  body:has(.cf-sheet) .shell-column { display: block; min-height: 0; }
  body:has(.cf-sheet) #main, body:has(.cf-sheet) .shell[data-layout] #main { padding: 0; }
  .cf-page { display: block; padding: 0; background: #FFFFFF; }
  .cf-sheet { max-width: none; min-height: 0; margin: 0; padding: 18px 22px; box-shadow: none; }
  .cf-sheet + .cf-sheet { break-before: page; }
  .cf-rcpt { padding: 10px 16px; }
}
/* === end Polish: Check-in form === */
/* === Polish: List columns === */
.ps-device { min-width: 160px; }
.ps-table td.ps-deposit { white-space: normal; }
.sl-type { white-space: nowrap; }
/* === end Polish: List columns === */
/* === M8: print page === Settings > Print page (settings/print-page.js): the tabs, the form, the SKU preview, the picture
   canvas (the dots at their true shape, scaled to fit, never blurred), the Print bar. */
.pp-panel { max-width: 720px; }
.pp-body { display: grid; gap: 16px; padding: 16px 18px 18px; }
.pp-tabs { justify-self: start; max-width: 100%; }
.pp-tab { display: grid; gap: 14px; min-width: 0; }
.pp-tab .field { margin-bottom: 0; }
.pp-tab .field-input { width: 100%; box-sizing: border-box; }
.pp-area textarea.field-input { min-height: 120px; padding: 8px 10px; resize: vertical; font: inherit; line-height: 1.45; }
.pp-field { display: grid; gap: 6px; }
.pp-pickers { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.pp-opts { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pp-check { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); cursor: pointer; font-weight: 600; }
.pp-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--text); }
.pp-check input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pp-skus { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pp-skus:empty { display: none; }
.pp-sku { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 6px 10px; border-radius: 6px; background: var(--bg); }
.pp-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; white-space: pre; overflow-wrap: anywhere; }
.pp-word { color: var(--muted); min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.pp-warn .pp-word { color: var(--accent-text); font-weight: 600; }
.pp-error { margin: 0; color: var(--accent-text); font-weight: 600; }
.pp-file { max-width: 100%; min-height: var(--tap); font: inherit; }
.pp-dark input[type="range"] { width: 100%; max-width: 360px; min-height: var(--tap); accent-color: var(--text); }
.pp-preview { justify-self: start; max-width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; }
.pp-preview[hidden] { display: none; }
.pp-canvas { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
.pp-note { margin: 0; color: var(--muted); }
.pp-note:empty { display: none; }
.pp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pp-print { min-width: 120px; margin-left: auto; }
@media (max-width: 699px) {
  .pp-body { padding: 14px 16px 16px; }
  .pp-tabs { justify-self: stretch; display: flex; }
  .pp-tabs .segmented-item { flex: 1 1 0; }
  .pp-print { flex: 1 1 100%; }
}
@media (any-pointer: coarse) {
  .pp-tabs .segmented-item, .pp-pickers .segmented-item, .pp-check { min-height: 44px; }
  .pp-area textarea.field-input { font-size: 16px; }
}
/* === end M8: print page === */
/* === M8: repair receipt === (Task 26) the Pickup foot with Receipt printer: below 500 px Cancel and Receipt printer share a
   row and Picked up takes the full row under them, so no label wraps inside a button (DOM order kept: no CSS order). */
@media (max-width: 499px) {
  .pk-foot:has(.pk-receipt) { flex-wrap: wrap; }
  .pk-foot:has(.pk-receipt) .pk-done { flex-basis: 100%; }
  .pk-foot:has(.pk-receipt) .pk-foot-btn:not(.pk-done) { flex: 1 1 auto; white-space: nowrap; }
}
/* === end M8: repair receipt === */
/* === M7: command bar === */
/* The command bar (bar/command-bar.js; canvas B1-B7, C1, C2). `header`: the dropdown from the header field's left edge,
   720 px, over a light shade under the header (C1); `top`: full width from the top with 16 px gutters (iPad portrait);
   `full`: the whole screen with Cancel (phone). Rows 44 px (56 px for top and full); typed text 16 px, 18 px on touch.
   Text on white: ink 17.6:1, muted #5F6068 6.3:1 (5.6:1 on the active row #F1F1F3). */
.hdr-search { position: relative; }
.cb { --cb-active: #F1F1F3; --cb-line2: #EBEBEE; color: var(--text); font-size: 15px; line-height: 1.35; }
.cb kbd {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}
.cb-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.cb-scrim { position: fixed; inset: var(--hdr-h, 56px) 0 0 0; z-index: 60; background: rgba(15, 15, 17, 0.24); }
.cb-panel {
  position: absolute;
  z-index: 61;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  text-align: left;
}
.cb[data-layout="header"] .cb-panel {
  left: 0;
  top: 50%;
  width: min(720px, calc(100vw - 240px));
  max-height: min(640px, calc(100vh - 32px));
  max-height: min(640px, calc(100dvh - 32px));
  transform: translateY(-20px); /* the 40 px field row sits over the header field */
}
.cb .cb-panel :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* the field row */
.cb-q {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}
.cb-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: inherit; }
.cb-q:focus-within { box-shadow: inset 0 -2px 0 var(--focus); } /* the field has focus (its own outline is off) */
.cb-q-icon { flex: none; color: var(--muted); }
.cb-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
}
.cb .cb-input:focus-visible { outline: 0; }
.cb-input::placeholder { color: #6A6A72; opacity: 1; } /* 5.3:1 */
.cb-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 50%;
  min-height: 28px;
  padding: 0 2px 0 8px;
  border-radius: 4px;
  background: var(--text);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.cb-chip > span { overflow: hidden; text-overflow: ellipsis; }
.cb-chip-code { flex: none; color: #D4D4D8; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; } /* 13:1 on the ink chip */
.cb-chip-x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}
.cb-chip-x:hover { background: #2A2A30; }
.cb .cb-chip-x:focus-visible { outline-color: #8FB4FF; outline-offset: 0; }
.cb-cancel {
  flex: none;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* the Find tabs */
.cb-tabs {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 0 6px;
  flex-wrap: wrap; /* header and top: every tab in sight (full scrolls them sideways, below) */
  border-bottom: 1px solid var(--cb-line2);
}
.cb-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.cb-tab:hover:not(:disabled) { color: var(--text); }
.cb-tab[aria-selected="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.cb-tab:disabled { color: #74747C; cursor: default; } /* 4.7:1 */
.cb-count { font-size: 12.5px; font-weight: 500; }

/* the list */
.cb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; }
.cb-none { margin: 0; padding: 12px 12px 2px; font-size: 14px; font-weight: 600; }
.cb-list { padding: 0 6px; }
.cb-gh {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 6px 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cb-note { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cb-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 52px;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  border-radius: 6px;
  cursor: pointer;
}
.cb-row:hover { background: var(--row-hover); }
.cb-row[aria-selected="true"] { background: var(--cb-active); box-shadow: inset 3px 0 0 var(--text); }
.cb-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--cb-active);
  color: var(--text);
}
.cb-ic .icon { width: 16px; height: 16px; }
.cb-row[aria-selected="true"] .cb-ic { background: #FFFFFF; }
.cb-lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-title { font-weight: 600; }
.cb-detail { margin-left: 8px; color: var(--muted); font-size: 13.5px; }
.cb-code { color: var(--muted); font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; }
.cb-rt { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.cb-hint { color: var(--muted); font-size: 13px; }
.cb-runs { color: var(--text); font-weight: 600; }
.cb-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.cb-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8A8A92; }
.cb-st[data-tone="ink"]::before { background: var(--text); }
.cb-st[data-tone="amber"]::before { background: #D97706; }
.cb-st[data-tone="green"]::before { background: #16A34A; }
.cb-st[data-tone="blue"]::before { background: #2F4A7A; }
.cb-st[data-tone="red"]::before { background: var(--accent); }
.cb-st[data-tone="grey"] { color: var(--muted); }
.cb-st[data-tone="grey"]::before { background: #C4C4CA; }
.cb-enter { justify-self: end; }

/* the foot: key hints, the status line, B4's note */
.cb-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 36px;
  padding: 0 12px;
  border-top: 1px solid var(--cb-line2);
  background: #FAFAFB;
  color: var(--muted);
  font-size: 12.5px;
}
.cb-keys { display: flex; gap: 16px; white-space: nowrap; }
.cb-keys kbd { margin-right: 4px; color: var(--text); }
.cb-status { flex: 1; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-foot-note { white-space: nowrap; }

/* top: iPad portrait (C1), from the top, full width with 16 px gutters, 56 px rows */
.cb[data-layout="top"] .cb-scrim { inset: 0; z-index: 90; background: rgba(15, 15, 17, 0.3); }
.cb[data-layout="top"] .cb-panel {
  position: fixed;
  z-index: 91;
  top: calc(var(--hdr-h, 0px) + 12px);
  left: 16px;
  right: 16px;
  max-height: calc(100vh - var(--hdr-h, 0px) - 28px);
  max-height: calc(100dvh - var(--hdr-h, 0px) - 28px);
  border-radius: 10px;
}
.cb[data-layout="top"], .cb[data-layout="full"] { font-size: 17px; }
.cb[data-layout="top"] .cb-q, .cb[data-layout="full"] .cb-q { min-height: 60px; gap: 12px; padding: 0 8px 0 16px; }
.cb[data-layout="top"] .cb-input, .cb[data-layout="full"] .cb-input { height: 56px; font-size: 18px; }
.cb[data-layout="top"] .cb-row, .cb[data-layout="full"] .cb-row {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 56px;
  padding: 0 10px;
}
.cb[data-layout="top"] .cb-ic, .cb[data-layout="full"] .cb-ic { width: 36px; height: 36px; border-radius: 7px; }
.cb[data-layout="top"] .cb-ic .icon, .cb[data-layout="full"] .cb-ic .icon { width: 18px; height: 18px; }
.cb[data-layout="top"] .cb-enter, .cb[data-layout="full"] .cb-enter { display: none; }
.cb[data-layout="top"] .cb-detail, .cb[data-layout="full"] .cb-detail { font-size: 15px; }
.cb[data-layout="top"] .cb-gh, .cb[data-layout="full"] .cb-gh { padding: 14px 10px 6px; font-size: 13px; }
.cb[data-layout="top"] .cb-chip, .cb[data-layout="full"] .cb-chip { min-height: 36px; font-size: 15.5px; }
.cb[data-layout="top"] .cb-chip-x, .cb[data-layout="full"] .cb-chip-x { width: 44px; height: 44px; margin: -4px 0; } /* 44 px target, 36 px chip */
.cb[data-layout="top"] .cb-tab, .cb[data-layout="full"] .cb-tab { min-height: 44px; font-size: 15px; }

/* full: the phone (C2), the whole screen, Cancel at top right, tabs scroll sideways, no key hints */
.cb[data-layout="full"] .cb-scrim { display: none; }
.cb[data-layout="full"] .cb-panel {
  position: fixed;
  z-index: 91;
  inset: 0;
  border-radius: 0;
  box-shadow: none;
  padding-top: env(safe-area-inset-top);
}
.cb[data-layout="full"] .cb-q { padding: 8px 8px 8px 12px; border-bottom: 0; }
.cb[data-layout="full"] .cb-q:focus-within { box-shadow: none; } /* the boxed field shows the focus instead */
.cb[data-layout="full"] .cb-field {
  gap: 8px;
  min-height: 48px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.cb[data-layout="full"] .cb-field:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.cb[data-layout="full"] .cb-input { height: 44px; }
.cb[data-layout="full"] .cb-tabs { flex-wrap: nowrap; gap: 6px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; }
.cb[data-layout="full"] .cb-tab {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  color: var(--text);
}
.cb[data-layout="full"] .cb-tab[aria-selected="true"] { border-color: var(--text); background: var(--text); color: #FFFFFF; box-shadow: none; }
.cb[data-layout="full"] .cb-tab:disabled { color: #74747C; }
.cb[data-layout="full"] .cb-list { padding: 0; }
.cb[data-layout="full"] .cb-row { border-radius: 0; padding: 0 16px; border-top: 1px solid var(--cb-line2); }
.cb[data-layout="full"] .cb-gh { padding: 14px 16px 4px; }
.cb[data-layout="full"] .cb-detail { display: block; margin-left: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.cb[data-layout="full"] .cb-lb { line-height: 1.25; white-space: normal; padding: 6px 0; }
.cb[data-layout="full"] .cb-hint { max-width: 9.5em; white-space: normal; text-align: right; line-height: 1.25; }
.cb[data-layout="full"] .cb-chip-code + span { display: none; } /* the phone's chip is the ticket number alone */
.cb[data-layout="full"] .cb-rt { flex-direction: column; align-items: flex-end; gap: 2px; }
.cb[data-layout="full"] .cb-foot { min-height: 0; padding: 0; border: 0; }
.cb[data-layout="full"] .cb-keys, .cb[data-layout="full"] .cb-foot-note { display: none; }
.cb[data-layout="full"] .cb-status {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}
@media (pointer: coarse) {
  .cb .cb-input { font-size: 18px; }
  .cb-row { min-height: 56px; } /* Task 18: every layout on touch, the header dropdown on an iPad in landscape too */
  .cb-tab { min-height: 44px; }
  .cb-keys { display: none; }
  /* Task 9: the chip ✕ is a 44 x 44 px target on touch; the header's field row grows to hold it (still centred on the slot) */
  .cb-chip-x { width: 44px; height: 44px; margin: -8px 0; }
  .cb[data-layout="header"] .cb-q { min-height: 44px; }
  .cb[data-layout="header"] .cb-panel { transform: translateY(-22px); }
  .hdr-field { min-height: 44px; }
}

/* Task 9: the header field (canvas B `.srch`): the slot's whole width (the slot keeps max 520 px), a 38 px dark field on the
   dark header. Words #C9C9CE on #1A1A1E 11:1, the key hint #A1A1A9 7:1. Only drawn with the sidebar (the dock has Search). */
.hdr-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  padding: 0 8px 0 12px;
  border: 1px solid #2A2A30;
  border-radius: 6px;
  background: #1A1A1E;
  color: #C9C9CE;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 400;
  text-align: left;
  cursor: text;
}
.hdr-field:hover { border-color: #3A3A42; color: #FFFFFF; }
.hdr-bar .hdr-field:focus-visible { outline: 3px solid #8FB4FF; outline-offset: 2px; }
.hdr-field .icon { flex: none; color: #A1A1A9; }
.hdr-field-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-field-key {
  flex: none;
  padding: 1px 6px;
  border: 1px solid #2A2A30;
  border-radius: 4px;
  color: #A1A1A9;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
/* Task 9: the dock's Search (nav.js DOCK_SEARCH, after Repairs): a button that looks like the links beside it (C1) */
.dock-search { border: 0; background: transparent; font-family: inherit; line-height: inherit; cursor: pointer; }
.dock-search[aria-expanded="true"] { background: var(--side-hover); color: var(--side-ink-strong); }
@media (prefers-reduced-motion: no-preference) {
  .shell[data-enter="play"] .dock-list > li:nth-child(9) { --i: 9; } /* the ninth dock item (Search makes nine) */
}
/* === end M7: command bar === */
/* === M7: undo toast === */
/* The command bar's toast (bar/undo-toast.js): one dark line at the bottom, above the floating dock; Undo after a Start. */
.ut-region { position: fixed; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 80;
  display: flex; justify-content: center; pointer-events: none; }
.shell[data-layout="dock"] .ut-region { bottom: calc(96px + env(safe-area-inset-bottom)); }
.ut { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 560px; min-height: 48px;
  padding: 2px 4px 2px 18px; border-radius: 12px; background: var(--dock); color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(15, 15, 17, 0.24); font-size: 1rem; line-height: 1.35; }
.ut-text { flex: 1 1 auto; min-width: 0; padding: 10px 0; overflow-wrap: anywhere; }
.ut-undo { flex: none; min-width: 64px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent;
  color: #8FB4FF; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }
.ut-undo:hover { background: var(--side-hover); }
.ut-undo:focus-visible { outline: 3px solid #8FB4FF; outline-offset: -3px; }
.ut:not(:has(.ut-undo)) { padding-right: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .ut { animation: ut-in 160ms ease-out; }
  @keyframes ut-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media print { .ut-region { display: none; } }
/* Final fix wave (I1): never over the customer's pickup or customer-held check-in: main.js drawToast hides it, and the 2b
   pickup and check-in blocks hide .ut-region too (there, because only those blocks may name the shell's customer marks). */
/* === end M7: undo toast === */
/* === M7: tv settings === */
/* Settings > TV display (ops/tv-settings.js): the two cards of Kiosk and monitor's look (.ks-panel, .ks-row, .ks-switch), one
   bordered block per service with the nine icon chips (the TV's line icons), Name and Tag side by side and Description
   under them. Typed text is the shared .field-input (16 px on touch); targets 36 px with a mouse, 44 px on touch. */
.tvs-page { display: grid; gap: 16px; max-width: 760px; }
.tvs-notice { flex: 1 1 320px; min-width: 0; }
.tvs-notice .field, .tvs-secs .field { margin-bottom: 0; }
.tvs-notice .field-input { width: 100%; }
.tvs-secs .field-input { max-width: 120px; }
.tvs-links { gap: 10px; justify-content: flex-start; }
.tvs-links .btn { text-decoration: none; }
.tvs-msg p:empty { display: none; }
.tvs-list { margin: 0; padding: 0 18px; list-style: none; display: grid; gap: 12px; }
.tvs-svc {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface);
}
.tvs-svc-head { display: flex; align-items: center; gap: 8px; }
.tvs-n { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.tvs-gap { flex: 1 1 auto; }
.tvs-move { min-width: var(--tap); padding: 0 8px; font-size: 1rem; }
.tvs-move[disabled] { opacity: 0.45; cursor: default; }
.tvs-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tvs-icon-label { margin-right: 6px; }
.tvs-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.tvs-chip[aria-pressed="true"] { border: 2px solid var(--text); background: #F1F1F3; }
.tvs-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tvs-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tvs-fields { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px 12px; }
.tvs-desc { grid-column: 1 / -1; }
.tvs-fields .field { margin-bottom: 0; }
.tvs-fields .field-input { width: 100%; }
.tvs-on { padding: 0; min-height: 0; border: 0; }
.tvs-none { margin: 0 18px; }
.tvs-foot { flex-wrap: wrap; gap: 10px; }
.tvs-foot .tvs-msg { flex: 1 1 160px; }
@media (max-width: 599px) {
  .tvs-list { padding: 0 12px; }
  .tvs-fields { grid-template-columns: minmax(0, 1fr); }
  .tvs-foot .btn { flex: 1 1 auto; }
}
@media (any-pointer: coarse) {
  .tvs-chip { width: 44px; min-width: 44px; min-height: 44px; }
  .tvs-move { min-width: 44px; min-height: 44px; }
}
/* === end M7: tv settings === */
/* === M8: settings shell === */
/* settings/shell.js, overview.js, registry.js (designs C1 A, C2, D5): the overview's Needs attention row and three columns
   of group cards; on a page, the rail (Overview, group heads, status dots) beside it; under 700 px the Page picker. */
.page.ss-page { max-width: 1240px; }
.ss-page { --ss-ok: var(--ok); --ss-warn-ink: #92400E; --ss-warn: var(--warn); --ss-bad: var(--accent); --ss-bad-ink: var(--accent-text); }
.ss-overview { display: flex; flex-direction: column; gap: 14px; }
.ss-needs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: none; padding: 10px 14px 10px 16px;
  background: #FEF3E2; border-color: #F3D9AE;
}
.ss-needs-h { font-weight: 700; }
.ss-needs-text { flex: 1 1 auto; min-width: 0; }
.ss-needs-go { margin-left: auto; }
.ss-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ss-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ss-card { max-width: none; padding: 6px 14px 8px; }
.ss-card-h { margin: 6px 4px 4px; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ss-rows { margin: 0; padding: 0; list-style: none; }
.ss-rows li + li { border-top: 1px solid #EBEBEE; }
.ss-row {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; color: var(--text); text-decoration: none;
  font-weight: 600;
}
.ss-row:hover .ss-row-label { text-decoration: underline; text-underline-offset: 3px; }
.ss-row:focus-visible, .ss-link:focus-visible, .ss-over:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.ss-row-label { min-width: 0; }
.ss-word { margin-left: auto; flex: none; max-width: 60%; font-weight: 500; font-size: var(--fs-small); color: var(--muted); text-align: right; }
.ss-tone-ok.ss-word { color: var(--ss-ok); font-weight: 600; }
.ss-tone-warn.ss-word { color: var(--ss-warn-ink); font-weight: 600; }
.ss-tone-bad.ss-word { color: var(--ss-bad-ink); font-weight: 600; }
.ss-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.ss-dot.ss-tone-ok { background: var(--ss-ok); }
.ss-dot.ss-tone-warn { background: var(--ss-warn); }
.ss-dot.ss-tone-bad { background: var(--ss-bad); }
.ss-stale { margin: 0; }
/* the rail */
.ss-layout { display: grid; gap: 16px; }
.ss-layout:not(.ss-narrow) { grid-template-columns: 236px minmax(0, 1fr); gap: 20px; align-items: start; }
.ss-rail { display: flex; flex-direction: column; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.ss-over {
  display: flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; margin-bottom: 2px; border-bottom: 1px solid #EBEBEE;
  color: var(--muted); font-weight: 600; text-decoration: none;
}
.ss-over:hover { color: var(--text); }
.ss-head { margin: 0; padding: 8px 10px 2px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ss-list { margin: 0; padding: 0; list-style: none; }
.ss-link {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border-radius: 6px; color: var(--text);
  text-decoration: none; font-weight: 500;
}
.ss-link-label { min-width: 0; }
.ss-link .ss-dot { margin-left: auto; }
.ss-link:hover { background: var(--line); }
.ss-link[aria-current="page"] { background: var(--text); color: var(--surface); font-weight: 600; }
.ss-body { min-width: 0; }
.ss-placeholder .ss-word { margin: 14px 18px; text-align: left; font-size: var(--fs-base); }
/* the phone's Page picker (D5) */
.ss-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ss-back { gap: 4px; padding: 0 10px; }
.ks-emails .field { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.ks-emails .field-input { width: 100%; }
.ss-pick-label { margin-left: auto; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ss-select { flex: 1 1 200px; max-width: 320px; min-height: 44px; font-size: 16px; }
@media (max-width: 1099px) {
  .ss-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-col:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .ss-cols { grid-template-columns: minmax(0, 1fr); }
  .ss-col:nth-child(3) { grid-column: auto; }
  .ss-needs-go { margin-left: 0; }
}
@media (any-pointer: coarse) {
  .ss-link { min-height: 44px; font-size: 1rem; }
  .ss-over { min-height: 44px; }
  .ss-dot { width: 9px; height: 9px; }
}
/* === end M8: settings shell === */
/* === M8: email pages === */
/* settings/email-page.js, outbox-page.js, templates-page.js (designs E1-E3): the header (Email, the connection word, the
   Account / Outbox / Templates tabs); Account's two columns (the account card; Test send and the switches); the outbox
   filters and table (cards under 700 px); the template editor beside its preview. */
.em-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.em-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.em-title { margin: 0; font-size: 1.375rem; }
.em-chip {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-small);
  font-weight: 700; background: #F1F1F3; color: var(--muted);
}
.em-tone-ok { background: #E7F4EC; color: #1E6B3A; }
.em-tone-warn { background: #FEF3E2; color: #92400E; }
.em-tone-bad { background: #FBE9EC; color: var(--accent-text); }
.em-tabs { display: inline-flex; margin-left: auto; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.em-tab {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 7px; color: var(--text);
  text-decoration: none; font-weight: 600;
}
.em-tab:hover { background: var(--bg); }
.em-tab[aria-current="page"] { background: var(--text); color: var(--surface); }
.em-tab:focus-visible, .ob-filter:focus-visible, .em-seg-btn:focus-visible, .tp-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.em-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.em-wide { grid-column: 1 / -1; margin: 0; }
.em-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.em-card { max-width: none; margin: 0; }
.em-card .panel-title { margin: 0; }
.em-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 16px; }
.em-body .field { margin-bottom: 0; }
.em-body .field-input { width: 100%; box-sizing: border-box; }
.em-prov { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.em-seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.em-seg-btn {
  min-height: 38px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit;
  font-weight: 600; cursor: pointer;
}
.em-seg-btn[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.em-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.em-two.em-one { grid-template-columns: minmax(0, 1fr); }
.em-pw-row, .em-state { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.em-pw-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.em-ro {
  display: inline-flex; align-items: center; flex: 1 1 80px; min-height: var(--tap); padding: 0 10px; border: 1px solid var(--line);
  border-radius: var(--radius-field); background: var(--bg); color: var(--text); font-weight: 600; box-sizing: border-box;
}
.em-ro-none { color: var(--muted); font-weight: 500; }
.em-pw-input { flex: 1 1 160px; min-width: 0; }
.em-insecure { flex: 1 1 160px; margin: 0; font-weight: 600; color: #92400E; }
.em-state-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--tap); }
.em-msg:empty, .em-msg { min-height: 0; }
.em-lines { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.em-line { display: flex; flex-direction: column; flex: 1 1 180px; min-width: 0; }
.em-line small, .em-sub, .em-test small, .ob-to small, .ob-error { color: var(--muted); font-size: var(--fs-small); overflow-wrap: anywhere; }
.em-hosts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px 12px; }
.em-port .st-select { min-height: var(--tap); width: 100%; }
.em-fixed { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
.em-bar { gap: 10px; padding: 0; border: 0; flex-wrap: wrap; }
.em-test-line { display: flex; align-items: flex-end; gap: 8px; }
.em-test-line .field { flex: 1 1 auto; min-width: 0; }
.em-tests { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 8px; }
.em-tests li + li { border-top: 1px solid #EBEBEE; }
.em-test { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; }
.em-test-text { display: flex; flex-direction: column; min-width: 0; }
.em-sw { gap: 12px; padding: 8px 18px; }
.em-sw + .em-sw { border-top: 1px solid #EBEBEE; }
.em-sw-label { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.em-sw-msg { margin: 0 18px 12px; }
/* the outbox */
.ob-page { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ob-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ob-filters { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.ob-filter {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600;
}
.ob-filter[aria-current="true"] { background: var(--text); border-color: var(--text); color: var(--surface); }
.ob-count { font-variant-numeric: tabular-nums; }
.ob-msg { min-height: 0; }
.ob-panel { max-width: none; margin: 0; overflow: hidden; }
.ob-table { width: 100%; border-collapse: collapse; }
.ob-table th {
  padding: 10px 14px; text-align: left; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.ob-table td { padding: 10px 14px; vertical-align: middle; border-bottom: 1px solid #EBEBEE; }
.ob-table tr:last-child td { border-bottom: 0; }
.ob-when { white-space: nowrap; color: var(--muted); }
.ob-to { min-width: 0; }
.ob-to b, .ob-to small { display: block; overflow-wrap: anywhere; }
.ob-no { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 600; }
.ob-status .ob-error { display: block; margin-top: 2px; }
.ob-actions { text-align: right; white-space: nowrap; }
.ob-act { min-height: 38px; padding: 0 12px; }
.ob-none { margin: 8px 0; }
.ob-more { display: flex; justify-content: center; }
.ob-text { margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; }
/* the templates */
.tp-page { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tp-wide { grid-column: 1 / -1; margin: 0; }
.tp-edit, .tp-preview { max-width: none; margin: 0; }
.tp-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 16px; }
.tp-body .field { margin-bottom: 0; }
.tp-body .field-input { width: 100%; box-sizing: border-box; }
.tp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tp-word { margin-left: auto; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.tp-text { min-height: 220px; resize: vertical; line-height: 1.45; font: inherit; }
.tp-insert { display: flex; flex-direction: column; gap: 6px; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chip {
  min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer;
}
.tp-chip:hover { background: var(--bg); }
.tp-msg { min-height: 0; }
.tp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tp-gap { flex: 1 1 auto; }
.tp-bar .st-save { min-width: 72px; }
.tp-prev-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tp-prev-title { margin: 0; font-size: var(--fs-base); }
.tp-sample { color: var(--muted); font-size: var(--fs-small); }
.tp-prev-subject { display: flex; gap: 14px; padding: 12px 18px; border-bottom: 1px solid #EBEBEE; }
.tp-k { flex: none; width: 56px; color: var(--muted); }
.tp-v { min-width: 0; overflow-wrap: anywhere; }
.tp-prev-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 22px 20px; line-height: 1.5; }
.tp-para { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1099px) {
  .em-grid, .tp-page { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .em-tabs { margin-left: 0; width: 100%; }
  .em-tab { flex: 1 1 0; justify-content: center; padding: 0 8px; }
  .em-two, .em-hosts { grid-template-columns: minmax(0, 1fr); }
  .em-body, .tp-body { padding: 12px 14px 14px; }
  .em-test-line { flex-wrap: wrap; }
  .em-test-line .btn { flex: 1 1 auto; }
  .ob-retry { margin-left: auto; }
  .ob-filters { gap: 4px; }
  .ob-filter { padding: 0 10px; gap: 4px; }
  .ob-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ob-table, .ob-table tbody, .ob-table tr, .ob-table td { display: block; }
  .ob-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 14px; border-bottom: 1px solid #EBEBEE; }
  .ob-table tr:last-child { border-bottom: 0; }
  .ob-table td { padding: 0; border: 0; }
  .ob-when { grid-column: 1; font-size: var(--fs-small); }
  .ob-to, .ob-kind { grid-column: 1; }
  .ob-status { grid-column: 1; }
  .ob-actions { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .tp-bar .btn { flex: 1 1 auto; }
}
@media (any-pointer: coarse) {
  .em-tab, .em-seg-btn, .ob-filter, .ob-act, .tp-chip { min-height: 44px; }
  .em-port .st-select { min-height: 44px; } /* Task 22: beat .em-port's var(--tap) */
  .tp-text { font-size: 16px; } /* Task 22: typed text, beat font: inherit */
}
/* === end M8: email pages === */
/* === M8: inbox === */
/* inbox-page.js (design E4): the header (Inbox, the shop address, who reads it); the list beside the reading pane (one
   column under 900 px, where the open email takes the list's place). Mail text is plain text that keeps its line breaks and
   wraps anywhere, so a long unbroken line never widens the page. */
.ib-page { max-width: 1240px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ib-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ib-head .page-title { margin-bottom: 0; }
.ib-account { color: var(--muted); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.ib-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 14px; align-items: start; }
.ib-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ib-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-filter {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600;
}
.ib-filter[aria-current="true"] { background: var(--text); border-color: var(--text); color: var(--surface); }
.ib-count { font-variant-numeric: tabular-nums; }
.ib-rows { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.ib-rows li + li { border-top: 1px solid #EBEBEE; }
.ib-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; min-height: 44px; padding: 10px 14px 10px 16px;
  border: 0; border-left: 3px solid transparent; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.ib-row:hover { background: var(--row-hover); }
.ib-row[aria-current="true"] { background: #F1F1F3; border-left-color: var(--accent); }
.ib-row:focus-visible, .ib-filter:focus-visible, .ib-find-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.ib-row-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ib-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-row[data-unread="true"] .ib-row-name, .ib-row[data-unread="true"] .ib-row-subject { font-weight: 700; }
.ib-row[data-unread="true"] .ib-row-name::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px;
}
.ib-row-time { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.ib-row-subject { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-row-snippet { display: block; min-width: 0; color: var(--muted); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-chip {
  align-self: flex-start; display: inline-flex; align-items: center; max-width: 100%; min-height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: var(--fs-small); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;
}
.ib-chip-ok { background: #E7F4EC; color: #1E6B3A; }
.ib-chip-cust { background: #E8EEF8; color: #2F4A7A; }
.ib-chip-none { background: #F1F1F3; color: var(--muted); }
.ib-none { margin: 0; }
.ib-more { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.ib-pane { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.ib-pick { margin: 0; padding: 40px 18px; color: var(--muted); text-align: center; }
.ib-msg { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 20px 20px; }
.ib-back { display: none; align-self: flex-start; }
.ib-msg-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ib-subject { margin: 0; font-size: var(--fs-large); overflow-wrap: anywhere; outline: none; }
.ib-subject:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ib-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; min-width: 0; }
.ib-from b, .ib-addr { overflow-wrap: anywhere; min-width: 0; }
.ib-addr, .ib-when { color: var(--muted); }
.ib-when { margin-left: auto; font-size: var(--fs-small); white-space: nowrap; }
.ib-bounce { margin: 0; font-weight: 700; color: var(--accent-text); }
.ib-link-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #EBEBEE; border-bottom: 1px solid #EBEBEE; }
.ib-link-line .ib-chip { align-self: center; }
.ib-open, .ib-link-btn { min-height: 38px; padding: 0 12px; }
.ib-find { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ib-find-line { display: flex; align-items: flex-end; gap: 8px; }
.ib-find-field { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.ib-find-field .field-input { width: 100%; box-sizing: border-box; }
.ib-find-none { margin: 0; color: var(--muted); }
.ib-find-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ib-find-list li + li { border-top: 1px solid #EBEBEE; }
.ib-find-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0;
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.ib-find-row:hover { background: var(--row-hover); }
.ib-find-row small { color: var(--muted); font-size: var(--fs-small); }
.ib-no { font-family: var(--font-mono); font-weight: 600; }
.ib-find-name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.ib-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ib-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; min-width: 0; line-height: 1.5; }
.ib-quoted {
  margin: 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
  word-break: break-word; min-width: 0; line-height: 1.5;
}
.ib-cut { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.ib-replies { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ib-reply-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-small); }
.ib-reply-line small { flex-basis: 100%; color: var(--muted); }
.ib-note { min-height: 0; }
.ib-reply-box { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ib-reply { width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical; font: inherit; }
.ib-send-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ib-sent-from { margin: 0; color: var(--muted); font-size: var(--fs-small); overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 899px) {
  .ib-grid { grid-template-columns: minmax(0, 1fr); }
  .ib-page[data-open="true"] .ib-list { display: none; }
  .ib-page:not([data-open]) .ib-pane { display: none; }
  .ib-back { display: inline-flex; }
}
@media (max-width: 699px) {
  .ib-msg { padding: 12px 14px 16px; }
  .ib-filters { gap: 4px; }
  .ib-filter { padding: 0 10px; gap: 4px; }
  .ib-send { flex: 1 1 auto; }
}
@media (any-pointer: coarse) {
  .ib-filter, .ib-open, .ib-link-btn { min-height: 44px; }
  .ib-filter { min-width: 44px; justify-content: center; } /* Task 22: `All` was 40 px wide */
  .ib-reply, .ib-find-field .field-input { font-size: 16px; }
}
/* === end M8: inbox === */
/* === M8: devices, printer, switches === */
/* Task 19: Settings > Devices additions (ops/devices-page.js, designs D1 and D5), Settings > Receipt printer
   (settings/printer-page.js, D3) and Settings > Store switches (settings/switches-page.js, D4). The switches are real
   checkboxes drawn as a track and knob; under 1100 px the device rows are cards with 56 px buttons (D5). */
.dv-page { max-width: 1040px; }
.dv-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-filter { min-height: 40px; border-radius: 999px; padding: 0 16px; }
.dv-filter[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--surface); }
.dv-count { margin-left: 8px; color: var(--muted); font-weight: 500; }
.dv-row-card { flex-wrap: nowrap; }
.dv-row-card .dv-what { flex: 1 1 auto; }
.dv-online, .dv-active { flex: none; font-size: var(--fs-small); }
.dv-online { font-weight: 600; }
.dv-on { color: var(--ok); }
.dv-off { color: var(--muted); }
.dv-act { flex: none; }
@media (min-width: 1100px) {
  /* the pair card spans the rows beside the lists; the last row takes the slack so the lists keep their own heights */
  .dv-page { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto auto auto 1fr; align-items: start; }
  .dv-page > .dv-filters, .dv-page > .tk-stale { grid-column: 1 / -1; }
  .dv-page > section { grid-column: 1; }
  .dv-page > .dv-pair-panel { grid-column: 2; grid-row: 2 / span 3; }
}
@media (max-width: 1099px) {
  .dv-page .dv-list { display: grid; gap: 10px; padding: 12px; }
  .dv-page .dv-row-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
  .dv-page .dv-row-card:last-child { border-bottom: 1px solid var(--line); }
  .dv-page .dv-name-text { font-size: 1.125rem; }
  .dv-page .dv-act { min-height: 56px; padding: 0 22px; }
  .dv-filter { min-height: 48px; }
}
@media (max-width: 520px) {
  .dv-page .dv-row-card { flex-wrap: wrap; }
  .dv-page .dv-row-card .dv-what { flex-basis: 100%; }
  .dv-page .dv-act { margin-left: auto; }
}

/* the switch rows (Store switches, the printer's slips): label and small line, On / Off, the checkbox as a switch */
.sw-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 9px 16px; }
.sw-row + .sw-row { border-top: 1px solid #EBEBEE; }
.sw-label { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; font-weight: 600; cursor: pointer; }
.sw-sub { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.sw-word { flex: none; min-width: 26px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); text-align: right; }
.sw-input {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 52px; height: 30px; margin: 0;
  border: 1px solid var(--muted); border-radius: 999px; background: var(--line); cursor: pointer;
}
.sw-input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 120ms ease;
}
.sw-input:checked { background: var(--ok); border-color: var(--ok); }
.sw-input:checked::after { transform: translateX(22px); }
.sw-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sw-input[aria-busy="true"] { opacity: 0.6; }
.sw-alert { margin: 0; padding: 0 16px; }
.sw-alert:empty { display: none; }
.sw-msg { padding: 0 16px 10px; }
.sw-msg p:empty { display: none; }
@media (any-pointer: coarse) { .sw-input { width: 56px; height: 34px; } .sw-input::after { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) { .sw-input::after { transition: none; } }

.sw-page { display: grid; gap: 14px; }
.sw-title, .pr-title { margin: 0; font-size: var(--fs-large); }
.sw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.sw-list { max-width: none; }
.sw-changes { display: grid; gap: 8px; }
.sw-changes-h, .pr-h { margin: 0; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sw-change-list { max-width: none; margin: 0; padding: 0; list-style: none; }
.sw-change { display: grid; gap: 2px; padding: 10px 14px; }
.sw-change + .sw-change { border-top: 1px solid #EBEBEE; }
.sw-change-text { font-weight: 600; overflow-wrap: anywhere; }
.sw-change small { overflow-wrap: anywhere; }
.sw-none { margin: 0; }

.pr-page { display: grid; gap: 14px; }
.pr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pr-sp { flex: 1 1 auto; }
.pr-state { font-weight: 700; }
.pr-tone-ok { color: var(--ok); }
.pr-tone-warn { color: #92400E; }
.pr-tone-bad { color: var(--accent-text); }
.pr-tone-none { color: var(--muted); }
.pr-head-msg p { margin: 0; }
.pr-head-msg p:empty { display: none; }
/* the Printer card on the left, the slip switches and the preview stacked beside it; one column on narrower pages */
.pr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; gap: 14px; align-items: start; }
.pr-grid > .pr-card:first-child { grid-row: 1 / span 2; }
.pr-card { max-width: none; display: grid; gap: 10px; padding: 14px 16px; }
.pr-slips { padding: 0; gap: 0; }
.pr-slips .pr-on + .sw-row { border-top: 2px solid #D9D9DE; }
.pr-kvs { display: grid; gap: 8px; margin: 0; }
.pr-kv { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.pr-kv dt { color: var(--muted); }
.pr-kv dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pr-address .field-label { display: block; margin-bottom: 6px; }
.pr-address-row { display: flex; gap: 8px; }
.pr-address-row .field-input { flex: 1 1 auto; min-width: 0; }
.pr-address p { margin: 4px 0 0; }
.pr-address p:empty { display: none; }
.pr-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 8px; background: #FEF3E2; }
.pr-fp { flex: 1 1 auto; overflow-wrap: anywhere; }
.pr-queue-h { margin-top: 6px; display: flex; gap: 8px; }
.pr-count { font-weight: 500; text-transform: none; letter-spacing: 0; }
.pr-jobs { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 8px; }
.pr-job { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; }
.pr-job + .pr-job { border-top: 1px solid #EBEBEE; }
.pr-job-what { display: grid; flex: 1 1 auto; min-width: 0; }
.pr-job-label { font-weight: 600; overflow-wrap: anywhere; }
.pr-job-state { flex: none; font-size: var(--fs-small); font-weight: 600; text-align: right; }
.pr-none { margin: 0; }
.pr-preview { display: flex; justify-content: safe center; margin: 0; padding: 14px 12px 22px; border: 1px solid var(--line); border-radius: 4px; background: #FFFFFF; overflow-x: auto; }
.pr-slip { margin: 0; font-size: 12px; line-height: 1.45; color: #16161A; white-space: pre; }
@media (max-width: 1279px) {
  .pr-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .pr-grid > .pr-card:first-child { grid-row: auto; }
}
@media (max-width: 1099px) {
  .sw-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .pr-slip { font-size: 11px; }
}
/* === end M8: devices, printer, switches === */

/* === M8: alerts and control === */
/* Task 20: Settings > Alerts (settings/alerts-page.js, design A1) and Settings > Phone control (settings/control-page.js,
   A2: built for a 390 px phone, fine wider). Every control is 44 px at least (48 on touch), typed text 16 px. The switch
   rows reuse Task 19's .sw-row / .sw-input; on the control page the whole row is the label. */
.al-page { display: grid; gap: 12px; }
.al-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.al-title, .cp-title { margin: 0; font-size: var(--fs-large); }
.al-sp { flex: 1 1 auto; }
.al-test { min-height: 44px; }
.al-msg p { margin: 0; }
.al-msg p:empty { display: none; }
/* the table takes the width; Quiet hours and Notifications sit side by side under it, beside it only on wide screens */
.al-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.al-table-wrap { max-width: none; padding: 0; overflow-x: auto; }
.al-table { width: 100%; border-collapse: collapse; }
.al-table th { padding: 8px 12px; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.al-table td { padding: 6px 12px; vertical-align: middle; }
.al-table tr + tr td { border-top: 1px solid #EBEBEE; }
.al-what { min-width: 150px; }
.al-what b { display: block; }
.al-what small { display: block; font-size: var(--fs-small); overflow-wrap: anywhere; }
.al-app { text-align: center; }
.al-switch { vertical-align: middle; }
.al-tap { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; } /* final wave L8: the In app tap target */
.al-select { min-height: 44px; min-width: 96px; font-size: 16px; }
.al-seg { display: inline-flex; border: 1px solid var(--muted); border-radius: 8px; overflow: hidden; background: var(--surface); }
.al-seg[aria-busy="true"] { opacity: 0.7; }
.al-seg-btn { min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--text); font: inherit;
  font-size: var(--fs-small); font-weight: 600; cursor: pointer; white-space: nowrap; }
.al-seg-btn + .al-seg-btn { border-left: 1px solid var(--line); }
.al-seg-btn[aria-pressed="true"] { background: var(--text); color: var(--surface); }
.al-seg-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.al-seg-wide { display: flex; }
.al-seg-wide .al-seg-btn { flex: 1 1 0; }
.al-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.al-quiet { max-width: none; display: grid; gap: 10px; padding: 14px 16px; }
.al-h { margin: 0; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.al-quiet-mode { display: grid; gap: 8px; }
.al-label { font-weight: 600; }
.al-times { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.al-time { font-size: var(--fs-small); color: var(--muted); }
.al-time-input { min-height: 44px; min-width: 0; font-size: 16px; }
.al-quiet-line { font-size: var(--fs-small); }
.al-kv { display: flex; justify-content: space-between; gap: 12px; }
.al-help { padding: 0; min-height: 44px; }
.al-notes { max-width: none; padding: 0; overflow: hidden; }
.al-notes-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--line); }
.al-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #FFFFFF;
  font-size: var(--fs-small); font-weight: 700; text-align: center; }
.al-mark { min-height: 44px; white-space: nowrap; }
.al-empty { margin: 0; padding: 12px 14px; color: var(--muted); }
.al-note-list { margin: 0; padding: 0; list-style: none; max-height: 420px; overflow-y: auto; }
.al-note { display: flex; align-items: flex-start; gap: 10px; min-height: 48px; padding: 8px 14px; }
.al-note + .al-note { border-top: 1px solid #EBEBEE; }
.al-dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--line); }
.al-dot-new { background: var(--accent); }
.al-note-what { display: grid; gap: 2px; min-width: 0; }
.al-note-title { font-weight: 600; overflow-wrap: anywhere; }
.al-note-link { color: inherit; display: inline-flex; min-height: 24px; align-items: center; }
.al-note-what small { font-size: var(--fs-small); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
@media (min-width: 1680px) {
  .al-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .al-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .al-side { grid-template-columns: minmax(0, 1fr); }
}
/* phones: each kind is a card (name, then Who across the width, then In app and the sound side by side) */
.al-page { min-width: 0; }
@media (max-width: 699px) {
  .al-table, .al-table tbody, .al-table tr { display: block; }
  .al-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .al-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 10px 12px; }
  .al-table tr + tr { border-top: 1px solid #EBEBEE; }
  .al-table tr + tr td { border-top: 0; }
  .al-table td { display: block; padding: 0; }
  .al-table td:nth-child(1), .al-table td:nth-child(2) { grid-column: 1 / -1; }
  .al-table .al-seg { display: flex; }
  .al-table .al-seg-btn { flex: 1 1 0; padding: 0 4px; }
  .al-app { text-align: left; }
  .al-select { width: 100%; }
}

.cp-page { display: grid; gap: 14px; max-width: 560px; }
.cp-head { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.cp-title { flex: 1 1 auto; }
.cp-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--ok); }
.cp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cp-stale { color: #92400E; }
.cp-card { display: grid; gap: 6px; }
.cp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px; font-size: var(--fs-small);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cp-h-note { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.cp-tone-ok { color: var(--ok); }
.cp-tone-warn { color: #92400E; }
.cp-tone-bad { color: var(--accent-text); }
.cp-tone-none { color: var(--muted); }
.cp-panel { max-width: none; padding: 0; }
.cp-row { min-height: 52px; padding: 0 14px; }
.cp-label { min-height: 52px; justify-content: center; font-size: 16px; }
.cp-block { display: grid; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid #EBEBEE; }
.cp-lbl { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-chip { flex: 1 1 auto; min-height: 44px; padding: 0 10px; font-size: 15px; white-space: nowrap; border: 1px solid var(--muted); border-radius: 999px; background: var(--surface);
  color: var(--text); font-family: inherit; font-weight: 600; cursor: pointer; }
.cp-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--surface); }
.cp-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--muted); border-radius: 8px; overflow: hidden; }
.cp-seg-btn { min-height: 44px; padding: 0 6px; border: 0; background: var(--surface); color: var(--text); font: inherit;
  font-weight: 600; cursor: pointer; }
.cp-seg-btn + .cp-seg-btn { border-left: 1px solid var(--line); }
.cp-seg-btn[aria-pressed="true"] { background: var(--text); color: var(--surface); }
.cp-chip:focus-visible, .cp-seg-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cp-seg-btn:focus-visible { outline-offset: -3px; }
.cp-chip[aria-busy="true"] { opacity: 0.7; }
.cp-tv { display: flex; gap: 8px; padding: 10px 14px; }
.cp-notice { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 16px; }
.cp-send { flex: none; min-height: 44px; }
.cp-test { width: 100%; min-height: 48px; font-size: 16px; }
.cp-btn { min-height: 44px; }
.cp-msg { padding: 0 2px; }
.cp-msg p { margin: 0; }
.cp-msg p:empty { display: none; }
@media (any-pointer: coarse) {
  .al-seg-btn, .cp-chip, .cp-seg-btn, .cp-send, .al-mark, .al-test { min-height: 48px; }
  .al-note-link { min-height: 44px; } /* Task 22 */
}
/* === end M8: alerts and control === */
/* === M8: backups and health === */
/* Task 21: Settings > Backups (settings/backups-page.js, design B1) and Settings > Health (settings/health-page.js, B2).
   State words are text (Yes / Late / Passed, Bad / Look at this), coloured as well, never colour alone; only a bad health
   tile is red. Contrast on white: --ok 5.33, the warn ink #92400E 7.1, --accent-text 7.98, --muted 6.2. Under 1100 px the
   Restore panel goes under the table; under 700 px the cards and tiles stack and the table scrolls in its box. */
.bk-page, .hl-page { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bk-head, .hl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.bk-title, .hl-title { margin: 0 auto 0 0; font-size: var(--fs-large); }
.hl-title { margin-right: 4px; }
.bk-msg:empty { display: none; }
.bk-tone-ok { color: var(--ok); }
.bk-tone-bad { color: var(--accent-text); }
.bk-tone-none { color: var(--muted); }
.bk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bk-card { max-width: none; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; }
.bk-label, .hl-label {
  margin: 0; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.bk-value { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.bk-sub { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.bk-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.bk-copies { max-width: none; overflow-x: auto; }
.bk-table { width: 100%; border-collapse: collapse; }
.bk-table th {
  padding: 8px 14px; text-align: left; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.bk-table td { padding: 0 14px; height: 48px; border-bottom: 1px solid #EBEBEE; white-space: nowrap; }
.bk-table tr:last-child td { border-bottom: 0; }
.bk-row.bk-chosen td { background: #F1F1F3; }
.bk-copy { display: flex; align-items: center; gap: 10px; }
.bk-radio { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--text); cursor: pointer; }
.bk-copy-label { display: flex; align-items: center; min-height: 44px; font-weight: 700; cursor: pointer; }
.bk-mut { color: var(--muted); }
.bk-word { font-weight: 600; }
.bk-none { margin: 14px 16px; }
.bk-restore { max-width: none; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.bk-restore-h { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 1.0625rem; }
.bk-restore-at { margin-left: auto; font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.bk-from { display: grid; gap: 6px; }
.bk-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--muted); border-radius: 8px; overflow: hidden; }
.bk-seg-btn { min-height: 44px; border: 0; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.bk-seg-btn + .bk-seg-btn { border-left: 1px solid var(--line); }
.bk-seg-btn[aria-pressed="true"] { background: var(--text); color: var(--surface); }
.bk-seg-btn:disabled { color: var(--muted); cursor: not-allowed; }
.bk-seg-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.bk-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bk-step { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.bk-num {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg);
  border: 1px solid var(--line); font-size: var(--fs-small); font-weight: 700;
}
.bk-step-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.bk-step-text small { font-size: var(--fs-small); color: var(--muted); }
.bk-done { flex: none; font-size: var(--fs-small); font-weight: 600; color: var(--ok); }
.bk-open { flex: none; }
.bk-result { margin: 0 0 4px 36px; padding: 8px 12px; border-radius: 6px; background: var(--bg); display: grid; gap: 2px; }
.bk-counts { margin: 0; font-weight: 700; }
.bk-refused { overflow-wrap: anywhere; }
.bk-replace { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.bk-danger { min-height: 44px; border-color: var(--accent); color: var(--accent-text); font-weight: 700; }
.bk-danger:not(:disabled):hover { background: var(--accent); color: #FFFFFF; }
.bk-restarting { margin: 0; font-weight: 700; }
.bk-last { display: grid; gap: 2px; padding: 8px 12px; border-radius: 6px; background: var(--bg); overflow-wrap: anywhere; } /* final wave I1 */
.bk-last-value { margin: 0; font-weight: 700; }
.bk-paused { margin: 4px 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.bk-steps-link {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0; padding-top: 10px;
  border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted);
}
.bk-steps-link b { color: var(--text); font-weight: 600; }
/* Health */
.hl-count { font-weight: 700; font-size: var(--fs-small); }
.hl-count-ok { color: var(--ok); }
.hl-count-warn { color: #92400E; }
.hl-count-bad { color: var(--accent-text); }
.hl-at { margin-left: auto; font-size: var(--fs-small); color: var(--muted); }
.hl-alert:empty { display: none; }
.hl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.hl-tile {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface);
}
.hl-value { font-size: 1.0625rem; font-weight: 700; overflow-wrap: anywhere; }
.hl-detail { font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.hl-state { align-self: flex-start; margin-top: 2px; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-small); font-weight: 700; }
.hl-ok .hl-value { color: var(--ok); }
.hl-none .hl-value { color: var(--muted); }
.hl-warn { border-color: #F2CF9C; background: #FEF3E2; }
.hl-warn .hl-label, .hl-warn .hl-value, .hl-warn .hl-detail { color: #92400E; }
.hl-warn .hl-state { background: #FFFFFF; color: #92400E; border: 1px solid #F2CF9C; }
.hl-bad { border-color: var(--accent); background: #FDECEF; }
.hl-bad .hl-label, .hl-bad .hl-value, .hl-bad .hl-detail { color: var(--accent-text); }
.hl-bad .hl-state { background: var(--accent); color: #FFFFFF; }
.hl-problems { display: grid; gap: 8px; }
.hl-problems-h { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 0; font-size: var(--fs-small); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.hl-days { font-weight: 500; letter-spacing: 0; text-transform: none; }
.hl-list { max-width: none; margin: 0; padding: 0; list-style: none; }
.hl-problem { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 16px; }
.hl-problem + .hl-problem { border-top: 1px solid #EBEBEE; }
.hl-problem-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hl-problem-text small { font-size: var(--fs-small); color: var(--muted); }
.hl-when { flex: none; font-size: var(--fs-small); color: var(--muted); }
.hl-go { flex: none; }
.hl-none { margin: 0; }
@media (max-width: 1279px) {
  .hl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .bk-main { grid-template-columns: minmax(0, 1fr); }
  .hl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .bk-title, .hl-title { flex-basis: 100%; }
  .bk-head .btn { flex: 1 1 auto; white-space: nowrap; }
  .hl-at { margin-left: 0; }
  .hl-check { margin-left: auto; }
  .bk-table th { padding: 8px 8px; }
  .bk-table td { padding: 0 8px; }
  .bk-cards { grid-template-columns: minmax(0, 1fr); }
  .hl-problem { flex-wrap: wrap; }
  .hl-problem-text { flex-basis: 100%; }
  .hl-go { margin-left: auto; }
}
@media (max-width: 419px) {
  .hl-tile { padding: 10px 12px; }
  .bk-size { display: none; }
  .bk-table th { padding: 8px 4px; letter-spacing: 0; } /* final wave L9: fits 375 px */
  .bk-table td { padding: 0 4px; }
  .bk-copy { gap: 6px; }
}
@media (any-pointer: coarse) {
  .bk-radio { width: 24px; height: 24px; }
  .bk-open, .hl-check, .hl-go, .bk-head .btn { min-height: 44px; }
}
/* === end M8: backups and health === */

/* === Print fixes === */
/* Owner change 2026-11-13 (print audit section 6, fixes 4, 7 and 8): every print keeps the old site's style. */
/* Fix 4: the branded print-only documents (print-brand.js PrintHead / PrintFoot): the receiving record (stock-receipts.js
   ReceivingRecord, the old buildReceivingPdfHtml) and the cycle count (counts.js CountSheet, buildCycleCountPdfHtml) on its
   own landscape page, a named page as the schedule's. Hidden on screen; in print they replace the screen view. */
.prt-doc { display: none; }
.cnt-doc { page: count; }
@page count { size: letter landscape; margin: 0.4in; }
@media print {
  .prt-doc { display: block; box-sizing: border-box; color: #000000; background: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
  .prt-doc * { box-sizing: border-box; }
  .prt-doc p { margin: 0; }
  .prt-brand { margin-bottom: 14px; padding-bottom: 12px; text-align: center; border-bottom: 3px solid #BA0C2F; }
  .prt-logo { display: block; width: auto; height: 52px; margin: 0 auto 5px; }
  .prt-name { margin: 4px 0 2px; color: #BA0C2F; font-size: 20px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
  .prt-line { color: #666666; font-size: 10px; }
  .prt-sec { margin: 12px 0 5px; padding-bottom: 2px; border-bottom: 1.5px solid #BA0C2F; color: #BA0C2F; font-size: 10px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase; }
  .prt-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid #EEEEEE; font-size: 13px;
    break-inside: avoid; }
  .prt-lbl { flex: 1; color: #555555; }
  .prt-val { padding-left: 10px; font-weight: 700; text-align: right; white-space: nowrap; }
  .prt-code { color: #888888; font-family: monospace; font-size: 10px; }
  .prt-total { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 12px 16px; border: 1.5px solid #BA0C2F;
    border-radius: 3px; background: #F9F9F9; break-inside: avoid; }
  .prt-tl { font-size: 13px; font-weight: 700; text-transform: uppercase; }
  .prt-tv { color: #BA0C2F; font-size: 22px; font-weight: 900; }
  .prt-foot { margin-top: 16px; padding-top: 8px; border-top: 1px solid #EEEEEE; color: #AAAAAA; font-size: 9px; text-align: center; }
  /* the receiving record replaces the screen card */
  body:has(.sk-rc-doc) { background: #FFFFFF; }
  body:has(.sk-rc-doc) .sk-receipt, body:has(.sk-rc-doc) .sk-back { display: none !important; }
  .sk-rc-doc { padding: 24px 28px; }
  /* the count sheet replaces the screen view, on the landscape page */
  body:has(.cnt-doc) { page: count; background: #FFFFFF; }
  body:has(.cnt-doc) .cnt-head, .cnt-detail:has(.cnt-doc) > :not(.cnt-doc) { display: none !important; }
  body:has(.cnt-doc) .page.cnt-page { max-width: none; padding: 0; }
  .cnt-doc { padding: 10px 16px; }
  .prt-hbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 10px 16px; border: 1px solid #E0E0E0;
    border-radius: 3px; background: #F5F5F5; }
  .prt-hfield { display: flex; flex-direction: column; }
  .prt-hk { color: #888888; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
  .prt-hv { color: #000000; font-size: 13px; font-weight: 600; }
  .prt-sum { display: flex; margin-bottom: 14px; overflow: hidden; border: 1px solid #E0E0E0; border-radius: 3px; }
  .prt-sum-cell { flex: 1; padding: 8px; text-align: center; border-right: 1px solid #E0E0E0; }
  .prt-sum-cell:last-child { border-right: 0; }
  .prt-sv { font-size: 16px; font-weight: 800; }
  .prt-sl { margin-top: 2px; color: #888888; font-size: 9px; letter-spacing: .4px; text-transform: uppercase; }
  .prt-table { width: 100%; border-collapse: collapse; font-size: 11px; }
  .prt-table thead { display: table-header-group; background: #BA0C2F; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .prt-table th { padding: 7px 8px; color: #FFFFFF; font-size: 10px; letter-spacing: .4px; text-align: left; text-transform: uppercase; }
  .prt-table td { padding: 6px 8px; border-bottom: 1px solid #EEEEEE; }
  .prt-table tr { break-inside: avoid; }
  .prt-table tbody tr:nth-child(even) { background: #FAFAFA; }
  .prt-table .prt-num { text-align: right; }
  .prt-var { font-weight: 700; }
  .prt-mono { color: #555555; font-family: "Courier New", monospace; font-size: 10px; }
}
/* Fix 7: the repair record on paper (Cmd+P): the record alone, on white, no buttons, boxes or composer, no stretched column,
   cards kept whole where they fit. */
@media print {
  body:has(.rr-page) { background: #FFFFFF; }
  .rr-page { max-width: none; padding: 0; }
  .rr-page .rr-back, .rr-page .rr-acts, .rr-page .ws-compose, .rr-page .ws-chips, .rr-page .ws-gsx, .rr-page button, .rr-page input,
  .rr-page textarea, .rr-page select, .rr-page .rb-stale, .rr-page [role="alert"]:empty { display: none !important; }
  .rr-page .rr-card, .rr-page .rr-cols .card { box-shadow: none; border-color: #BBBBBB; background: #FFFFFF; }
  .rr-page .rr-cols { display: block; }
  .rr-page .rr-col { display: block; }
  .rr-page .rr-col-log { align-self: auto; min-height: 0; height: auto; }
  .rr-page .rr-cols .card { margin-bottom: 12px; }
  .rr-page .rr-col-side .card { break-inside: avoid; }
  .rr-page a { color: #000000; text-decoration: none; }
}
/* Fix 8: a print font fallback: the app font is not shipped, so paper uses Arial (the old prints' font) on every device
   instead of each device's own system font. */
@media print {
  :root { --font: "Source Sans 3", Arial, Helvetica, sans-serif; }
}
/* === end Print fixes === */