/* clock.css — the Prep Clock / Receiving Clock look, shared by every returns page.
   Blaze, 2026-10-09: "make it look like prep clock and receiving clock color scheme."

   Tokens are copied from receiving/app/static/index.html (which copied Prep Clock).
   ★ THREE THEME STATES, as in both sister apps: unset follows the device, and a choice
     sticks per browser (`rs.theme`, its own key so it cannot collide with pc.theme/rc.theme).

   The returns pages were written against their own token names (--ground, --ink-2,
   --accent, --new...). Those names are kept below as ALIASES of the family tokens, so
   the page CSS did not have to be rewritten rule by rule. */
:root{
  --ink:#141414; --paper:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F5F5;
  --rule:#E2E2E2; --rule-2:#C9C9C9; --muted:#6B6B6B; --muted-2:#8E8E8E;
  --run:#FF2F00; --run-soft:#FFF0EC;
  --done:#0E7A4D; --done-soft:#E8F4EE;
  --warn:#C25A00; --warn-soft:#FFF4E5;
  --build:#007ACE; --bin:#4B4B4B; --bad:#C8102E;
  --headbg:#141414; --headfg:#FFFFFF;
  --shadow:0 1px 0 rgba(0,0,0,.05), 0 6px 18px -10px rgba(0,0,0,.25);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#F2F2F2; --paper:#121212; --surface:#1C1C1C; --surface-2:#232323;
  --rule:#343434; --rule-2:#4A4A4A; --muted:#A0A0A0; --muted-2:#7C7C7C;
  --run:#FF4A22; --run-soft:#2E140E;
  --done:#3EA97A; --done-soft:#14291F;
  --warn:#FFA409; --warn-soft:#2B1F0B;
  --build:#3AA0E8; --bin:#6B6B6B; --bad:#FF5A4F;
  --headbg:#000000; --headfg:#FFFFFF;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --ink:#F2F2F2; --paper:#121212; --surface:#1C1C1C; --surface-2:#232323;
  --rule:#343434; --rule-2:#4A4A4A; --muted:#A0A0A0; --muted-2:#7C7C7C;
  --run:#FF4A22; --run-soft:#2E140E;
  --done:#3EA97A; --done-soft:#14291F;
  --warn:#FFA409; --warn-soft:#2B1F0B;
  --build:#3AA0E8; --bin:#6B6B6B; --bad:#FF5A4F;
  --headbg:#000000; --headfg:#FFFFFF;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.7);
}

/* ---- the returns pages' own token names, as aliases ---- */
:root, :root[data-theme]{
  --ground:var(--paper); --ink-2:var(--muted); --ink-3:var(--muted-2);
  --line:var(--rule); --line-2:var(--rule-2); --accent:var(--run);
  --danger:var(--bad); --demo-bg:var(--surface-2); --on-fill:#FFFFFF;
  /* the four dispositions: one family colour each */
  --new:var(--done); --ebay:var(--build); --trash:var(--bin); --case:var(--warn);
  --r:9px;
}
/* Dark --warn is a bright amber; white text on it is hard to read, so the filled
   Open case button uses a deeper orange in dark mode. Borders and text keep --warn. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-case,
  :root:not([data-theme="light"]) .btn-reason{background:#C25A00 !important}}
:root[data-theme="dark"] .btn-case, :root[data-theme="dark"] .btn-reason{background:#C25A00 !important}

body{background:var(--paper) !important;color:var(--ink);
     font-family:"Montserrat",system-ui,-apple-system,sans-serif !important;
     -webkit-font-smoothing:antialiased}

/* ---- the family header ---- */
header.clock{background:var(--headbg);color:var(--headfg)}
header.clock .hin{max-width:1180px;margin:0 auto;padding:12px 16px;display:flex;
  align-items:baseline;gap:14px;flex-wrap:wrap}
header.clock .brand{font-family:"Oswald",sans-serif;font-weight:600;font-size:24px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--headfg);text-decoration:none}
header.clock .brand b{color:var(--run)}
header.clock .who{color:#BDBDBD;font-size:14.5px}
header.clock .signout{background:transparent;border:1px solid #555;color:#BDBDBD;border-radius:6px;
  padding:4px 10px;font-size:13px;cursor:pointer;font-family:inherit}
header.clock .signout:hover{color:#fff;border-color:#BDBDBD}
header.clock .themebtn{margin-left:auto;background:transparent;border:1px solid #4A4A4A;
  color:var(--headfg);border-radius:9px;padding:6px 12px;cursor:pointer;
  font-size:17px;line-height:1.2;min-width:42px}
header.clock .themebtn:hover{border-color:var(--run);color:var(--run)}
[hidden]{display:none !important}

/* Page CSS has bare `button{...}` rules (settings: caps, margin-top, accent fill). Shield
   the header's own buttons from them so the bar is identical on every page. */
header.clock .signout, header.clock .themebtn{margin:0;text-transform:none;letter-spacing:normal;
  font-weight:400;font-family:"Montserrat",system-ui,sans-serif}
header.clock .signout{background:transparent}
header.clock .themebtn{margin:0 0 0 auto}

/* Headings in the family face on the office pages (settings, end of day, records). */
body:not([data-page="index"]) h1{font-family:"Oswald",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em}
body:not([data-page="index"]) h2{font-family:"Oswald",sans-serif;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em}

/* Warning bars carry WHITE text, so they keep deep fills in dark mode too - the dark
   theme's brighter --bad / --warn are for text and borders, not for behind white text. */
.err, #prn{background:#C8102E !important;color:#fff}
.stale:not(#prn){background:#C25A00;color:#fff}