/* SRX Floor v0.1 - kiosk styles.
   Built for a shop floor: sunlight on a phone, gloves, a quick glance. Base text 18px or more, every touch
   target 56px or more, high contrast in light and dark. DONE is green, HOLD is red with an amber warning tone.
   Print styles at the end are for the QR traveler (one page per shade, two copies). No web fonts, no CDN. */

:root {
  --bg: #ffffff;
  --surface: #f2f4f7;
  --surface-2: #e4e8ee;
  --text: #0b0d10;
  --muted: #3d4651;
  --line: #9aa4b1;
  --focus: #0047b3;
  --primary: #0b3d91;
  --primary-text: #ffffff;
  --done: #0a6b2d;          /* DONE green: 7:1 on white text */
  --done-text: #ffffff;
  --hold: #b00020;          /* HOLD red */
  --hold-text: #ffffff;
  --warn: #8a5a00;          /* amber, dark enough for text on white */
  --warn-bg: #fff4d6;
  --ok-bg: #e3f5e9;
  --error-bg: #fde7ea;
  --test-badge: #6b2fa3;    /* X-TEST data marker */
  /* station colour families (shade page banner, board and holds page banner); always shown with the station in words */
  --st-metal: #1f4f8f; --st-fabric: #6a2c91; --st-assembly: #0d6b6b; --st-kit: #7a4b00; --st-install: #283593; --st-none: #3d4651; --st-text: #ffffff;
  --touch: 56px;
  --touch-big: 72px;
  --radius: 12px;
  --gap: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0d10;
    --surface: #161a20;
    --surface-2: #232933;
    --text: #f5f7fa;
    --muted: #c3cad3;
    --line: #5b6573;
    --focus: #7fb0ff;
    --primary: #5c9cff;
    --primary-text: #05080d;
    --done: #3ddc6f;
    --done-text: #04140a;
    --hold: #ff5c6c;
    --hold-text: #1a0004;
    --warn: #ffc94d;
    --warn-bg: #2b2208;
    --ok-bg: #0c2615;
    --error-bg: #2d0b10;
    --test-badge: #c99bff;
    --st-metal: #8fbaff; --st-fabric: #d9b0ff; --st-assembly: #72e0e0; --st-kit: #ffc46b; --st-install: #aab6ff; --st-none: #c3cad3; --st-text: #05080d;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0d10;
  --surface: #161a20;
  --surface-2: #232933;
  --text: #f5f7fa;
  --muted: #c3cad3;
  --line: #5b6573;
  --focus: #7fb0ff;
  --primary: #5c9cff;
  --primary-text: #05080d;
  --done: #3ddc6f;
  --done-text: #04140a;
  --hold: #ff5c6c;
  --hold-text: #1a0004;
  --warn: #ffc94d;
  --warn-bg: #2b2208;
  --ok-bg: #0c2615;
  --error-bg: #2d0b10;
  --test-badge: #c99bff;
  --st-metal: #8fbaff; --st-fabric: #d9b0ff; --st-assembly: #72e0e0; --st-kit: #ffc46b; --st-install: #aab6ff; --st-none: #c3cad3; --st-text: #05080d;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 18px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (min-width: 600px) { html { font-size: 20px; } }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
p { margin: 0 0 0.75rem; }
a { color: var(--primary); }
code, .mono, .id { font-family: var(--mono); }
.id { font-weight: 700; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }

/* layout */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--surface); border-bottom: 2px solid var(--line);
}
.topbar .brand { font-weight: 800; font-size: 1.15rem; margin-right: auto; }
.page { max-width: 960px; margin: 0 auto; padding: 16px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: var(--gap); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; border: 2px solid currentColor; }
.badge-test { color: var(--test-badge); }
.badge-role { color: var(--primary); }

