/* All Areas: the simple look over the prototype pages.
   The prototypes were built with their own styles (condensed caps, pills, purple HQ). This file, loaded last in each
   page's head, re-skins the parts they share into the look in docs/design/direction.md: the system font, sentence
   case, plain menu links, normal buttons, white panels, colour-coded passes and status, the stencil pass badge kept.
   Screen only: printed sheets keep their own styling. New pages use app.css directly. */

@media screen {
:root{
  --bg:#F4F5F7; --surface:#FFFFFF; --ink:#1D2125; --muted:#5A6068; --line:#D9DCE1; --field:#868D96;
  --bad:#B4231B; --warn:#7A5100; --ok:#1B6E3A; --link:#0B57A4;
  --crew:#B98900; --crew-ink:#1A1400; --patch:#1E7A47; --tour:#1F5FB8; --band:#C02F64; --hq:#334E68; --hq-ink:#FFFFFF;
  --rf:#087C88; --build:#C2570C; --build-ink:#FFFFFF; --load:#5E7A12; --load-ink:#FFFFFF; --script:#8A5A2E;
  --font-head:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Saira Stencil One","Arial Narrow",Impact,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121417; --surface:#1B1E22; --ink:#E8EAED; --muted:#A7ADB5; --line:#2E3338; --field:#737B85;
  --bad:#F38B82; --warn:#F0C25A; --ok:#6BCB8B; --link:#7DB3F0;
  --crew:#E8B730; --crew-ink:#1A1400; --patch:#5CC48A; --tour:#7FAEF0; --band:#F07AA6; --hq:#8FB0CF; --hq-ink:#0E1A26;
  --rf:#4CC3CF; --build:#F29A5C; --build-ink:#2A1203; --load:#A9C95A; --load-ink:#1A2200; --script:#D2A174; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#121417; --surface:#1B1E22; --ink:#E8EAED; --muted:#A7ADB5; --line:#2E3338; --field:#737B85;
  --bad:#F38B82; --warn:#F0C25A; --ok:#6BCB8B; --link:#7DB3F0;
  --crew:#E8B730; --crew-ink:#1A1400; --patch:#5CC48A; --tour:#7FAEF0; --band:#F07AA6; --hq:#8FB0CF; --hq-ink:#0E1A26;
  --rf:#4CC3CF; --build:#F29A5C; --build-ink:#2A1203; --load:#A9C95A; --load-ink:#1A2200; --script:#D2A174; color-scheme:dark }

body{font-family:var(--font-body);font-size:16px;line-height:1.5;background:var(--bg);color:var(--ink)}
/* Sentence case everywhere: no shouty condensed labels. The pass badge keeps its stencil capitals. */
body :not(.pass):not(.pmark):not(.mark){text-transform:none !important;letter-spacing:normal !important}
a{color:var(--link)}

/* The header: the stencil pass badge, the page name, and the menu as plain links. */
.wrap > header{gap:12px 16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.pass{font-family:var(--font-display) !important;border-radius:6px !important;font-size:1.2rem !important;padding:.25rem .65rem !important;line-height:1.2 !important}
h1{font-family:var(--font-body) !important;font-weight:650 !important;font-size:1.5rem !important;line-height:1.25 !important}
.sub{color:var(--muted);font-size:.95rem}
nav.tabs{gap:2px;flex-wrap:wrap}
nav.tabs a{border:0 !important;border-radius:6px !important;padding:.45rem .7rem !important;font-weight:500 !important;font-size:.95rem !important;color:var(--ink) !important;background:none !important}
nav.tabs a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent) !important}
/* "HQ Office" (or the app's name) at the start of the menu, so it's clear which side of the company you're in. */
nav.tabs .navname{align-self:center;font-weight:650;color:var(--muted);padding:.3rem .7rem .3rem 0;margin-right:4px;border-right:1px solid var(--line);white-space:nowrap}
nav.tabs a[aria-current]{background:color-mix(in srgb,var(--ink) 9%,transparent) !important;font-weight:650 !important;box-shadow:inset 0 -3px 0 var(--hq,var(--ink))}

/* Panels and headings. */
.card{border-radius:8px !important;border:1px solid var(--line) !important;box-shadow:none !important;background:var(--surface)}
h2{font-family:var(--font-body) !important;font-weight:650 !important;font-size:1.15rem !important;line-height:1.3 !important}
h3{font-family:var(--font-body) !important;font-weight:650 !important;font-size:1rem !important;color:var(--ink) !important}
.hint{color:var(--muted)}
/* Paper previews (an invoice, a docket) stay black on white in the dark too. */
.doc h1,.doc h2,.doc h3,.doc th,.doc label{color:#111 !important}
.doc{overflow-x:auto}

/* Fields and buttons: labels above, roomy boxes, normal buttons. */
label{font-family:var(--font-body) !important;font-weight:600 !important;font-size:.9rem !important;color:var(--ink) !important}
label.check,.check{font-weight:500 !important}
input,select,textarea{font-family:var(--font-body) !important;border:1px solid var(--field) !important;border-radius:6px !important;min-height:38px;background:var(--surface) !important;color:var(--ink) !important}
input[type="checkbox"],input[type="radio"]{min-height:0}
button,.ghostbtn,.filebtn{font-family:var(--font-body) !important;border-radius:6px !important;font-weight:600 !important;min-height:36px}
button.ghost,.ghostbtn,.filebtn{background:var(--surface) !important;color:var(--ink) !important;border:1px solid var(--field) !important}
button.small{min-height:32px}

/* Tables: a grey header row, a line between rows. */
th{font-family:var(--font-body) !important;font-weight:600 !important;color:var(--muted) !important}
table.list th,table.board thead th{background:color-mix(in srgb,var(--ink) 5%,var(--surface))}

/* Pills become plain labels. */
.chip,.tag,.badge{border-radius:4px !important}
}