/* Shared by the kitchen app and the admin page.
   Implements the Preppy design system: color, type, space, shape, touch and the
   primitives both surfaces draw from. Screen-specific rules live in app.css and
   admin/admin.css. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("/fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("/fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Permanent Marker"; font-weight: 400; font-display: swap; src: url("/fonts/permanent-marker-latin-400-normal.woff2") format("woff2"); }

/* Steel greys carry the page. Color is reserved for state: tape blue for a
   person's mark, green for done, orange for attention. The rail greys are the
   dark steel used by navigation that sits beside the lists. */
:root {
  --bg: #E4E8EB; --surface: #FFFFFF; --surface-2: #EFF2F4; --ink: #1B232A; --muted: #56626D;
  --line: #C6CED5; --line-strong: #8E9AA5;
  --tape: #8DC1EA; --tape-ink: #0E2B47;
  --accent: #1F5FA8; --accent-ink: #FFFFFF; --accent-bg: #E1ECF8;
  --ok: #2A7A4A; --ok-bg: #E2F0E7; --warn: #A5421B; --warn-bg: #FBEAE2;
  --rail: #1B232A; --rail-2: #27313A; --rail-ink: #E6EBEF; --rail-muted: #97A3AE;
  --rail-on: #E4E8EB; --rail-on-ink: #1B232A; --rail-on-muted: #56626D;
  --focus: #1F5FA8; --scrim: rgba(8, 14, 20, .55);
  --sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --marker: "Permanent Marker", "Marker Felt", "Chalkboard SE", cursive;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151A1F; --surface: #1F262D; --surface-2: #192026; --ink: #E6EBEF; --muted: #97A3AE;
    --line: #34404A; --line-strong: #56636E;
    --tape: #3C73A3; --tape-ink: #F2F8FD;
    --accent: #72AAE2; --accent-ink: #0B1A28; --accent-bg: #1B2C3D;
    --ok: #5DBE85; --ok-bg: #16291E; --warn: #EF8B5E; --warn-bg: #3A2519;
    --rail: #0E1216; --rail-2: #1A2128; --rail-ink: #E6EBEF; --rail-muted: #8795A1;
    --rail-on: #33404B; --rail-on-ink: #F2F6F9; --rail-on-muted: #B6C2CC;
    --focus: #8DBDEB; --scrim: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151A1F; --surface: #1F262D; --surface-2: #192026; --ink: #E6EBEF; --muted: #97A3AE;
  --line: #34404A; --line-strong: #56636E;
  --tape: #3C73A3; --tape-ink: #F2F8FD;
  --accent: #72AAE2; --accent-ink: #0B1A28; --accent-bg: #1B2C3D;
  --ok: #5DBE85; --ok-bg: #16291E; --warn: #EF8B5E; --warn-bg: #3A2519;
  --rail: #0E1216; --rail-2: #1A2128; --rail-ink: #E6EBEF; --rail-muted: #8795A1;
  --rail-on: #33404B; --rail-on-ink: #F2F6F9; --rail-on-muted: #B6C2CC;
  --focus: #8DBDEB; --scrim: rgba(0, 0, 0, .6);
  color-scheme: dark;
}
/* The two dark blocks above must stay identical (test/client-format.test.mjs
   checks), and every colour token in the light block needs a dark value there.
   These few are the same in both themes on purpose. */
:root {
  --brand-bg: #FCF9EE;       /* the logo's cream tile */
  --device-frame: #0B0F12;   /* the bezel around the admin's tablet preview */
  --on-ok: #FFFFFF;          /* a tick on the done green */
  --on-warn: #FFFFFF;        /* text on the warning orange */
}

/* Shape and touch. Space runs in 4-pt steps: row padding 12/16, station gap 18,
   screen gutter 24 on a tablet. Nothing a cook taps goes below 48px; admin,
   which is used with a mouse, may drop to 44. */
:root {
  --r-panel: 4px; --r-control: 10px; --r-sheet: 16px; --r-pill: 999px;
  --touch: 48px; --touch-step: 54px; --row-h: 78px; --touch-admin: 44px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 17px/1.4 var(--sans); -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--cond); font-weight: 700; line-height: 1.1; margin: 0; }
