/* ThreadCount — Modernist design system tokens (authored from the handoff spec) */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-300: #ffc4b8;
  /* The brand red carries white type on every primary button, accent tag and error bar, and at
     #ec3013 that pairing is 4.20:1 — under the 4.5:1 a label at body size needs. 600 is the same
     red one step down: white on it is 5.07:1, and it is 4.54:1 as text on the paper ground, so it
     is the shade to fill anything that has words on it. #ec3013 stays the brand mark and belongs on
     the rules, the progress bar and the 4px edge marks, which carry no text and need only 3:1. */
  --color-accent-600: #d42a12;
  --color-accent-700: #b8240e;
  --color-divider: #cfcccb;
  --color-neutral-200: #e4e2e1;
  --color-neutral-300: #d6d3d2;
  /* 400 is only legible on ink — it is the muted meta colour inside the dark panels and top bars
     (7.8:1 there). On the paper ground it is 1.9:1, so anything that has to be read on the light
     side wants 600 or 700 instead. */
  --color-neutral-400: #b5b1af;
  --color-neutral-500: #928d8a;
  --color-neutral-900: #2d2b2b;
  /* Was #7a7573, which is 4.07:1 on the paper ground and 3.75:1 on the surface tone — under the
     minimum for the sub-lines, table headers and tab labels this colour carries. */
  --color-neutral-600: #6c6764;
  --color-neutral-700: #57534f;
  --color-neutral-800: #3a3735;
  --color-slip-teal: #9acbd8;
  /* The desktop app's chrome, and only the desktop app's. #201e1d, #f3f2f2, #ec3013 and #b8240e
     are the four the Android shell already ships, so nothing here is a new colour in the product;
     #2b2827 is one step up from the ink so the rail reads as lifted off the page header rather
     than welded to it, and #37332f is the lightest hairline that still shows on ink. These are
     literal values on purpose: the desktop scopes below remap some --color-* tokens on the ink
     bands, and a --tc-* token defined as var(--color-…) would be remapped along with them. */
  --tc-ink: #201e1d;
  --tc-rail: #2b2827;
  --tc-hair: #37332f;
  --tc-on-ink: #f3f2f2;
  --tc-ink-idle: #d6d3d2;
  --tc-ink-muted: #b5b1af;
  --tc-on-ink-accent: #ffc4b8;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --font-heading: var(--font-archivo), "Archivo", system-ui, sans-serif;
  --font-body: var(--font-archivo), "Archivo", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
/* Chrome's text autosizing "boosts" font sizes in the Android WebView — a 15px top-bar title came
   out at 24px on a real phone, which is why the app's chrome looked oversized against the design.
   The sizes here are deliberate, so opt out of the boosting; the OS accessibility font scale still
   applies on top of them. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-600); }
h1, h2, h3 { font-family: var(--font-heading); margin: 0; }
b, strong { font-weight: 700; }
button, input, select, textarea { font-family: var(--font-body); font-size: 14px; color: var(--color-text); border-radius: 0; }
input[type="checkbox"] { accent-color: var(--color-text); }

/* Buttons — flush-left labels, zero radius */
.btn {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px;
  min-height: 36px; padding: 6px 14px; font-weight: 600; font-size: 13px; line-height: 1.2;
  border: 2px solid transparent; background: transparent; color: var(--color-text); cursor: pointer;
  text-align: left; white-space: nowrap; text-decoration: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; }
