/* SRX Floor - the SRX design system restyle (DL-20261028-03; fonts DL-20261028-04; station chips DL-20261028-05).
   Behind config RESTYLE (OFF). EVERY rule here needs html[data-restyle="on"], which only lib/restyle.js sets, and only
   when the switch is on: with it off this file changes nothing (and the fonts below are never downloaded, because no
   element uses them).
   On: light by default (lib/restyle.js sets data-theme="light", so app.css's prefers-color-scheme block never applies);
   dark only through :root[data-theme="dark"], this device's own setting, and switched off (config RESTYLE.dark false,
   RT-R-5) until the design package has dark tokens. Navy #0B1F3F only on the one main action ([data-main="true"],
   72-88 px); every other button quiet (#F5F5F7, 2 px #D1D1D6, black text) except DONE (green) and HOLD (red fill),
   always with their word; big buttons 72 px, other targets 64 px, 12 px or more between them; text 18 px or more;
   Geist and Geist Mono; tabular numbers; neutral station chips. Designed for the 19-inch kiosk at 1280 x 1024, 100%
   scaling, Chrome --kiosk.
   Palette: #0B1F3F #3D5A87 #7891B6 #B4C3DA #8E8E93 #D1D1D6 #F5F5F7, white, black; #636366 for secondary text (Callen,
   DL-20261028-03 amendment). The status hexes are DRAFT (Package/tokens/srx-tokens.json "status"), pending Callen's
   approval in the design package. No remote URL: the fonts are self-hosted in fonts/ (SIL OFL 1.1, fonts/OFL.txt). */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------------------------------------ tokens (light) */
html[data-restyle="on"] {
  /* brand */
  --srx-navy: #0B1F3F;
  --srx-navy-mid: #3D5A87;
  --srx-blue-3: #7891B6;
  --srx-blue-4: #B4C3DA;
  --srx-grey: #8E8E93;          /* large text (24 px, or 18.7 px bold), chart series and rules only: fails AA for body */
  --srx-grey-text: #636366;     /* secondary text (approved, DL-20261028-03 amendment) */
  --srx-grey-light: #D1D1D6;
  --srx-surface: #F5F5F7;
  /* status: DRAFT, pending Callen's approval in the design package. Never the tint alone: always fg text or a 2 px fg
     border, plus the word (DONE / PASS / READY, LATE / WAIT / CHECK, HOLD / FAIL / STOP). AA on white and #F5F5F7. */
  --status-green: #2F6B45;  --status-green-tint: #E7F1EA;
  --status-amber: #8A5B12;  --status-amber-tint: #FBF1DE;
  --status-red: #A63A32;    --status-red-tint: #F9E6E4;

  /* app.css tokens, restyled */
  --bg: #FFFFFF;
  --surface: #F5F5F7;
  --surface-2: #F5F5F7;
  --text: #000000;
  --muted: var(--srx-grey-text);
  --line: #D1D1D6;
  --focus: #3D5A87;
  --primary: #0B1F3F;
  --primary-text: #FFFFFF;
  --done: var(--status-green);  --done-text: #FFFFFF;
  --hold: var(--status-red);    --hold-text: #FFFFFF;
  --warn: var(--status-amber);  --warn-bg: var(--status-amber-tint);
  --ok-bg: var(--status-green-tint);
  --error-bg: var(--status-red-tint);
  --test-badge: #3D5A87;
  /* no station hues (DL-20261028-05): every station family is the neutral chip */
  --st-metal: #F5F5F7; --st-fabric: #F5F5F7; --st-assembly: #F5F5F7; --st-kit: #F5F5F7; --st-install: #F5F5F7; --st-none: #F5F5F7; --st-text: #000000;
  --touch: 64px;
  --touch-main: 80px;           /* the one main action: 72 to 88 px */
  --touch-big: 72px;            /* every other big button (DONE, HOLD, Cancel): 72 px as before (Red Team RT-R-4) */
  --gap: 16px;
  --radius: 12px;
  --font: "Geist", Arial, sans-serif;
  --mono: "Geist Mono", Consolas, monospace;
  --quiet-bg: #F5F5F7;
  --quiet-line: #D1D1D6;
  color-scheme: light;
}

/* dark: ONLY this device's own setting (data-theme="dark"), never the OS preference. Palette values only; DRAFT until
   the design package has dark tokens, and unreachable while config RESTYLE.dark is false (Red Team RT-R-5: navy
   #0B1F3F on #000000 is about 1.3:1). */
