/* Gotcha Matcha staff portal — shared look (14 Oct 2026). Loaded LAST on every portal page, so it wins over each page's
   own :root colours. Brand palette (owner): forest green #24382C · cream #F5F0E5 · clay beige #D8C2A8 · oak #A47551 ·
   walnut #5C3D2A · clay #BE6E4A (small accents only) · warm glow #F2B15C (signage only — never in the UI).
   Count badges (small white numbers) use the deep clay red --red (white on it 6.1 : 1), never the light clay (3.8 : 1) — 17 Oct.
   Minimal: cream ground, white cards, hairline borders, forest green for text and the one main action per screen. */
/* Alata (headings), self-hosted since 18 Oct 2026 — it used to come from Google Fonts with @import, which held every page blank until
   Google answered (median 0.2 s, up to 3.3 s). SIL Open Font License 1.1: fonts/OFL.txt. Same three subsets and ranges Google serves;
   pages preload the latin file (scripts/check.mjs). font-display:swap = text shows at once in the system font, then swaps. */
@font-face{font-family:"Alata";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/alata-vietnamese.woff2) format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Alata";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/alata-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Alata";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/alata-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* ground & text */
  --bg:#F5F0E5; --card:#FFFDF9; --field:#FBF8F2; --ink:#24382C; --muted:#6A665C; --line:#E6DDCD; --line-strong:#D8C2A8;
  /* the main colour (old names kept so every page picks it up) */
  --matcha:#24382C; --matcha-d:#1A2A20; --matcha-soft:#EBEADF; --accent:#24382C; --accent-soft:#EBEADF; --green-soft:#EBEADF;
  --disabled:#B9BDB0;
  /* states: oak = check, clay red = problem, walnut-grey = info */
  --amber:#8A5E3B; --amber-soft:#F4EADD; --amber-line:#E4CDB2;
  --red:#A2462E; --red-soft:#F6E6DE;
  --clay:#BE6E4A; --clay-soft:#F5E6DC;
  --blue:#4E5E68; --blue-soft:#ECEEEC; --blue-line:#D5DAD6;
  --grey-soft:#EFEADF; --sand-soft:#F3ECDF; --sand-ink:#8A5E3B; --slate-soft:#EEEBE3; --slate-ink:#5E625A;
  --badge:var(--red);   /* count badges (white numbers): the deep clay red; light clay was 3.8 : 1 */
  --side:#24382C; --side-ink:#E9E2D2;   /* owner console sidebar */
  --head:"Alata",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