.btn-primary:not(:disabled):hover { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-secondary { background: transparent; border-color: var(--color-text); color: var(--color-text); }
.btn-secondary:not(:disabled):hover { background: var(--color-neutral-200); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.btn-ghost:not(:disabled):hover { background: var(--color-neutral-200); }
.btn-block { width: 100%; }

/* Tags */
.tag {
  display: inline-flex; align-items: center; padding: 2px 7px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; border: 1.5px solid transparent; white-space: nowrap;
}
.tag-accent { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; }
.tag-neutral { background: var(--color-neutral-200); border-color: var(--color-neutral-200); color: var(--color-text); }
.tag-outline { background: transparent; border-color: var(--color-text); color: var(--color-text); }

/* Segmented control */
.seg { display: inline-flex; border: 2px solid var(--color-text); background: var(--color-bg); }
.seg-opt {
  padding: 5px 12px; min-height: 30px; font-size: 12px; font-weight: 600; background: transparent;
  border: none; border-right: 2px solid var(--color-text); color: var(--color-text); cursor: pointer; white-space: nowrap;
}
.seg-opt:last-child { border-right: none; }
.seg-opt.btn-primary { background: var(--color-accent-600); color: #fff; }

/* Inputs */
.input {
  min-height: 36px; padding: 6px 10px; font-size: 14px; border: 2px solid var(--color-text); background: #fff; color: var(--color-text);
  outline: none; width: auto; max-width: 100%;
}
.input:focus { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.input:disabled { background: var(--color-surface); color: var(--color-neutral-700); }
select.input { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23201e1d' stroke-width='2'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.field .input { width: 100%; }

/* Tables */
.table { border-collapse: collapse; width: 100%; font-size: 13px; }
.table th { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-600); border-bottom: 2px solid var(--color-text); padding: 8px 8px 6px; }
.table td { padding: 8px; border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.table tr:last-child td { border-bottom: 1px solid var(--color-divider); }

/* Section heads */
.sec { border-bottom: 2px solid var(--color-text); padding-bottom: var(--space-2); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }
.h1 { font-family: var(--font-heading); font-weight: 800; font-size: 30px; margin: var(--space-1) 0 0; letter-spacing: -0.02em; }
.page-head { padding: var(--space-6) 0 var(--space-4); border-bottom: 2px solid var(--color-text); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.row-hover:hover { background: var(--color-neutral-200); }
.muted { color: var(--color-neutral-700); }
.num { font-family: var(--font-heading); font-weight: 800; }

/* Dialogs */
.overlay { position: fixed; inset: 0; background: color-mix(in srgb, #201e1d 45%, transparent); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.dialog { background: var(--color-bg); border: 2px solid var(--color-text); padding: var(--space-6); max-height: 88vh; overflow: auto; width: 100%; }
.dialog-title { font-family: var(--font-heading); font-weight: 800; font-size: 20px; }

/* App shell */
/* Skip link: out of the way until it takes focus, then a solid ink chip in the top-left corner.
   Fixed rather than in flow so it cannot disturb the shell's flex row while it is hidden. */
.skip-link { position: fixed; top: 8px; left: -9999px; z-index: 100; background: var(--color-text); color: var(--color-bg); border: 2px solid var(--color-text); padding: 10px 14px; font-size: 13px; font-weight: 700; text-decoration: none; }
.skip-link:focus { left: 8px; }
/* The content landmark only holds focus so the skip link can hand it over; a ring around the whole
   page would be noise, and nothing else can focus it. */
main.tc-main:focus { outline: none; }
/* --tc-gutter is the page's side margin. The page head bleeds out to it with a negative margin,
   so the two have to be one number or the ink band stops short of the edge. */
.tc-shell { display: flex; min-height: 100vh; align-items: stretch; --tc-gutter: var(--space-8); }
#tc-side {
  --tc-rail-w: 232px;
  width: var(--tc-rail-w); flex: 0 0 var(--tc-rail-w);
  background: var(--tc-rail); color: var(--tc-ink-idle);
  border-right: 2px solid var(--tc-ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: flex-start; height: 100vh;
  /* Eleven items, a footer and a short window: the rail scrolls rather than losing Sign out off
     the bottom. Collapsed it must not, because the hover labels are drawn outside its width and
     overflow-y clips the other axis with it. */
  overflow-y: auto; overflow-x: hidden;
  transition: width 140ms ease, flex-basis 140ms ease;
}
#tc-side.tc-rail-narrow { --tc-rail-w: 62px; overflow: visible; }
@media (prefers-reduced-motion: reduce) { #tc-side { transition: none; } }
#tc-mobilebar { display: none; }
main.tc-main { flex: 1; min-width: 0; padding: 0 var(--tc-gutter) var(--space-8); }

#tc-scanfab { display: none; }
@media screen and (max-width: 780px) {
  /* main's padding drops to space-3 below; the page head bleeds by the same number or it hangs
     over the edge of a narrow window. */
  .tc-shell { --tc-gutter: var(--space-3); }
  #tc-side { display: none !important; }
  #tc-mobilebar { display: grid !important; }
  #tc-scanfab { display: flex !important; }
  /* The fab sits above the dialog overlay; hide it while a dialog is open so it can't be tapped
     through (the scan dialogs have their own Camera button). */
  body:has(.overlay) #tc-scanfab { display: none !important; }
  main.tc-main { padding: 0 var(--space-3) 110px !important; }
  .tc-grid { grid-template-columns: 1fr !important; }
  /* A grid track defaults to a min-content floor, so a wide table (the size list on a product
     page) stretches its column instead of scrolling inside .table-wrap and drags the whole page
     sideways. Let the tracks shrink and the wrapper does its job. */
  .tc-grid > * { min-width: 0; }
  .dialog { max-width: 94vw !important; }
  /* Touch targets: 44px controls, 16px inputs (stops iOS zoom), 40px segmented options, scrollable tables. */
  .btn { min-height: 44px; }
  .input, select.input { min-height: 44px; font-size: 16px; }
  .seg .seg-opt { min-height: 40px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.table { display: block; overflow-x: auto; }
  /* Scoped to the desktop app's content area. As a bare `h1 !important` this reached every
     heading on every phone-width screen — the counter app's 15px top-bar titles came out at 24px,
     which is why the app's chrome looked oversized on a real device, and the marketing hero and
     the onboarding headings were flattened to 24px too. Every other rule in this block is scoped
     to the desktop shell; this one wasn't. */
  main.tc-main h1, main.tc-main .h1 { font-size: 24px !important; }
  .page-head .btn { min-height: 44px; padding: 6px 12px; }
}
.table-wrap { overflow-x: auto; }
@media screen and (max-width: 820px) {
  .tc-auth { grid-template-columns: 1fr !important; min-height: 100dvh !important; }
  .tc-brandpane { display: none !important; }
  /* Phone: brand strip on top, form starts high (keyboard-friendly), links home/demo underneath. */
  .tc-authpane { align-items: flex-start !important; padding: 20px 20px calc(28px + env(safe-area-inset-bottom)) !important; }
  .tc-brandmobile, .tc-authfoot { display: flex !important; }
  .tc-auth .seg .seg-opt { min-height: 44px; }
  .tc-auth .btn-primary { min-height: 48px; font-size: 15px; }
  .mk-grid2, .mk-grid3, .mk-grid4, .mk-hero, .mk-rep { grid-template-columns: 1fr !important; }
  .mk-h1 { font-size: 38px !important; }
  .tcl-grid { grid-template-columns: 1fr !important; }
  .tcl-side { position: static !important; border-right: none !important; border-bottom: 2px solid var(--color-text); display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 16px !important; }
  .tcl-side .btn { width: auto !important; }
}
/* The marketing nav is sticky, so an anchor jump lands the heading underneath it. */
#loop, #product, #features, #reporting, #price { scroll-margin-top: 96px; }
@media screen and (max-width: 900px) {
  .tcm-hero, .tcm-loop, .tcm-rep, .tcm-price { grid-template-columns: 1fr !important; }
  .tcm-feat { grid-template-columns: 1fr 1fr !important; }
  .tcm-stats { grid-template-columns: 1fr 1fr !important; }
  .tcm-foot { grid-template-columns: 1fr 1fr !important; }
  .tcm-rail { display: none !important; }
  .tcm-navlinks { gap: 16px !important; font-size: 12.5px !important; }
  .tcm-hero > div:first-child { border-right: none !important; border-bottom: 2px solid var(--color-text); }
  #reporting > div:first-child { border-right: none !important; border-bottom: 2px solid var(--color-text); }
  .tcm-price > div:first-child { border-right: none !important; border-bottom: 1px solid var(--color-divider); }
}
@media screen and (max-width: 820px) {
  .tcm-foot { grid-template-columns: 1fr 1fr !important; }
}
@media screen and (max-width: 780px) {
  /* Handoff hides the desktop link row here. It leaves a second scrollable row in its place so the
     pages stay reachable — the handoff flags "no mobile menu was designed" as an open question. */
  .tcm-navlinks, .tcm-navlogin { display: none !important; }
  .tcm-navmobile { display: block !important; }
}
@media screen and (max-width: 900px) {
  .tcm-headsplit, .tcm-split, .tcm-3col, .tcm-2col { grid-template-columns: 1fr !important; }
  /* The left cell of a .tcm-split carries no left padding of its own — on a wide screen it sits on
     the page gutter, which the wrap has already paid for. Collapsed to one column that zero becomes
     copy printed against the edge of the phone, so the gutter goes back here. */
  .tcm-splitpad { padding-left: 40px; }
  /* A grid track floors at min-content, so a fixed-width mock inside a collapsed split stretches
     its column and drags the whole page sideways instead of scrolling inside its own .table-wrap. */
  .tcm-split > * { min-width: 0; }
  .tcm-rowgrid { grid-template-columns: 1fr !important; gap: 6px !important; }
  .tcm-pullup { margin-top: 0 !important; }
  .tcm-stagger > * { padding-top: 0 !important; }
}
@media screen and (max-width: 560px) {
  .tcm-pillars { grid-template-columns: 1fr !important; }
}
@media screen and (max-width: 640px) {
  /* Phones: drop the in-page links so the sticky bar stays one row and keeps the CTAs above the fold. */
  .tcm-navlinks { display: none !important; }
  .tcm-nav { padding: 12px 16px !important; gap: 12px !important; }
  #loop, #product, #features, #reporting, #price { scroll-margin-top: 72px; }
  /* The hero's second and third mock cards are illustration. On a phone they added ~490px
     of scrolling before the first real section, so show one and get on with it. */
  .tcm-mock-extra { display: none !important; }
  .tcm-mock-first { margin-bottom: 20px !important; }
}
@media screen and (max-width: 560px) {
  .tcm-feat, .tcm-foot { grid-template-columns: 1fr !important; }
  .tcm-feat-lead { grid-column: auto !important; }
}
@media print {
  #tc-side, #tc-mobilebar, #tc-scanfab, .skip-link, .no-print { display: none !important; }
  main.tc-main { padding: 0 !important; }
  body { background: #fff; }
}

/* Update wave additions */
.btn-icon { padding: 0 8px; min-height: 26px; text-decoration: none; font-size: 16px; line-height: 1; }
.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--color-divider); border: 2px solid var(--color-text); margin-top: var(--space-4); }
.kpi-strip > div { background: var(--color-bg); padding: var(--space-3); }
.kpi-strip .kv { font-family: var(--font-heading); font-weight: 800; font-size: 24px; }
.kpi-strip .kl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); font-weight: 600; margin-top: 2px; }
.link-name { cursor: pointer; border-bottom: 2px solid var(--color-accent); color: inherit; text-decoration: none; }
.link-name:hover { color: var(--color-accent-700); }
.notice { border-left: 4px solid var(--color-accent); padding: var(--space-2) var(--space-3); font-size: 13px; font-weight: 600; margin-bottom: var(--space-3); }
.bar-track { height: 10px; border: 2px solid var(--color-text); }
.bar-fill { height: 100%; background: var(--color-text); }
textarea.input { font-family: var(--font-body); resize: vertical; }
@media screen and (max-width: 780px) { .kpi-strip { grid-template-columns: 1fr 1fr; } }

/* Marketing photography: every image is greyscale, never tinted or restored on hover. */
.grayscale { filter: grayscale(1) contrast(1.08); }

/* ---------- the phone app (/m): a fixed-height column, only the body scrolls */
/* The page returns a fragment, so its top bar, rule, body and nav are this column's own children. */
.tcx-app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--color-bg); overflow: hidden; }
/* Android 15 draws apps edge to edge whether they ask or not, so the ink top bar would otherwise
   sit under the status bar with the screen title behind the clock. The inset is padding on the bar
   itself, so the ink still runs to the top of the screen — the colour bleeds, the words don't. */
.tcx-topbar { padding-top: env(safe-area-inset-top, 0px); height: calc(56px + env(safe-area-inset-top, 0px)) !important; flex-basis: calc(56px + env(safe-area-inset-top, 0px)) !important; }
.tcx-bar:not(:disabled):active { filter: brightness(0.86); }
@keyframes tcx-sweep { 0%, 100% { top: 6px; } 50% { top: calc(100% - 9px); } }
.tcx-laser { animation: tcx-sweep 1.6s ease-in-out infinite; top: 6px; }
@media (prefers-reduced-motion: reduce) { .tcx-laser { animation: none; top: 50%; } }
/* Bars on the counting screen carry the chart in "variance over time" */
.tcx-chart { display: flex; align-items: flex-end; gap: 5px; height: 56px; border-bottom: 1px solid var(--color-divider); }
.tcx-chart > i { flex: 1; min-width: 6px; display: block; }

/* Native scanning: MLKit draws the camera preview behind the WebView, so the page has to get
   out of the way while it runs. Only ever set inside the Android shell. */
html.tcx-native-scan, html.tcx-native-scan body, html.tcx-native-scan .tcx-app { background: transparent !important; }
/* Everything the shelf screen drew goes; the scan overlay stays. `.tcx-scanui` is the class the
   camera overlay's own root carries (components/MScan.tsx) — if nothing on the page carries it,
   this hides the scan UI as well, and a coordinator mid-count is left with a bare camera picture:
   no LIVE/PAUSED header, no running counted/expected figure and no "Stop scanning" bar to press,
   only the hardware back button, which walks out of the count altogether. */
html.tcx-native-scan .tcx-app > *:not(.tcx-scanui) { visibility: hidden; }
/* The overlay is drawn for the browser scanner, where the picture comes from its own <video>.
   Under MLKit the picture is behind the WebView, so the overlay's ground and its camera window —
   the last <div> in it, the one wrapping the video — have to let it through, or the spared UI
   covers the preview with flat ink and the garment can't be aimed at. The header, the last-scans
   panel and the bottom bar keep their own backgrounds so they stay readable over the picture. */
html.tcx-native-scan .tcx-scanui,
html.tcx-native-scan .tcx-scanui .tcx-camwin { background: transparent !important; }
/* The browser scanner's <video> is still in the camera window under MLKit, with no stream to
   show. Android's WebView paints a source-less video as an opaque grey box with a play glyph in
   the middle — which is exactly what a coordinator in hands-free mode saw on a Pixel 8 Pro on
   2026-09-12 instead of the shelf: the native preview was behind it the whole time. */
html.tcx-native-scan .tcx-scanui video { display: none !important; }

/* On a tablet the app keeps a phone-shaped column rather than stretching a list row to 1200px —
   a row that wide puts the garment name and its count at opposite ends of the screen. */
@media (min-width: 620px) {
  .tcx-app { align-items: center; }
  .tcx-app > * { width: 100%; max-width: 560px; }
  .tcx-app { background: var(--color-surface); }
}

/* ---------- the desktop app (/app): dark chrome, paper content
 *
 * Everything that changes how an existing thing looks, from here down, is scoped to .tc-shell —
 * the wrapper components/Shell.tsx draws and nothing else in the product draws. The counter app
 * (/m) and the staff app (/my) build their screens out of the --color-* tokens at the top of this
 * file and the .tcx-* classes above, and neither ever renders a .tc-shell, so none of those
 * selectors can reach a phone. The unscoped rules below add new class names only — nothing the
 * marketing site or the two phone apps already wears.
 *
 * The chrome went dark and the content did not. A shelf count is read across a linen room under
 * ward lighting, and paper holds its contrast there in a way an ink panel does not. */
.tc-rail-brand {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-5) var(--space-4) var(--space-3);
}
.tc-rail-mark { width: 14px; height: 14px; flex: 0 0 14px; background: var(--color-accent); }
.tc-rail-word { font-family: var(--font-heading); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--tc-on-ink); flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.tc-rail-facility {
  padding: 0 var(--space-4) var(--space-3);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tc-ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-bottom: 1px solid var(--tc-hair);
}
.tc-rail-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 1px solid var(--tc-hair);
  background: transparent; color: var(--tc-ink-idle); cursor: pointer;
}
.tc-rail-toggle:hover { background: var(--tc-hair); color: var(--tc-on-ink); }
.tc-rail-nav { flex: 1; display: flex; flex-direction: column; }
/* An item is a fixed-height icon row, so collapsed the rail is a column of even squares. */
.tc-rail-item {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-4); min-height: 42px;
  border: none; border-bottom: 1px solid var(--tc-hair); border-left: 4px solid transparent;
  background: transparent; color: var(--tc-ink-idle);
  font-family: var(--font-body); font-size: 14px; font-weight: 500; text-align: left;
  text-decoration: none; cursor: pointer; width: 100%;
}
.tc-rail-item:hover { background: var(--tc-hair); color: var(--tc-on-ink); }
.tc-rail-item:disabled { opacity: 0.45; cursor: not-allowed; }
/* The accent marks the screen you are on as a rule down its edge, not as the label's colour: the
   vermilion is 3.5:1 against the rail, which is enough for a 4px bar and not enough for a 14px
   word. The word turns paper-white and heavy instead, so the item is marked twice over. */
.tc-rail-item.active { border-left-color: var(--color-accent); background: var(--tc-ink); color: var(--tc-on-ink); font-weight: 800; }
.tc-rail-icon { flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--tc-ink-muted); }
.tc-rail-item:hover .tc-rail-icon, .tc-rail-item.active .tc-rail-icon { color: var(--color-accent-300); }
.tc-rail-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tc-rail-meta { padding: var(--space-3) var(--space-4); font-size: 11px; line-height: 1.7; color: var(--tc-ink-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.tc-rail-foot { border-top: 1px solid var(--tc-hair); }
.tc-rail-foot .tc-rail-item:last-child { border-bottom: none; }
.tc-rail-role { display: inline-flex; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--tc-hair); color: var(--tc-ink-idle); }
.tc-rail-live { padding: 0 var(--space-4) var(--space-3); font-size: 11px; font-weight: 600; color: var(--color-accent-300); }
.tc-rail-item:focus-visible, .tc-rail-toggle:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: -3px; }

/* Collapsed: an icon rail. The label stays in the DOM and stays in the accessibility tree —
   opacity, not display or visibility — so a screen reader still reads "Delivery Rounds" off an
   item a sighted coordinator has to hover to name. */
/* The facility name carries the hairline under the brand when the rail is open; collapsed it is
   hidden, so the brand block takes the rule over or the mark runs straight into the first icon. */
.tc-rail-narrow .tc-rail-brand { justify-content: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4) 0 var(--space-3); border-bottom: 1px solid var(--tc-hair); }
.tc-rail-narrow .tc-rail-word, .tc-rail-narrow .tc-rail-facility, .tc-rail-narrow .tc-rail-meta, .tc-rail-narrow .tc-rail-role { display: none; }
.tc-rail-narrow .tc-rail-item { justify-content: center; padding: 0; min-height: 44px; border-left-width: 3px; }
.tc-rail-narrow .tc-rail-label {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 2px;
  padding: 7px 10px; background: var(--tc-ink); color: var(--tc-on-ink);
  border: 2px solid var(--tc-hair); font-weight: 600; font-size: 13px;
  opacity: 0; pointer-events: none; z-index: 40; transition: opacity 90ms linear;
}
.tc-rail-narrow .tc-rail-item:hover .tc-rail-label,
.tc-rail-narrow .tc-rail-item:focus-visible .tc-rail-label { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tc-rail-narrow .tc-rail-label { transition: none; } }

