/* 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); }
  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; }
}