/* buttons and inputs: 56px minimum touch target */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--touch); min-width: var(--touch); padding: 10px 20px;
  border: 3px solid transparent; border-radius: var(--radius);
  font: inherit; font-weight: 700; font-size: 1.05rem; text-decoration: none; cursor: pointer;
  background: var(--primary); color: var(--primary-text);
  touch-action: manipulation; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-big { min-height: var(--touch-big); width: 100%; font-size: 1.25rem; }
.btn-sub { font-weight: 500; font-size: 0.85rem; }
.btn-done { background: var(--done); color: var(--done-text); }
.btn-hold { background: var(--hold); color: var(--hold-text); }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--line); }
.btn-danger { background: var(--hold); color: var(--hold-text); }

label { display: block; font-weight: 700; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; min-height: var(--touch); padding: 10px 14px;
  font: inherit; font-size: 1.05rem; color: var(--text); background: var(--bg);
  border: 2px solid var(--line); border-radius: var(--radius);
}
input[type="checkbox"], input[type="radio"] { width: 32px; height: 32px; min-height: 0; accent-color: var(--done); }
.tick { display: flex; align-items: center; gap: 14px; min-height: var(--touch); padding: 8px 12px; border: 2px solid var(--line); border-radius: var(--radius); font-weight: 700; }
/* RT2-15: a wrapping label never shrinks the box (it stays 32 px), and a ticked row is visibly ticked, not by colour alone */
.tick > input[type="checkbox"], .tick > input[type="radio"] { flex: none; }
.tick:has(> input:checked) { border-width: 4px; border-color: var(--done); background: var(--surface-2); }

/* home tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-height: 110px; padding: 16px; border-radius: var(--radius);
  background: var(--surface-2); color: var(--text); text-decoration: none; border: 2px solid var(--line);
  font-weight: 800; font-size: 1.15rem;
}
.tile small { font-weight: 500; font-size: 0.85rem; color: var(--muted); }
.tile:active { background: var(--surface); }

/* status: DONE green, HOLD red/amber */
.status-done { color: var(--done); font-weight: 800; }
.status-hold { color: var(--hold); font-weight: 800; }
.pill-done, .pill-hold, .pill-warn { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 800; }
.pill-done { background: var(--done); color: var(--done-text); }
.pill-hold { background: var(--hold); color: var(--hold-text); }
.pill-warn { background: var(--warn-bg); color: var(--warn); border: 2px solid var(--warn); }
.banner { padding: 12px 16px; border-radius: var(--radius); border: 2px solid; margin-bottom: var(--gap); font-weight: 700; }
.banner-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.banner-error { background: var(--error-bg); color: var(--hold); border-color: var(--hold); }
.banner-ok { background: var(--ok-bg); color: var(--done); border-color: var(--done); }

/* toast and confirm sheet */
.toast-region { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; }
.toast { pointer-events: auto; padding: 14px 16px; border-radius: var(--radius); font-weight: 700; background: var(--text); color: var(--bg); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); }
.toast-ok { background: var(--done); color: var(--done-text); }
.toast-warn { background: var(--warn-bg); color: var(--warn); border: 2px solid var(--warn); }
.toast-error { background: var(--hold); color: var(--hold-text); }
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.55); }
.sheet { width: 100%; max-width: 640px; background: var(--bg); color: var(--text); border-radius: 16px 16px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-top: 3px solid var(--line); }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }

/* tables (board) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------------------------------------------------
   SCREENS (moved here from the screens' injected style elements at integration, 2026-10-27).
   ------------------------------------------------------------------------------------------------ */

/* shade page, scan hub and batch tray (s/index.html, scan.html: screens/shade.js, hold-sheet.js,
   motor-test-card.js, batch-tray.js) */