/* The page head carries the ink the full width of the content column, so it bleeds back out
 * through main's gutter.
 *
 * Screens put whatever they like in this band — a counted total, a supplier filter, a "net −$412"
 * in accent-700 — and most of it names its colour inline as var(--color-text) or
 * var(--color-neutral-700), which on ink is either invisible or close to it. Rather than make
 * fourteen screens special-case the band, the band remaps those tokens for everything inside it:
 * an inline var(--color-text) resolves to paper in here and to ink everywhere else. This is the
 * only place in the product where a --color-* token takes a different value, it happens on a
 * descendant of .tc-shell, and no phone screen has one of those. */
.tc-shell .page-head, .tc-shell .tc-pagehead {
  --color-text: #f3f2f2;
  --color-bg: #201e1d;
  --color-surface: #37332f;
  --color-divider: #37332f;
  --color-neutral-200: #37332f;
  --color-neutral-300: #57534f;
  --color-neutral-600: #b5b1af;
  --color-neutral-700: #b5b1af;
  --color-neutral-800: #d6d3d2;
  --color-accent-700: #ffc4b8;
  background: var(--tc-ink); color: var(--tc-on-ink);
  margin: 0 calc(var(--tc-gutter) * -1) var(--space-6);
  padding: var(--space-6) var(--tc-gutter) var(--space-5);
  border-bottom: 4px solid var(--color-accent);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
/* A field keeps its white ground, so inside one the ink has to come back or what someone types is
   white on white — the reporting month select and the register's search box both live up here. */
.tc-shell .page-head .input, .tc-shell .tc-pagehead .input { --color-text: #201e1d; }
.tc-shell .page-head .h1, .tc-shell .tc-pagehead .h1 { color: var(--tc-on-ink); }

/* The figure a screen is actually about: a count, a value, a number of gaps. */
.tc-figure { font-family: var(--font-heading); font-weight: 800; font-size: 28px; line-height: 1.05; letter-spacing: -0.02em; }
.tc-meta { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }

/* Tiles: the figures that sit under a page head. auto-fit rather than a fixed count, because the
   same strip carries three tiles on Ordering and five on Reports. */
.tc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 2px; background: var(--color-text); border: 2px solid var(--color-text); }
.tc-tile { background: var(--color-bg); padding: var(--space-4); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tc-tile-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.tc-tile-note { font-size: 12px; color: var(--color-neutral-700); }

/* Panels: a bordered block with a named head. */
.tc-panel { border: 2px solid var(--color-text); background: var(--color-bg); min-width: 0; }
.tc-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-text); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.tc-panel-aside { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-neutral-700); }
.tc-panel-body { padding: var(--space-4); }
.tc-panel-foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-divider); }
/* A list of rows fills its panel edge to edge — no body padding, the rows carry their own. */
.tc-panel-list > .tc-row:last-child { border-bottom: none; }