html[data-restyle="on"][data-theme="dark"] {
  --bg: #000000;
  --surface: #000000;
  --surface-2: #000000;
  --text: #FFFFFF;
  --muted: #D1D1D6;
  --line: #8E8E93;
  --focus: #B4C3DA;
  --primary: #0B1F3F;
  --primary-text: #FFFFFF;
  --done-text: #FFFFFF;
  --hold-text: #FFFFFF;
  --warn: #FBF1DE;  --warn-bg: #000000;
  --ok-bg: #000000;
  --error-bg: #000000;
  --test-badge: #B4C3DA;
  --st-metal: #000000; --st-fabric: #000000; --st-assembly: #000000; --st-kit: #000000; --st-install: #000000; --st-none: #000000; --st-text: #FFFFFF;
  --quiet-bg: #000000;
  --quiet-line: #8E8E93;
  color-scheme: dark;
}

/* ------------------------------------------------------------------------------------------------ base (screen) */
@media screen {
  html[data-restyle="on"] body { font-family: var(--font); font-variant-numeric: tabular-nums; }
  html[data-restyle="on"] h1, html[data-restyle="on"] h2, html[data-restyle="on"] h3 { letter-spacing: -0.01em; }
  html[data-restyle="on"] a { color: var(--srx-navy-mid); }
  html[data-restyle="on"][data-theme="dark"] a { color: var(--srx-blue-4); }
  html[data-restyle="on"] code, html[data-restyle="on"] .mono, html[data-restyle="on"] .id { font-family: var(--mono); }
  html[data-restyle="on"] .card { border-width: 1px; }
  html[data-restyle="on"] .row { gap: 12px; }

  /* text 18 px or more everywhere on screen (app.css has some 0.7-0.85rem labels) */
  html[data-restyle="on"] .btn-sub, html[data-restyle="on"] .tile small, html[data-restyle="on"] .badge,
  html[data-restyle="on"] th, html[data-restyle="on"] .office-help, html[data-restyle="on"] .office-tag,
  html[data-restyle="on"] .strip-seq, html[data-restyle="on"] .dot-mark, html[data-restyle="on"] .st-sub,
  html[data-restyle="on"] .seg-btn, html[data-restyle="on"] .chips .btn, html[data-restyle="on"] .sr-chips .btn,
  html[data-restyle="on"] .office-tabs .btn, html[data-restyle="on"] .office-choices .btn { font-size: max(18px, 0.85rem); }
  html[data-restyle="on"] .dot-mark { line-height: 20px; }

  /* top bar: the rabbit mark alone at the left with clear space, then the page's own words */
  html[data-restyle="on"] .topbar { background: var(--surface); border-bottom: 1px solid var(--line); gap: 16px; min-height: 80px; }
  html[data-restyle="on"] .topbar .rs-mark { display: block; width: 32px; height: 32px; flex: none; margin-right: 16px; }
  html[data-restyle="on"] .topbar .brand { color: var(--text); text-decoration: none; }
  /* the "SRX Floor" link back to home is a target like any other: 64 px tall (srx-design audit F1; it was 32 px) */
  html[data-restyle="on"] .topbar a.brand { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 8px; }
  html[data-restyle="on"] .badge-role { color: var(--text); }

  /* ------------------------------------------------------------------------------------------------ buttons */
  /* every button is quiet ... */
  html[data-restyle="on"] .btn {
    min-height: var(--touch); min-width: var(--touch);
    background: var(--quiet-bg); color: var(--text);
    border: 2px solid var(--quiet-line);
  }
  html[data-restyle="on"] .btn-big { min-height: var(--touch-big); }
  /* ... except the status buttons, always with their word. HOLD (and the red floor-device "back") stays a red fill,
     #A63A32 with white text (6.4:1), as before the restyle (Red Team RT-R-4). */
  html[data-restyle="on"] .btn-hold:not([data-main="true"]) { background: var(--hold); color: var(--hold-text); border-color: var(--hold); }
  /* A DONE that is not the screen's one main action (the ASSEMBLY options, the batch tray, the scan hub) keeps its
     green: green text on the green tint with a 2 px green border, never grey like Cancel (Red Team RT-R-3). The
     selector out-ranks .btn above (0,3,1 against 0,2,1). */
  html[data-restyle="on"] .btn-done:not([data-main="true"]) { background: var(--ok-bg); color: var(--done); border-color: var(--done); }
  /* a picked choice (aria-pressed) is black with white text: never colour alone, and never navy */
  html[data-restyle="on"] .btn[aria-pressed="true"],
  html[data-restyle="on"] .sr-chips .btn[aria-pressed="true"],
  html[data-restyle="on"] .seg-btn[aria-pressed="true"],
  html[data-restyle="on"] .office-tabs .btn[aria-pressed="true"],
  html[data-restyle="on"] .office-choices .btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
  html[data-restyle="on"] .office-item[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 2px var(--text); }
  html[data-restyle="on"] .sr-who .btn[data-last="true"][aria-pressed="false"] { border-style: dashed; border-color: var(--text); }
  /* ... and exactly one main action per screen (lib/restyle.js marks it): navy, 72-88 px */
  html[data-restyle="on"] .btn[data-main="true"] {
    background: var(--primary); color: var(--primary-text); border-color: var(--primary);
    min-height: var(--touch-main); max-height: 88px; font-size: 1.25rem;   /* 1.25 rem as before (RT-R-4) */
  }
  html[data-restyle="on"][data-theme="dark"] .btn[data-main="true"] { border-color: var(--srx-blue-4); }
  /* srx-design audit of #76 F5: the disabled Save HOLD is never faded (it read white on grey at 2.83:1): #F5F5F7 fill,
     #636366 text (5.99:1) and a #D1D1D6 border, at full opacity. Out-ranks .btn-hold and .btn[data-main] above. */
  /* Demo Day design review (Nov 2, 2026) replaces that grey: a Save waiting for the initials (or the photo) read as dead.
     It keeps its colour at full strength (navy as the main action, else the red HOLD or the green DONE), and the line
     above it says what is missing ("Who? Tap your initials first", "Take the photo first"). */
  html[data-restyle="on"] .btn[data-sr="hold-save"][disabled] { opacity: 1; background: var(--hold); color: var(--hold-text); border-color: var(--hold); cursor: not-allowed; }
  /* review LOW (PR #136): scoped to the hold sheet's Save only. Any other disabled main action (Print on travelers, Verify on
     the office tab) keeps the faded disabled look; a station-shell main action waiting for initials is never disabled
     (shell.js marks it data-blocked and keeps it navy). */
  html[data-restyle="on"] .btn[data-sr="hold-save"][data-main="true"][disabled] { opacity: 1; background: var(--primary); color: var(--primary-text); border-color: var(--primary); cursor: not-allowed; }
  html[data-restyle="on"] .btn[data-sr="mt-save"][disabled] { opacity: 1; cursor: not-allowed; }
  html[data-restyle="on"] .btn[data-main="true"] .btn-sub { font-size: 18px; }

  /* gaps of 12 px or more between targets */
  html[data-restyle="on"] .sheet-actions, html[data-restyle="on"] .sr-actions, html[data-restyle="on"] .sr-chips,
  html[data-restyle="on"] .tiles, html[data-restyle="on"] .seg, html[data-restyle="on"] .pick-list,
  html[data-restyle="on"] .office-tabs, html[data-restyle="on"] .office-choices, html[data-restyle="on"] .chips,
  html[data-restyle="on"] .sr-tabs, html[data-restyle="on"] .sr-codes, html[data-restyle="on"] .sr-pick-list,
  html[data-restyle="on"] .sr-floor-device, html[data-restyle="on"] .office-list,
  html[data-restyle="on"] .office-cuts, html[data-restyle="on"] .office-two, html[data-restyle="on"] .sr-edit,
  html[data-restyle="on"] .sr-tray-row, html[data-restyle="on"] .trv-tabs, html[data-restyle="on"] .trv-sub,
  html[data-restyle="on"] .trv-sub-row, html[data-restyle="on"] .trv-chips { gap: 12px; }
  /* ... and 12 px between a list and the target after it (srx-design audit F1: 8-10 px measured): HOLD and Batch
     close on the shade page, Release / Stations in words and Open the shade page on Holds and Board, the HOLD
     sheet's reason list and "Other code", the travelers job lists */
  html[data-restyle="on"] .sr-actionbar { padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  html[data-restyle="on"] .job-links, html[data-restyle="on"] .hold-shade-link, html[data-restyle="on"] .shade-link,
  html[data-restyle="on"] .shade-toggle, html[data-restyle="on"] .trv-more .trv-joblist { margin-top: 12px; }
  html[data-restyle="on"] .sr-codes, html[data-restyle="on"] .sr-chips, html[data-restyle="on"] .seg, html[data-restyle="on"] .sr-edit { margin-bottom: 12px; }
  html[data-restyle="on"] .chips { margin: 12px 0; }
  /* Holds is a list with no main action: every Release is quiet and 64 px (srx-design audit) */
  html[data-restyle="on"] .hold-card .btn[data-action="release"] { min-height: var(--touch); }

  /* inputs */
  html[data-restyle="on"] input, html[data-restyle="on"] select, html[data-restyle="on"] textarea { min-height: var(--touch); border-width: 2px; border-color: var(--quiet-line); }
  html[data-restyle="on"] input[type="checkbox"], html[data-restyle="on"] input[type="radio"] { min-height: 0; }

  /* home tiles: links, all alike (home has no main action, RT-R-7), one per row so the words fit on one line: 64 to
     88 px tall on the kiosk (srx-design audit F1: the 220 px columns wrapped them to 146 px) */
  html[data-restyle="on"] .tiles { grid-template-columns: minmax(0, 1fr); }
  html[data-restyle="on"] .tile { min-height: var(--touch); padding: 8px 16px; background: var(--surface); border: 2px solid var(--quiet-line); color: var(--text); }
  html[data-restyle="on"] #theme-setting { margin: 16px 0; }
  html[data-restyle="on"] .rs-theme-line { margin: 0 0 8px; }

  /* ------------------------------------------------------------------------------------------------ status */
  /* fg text or a 2 px fg border on white, fg text on its tint, or a solid fg fill with white text; always with a word */
  html[data-restyle="on"] .pill-done, html[data-restyle="on"] .pill-hold, html[data-restyle="on"] .pill-warn { border: 2px solid currentColor; }
  html[data-restyle="on"] .pill-done { border-color: var(--done); }
  html[data-restyle="on"] .pill-hold { border-color: var(--hold); }
  html[data-restyle="on"] .banner { border-width: 2px; }
  html[data-restyle="on"] .badge-test { color: var(--test-badge); }

  /* ------------------------------------------------------------------------------------------------ stations */
  /* no station hues (DL-20261028-05): a neutral chip, black Geist text, the code in Geist Mono then the name */
  html[data-restyle="on"] .st-banner,
  html[data-restyle="on"] .st-banner[data-group] { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
  /* the name as the station list writes it ("METAL_CUT · Metal cut (saw)"), not upper-cased (srx-design audit) */
  html[data-restyle="on"] .st-station { text-transform: none; }
  html[data-restyle="on"] .st-station[data-code]:not([data-code=""])::before { content: attr(data-code) " \00B7  "; font-family: var(--mono); font-weight: 700; text-transform: none; }
  html[data-restyle="on"] .page-banner,
  html[data-restyle="on"] .page-banner[class*="group-"] { background: var(--surface); border: 1px solid var(--line); border-left: 1px solid var(--line); }
  html[data-restyle="on"] .page-banner .station-chip,
  html[data-restyle="on"] .station-chip { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
  html[data-restyle="on"] .station-chip[data-code]:not([data-code=""])::before { content: attr(data-code) " \00B7  "; font-family: var(--mono); font-weight: 700; }

  /* office banner and traveler banner: navy is kept for the one main action, so these are neutral panels */
  html[data-restyle="on"] .office-banner, html[data-restyle="on"] .trv-banner { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
  html[data-restyle="on"] .office-banner .badge { color: var(--text); }
  html[data-restyle="on"] .office-money, html[data-restyle="on"] .office-value { font-variant-numeric: tabular-nums; }

  /* ------------------------------------------------------------------------------------------------ AppShell */
  /* office pages (body[data-layout="office"]): sidebar, top bar, content. Floor and kiosk pages: top bar plus content. */
  html[data-restyle="on"] body[data-layout="office"] { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-content: start; }
  html[data-restyle="on"] body[data-layout="office"] > * { grid-column: 2; }
  html[data-restyle="on"] body[data-layout="office"] > .rs-sidebar { grid-column: 1; grid-row: 1 / span 20; }
  html[data-restyle="on"] body[data-layout="office"] > .page { max-width: 1040px; margin: 0; width: 100%; }
  html[data-restyle="on"] .rs-sidebar {
    position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px; padding: 16px 12px;
    background: var(--surface); border-right: 1px solid var(--line);
  }
  html[data-restyle="on"] .rs-nav {
    display: flex; align-items: center; min-height: var(--touch); padding: 0 16px;
    border: 2px solid transparent; border-radius: var(--radius);
    color: var(--text); text-decoration: none; font-weight: 700;
  }
  html[data-restyle="on"] .rs-nav[aria-current="page"] { background: var(--bg); border-color: var(--text); }
}
@media screen and (min-width: 900px) {
  html[data-restyle="on"] .tile { max-height: 88px; }
}
@media screen and (max-width: 899px) {
  html[data-restyle="on"] body[data-layout="office"] { display: block; }
  html[data-restyle="on"] .rs-sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ------------------------------------------------------------------------------------------------ print */
/* print is always light and carries no app chrome. Print FONTS stay as app.css and travelers.css set them until the
   traveler and label page-fit tests have run with Geist (the TRACE lane owns the label spec). */
@media print {
  html[data-restyle="on"][data-theme] {
    --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF; --text: #000000; --muted: #000000; --line: #000000;
    color-scheme: light;
  }
  html[data-restyle="on"] .rs-sidebar, html[data-restyle="on"] .rs-mark, html[data-restyle="on"] #theme-setting { display: none !important; }
  html[data-restyle="on"] body[data-layout="office"] { display: block; }
  /* the note above, kept: the token block's Geist never reaches paper. app.css's own --font and --mono, word for word,
     so travelers, ID labels, thermal labels, placards and the install sheet print exactly as with the switch off */
  html[data-restyle="on"] {
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  }
}