.muted { color: var(--muted); }
.sub { margin: 4px 0 0; color: var(--muted); }
.sep { display: inline-block; width: 1px; height: .9em; background: var(--line); margin: 0 10px; vertical-align: -2px; }
.loading { color: var(--muted); padding: 40px 0; }
.small { font-size: 14px; }
.h3 { font-size: 22px; margin: 22px 0 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* brand */
.brandmark { flex: none; border-radius: 14px; border: 1px solid var(--line); background: var(--brand-bg); }

/* notices */
.banner { background: var(--warn-bg); border-left: 4px solid var(--warn); padding: 10px 14px; margin: 0 0 16px; border-radius: 0 6px 6px 0; max-width: 90ch; }
.note { background: var(--surface-2); border-left: 4px solid var(--accent); padding: 10px 14px; margin: 0 0 16px; border-radius: 0 6px 6px 0; max-width: 80ch; }

/* buttons and fields */
.btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn { min-height: var(--touch); padding: 0 18px; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 17px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.danger { border-color: var(--warn); color: var(--warn); }
.btn.small { min-height: 40px; padding: 0 14px; font-size: 15px; border-radius: 8px; }
.btn:disabled { opacity: .45; }
.field { display: flex; flex-direction: column; gap: 6px; }
.label { display: block; font-size: 14px; color: var(--muted); font-weight: 600; }
.input, select { min-height: var(--touch); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); padding: 0 12px; font-size: 17px; }
.chip { min-height: var(--touch-admin); padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* One segmented control: the tablet's size by default, `.compact` for the
   admin page's denser rows (still a 44px target). */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.seg button { min-height: 48px; padding: 0 20px; border: 0; background: transparent; font-weight: 600; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg.compact { border-radius: 8px; }
.seg.compact button { min-height: var(--touch-admin); padding: 0 12px; color: var(--muted); font-size: 14px; }
.seg.compact button[aria-pressed="true"] { color: var(--bg); }
.seg button:disabled { opacity: .55; }

/* day dots, in the common day-of-week label colors. Fixed across themes:
   lg 78 day headers, 44 pickers, sm 36 dense lists, xs 28 tables. */
.dot { --size: 44px; width: var(--size); height: var(--size); border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  font: 700 calc(var(--size) * .3)/1 var(--cond); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
.dot.lg { --size: 78px; }
.dot.sm { --size: 36px; }
.dot.xs { --size: 28px; font-size: 10px; }
.dot-0 { background: #1B1B1B; color: #FFFFFF; }
.dot-1 { background: #1F5FBF; color: #FFFFFF; }
.dot-2 { background: #F2C230; color: #1B232A; }
.dot-3 { background: #D0342C; color: #FFFFFF; }
.dot-4 { background: #7A4B2A; color: #FFFFFF; }
.dot-5 { background: #2F8F46; color: #FFFFFF; }
.dot-6 { background: #F07F1A; color: #1B232A; }

/* initials on painter's tape. Only ever a person's own mark. */
.tape { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 4px 18px 3px;
  background: var(--tape); color: var(--tape-ink); font: 400 17px/1.25 var(--marker);
  clip-path: polygon(0 14%, 3% 0, 50% 7%, 97% 0, 100% 16%, 98.5% 50%, 100% 86%, 96% 100%, 50% 93%, 4% 100%, 0 84%, 1.5% 50%); }
.tilt-0 { transform: rotate(-1.6deg); } .tilt-1 { transform: rotate(-1deg); } .tilt-2 { transform: rotate(-.4deg); }
.tilt-3 { transform: rotate(.4deg); } .tilt-4 { transform: rotate(1deg); }
.ini { display: inline-block; font: 400 18px/1.1 var(--marker); background: var(--tape); color: var(--tape-ink); padding: 2px 8px; }

/* tables */
/* position: relative keeps absolutely positioned labels inside the scroll box. */
.tablewrap { overflow-x: auto; position: relative; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { font-size: 14px; color: var(--muted); font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.dim td { color: var(--muted); }
.missed { color: var(--warn); font-weight: 600; }

/* panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 18px; min-width: 0; }
.panel h2 { font-size: 28px; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }

/* history: the day list on the left, the day's tables and activity beside it.
   Used by the kitchen app and the admin page (which makes it denser with
   .admin-hist in admin.css). */
.hist { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.daylist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; max-height: 75vh; overflow: auto; }
.daylist li + li { border-top: 1px solid var(--line); }
.daybtn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 10px 14px; border: 0; background: transparent; text-align: left; }
.daybtn[aria-current="true"] { background: var(--surface-2); box-shadow: inset 4px 0 0 var(--accent); }
.daybtn small { display: block; color: var(--muted); font-size: 14px; }
.hist table, .hist-table { min-width: 640px; }
.hist-chips { margin-bottom: 14px; }
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.activity li.is-config span:last-child { color: var(--muted); }
.activity li.muted { display: block; }
@media (max-width: 860px) {
  .hist { grid-template-columns: 1fr; }
  .daylist { display: flex; overflow-x: auto; max-height: none; }
  .daylist li { flex: none; }
  .daylist li + li { border-top: 0; border-left: 1px solid var(--line); }
}

/* modal sheet */
.scrim { position: fixed; inset: 0; z-index: 20; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
@media (min-width: 700px) { .scrim { align-items: center; } }
.sheet { background: var(--surface); width: min(780px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: var(--r-sheet); padding: 22px; }
.sheet:focus { outline: none; }
.sheet h2 { font-size: 32px; }
.sheet .sub { margin-bottom: 18px; }
.sheet-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 30; max-width: calc(100% - 32px);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--bg);
  padding: 12px 18px; border-radius: var(--r-control); font-weight: 600; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--warn); color: var(--on-warn); }

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