/* Rows: one garment, one order, one request. */
.tc-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); min-width: 0; }
.tc-row-main { flex: 1; min-width: 0; }
.tc-row-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.tc-row-meta { font-size: 12px; color: var(--color-neutral-700); }
.tc-row-fig { font-family: var(--font-heading); font-weight: 800; font-size: 18px; white-space: nowrap; }
a.tc-row, button.tc-row { width: 100%; background: var(--color-bg); border-left: none; border-right: none; border-top: none; color: inherit; text-decoration: none; text-align: left; font-size: 14px; cursor: pointer; }
a.tc-row:hover, button.tc-row:hover { background: var(--color-neutral-200); color: inherit; }

/* Anything that wants attention.
 *
 * The accent is already the brand — it is the primary button and it is the current nav item — so
 * a second red a metre away across the room is a guess, not a signal. A flagged tile or row is
 * marked three ways instead: a rule down its left edge, its figure heavier and in the darker red
 * that stays legible on paper, and .tc-mark next to a word saying what is wrong. The mark is
 * decoration and belongs behind aria-hidden; the word is the message, so screens keep the word. */
.tc-flag { border-left: 4px solid var(--color-accent); }
.tc-tile.tc-flag, .tc-row.tc-flag { padding-left: calc(var(--space-4) - 4px); }
.tc-flag .tc-figure, .tc-flag .tc-row-fig { font-weight: 800; color: var(--color-accent-700); }
.tc-flag .tc-tile-label { color: var(--color-accent-700); }
.tc-mark { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--color-accent); vertical-align: -1px; margin-right: 6px; }
.tag-flag { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff; gap: 5px; }
.tag-flag::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid currentColor; }

/* On paper the ink band is a trap: browsers drop background colours out of a print by default, and
   what is left is paper-white type on white paper — a screen title that prints as nothing. So the
   head goes back to the light treatment for the printer, and the gutter it bleeds through goes to
   zero along with main's padding. */
@media print {
  .tc-shell { --tc-gutter: 0px; }
  .tc-shell .page-head, .tc-shell .tc-pagehead {
    --color-text: #201e1d;
    --color-bg: #f3f2f2;
    --color-surface: #eae9e9;
    --color-divider: #cfcccb;
    --color-neutral-200: #e4e2e1;
    --color-neutral-300: #d6d3d2;
    --color-neutral-600: #6c6764;
    --color-neutral-700: #57534f;
    --color-neutral-800: #3a3735;
    --color-accent-700: #b8240e;
    background: none; color: var(--color-text);
    margin: 0 0 var(--space-4); padding: 0 0 var(--space-2);
    border-bottom: 2px solid var(--color-text);
  }
  .tc-shell .page-head .h1, .tc-shell .tc-pagehead .h1 { color: var(--color-text); }
}