html body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
html body h1,html body h2,html body h3{font-family:var(--head);font-weight:400;letter-spacing:.005em;color:var(--ink)}
html body h1{letter-spacing:0}
::selection{background:#D8C2A8;color:#24382C}

/* fields: quiet, square-ish, forest focus */
html body input[type=text],html body input[type=password],html body input[type=number],html body input[type=date],html body input[type=email],
html body input[type=tel],html body input[type=search],html body input[type=month],html body select,html body textarea{
  background-color:var(--field);border-color:var(--line);color:var(--ink)}
html body input:focus,html body select:focus,html body textarea:focus{border-color:var(--ink);background-color:#fff;outline:none}

/* the old pages hard-coded white surfaces and round shapes; soften the corners a little everywhere */
html body button,html body .btn{letter-spacing:.01em}
html body [disabled]{cursor:default}

/* tags and badges: no loud fills */
html body .nbadge{background:var(--badge);box-shadow:none}

/* ---------- touch targets, focus, laptop density (17 Oct 2026, the laptop / tablet shell) ----------
   --tap / --tap-sm: the height of buttons and rows. 44 / 40 px for fingers (phones, tablets, touch laptops); 40 / 36 px on a laptop
   with a mouse (research 17 Oct: compact rows where the pointer is precise). Every control keeps a visible keyboard focus ring
   (zero specificity, so a page's own ring on a dark surface still wins; text fields show focus with their border). */
:root{ --tap:44px; --tap-sm:40px; --w-rail:88px; --w-side:252px }
@media (min-width:1024px) and (pointer:fine) and (not (any-pointer:coarse)){ :root{ --tap:40px; --tap-sm:36px } }   /* a touchscreen laptop keeps 44 / 40 */
:where(a,button,summary,[role=button],[role=switch],[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- page layout (15 Oct 2026): one header and one width for every sub-page ----------
   <header class="phead"><div class="phead-nav"><a class="phead-back" href="portal.html" id="backBtn">‹ Hub</a>[optional .phead-act]</div>
     (shell.js turns that link into "‹ Store" → portal.html#store, the page's tab, and adds the bottom tab bar)
     <h1>Title</h1><div class="phead-sub" id="sub"></div></header>
   <main class="page">…</main>          add .wide to both for table pages (payroll, admin, dashboard, roster wide view).
   Back sits top-left, not sticky. Pages don't set their own header / h1 / main width — this is the one source. */
:root{ --w-page:640px; --w-wide:1180px; --gutter:16px }
html body .phead,html body .page{max-width:var(--w-page);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter);box-sizing:border-box;width:100%}
html body .phead.wide,html body .page.wide{max-width:var(--w-wide)}
html body .phead{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:6px}
.phead-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
html body .phead-act{display:inline-flex;align-items:center;width:auto;min-height:var(--tap-sm,40px);margin:0;padding:13px 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--ink);font:500 14px/1 var(--body);letter-spacing:0;text-decoration:none;cursor:pointer;flex-shrink:0;white-space:nowrap}
/* the way back (17 Oct 2026, app shell): "‹ Store" — the tab the page belongs to (shell.js sets it from nav.js), or an in-page step
   back ("‹ Recipes", "‹ Payslips"). Plain, like the approved prototype's back link: no box, ink, 44px tall */
html body .phead-back{display:inline-flex;align-items:center;width:auto;min-height:44px;margin:0 0 0 -6px;padding:0 12px 0 6px;border:0;border-radius:10px;background:none;box-shadow:none;color:var(--ink);font:600 16px/1 var(--body);letter-spacing:0;text-decoration:none;cursor:pointer;flex-shrink:0;white-space:nowrap}
html body .phead-back:active{background:var(--field)}
html body .phead-back:focus-visible,html body .phead-act:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
html body .phead h1{font-family:var(--head);font-size:24px;font-weight:400;line-height:1.2;margin:8px 0 0}
html body .phead-sub{font-size:13.5px;font-weight:400;color:var(--muted);margin-top:4px}
.phead-sub:empty{display:none}
/* pages that switch to a wide table view put .wide on <body> (roster month, availability team view) */
html body.wide .phead,html body.wide .page{max-width:var(--w-wide)}

/* ---------- buttons and cards (15 Oct 2026): one look on every page ----------
   .btn = the main action (forest green, cream text) · .btn.ghost = the quiet one · .btn.sm = in lists and tables · .btn.full = full width */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap,44px);padding:11px 16px;border:1px solid var(--ink);border-radius:10px;
  background:var(--ink);color:var(--bg);font:600 15px/1.2 var(--body);text-decoration:none;cursor:pointer}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line-strong)}
.btn.sm{min-height:var(--tap-sm,40px);padding:8px 12px;font-size:13.5px}
/* tabs and segment switches: a finger-sized target (40px) on every page */
html body .tabs > button,html body .seg > button,html body .tabs > a{min-height:var(--tap-sm,40px)}
.btn.full{display:flex;width:100%}
/* pages that keep their own big main buttons (clock in/out, cash Save, account, closing / expense / quiz Submit, training):
   same corners, colours and text as .btn — their size stays (the clock button is big on purpose) */
html body button.bigbtn,html body button.qnext,html body button.go,html body .footer button,html body.acct main button{border-radius:10px;font-weight:600}
html body button.bigbtn:not(.out):not(:disabled),html body button.qnext:not(:disabled),html body button.go:not(.sec):not(:disabled),html body .footer button:not(:disabled),html body.acct main button:not(:disabled){background:var(--ink);color:var(--bg);border-color:var(--ink)}   /* buttons only (recipes has a .go pill); clock-out, secondary and disabled keep their own */
.btn:disabled{opacity:.5;cursor:default}
@media screen{ html body .card{border:1px solid var(--line);border-radius:14px} }

/* ---------- Beta (16 Oct 2026): features still being checked — Ordering, Matcha ----------
   <h1>Title <span class="beta">Beta</span></h1> in the .phead header and on the hub tile title;
   <p class="beta-note">…</p> as the first line of <main class="page">. Oak, like every other "check this" colour. */
html body .beta{display:inline-block;margin-left:8px;padding:3px 8px;border:1px solid var(--amber-line);border-radius:999px;background:var(--amber-soft);color:var(--amber);
  font:600 11px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
html body .beta-note{font-size:13px;line-height:1.4;color:var(--amber);margin-top:8px}
/* public holidays on every calendar (GM.ph in portal.js): a small clay "PH" tag, the name beside it in day headers, and the month's list under a calendar */
html body .ph-tag{display:inline-block;font-size:9.5px;line-height:1.3;font-weight:700;letter-spacing:.04em;color:var(--red);background:var(--red-soft);border-radius:4px;padding:0 4px;vertical-align:middle}
html body .ph-name{font-size:13px;font-weight:600;color:var(--red)}
html body .ph-list{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:8px;font-size:12.5px;color:var(--muted)}
html body .ph-list span:not(.ph-tag){min-width:0;overflow-wrap:anywhere}   /* a long name wraps at 375 px */