/* RosterPress (working name): the one visual theme, "the Job Ticket". DESIGN.md section 7 is the
   authority; this file is its screen half and public/app/outputs/geometry.js is its print half.
   Shared by the tool (public/app/) and the public pages (public/). Rules that never bend:
   nothing moves (no transition, no animation); a state is always a drawn mark AND a word, never a
   colour alone; numbers, sizes and codes use tabular figures; customer text is never re-cased
   (no text-transform anywhere near a name, number or size). */

:root {
  /* ground and ink (cool neutrals; a desk and white sheets) */
  --desk: #EEF1F3;            /* the page behind the sheets */
  --sheet: #FFFFFF;           /* panels, tables, cards */
  --ink: #16202A;             /* text; 15.9:1 on sheet */
  --ink-2: #47535E;           /* secondary text; 7.9:1 on sheet */
  --ink-3: #6B7782;           /* labels, captions; 4.6:1 on sheet */
  --rule: #C5CDD4;            /* field and table rules */
  --rule-2: #E1E6EA;          /* faint rules, zebra */
  /* the one accent: actions, links, focus, selection */
  --accent: #1D4F91;          /* 8.1:1 on sheet */
  --accent-ink: #FFFFFF;
  --accent-wash: #E8EFF8;
  /* four states. Each has a mark (see .state) and a word; hues are told apart by people with
     red-green colour blindness (orange / purple / blue-green / vermilion) and in print each state
     has its own black-only treatment (geometry.js). */
  --attention: #9A4B00;  --attention-wash: #FFF3E0;   /* needs attention: triangle */
  --changed: #7A3585;    --changed-wash: #F6EAF7;     /* changed: bar and diamond */
  --ready: #0B6B4C;      --ready-wash: #E6F4EE;       /* current and approved: filled disc */
  --stop: #A8231C;       --stop-wash: #FBEBEA;        /* superseded, blocked, refused: struck box */
  --idle: #47535E;       --idle-wash: #EEF1F3;        /* not approved yet: hollow ring */

  /* type */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;   /* lettering on proofs, large figures */
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;               /* codes and digit strings only */
  --t-12: 12px; --t-13: 13px; --t-15: 15px; --t-18: 18px; --t-24: 24px; --t-32: 32px;
  --l-12: 16px; --l-13: 20px; --l-15: 24px; --l-18: 24px; --l-24: 32px; --l-32: 40px;

  /* space: a 4px unit; these seven steps and no others */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px;
  --radius: 2px;
  --page: 1200px;             /* widest content */
  --rail: 240px;              /* the left rail of the tool */
  --bar: 56px;                /* the ticket header */
}

*, *::before, *::after { box-sizing: border-box; transition: none !important; animation: none !important; scroll-behavior: auto !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--desk); color: var(--ink); font: 400 var(--t-15)/var(--l-15) var(--sans); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
h1 { font: 600 var(--t-24)/var(--l-24) var(--sans); }
h2 { font: 600 var(--t-18)/var(--l-18) var(--sans); }
h3 { font: 600 var(--t-13)/var(--l-13) var(--sans); letter-spacing: 0.04em; color: var(--ink-2); }   /* section labels; written in capitals in the HTML, never by CSS */
a { color: var(--accent); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.small { font-size: var(--t-13); line-height: var(--l-13); }
.caption { font-size: var(--t-12); line-height: var(--l-12); color: var(--ink-3); }
.code { font: 600 var(--t-15)/var(--l-15) var(--mono); letter-spacing: 0.02em; white-space: nowrap; }   /* version codes, order references */
.num { font-family: var(--mono); white-space: nowrap; }                                                   /* jersey numbers, line numbers, counts */
.as-written { white-space: pre-wrap; overflow-wrap: anywhere; }                                           /* a customer's text: every space kept and shown */

/* sheets */
.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.sheet > header { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.sheet > .body { padding: var(--s-4); }

/* the ticket header: always the same three facts, in the same order, on every screen */
.ticket { position: sticky; top: 0; z-index: 10; min-height: var(--bar); background: var(--sheet); border-bottom: 1px solid var(--ink); display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-2); padding-inline: max(var(--s-6), calc((100% - var(--page)) / 2 + var(--s-6))); }   /* its text starts on the same left edge as the sheets below */
.ticket .title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ticket .spacer { flex: 1; }

/* states: a mark and a word */
.state { display: inline-flex; align-items: center; gap: var(--s-2); padding: 2px var(--s-2); border: 1px solid currentColor; border-radius: var(--radius); font: 600 var(--t-12)/var(--l-12) var(--sans); letter-spacing: 0.04em; white-space: nowrap; }
.state::before { content: ""; flex: none; width: 10px; height: 10px; }
.state.attention { color: var(--attention); background: var(--attention-wash); }
.state.attention::before { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid currentColor; }
.state.changed { color: var(--changed); background: var(--changed-wash); }
.state.changed::before { background: currentColor; transform: rotate(45deg) scale(0.8); }
.state.ready { color: var(--ready); background: var(--ready-wash); }
.state.ready::before { background: currentColor; border-radius: 50%; }
.state.stop { color: var(--stop); background: var(--stop-wash); }
.state.stop::before { border: 1.5px solid currentColor; background: linear-gradient(to top right, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%); }
.state.idle { color: var(--idle); background: var(--idle-wash); }
.state.idle::before { border: 1.5px solid currentColor; border-radius: 50%; }
.changed-row { box-shadow: inset 4px 0 0 var(--changed); }      /* the bar that marks a changed line in every table */
.was { text-decoration: line-through; color: var(--ink-3); }    /* the value before a change */

/* controls */
button, .button { font: 600 var(--t-15)/var(--l-15) var(--sans); min-height: 40px; padding: var(--s-2) var(--s-4); border: 1px solid var(--ink); border-radius: var(--radius); background: var(--sheet); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-2); }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button:disabled { color: var(--ink-3); border-color: var(--rule); background: var(--desk); cursor: not-allowed; }
input[type="text"], input[type="search"], select, textarea { font: 400 var(--t-15)/var(--l-15) var(--sans); min-height: 40px; padding: var(--s-2) var(--s-3); border: 1px solid var(--ink-3); border-radius: var(--radius); background: var(--sheet); color: var(--ink); }
label { font: 600 var(--t-13)/var(--l-13) var(--sans); color: var(--ink-2); }

/* tables: ruled like a form, figures aligned */
table { border-collapse: collapse; width: 100%; }
th { font: 600 var(--t-12)/var(--l-12) var(--sans); letter-spacing: 0.04em; color: var(--ink-2); text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--ink); white-space: nowrap; }
td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule-2); vertical-align: top; }
td.num, th.num { text-align: right; }

/* layout */
.page { max-width: var(--page); margin: 0 auto; padding: var(--s-6); display: grid; gap: var(--s-6); }
.with-rail { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
@media (max-width: 760px) {
  .page { padding: var(--s-4); gap: var(--s-4); }
  .with-rail { grid-template-columns: minmax(0, 1fr); }
  .ticket { padding: var(--s-2) var(--s-4); flex-wrap: wrap; gap: var(--s-2); }
  .ticket .spacer { display: none; }
}
@media print { body { background: #fff; } .ticket { position: static; } .no-print { display: none !important; } }