.st-banner { background: var(--st-none); color: var(--st-text); border-radius: var(--radius); padding: 14px 16px; margin-bottom: var(--gap); }
.st-banner[data-group="METAL"] { background: var(--st-metal); }
.st-banner[data-group="FABRIC"] { background: var(--st-fabric); }
.st-banner[data-group="ASSEMBLY"] { background: var(--st-assembly); }
.st-banner[data-group="KIT"] { background: var(--st-kit); }
.st-banner[data-group="INSTALL"] { background: var(--st-install); }
.st-station { font-size: 1.55rem; font-weight: 900; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.st-shade { font-size: 1.3rem; margin-top: 8px; }
.st-floor { font-size: 1.2rem; font-weight: 800; }
.st-sub { font-size: 0.9rem; font-weight: 600; }
.sr-status { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.sr-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 12px; border-radius: 999px; border: 2px solid var(--line); font-weight: 800; }
.sr-chip-wait { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.sr-chip-off { background: var(--error-bg); color: var(--hold); border-color: var(--hold); }
.sr-actions { display: grid; gap: 12px; margin: 12px 0; }
/* RT2-08: the shade page's DONE / HOLD bar sticks to the bottom of the screen while the card above it scrolls */
.sr-actionbar { position: sticky; bottom: 0; z-index: 5; background: var(--bg); margin: 12px 0 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); border-top: 2px solid var(--line); }
/* RT2-02: the motor-test card's YES / NO */
.sr-yesno { grid-template-columns: 1fr 1fr; }
.sr-yesno .btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.sr-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.sr-tabs .btn[aria-pressed="true"] { background: var(--text); color: var(--bg); }
/* build 3 (0005): the "Who?" row. The last tap on this device has a dashed outline and the words "last tap"; it is
   never pressed (aria-pressed means picked), so nothing records until a person taps */
.sr-who .btn[data-last="true"][aria-pressed="false"] { border-style: dashed; border-color: var(--primary); }
/* build 3: the part a thermal label named on the shade page (?p=); RT3-F05: its second line says DONE is for the
   whole shade */
.sr-part strong { font-size: 1.1em; }
.sr-part [data-sr="part-whole"] { font-weight: 600; margin-top: 4px; }
/* Red Team RT3-02 / RT3-F01: a person signed in on a floor device: the red banner under the top bar, every page */
#floor-device:not(:empty) { max-width: 960px; margin: 0 auto; padding: 12px 16px 0; }
.sr-floor-device { display: grid; gap: 10px; margin: 0; }
.sr-floor-device-text { margin: 0; font-weight: 800; font-size: 1.05rem; }
/* RT3-F11c: the scan page's device line, above the scan field */
.sr-scan-device { font-weight: 800; margin-bottom: var(--gap); }
.sr-sheet { max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; }
/* the actions stick to the very bottom of the scrolling sheet (no sheet padding below them, so nothing scrolls past) */
.sr-sheet .sheet-actions { position: sticky; bottom: 0; z-index: 1; background: var(--bg); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 2px solid var(--line); }
.sr-list { margin: 0 0 12px; padding-left: 1.2rem; }
.sr-list li { margin-bottom: 8px; }
.sr-tag { font-family: var(--mono); font-weight: 800; overflow-wrap: anywhere; }
.sr-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 8px; }
.sr-chips .btn { font-size: 0.95rem; padding: 8px 10px; font-family: var(--mono); }
.sr-chips .btn[aria-pressed="true"] { background: var(--done); color: var(--done-text); }
.sr-wide { grid-column: 1 / -1; width: 100%; }
.sr-codes { display: grid; gap: 10px; margin-bottom: 10px; }
.sr-codes .btn { align-items: flex-start; text-align: left; }
.sr-law { border-left: 4px solid var(--line); padding-left: 10px; margin-bottom: 10px; }
.sr-problems { color: var(--hold); font-weight: 700; }
.sr-preview { max-width: 100%; max-height: 220px; border-radius: var(--radius); display: block; margin: 8px 0; }
.sr-channel, .sr-typed { font-family: var(--mono); font-size: 1.3rem; letter-spacing: 0.04em; }
.sr-typed { text-transform: uppercase; }
.sr-edit { display: grid; gap: 8px; padding: 12px; border: 2px dashed var(--line); border-radius: var(--radius); margin-bottom: 10px; }
.sr-pick-list { display: grid; gap: 10px; }
.sr-tray-job { margin-bottom: var(--gap); }
.sr-tray-row { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sr-sticky { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
.sr-section { margin-bottom: 12px; }

/* job board and holds (board.html, holds.html: screens/board.js, holds.js); the page-banner families use the
   same station colour tokens as the shade page banner */
.page-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px; margin-bottom: var(--gap);
  background: var(--surface-2); color: var(--text); border: 2px solid var(--line); border-left: 12px solid var(--primary); border-radius: var(--radius); }
.page-banner h1 { margin: 0; font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.03em; margin-right: auto; }
.page-banner .station-chip { font-weight: 800; padding: 4px 12px; border: 2px solid currentColor; border-radius: 999px; }
.page-banner.group-metal { border-left-color: var(--st-metal); }
.page-banner.group-fabric { border-left-color: var(--st-fabric); }
.page-banner.group-assembly { border-left-color: var(--st-assembly); }
.page-banner.group-kit { border-left-color: var(--st-kit); }
.page-banner.group-install { border-left-color: var(--st-install); }
.screen > .btn-big { margin-bottom: var(--gap); }
.load-line { font-weight: 700; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.seg-btn { padding: 8px 6px; font-size: 0.95rem; background: transparent; color: var(--text); border-color: var(--line); }
.seg-btn[aria-pressed="true"] { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.pick-btn { width: 100%; margin-bottom: 8px; }
.pick-list { display: grid; gap: 8px; max-height: 55vh; overflow-y: auto; }
.legend { font-weight: 700; }
.job-card { padding: 12px; }
.job-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.job-head .job-id { margin: 0 auto 0 0; font-size: 1.25rem; }
.facts { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.fact-warn { color: var(--warn); font-weight: 800; }
.shade { border-top: 2px solid var(--line); padding-top: 10px; margin-top: 10px; }
.shade-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.shade-name { font-weight: 800; }
.strip-wrap { margin: 8px 0 4px; }
.strip { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 0; list-style: none; }
.strip-seq { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; font-size: 0.7rem; color: var(--muted); text-align: center; }
.dot { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; min-width: 0;
  border: 2px solid var(--line); border-radius: 8px; font-family: var(--mono); font-weight: 800; font-size: 1rem; }
.dot-done { background: var(--done); color: var(--done-text); border-color: var(--done); }
.dot-hold { background: var(--hold); color: var(--hold-text); border-color: var(--hold); }
.dot-none { background: transparent; color: var(--muted); }
.dot-voided { border-style: dashed; border-color: var(--warn); color: var(--warn); }
.dot-flag { outline: 3px solid var(--warn); outline-offset: 1px; }
.dot-mark { position: absolute; top: -8px; right: -4px; min-width: 18px; padding: 0 3px; border-radius: 999px; font-size: 0.7rem; line-height: 14px;
  text-align: center; background: var(--warn-bg); color: var(--warn); border: 2px solid var(--warn); }
.shade-sum { margin: 4px 0; font-weight: 700; }
.flags { list-style: none; margin: 4px 0; padding: 0; color: var(--warn); font-weight: 800; }
.shade-toggle { width: 100%; margin-top: 6px; }
.detail { list-style: none; margin: 8px 0 0; padding: 0; }
.detail li { padding: 8px 0; border-top: 1px solid var(--line); }
.hold-card .hold-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.hold-card .hold-label { margin: 0 auto 0 0; font-size: 1.2rem; }
.hold-section > h2 { margin-top: 8px; }
.queue-chip { display: inline-block; margin-bottom: var(--gap); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chips .btn { padding: 8px 14px; font-size: 0.95rem; }
.problems { margin: 8px 0 0; padding-left: 20px; color: var(--hold); font-weight: 800; }
@media (max-width: 400px) {
  .page-banner h1 { font-size: 1.35rem; }
  .job-card { padding: 10px; }
  .dot { height: 34px; font-size: 0.95rem; }
}
.job-links, .hold-shade-link, .shade-link { margin-top: 8px; }

/* office load (office.html: screens/office.js) */
.office-banner { background: var(--primary); color: var(--primary-text); border-radius: var(--radius); padding: 12px 16px; margin-bottom: var(--gap); }
.office-banner-title { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.04em; }
.office-banner .badge { color: var(--primary-text); }
.office-banner-sub { font-weight: 700; overflow-wrap: anywhere; }
.office-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--gap); }
.office-tabs .btn, .office-choices .btn { min-width: 0; padding: 8px 6px; font-size: 0.95rem; overflow-wrap: anywhere; word-break: break-word; }
.office-tabs .btn[aria-pressed="true"], .office-choices .btn[aria-pressed="true"] { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.office-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
.office-list { display: grid; gap: 10px; margin-bottom: var(--gap); }
.office-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: var(--touch); padding: 12px 14px; text-align: left; font: inherit; color: var(--text); background: var(--surface-2); border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; overflow-wrap: anywhere; }
.office-item[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.office-field { margin-bottom: 14px; min-width: 0; }
.office-help { font-size: 0.85rem; margin: 6px 0 0; }
.office-label { font-weight: 700; margin: 0 0 6px; }
.office-field label small { display: block; font-weight: 500; color: var(--muted); }
.office-cuts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: var(--gap); }
@media (min-width: 600px) { .office-cuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.office-line { border: 2px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; overflow-wrap: anywhere; }
.office-line-head { font-weight: 700; margin-bottom: 8px; }
.office-tag { display: inline-block; font-size: 0.8rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; border: 2px solid var(--warn); color: var(--warn); background: var(--warn-bg); margin: 4px 6px 0 0; }
.office-money, .office-value { font-family: var(--mono); font-weight: 800; }
.office-value { font-size: 1.4rem; }
.office-problems { margin: 0; padding-left: 1.2rem; }
details.office-shade { border: 2px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; padding: 0 12px; }
details.office-shade > summary { min-height: var(--touch); display: flex; align-items: center; font-weight: 800; cursor: pointer; overflow-wrap: anywhere; }
.office-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }

/* ------------------------------------------------------------------------------------------------
   PRINT: the QR traveler. One shade per page, black on white, no app chrome. A screen marks the
   traveler with .traveler; .no-print hides anything else. Letter paper, portrait.
   ------------------------------------------------------------------------------------------------ */
@page { size: letter portrait; margin: 0.5in; }
@media print {
  :root { --bg: #ffffff; --text: #000000; --line: #000000; --muted: #000000; }
  html { font-size: 12pt; }
  body { background: #ffffff; color: #000000; }
  .topbar, .tiles, .toast-region, .sheet-backdrop, .no-print, nav, button { display: none !important; }
  .page { max-width: none; padding: 0; }
  .traveler { page-break-after: always; break-after: page; break-inside: avoid; border: 2px solid #000; padding: 0.3in; }
  .traveler:last-child { page-break-after: auto; break-after: auto; }
  .traveler .traveler-id { font-family: var(--mono); font-size: 28pt; font-weight: 800; letter-spacing: 0.02em; }
  .traveler .traveler-copy { font-size: 14pt; font-weight: 800; text-transform: uppercase; border: 2px solid #000; display: inline-block; padding: 2pt 8pt; }
  .traveler .traveler-qr svg { width: 2.2in; height: 2.2in; }
  .traveler table { width: 100%; }
  .traveler th, .traveler td { border: 1px solid #000; padding: 4pt 6pt; color: #000; }
  .traveler .cuts-unverified { font-size: 16pt; font-weight: 800; border: 3px dashed #000; padding: 6pt; }
  a { color: #000; text-decoration: none; }
}