/* Inter, self-hosted (public/fonts, copied by scripts/copy-fonts.mjs from @fontsource-variable/inter, OFL). One variable file per
   script, loaded only when the page uses those characters. No Google Fonts: nothing leaves this site. */
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-cyrillic-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-greek-ext-wght-normal.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-greek-wght-normal.woff2) format('woff2'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-vietnamese-wght-normal.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: Inter; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-latin-ext-wght-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-latin-wght-normal.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 {
  --bg: #f5f5f3;
  --surface: #ffffff;
  --ink: #121212;
  --muted: #62625e;          /* 5.61:1 on the page, 5.18:1 on --fill (outdoor phones, small text) */
  --line: #e4e4e0;
  /* Token names (docs/design/2026-11-design-audit.md 8.1). The old names on the right stay as aliases until every
     selector has moved; --accent is still the old success green, so the brand accent is --accent-fill/-text/-on-chrome. */
  --primary: #121212;        /* the default (ink) button */
  --on-primary: #ffffff;
  --primary-hover: #2a2a2a;
  --good: #276b4e;           /* 5.5:1 on its tint */
  --good-soft: #e3f1ea;
  --warn: #8f5500;           /* 5.3:1 on its tint */
  --warn-soft: #fbefd9;
  --bad: #b42318;
  --bad-soft: #fde8e6;
  --fill: #ececea;           /* neutral fill: "off", segmented track */
  --brand: var(--primary);
  --brand-ink: var(--on-primary);
  --accent: var(--good);
  --accent-soft: var(--good-soft);
  --amber: var(--warn);
  --amber-soft: var(--warn-soft);
  --red: var(--bad);
  --red-soft: var(--bad-soft);
  --grey-soft: var(--fill);
  /* type scale: the only font sizes used anywhere */
  --fs-xs: .75rem;     /* 12px  small caps labels */
  --fs-sm: .875rem;    /* 14px  secondary text, labels, table rows */
  --fs-base: 1rem;     /* 16px  body, inputs, buttons */
  --fs-md: 1.125rem;   /* 18px  card titles */
  --fs-lg: 1.375rem;   /* 22px  section titles, totals */
  --fs-xl: 1.875rem;   /* 30px  key numbers, page titles */
  /* display sizes (audit 3): the public site and the kiosk only */
  --fs-d1: clamp(2.25rem, 5.2vw, 3.75rem);  /* site hero h1 */
  --fs-d2: clamp(1.75rem, 3.2vw, 2.5rem);   /* site section h2, content-page h1, 404, prices, the kiosk's name */
  --fs-kiosk: clamp(3rem, 9vw, 6.5rem);     /* kiosk time, pairing code */
  --fs-kiosk-text: 1.5rem;                  /* 24px: the floor for kiosk text read from across the room */
  /* weights: 400 / 500 / 600 / 700, and 800 for display only (site hero, prices, pairing code, initials) */
  --lh-none: 1;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.5;
  --lh-loose: 1.6;
  --ls-display: -.02em;  /* display and big numbers */
  --ls-head: -.01em;     /* headings */
  --ls-label: .06em;     /* uppercase labels */
  --ls-code: .12em;      /* codes and PIN dots */
  --radius: 14px;
  --control-h: 44px;       /* every input, select and button */
  --control-h-sm: 36px;    /* compact controls in tables and chips */
  --control-radius: 10px;
  --control-border: #8a8a85; /* 3.5:1 against white, WCAG for field edges */
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* surfaces and states (light) */
  --chrome: #121212;          /* owner top bar + kiosk background */
  --field: #ffffff;           /* inputs and secondary buttons */
  --placeholder: #757570;     /* 4.63:1 on white: a placeholder is text */
  --control-hover: #5f5f5a;
  --brand-hover: var(--primary-hover);
  --danger-border: #d27b74;   /* --bad at 60% over --surface */
  --flag-ink: #7a4a00;        /* darker than --warn on purpose: small text on the soft amber */
  --notice-border: #f1d9a8;
  --notice-ink: #6b4200;
  --seg-active: #ffffff;
  --row-hover: #faf9f6;
  --surface-2: #ffffff;       /* pop-ups and menus */
  --hover: var(--row-hover);
  --on-chrome: #ffffff;       /* text on --chrome (top bar, side menu, kiosk) */
  --on-chrome-2: rgba(255,255,255,.74);
  --on-chrome-3: rgba(255,255,255,.62); /* 7.8:1: small caps labels on chrome */
  --chrome-line: rgba(255,255,255,.12);
  --detail-line: #ece8e0;
  --viz-1: #1f67c0;           /* regular hours: 5.59:1 with white text on it */
  --viz-2: #eb6834;           /* overtime */
  --heat-5-ink: #ffffff;      /* text on the full --viz-1 heat cell */
  --scrim: rgba(0,0,0,.35);
  --skel: #e6e4df;
  --skel-hi: #f6f5f2;
  /* scales: adopt for new and touched selectors (audit 4) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 2rem; --s-8: 3rem; --s-9: 4rem;
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 22px; --r-pill: 999px;
  --sh-1: var(--shadow);
  --sh-2: 0 12px 32px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  --sh-3: 0 24px 64px rgba(0,0,0,.24);
  --z-sticky: 20; --z-nav: 50; --z-menu: 60; --z-dialog: 100; --z-pop: 110; --z-toast: 120; --z-overlay: 200;
  --t-fast: .12s; --t-base: .2s;
  /* kiosk device: always dark, whatever the device's theme (the kiosk's PIN window, and the kiosk drawn on the public site).
     The PIN window is a raised panel with keys on it. */
  --k-surface: #1b1b1b; --k-key: #2b2b2b; --k-key-2: #3a3a3a;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23121212' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* page header */
  --ph-wash: 8%;                     /* how much accent tints the header's corner glow */
  --ph-icon-ring: rgba(0,0,0,.08);   /* keeps pale accents visible on white */
  --ph-bar-bg: #faf9f6;              /* the attached filter bar, slightly recessed */
  color-scheme: light dark;
}
/* The brand accent. Default Cronta Marigold (docs/brand/final/BRAND.md); a business's own colour arrives as --co-* on <html>
   (or on a .accent-scope preview), derived with guaranteed contrast by accentTokens() in common.js. Never put the raw
   accent as text on a light surface: use --accent-text there and --accent-on-chrome on chrome. */
:root, .accent-scope {
  --accent-fill: var(--co-fill, #ffc21f);          /* buttons, chips, shift cells; --on-accent text 4.5:1 or more */
  --on-accent: var(--co-on, #121212);
  --accent-hover: var(--co-hover-l, #ffd259);
  --accent-text: var(--co-text-l, #8a5b00);        /* accent as text on the theme's surfaces, 4.5:1 or more */
  --accent-on-chrome: var(--co-chrome, #ffc21f);   /* text, bars and focus rings on chrome and the kiosk, 4.5:1 or more */
  --accent-ring: var(--co-ring-l, rgba(18,18,18,.22)); /* hairline for fills under 3:1 on the surface */
  --yellow: var(--accent-fill);
  --yellow-ink: var(--on-accent);
  --yellow-hover: var(--accent-hover);
}
@media screen and (prefers-color-scheme: dark) {
  :root, .accent-scope {
    --accent-hover: var(--co-hover-d, #ffd259);
    --accent-text: var(--co-text-d, #ffc21f);
    --accent-ring: var(--co-ring-d, transparent);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scrollbar-gutter: stable; } /* short and long pages: the same width with classic scrollbars (nothing moves sideways) */
body { background: var(--bg); color: var(--ink); font-size: var(--fs-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; }
h1, h2, h3 { line-height: var(--lh-tight); margin: 0 0 .5rem; font-weight: 700; letter-spacing: var(--ls-head); color: var(--ink); }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); letter-spacing: var(--ls-head); }
.eyebrow, th, .kpi .label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--muted); }
/* Links: one style everywhere, readable in light and dark */
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--control-border); }
a:hover { text-decoration-color: currentColor; }
.hidden, [hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
/* Numbers line up (audit 3, D2): every table cell, anything marked .num or [data-num], and the lists that show times,
   hours, money and codes (.punchlist covers .shiftlist). One rule; live-ticking values never jitter. */
td, .num, [data-num], .punchlist, .status .since, .cal-shift, .kiosk .onshift, .rate-history, .week-totals, .pf-dots, .dlg-note {
  font-variant-numeric: tabular-nums; }

.card > h3:first-child, .card > summary h3 { margin-bottom: .35rem; }
.card p.muted.small, .dlg p.muted.small { margin: .25rem 0 0; line-height: var(--lh-body); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.stack > * + * { margin-top: 1rem; }

label { display: block; font-size: var(--fs-sm); font-weight: 600; margin: 1rem 0 .4rem; }
label.row { display: flex; flex-wrap: nowrap; gap: .6rem; align-items: center; font-weight: 500; cursor: pointer; }
input, select, textarea {
  width: 100%; font: inherit; font-size: var(--fs-base); color: var(--ink); background-color: var(--field);
  height: var(--control-h); padding: 0 .85rem; line-height: var(--lh-tight);
  border: 1.5px solid var(--control-border); border-radius: var(--control-radius);
  -webkit-appearance: none; appearance: none; transition: border-color .12s, box-shadow .12s;
}
textarea { height: auto; min-height: 6rem; padding: .7rem .85rem; }
input::placeholder { color: var(--placeholder); }
input:hover, select:hover { border-color: var(--control-hover); }
input:disabled, select:disabled { background: var(--fill); color: var(--muted); }
/* one dropdown arrow everywhere */
select {
  padding-right: 2.4rem; cursor: pointer;
  background-image: var(--select-arrow);
  background-repeat: no-repeat; background-position: right .9rem center;
}
/* Date and time fields, the one block (Safari on Mac and iPhone puts the value at the top of the box and ignores height for
   centring): a fixed line height, and equal top and bottom padding centre it in every browser, 36px in tables. */
input[type=date], input[type=datetime-local], input[type=time] {
  display: block; min-width: 0; line-height: var(--lh-tight);
  padding-block: calc((var(--control-h) - 3px - 1.25em) / 2);
}
td input[type=date], td input[type=datetime-local], td input[type=time] { padding-block: calc((var(--control-h-sm) - 3px - 1.25em) / 2); }
input::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.25em; }
input::-webkit-datetime-edit, input::-webkit-datetime-edit-fields-wrapper { padding: 0; line-height: var(--lh-tight); }
input::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* One checkbox (and radio): the native control, 20px, in ink. The switch for yes-or-no settings is .set-check (below). */
input:is([type=checkbox], [type=radio]) {
  width: 20px; height: 20px; padding: 0; flex: none; border-radius: var(--r-1); cursor: pointer;
  -webkit-appearance: auto; appearance: auto; accent-color: var(--ink); vertical-align: middle;
}
input[type=radio] { border-radius: 50%; }
/* Focus: the business colour inside, and an outer edge that reaches 3:1 on the theme's surfaces whatever the colour (a pale
   accent alone melts into white) */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--accent-fill), 0 0 0 4px var(--accent-text); }
/* Field errors (audit 5.2, 6): the field's edge turns --bad and the message under it starts with an icon, so it never relies on
   colour alone. The script sets aria-invalid on the field and links the message with aria-describedby. */
:is(input, select, textarea, .who-field)[aria-invalid="true"] { border-color: var(--bad); }
/* Styled dropdowns and date fields (ui.js) sit right after the hidden native field, which carries aria-invalid. */
:is(select, input)[aria-invalid="true"] + :is(.ui-select, .ui-date) { border-color: var(--bad); }
/* The who field's own input has no edge: the wrapper shows the error. */
.who-field input[aria-invalid="true"]:focus { box-shadow: none; }
:is(input, select, textarea)[aria-invalid="true"]:focus, .who-field[aria-invalid="true"]:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 30%, transparent), 0 0 0 4px var(--bad); }
.field-err { display: flex; align-items: flex-start; gap: .4rem; margin: .35rem 0 0; color: var(--bad); font-size: var(--fs-sm); font-weight: 500; }
.field-err::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-top: .05rem; border-radius: 50%;
  background: var(--bad); color: var(--surface); font-size: var(--fs-xs); font-weight: 700; line-height: var(--lh-none); }
.field-err:empty { display: none; }
button:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--accent-fill);
}
.kiosk :focus-visible, .admin .topbar :focus-visible, .sidenav :focus-visible { outline-color: var(--accent-on-chrome); box-shadow: none; }
/* the kiosk's set-up cards are page surfaces, not chrome: the page's ink ring */
.kiosk .setup :focus-visible { outline-color: var(--ink); }

/* Buttons (docs/design/2026-11-design-audit.md 5.1, 8.3): one base, the primary (ink) button, md 44px.
   .btn is the base; a bare <button> still gets it as the fallback for this release, but through :where(), so the element
   rule and its states have no weight: any class (a tile, a tab, a calendar day) wins in every state without :hover copies.
   Modifiers only state what differs: .btn-secondary, .btn-danger, .btn-small (sm 36px), .link (text). */
:where(button), .btn {
  font: inherit; font-size: var(--fs-base); font-weight: 600; line-height: var(--lh-none); border: 1.5px solid transparent;
  border-radius: var(--r-2); height: var(--control-h); padding: 0 1.15rem; cursor: pointer;
  background: var(--primary); color: var(--on-primary); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background-color var(--t-fast), border-color var(--t-fast), transform .05s;
}
:where(button:not(:disabled):hover), .btn:hover:where(:not(:disabled, [aria-disabled="true"])) { background: var(--primary-hover); }
:where(button:active), .btn:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
.btn-secondary { background: var(--field); color: var(--ink); border-color: var(--control-border); }
.btn-secondary:hover:where(:not(:disabled, [aria-disabled="true"])) { background: var(--fill); border-color: var(--control-hover); }
/* danger: --bad text, a 1.5px edge of --bad at 60% over the surface (3:1; the old pale edge was under 2:1). --danger-border is
   the same colour worked out, for browsers without color-mix(). */
.btn-danger { background: var(--field); color: var(--bad); border-color: var(--danger-border); border-color: color-mix(in srgb, var(--bad) 60%, var(--surface)); }
.btn-danger:hover:where(:not(:disabled, [aria-disabled="true"])) { background: var(--bad-soft); }
.btn-small { height: var(--control-h-sm); padding: 0 .8rem; font-size: var(--fs-sm); --busy-pad: .8rem; }
/* Text buttons (Back, Sign out on the phone page): look like links, line up like buttons */
.link { background: none; color: var(--muted); height: auto; min-height: 2.25rem; padding: .35rem .5rem; --busy-pad: .5rem; font-size: var(--fs-sm); font-weight: 500;
  border: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { color: var(--ink); }

.msg { min-height: 1.4em; margin: .6rem 0 0; font-weight: 500; font-size: var(--fs-sm); }
.msg.error { color: var(--red); }
.msg.ok { color: var(--accent); }
/* an error line says so with a glyph too, not only with its colour */
.msg.error:not(:empty)::before { content: "!"; display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; margin-right: .4em;
  border-radius: 50%; background: var(--bad); color: var(--surface); font-size: .85em; font-weight: 700; line-height: var(--lh-none); vertical-align: .05em; }

/* C4. One alert (audit 5.8): a soft tone fill, a 1px tone edge, a leading glyph that names the tone (i, ✓, !, ×: never colour
   alone), 14px text and an optional small action on the right. Tones: is-info (grey, the default), is-good, is-warn, is-bad.
   Replaces .notice, .nudge, .paybar's looks, .legal-draft and block .flag notes. Its text can be plain text and inline tags
   (scripts fill some with textContent); .has-action lays out a text block (p or span) and its button(s) side by side, wrapping
   under the text on narrow screens. The edge is a plain colour first: browsers without color-mix() keep a full-strength edge. */
.alert { position: relative; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 20px + var(--s-3));
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--fill); color: var(--ink); font-size: var(--fs-sm); font-weight: 400; line-height: var(--lh-body); }
.alert::before { content: "i"; position: absolute; left: var(--s-4); top: calc(var(--s-3) + 1px); display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--muted); color: var(--surface); font-size: var(--fs-xs); font-weight: 700; line-height: var(--lh-none); }
.alert > p { margin: 0; }
.alert.has-action { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.alert.has-action > :first-child { flex: 1 1 14rem; min-width: 0; }
.alert.has-action > :not(:first-child) { flex: none; margin-left: auto; }
.alert-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.alert:empty { display: none; }
.alert.is-good { background: var(--good-soft); border-color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.alert.is-warn { background: var(--warn-soft); border-color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.alert.is-bad { background: var(--bad-soft); border-color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.alert.is-good::before { content: "✓"; background: var(--good); }
.alert.is-warn::before { content: "!"; background: var(--warn); }
.alert.is-bad::before { content: "×"; background: var(--bad); font-size: var(--fs-base); }
/* a form's submit button under its last field (was an inline style) */
.form-submit { margin-top: var(--s-4); }
@media (forced-colors: active) { .alert { border-color: CanvasText; } .alert::before { forced-color-adjust: none; background: CanvasText; color: Canvas; } }

/* Pills and chips (docs/design/2026-11-design-audit.md 5.3, 8.3)
   .pill: a static status, count or tag: 24px, 12px/600. .has-dot adds an 8px status dot, always next to words. No tone is
   neutral; .is-good / .is-warn / .is-bad are status (never the business colour), .is-accent is identity and "needs you" counts.
   The older names keep their own size and take every colour from the tone rules below: .badge (status, 14px), .ph-stat (page
   header chips), .tag, .fm-count, .cal-count, .tab-count, and .flag, kept one release as the alias of a warn/bad pill for the
   inline notes and the block notes (<p class="flag">) until they move to the alert in pass C. */
.pill { display: inline-flex; align-items: center; gap: .35rem; min-height: 24px; padding: 0 .6rem; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-tight); vertical-align: middle; font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-sm); line-height: var(--lh-snug); }
.pill-score { min-width: 38px; justify-content: center; }
.pill.has-dot::before, .badge::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.flag { display: inline-block; border-radius: var(--r-1); padding: .15rem .5rem; font-size: var(--fs-xs); font-weight: 500; line-height: var(--lh-snug); margin: .1rem .2rem .1rem 0; }
/* tones: a soft fill and its ink, 4.5:1 or more in light and dark */
.pill, .tag, .cal-count, .ph-stat, .badge.off { background: var(--fill); color: var(--ink); }
.badge.off { color: var(--muted); }
.pill.is-good, .badge.working, .ph-stat.is-ok, .tag.is-kind { background: var(--good-soft); color: var(--good); }
.pill.is-warn, .badge.break, .ph-stat.is-warn, .fm-count, .flag { background: var(--warn-soft); color: var(--warn); }
.pill.is-warn, .fm-count, .flag { color: var(--flag-ink); } /* 12px text on the soft amber: the darker warning ink */
.pill.is-bad, .badge.danger, .ph-stat.is-bad, .flag.red { background: var(--bad-soft); color: var(--bad); }
.pill.is-accent, .tab-count { background: var(--accent-fill); color: var(--on-accent); }
@media (forced-colors: active) { .pill, .badge, .flag, .ph-stat, .tag, .fm-count, .cal-count, .tab-count { border: 1px solid CanvasText; } }
/* Forced colours drop backgrounds and shadows: the chosen segment, chip and "you are here" item keep an outline. */
@media (forced-colors: active) {
  .seg button[aria-pressed="true"], .ui-ampm button[aria-pressed="true"], :is(.chip, .chips > button, .tag-chips > button)[aria-pressed="true"],
  .admin .tabs button[aria-current], .settings-nav .set-nav-item[aria-current], .etabs button[aria-current] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* .chip: a pressable filter or toggle: 36px (44 on touch, by the touch rule), a pill with a 1.5px edge, 14px/500. A button in a
   .chips or .tag-chips group is a chip. Chosen (aria-pressed="true"): the business colour and a leading check, never colour alone. */
:is(.chip, .chips > button, .tag-chips > button) {
  height: var(--control-h-sm); padding: 0 .85rem; border: 1.5px solid var(--control-border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: 500; --busy-pad: .85rem;
}
:is(.chip, .chips > button, .tag-chips > button):hover:where(:not(:disabled, [aria-disabled="true"])) { background: var(--fill); }
:is(.chip, .chips > button, .tag-chips > button)[aria-pressed="true"] { background: var(--accent-fill); color: var(--on-accent); border-color: var(--ink); }
:is(.chip, .chips > button, .tag-chips > button)[aria-pressed="true"]:hover:where(:not(:disabled, [aria-disabled="true"])) { background: var(--accent-hover); }
:is(.chip, .chips > button, .tag-chips > button)[aria-pressed="true"]:not([aria-busy="true"])::before {
  content: ""; display: inline-block; flex: none; width: 5px; height: 10px; margin: -3px 3px 0 1px; vertical-align: middle; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ---------------- Employee clock page (phone) */
.clock .wrap { max-width: 460px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.badge-logo { width: 56px; height: 56px; display: block; flex: none; object-fit: contain; }
picture { display: contents; }
.badge-logo.sm { width: 36px; height: 36px; }
.badge-logo.big { width: clamp(84px, 11vw, 132px); height: auto; }
.brandbar { display: flex; align-items: center; gap: .7rem; padding: .4rem 0 1rem; }
.wordmark { display: flex; flex-direction: column; line-height: var(--lh-none); margin: 0; font-size: inherit; letter-spacing: 0; }
section[tabindex="-1"]:focus { outline: none; }
/* The business's own name, as the owner typed it (audit 7, D4): never retyped in capitals or a heavier weight. The product
   wordmark is only ever the outlined SVG lockup (docs/brand/final). */
.wordmark span { font-weight: 700; letter-spacing: var(--ls-head); font-size: var(--fs-md); }
.wordmark small { color: var(--muted); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-label); }
/* The segmented control (audit 5.6, 8.3), one for the whole app: a grey track; the chosen segment is raised (the raised surface,
   a 1px edge, --sh-1, ink, 700) and says so with aria-pressed. 40px in its 4px track (44 on touch, 44 in the phone header bar,
   36 in the file toolbar). .seg-inline sizes to its labels; .to-seg3 has three segments. */
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--fill); border-radius: var(--r-2); padding: 4px; gap: 4px; }
.seg button { background: transparent; color: var(--muted); height: 40px; padding: 0 .55rem; }
.seg button:hover:where(:not(:disabled, [aria-pressed="true"])) { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--seg-active); color: var(--ink); box-shadow: 0 0 0 1px var(--control-border), var(--sh-1); font-weight: 700; }
.status .hello { margin: 0 0 .75rem; min-height: 1.3em; font-size: var(--fs-lg); font-weight: 400; letter-spacing: var(--ls-head); }
.status .hello b { font-weight: 700; }
.status .since { margin: .75rem 0 .15rem; font-size: var(--fs-md); font-weight: 500; line-height: var(--lh-body); min-height: calc(var(--lh-body) * 1em); } /* one line kept while clocked out: the buttons under it never move (layout stability) */
.actions { display: grid; gap: .7rem; }
.actions button { height: 60px; font-size: var(--fs-md); border-radius: 14px; }
.actions .act-IN:hover { background: var(--yellow-hover); }
.actions .act-BREAK_START:hover, .actions .act-BREAK_END:hover { background: var(--grey-soft); }
.actions .act-IN { background: var(--yellow); color: var(--yellow-ink); }
.actions .act-OUT { background: var(--brand); }
.actions .act-BREAK_START, .actions .act-BREAK_END { background: var(--surface); color: var(--ink); border: 2px solid var(--ink); }
.punchlist { list-style: none; padding: 0; margin: 0; }
.punchlist li { display: flex; justify-content: space-between; padding: .55rem 0; border-top: 1px solid var(--line); }
.punchlist li:first-child { border-top: 0; }
.history summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; }
.history summary::-webkit-details-marker { display: none; }
.history summary h3 { margin: 0; }
.history summary h3::after { content: " ▸"; color: var(--muted); }
.history[open] summary h3::after { content: " ▾"; }
.week-totals { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .9rem 0 .4rem; }
.week-totals div { background: var(--grey-soft); border-radius: 10px; padding: .6rem .75rem; display: flex; flex-direction: column; }
.week-totals b { font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--ls-head); margin-top: .1rem; }
.shiftlist li { align-items: center; }

/* ---------------- Kiosk (device) */
.kiosk { background: var(--chrome); color: #fff; min-height: 100vh;
  /* the PIN window's scrim hides the clock-in code behind it */
  --scrim: rgba(0,0,0,.82); }
.kiosk h1, .kiosk h2, .kiosk h3 { color: #fff; }
/* Kiosk text is read from 2 to 3 m away: nothing a person reads there is under --fs-kiosk-text (24px, audit 2.5, D5) */
.kiosk h3 { font-size: var(--fs-kiosk-text); font-weight: 600; letter-spacing: 0; color: var(--on-chrome-2); }
.kiosk-brand { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.kiosk-brand h1 { margin: 0; font-weight: 700; letter-spacing: var(--ls-head); }
.kiosk main { min-height: 100vh; display: grid; grid-template-columns: 1fr minmax(320px, 46vh); grid-template-rows: 1fr auto; gap: 4vw; align-items: center; padding: 4vh 5vw; }
/* The announcement band: always part of the layout at one fixed height, so the QR code is in the same place with or without
   an announcement. Newest first; more than one take turns every 15 s with no animation (reduced motion: the newest only). */
.kiosk-band { grid-column: 1 / -1; align-self: end; height: clamp(5rem, 14vh, 9rem); margin: 0; overflow: hidden; display: flex; flex-direction: column;
  justify-content: center; gap: .2rem; padding: 0 1.2rem; border-left: 4px solid transparent; font-size: var(--fs-kiosk-text); line-height: var(--lh-snug); }
.kiosk-band.is-on { border-left-color: var(--accent-on-chrome); background: rgba(255,255,255,.06); border-radius: var(--r-2); }
.kiosk-band .kb-k { color: var(--accent-on-chrome); font-weight: 700; margin-right: .5rem; }
.kiosk-band .kb-t { margin: 0; color: #fff; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kiosk-band .kb-b { margin: 0; color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-line; overflow-wrap: anywhere; }
.kiosk-band .kb-n { color: var(--on-chrome-2); font-weight: 400; }
/* After a PIN punch: the announcements for that person, under the confirmation */
.pf-ann { text-align: left; margin: 1rem 0 0; padding: .8rem 1rem; border-left: 4px solid var(--accent-on-chrome); background: rgba(255,255,255,.06); border-radius: var(--r-2);
  font-size: var(--fs-kiosk-text); line-height: var(--lh-snug); }
.pf-ann p { margin: .2rem 0 0; white-space: pre-line; overflow-wrap: anywhere; color: #fff; }
.pf-ann .pf-ann-k { margin: 0; color: var(--accent-on-chrome); font-weight: 700; }
.pf-ann b { color: #fff; overflow-wrap: anywhere; }
.pf-ann .pf-ann-ok { display: block; margin: .6rem 0 0; min-height: 48px; min-width: 7rem; font-size: var(--fs-kiosk-text); }
.pf-ann .pf-ann-done { color: var(--on-chrome-2); margin-top: .6rem; }
.kiosk h1 { font-size: var(--fs-d2); }
.kiosk .bigtime { font-size: var(--fs-kiosk); font-weight: 700; letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; line-height: var(--lh-none); }
.kiosk .date { font-size: var(--fs-kiosk-text); color: var(--on-chrome-2); margin-top: .4rem; }
.kiosk .lead { font-size: var(--fs-kiosk-text); margin: 2.2rem 0 1.6rem; max-width: 28em; }
.kiosk .lead b { color: var(--accent-on-chrome); }
.kiosk .qrbox { background: #fff; border-radius: 24px; padding: 18px; aspect-ratio: 1; display: grid; place-items: center; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.kiosk .qrbox svg, .kiosk #qr { width: 100%; height: 100%; display: block; }
.kiosk .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); margin-top: 16px; overflow: hidden; }
.kiosk .bar > div { height: 100%; background: var(--accent-on-chrome); width: 100%; transition: width 1s linear; }
.kiosk .scan-hint { text-align: center; margin-top: .7rem; font-size: var(--fs-kiosk-text); color: var(--on-chrome-2); }
.kiosk .onshift { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.kiosk .onshift li { background: rgba(255,255,255,.12); padding: .4rem .9rem; border-radius: var(--r-3); font-size: var(--fs-kiosk-text); max-width: 100%; overflow-wrap: anywhere; } /* --r-3: a long name wraps without a blob */
.kiosk .onshift li.break { background: color-mix(in srgb, var(--accent-on-chrome) 22%, transparent); } /* the text also says "on break" */
.kiosk .setup { max-width: 520px; margin: 18vh auto; color: var(--ink); }
.kiosk .setup h2 { color: var(--ink); }
@media (max-width: 760px) { .kiosk main { grid-template-columns: 1fr; text-align: center; } .kiosk .onshift { justify-content: center; } .kiosk .lead { margin-inline: auto; } }

/* ---------------- Owner dashboard */
.admin .topbar { background: var(--chrome); color: #fff; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.admin .title { font-size: var(--fs-base); font-weight: 700; letter-spacing: var(--ls-head); display: flex; align-items: center; gap: .6rem; min-width: 0; color: #fff; }

/* Side menu: the dashboard's pages in four labeled groups */
.admin .shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.admin .mobile-bar { display: none; }
.sidenav { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--chrome); color: #fff;
  display: flex; flex-direction: column; gap: 1.2rem; padding: 1rem .75rem; scrollbar-width: thin; }
.sidenav-head { display: flex; align-items: center; gap: .5rem; padding: .2rem .4rem 0; min-height: 40px; }
.sidenav-head .truncate { white-space: normal; line-height: var(--lh-tight); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.admin .tabs { display: flex; flex-direction: column; gap: 1.15rem; }
.nav-group { display: flex; flex-direction: column; gap: .1rem; }
.nav-label { margin: 0 0 .25rem; padding: 0 .7rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--on-chrome-3); }
.admin .tabs button, .side-link {
  display: flex; align-items: center; gap: .7rem; width: 100%; height: 38px; padding: 0 .7rem; justify-content: flex-start; text-align: left;
  background: transparent; color: rgba(255,255,255,.74); border: 0; border-radius: 8px; font: inherit; font-size: var(--fs-sm); font-weight: 500;
  text-decoration: none; cursor: pointer; transform: none;
}
.admin .tabs button svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.admin .tabs button:hover, .side-link:hover { background: rgba(255,255,255,.08); color: #fff; }
/* Navigation (audit 5.6): one "you are here" signal, keyed to aria-current: weight 600 and a 3px bar on the side menu and the
   settings menu, the accent pill on the phone's bottom bar and on the settings menu's row of pills */
.admin .tabs button[aria-current] { background: rgba(255,255,255,.13); color: var(--on-chrome); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent-on-chrome); }
.admin .tabs button[aria-current] svg { opacity: 1; }
.admin .tabs .tab-count { margin-left: auto; }
.sidenav-foot { margin-top: auto; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: .1rem; }
.sidenav-foot .whoami { padding: .45rem .7rem .2rem; color: var(--on-chrome-3); font-size: var(--fs-xs); margin: 0; }
.menu-btn, .nav-close { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.22); border-radius: 10px; }
.menu-btn:hover, .nav-close:hover { background: rgba(255,255,255,.1); }
.menu-btn svg, .nav-close svg { width: 20px; height: 20px; }
.nav-close { display: none; margin-left: auto; }
.nav-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.45); }

/* Below desktop width the menu slides in from the left */
@media (max-width: 1023px) {
  .admin .shell { display: block; }
  .admin .mobile-bar { display: flex; position: sticky; top: 0; z-index: 30; align-items: center; gap: .65rem; padding: .55rem .9rem; min-width: 0; }
  .mobile-page { margin-left: auto; flex: none; font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,.75); }
  .sidenav { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(300px, 86vw); height: auto;
    transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  .sidenav.open { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0,0,0,.45); transition: transform .2s ease; }
  .nav-close { display: inline-grid; }
}
@media (prefers-reduced-motion: reduce) { .sidenav, .sidenav.open { transition: none; } }
/* Top bar: who's signed in + two matching small buttons */
.top-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex: none; }
.whoami { color: rgba(255,255,255,.65); font-size: var(--fs-sm); margin-right: .35rem; }
.admin .page { max-width: 1180px; margin: 0 auto; padding: 1.4rem 1rem 4rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; }
.toolbar > button, .toolbar > .btn { flex: none; }
.toolbar label { margin: 0 0 .35rem; }
.toolbar .field { flex: 1 1 160px; min-width: 150px; }
.card .toolbar { margin-bottom: 0; }
.toolbar .field.wide { flex: 2 1 260px; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.kpi .value { font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--ls-display); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; margin-top: .35rem; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .7rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
td { font-size: var(--fs-sm); line-height: var(--lh-snug); }
td b { font-weight: 600; color: var(--ink); }
td.r, th.r { text-align: right; }
tr.emp-row { cursor: pointer; }
tr.emp-row:hover { background: var(--row-hover); }
tr.detail > td { background: var(--row-hover); padding: 0 .6rem .8rem; }
tr.detail table td, tr.detail table th { border-bottom-color: var(--detail-line); font-size: var(--fs-sm); }
tr.total td { font-weight: 700; border-bottom: 0; }
.caret { display: inline-block; transition: transform .15s; color: var(--muted); }
tr.open .caret { transform: rotate(90deg); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
td input:not([type=checkbox]), td select { height: var(--control-h-sm); font-size: var(--fs-sm); padding-left: .65rem; }
td select { padding-right: 2.1rem; background-position: right .7rem center; }
td input[type=datetime-local] { min-width: 13.5rem; }
td select { min-width: 9rem; }
td .row { flex-wrap: nowrap; }
.inline-input { width: 7.5rem; }
td { vertical-align: middle; }
th { vertical-align: bottom; }
.login-card { max-width: 400px; margin: 12vh auto; }
/* C5. Empty state: a 32px muted icon, a one-line title, a line of help and at most one small action when the user can fix it.
   Works on a block or a table cell (the icon is the cell's ::before, so the cell stays a cell). emptyState() in admin.js
   writes the inside. */
.empty { padding: var(--s-7) var(--s-4); text-align: center; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }
.empty::before { content: ""; display: block; width: 32px; height: 32px; margin: 0 auto var(--s-2); background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1.5 2.5h5L16 13h5'/%3E%3Cpath d='M5.5 6.5 3 13v5a1.5 1.5 0 0 0 1.5 1.5h15A1.5 1.5 0 0 0 21 18v-5l-2.5-6.5A1.5 1.5 0 0 0 17.1 5.5H6.9a1.5 1.5 0 0 0-1.4 1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1.5 2.5h5L16 13h5'/%3E%3Cpath d='M5.5 6.5 3 13v5a1.5 1.5 0 0 0 1.5 1.5h15A1.5 1.5 0 0 0 21 18v-5l-2.5-6.5A1.5 1.5 0 0 0 17.1 5.5H6.9a1.5 1.5 0 0 0-1.4 1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.empty-title { display: block; color: var(--ink); font-weight: 600; }
.empty-help { display: block; max-width: 36rem; margin: var(--s-1) auto 0; }
.empty-action { margin-top: var(--s-3); }
/* The one action and, where a second way in is common, a quiet link beside it (help-copy.js EMPTY) */
.empty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.empty-actions .empty-action { margin-top: 0; }
.empty-link { min-height: 44px; }
.sched-empty { margin: var(--s-3) 0 0; }
@media (forced-colors: active) { .empty::before { background: CanvasText; } }
.log-json { font-size: var(--fs-xs); color: var(--muted); }

/* ---------------- Printing the payroll */
.print-only { display: none; }
.nowrap { white-space: nowrap; }
td.wide-text { min-width: 14rem; }
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 11pt; }
  .admin .topbar, .sidenav, .chips, .toolbar, [data-panel]:not([data-panel=pay]), .no-print, .caret, td a[data-goto] { display: none !important; }
  .print-only { display: block; }
  .admin .page { padding: 0; max-width: none; }
  .card { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  tr.detail.hidden { display: table-row !important; }   /* print every employee's days */
  tr.detail > td { background: #fff; }
  .flag { border: 1px solid #c9a227; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Screen-reader-only text */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Payroll: employee name opens their days */
.row-toggle { background: none; color: var(--ink); height: auto; padding: 0; border: 0; font-weight: 600; font-size: inherit; text-align: left; white-space: normal; }
.row-toggle:hover { text-decoration: underline; }

.remote-kiosk { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.remote-kiosk p { margin: 0 0 .6rem; }

/* Kiosk devices */
.kiosk-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0; }
.kiosk-badges .badge, .kiosk-line .badge { font-size: var(--fs-xs); padding: .15rem .55rem; }
.kiosk-summary { margin-bottom: 1rem; }
.kiosk-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .8rem 1rem; }
.kiosk-one { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: var(--fs-sm); }

/* Paid pay periods */
tr.is-locked td { opacity: .75; }

/* Pay rate cell + dialog */
/* the base button, two lines: a secondary look that starts at the left */
.rate-btn { height: auto; min-height: var(--control-h-sm); padding: .3rem .6rem; flex-direction: column; align-items: flex-start;
  gap: .05rem; background: var(--field); color: var(--ink); border-color: var(--control-border); border-radius: 8px; font-weight: 500; text-align: left; --busy-pad: .6rem; }
.rate-btn:hover { border-color: var(--control-hover); }
/* One scrim (--scrim, in the token blocks: stronger in dark mode, where .35 black barely shows). Windows opened with show()
   sit on this element, modal ones on ::backdrop (.dlg); both use the token. */
.dialog-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: calc(var(--z-dialog) - 1); }
.rate-history { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .2rem; }
.rate-history li { display: flex; justify-content: space-between; }

/* Fix my time */
.fix-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.fix-head p { margin: .2rem 0 0; }
.fix-list:empty { display: none; }
.fix-list { margin-top: .75rem; }
.fix-list li { align-items: center; gap: .75rem; }
.tab-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; margin-left: .25rem;
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; } /* colours: the accent pill */
#meal { margin-bottom: 0; }

/* Needs attention */
.attention { margin-bottom: 1rem; }
.attention h3 { margin-bottom: .5rem; }
/* Needs attention (Overview, the bell): the same alert as list rows, flat, one hairline between them; the glyph is the row's icon */
.alert-list { list-style: none; margin: 0; padding: 0; }
.alert-list .alert { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .65rem 0; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; background: none; font-size: inherit; line-height: inherit; }
.alert-list .alert::before { content: none; }
.alert-list .alert:first-child { border-top: 0; }
.alert-list .alert > div { flex: 1; min-width: 0; }
.alert-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); }
.alert.is-bad .alert-icon { background: var(--bad-soft); color: var(--bad); }
.alert.is-warn .alert-icon { background: var(--warn-soft); color: var(--warn); }
.alert.is-info .alert-icon { background: var(--fill); color: var(--muted); }
.notice-ack { margin-top: 1rem; font-weight: 400; font-size: var(--fs-sm); align-items: flex-start; }
.notice-ack input { margin-top: 2px; }

/* Notice page */
.notice-page { background: var(--bg); }
.notice-doc { max-width: 720px; margin: 0 auto; padding: 2rem 1.25rem 3rem; line-height: var(--lh-loose); }
.notice-brand { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.notice-brand img { width: 88px; height: 88px; }
.notice-brand h1 { font-size: var(--fs-lg); margin: 0; }
.notice-doc h2 { font-size: var(--fs-md); margin-top: 1.5rem; }
.notice-doc li { margin-bottom: .4rem; }
@media print { .notice-doc { padding: 0; } .notice-brand img { content: url(/logo-dark.png); } }

/* Sign-in: remember this device */
.remember-row { margin-top: 1rem; align-items: flex-start; font-weight: 500; font-size: var(--fs-sm); }
.remember-row input, .ed-active input { margin-top: 3px; }
label.ed-active { margin-top: 1rem; align-items: flex-start; font-size: var(--fs-sm); }
tr.emp-off td { color: var(--muted); }
#emp-form input:not([type=checkbox]) { width: 100%; }

/* Stores */
.store-card h3 { margin: 0 0 .15rem; }
.store-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.store-head p { margin: 0; }
.store-stats { display: flex; gap: .4rem; flex-wrap: wrap; }
.store-card .kiosk-list { margin-top: .6rem; }
.device-actions { flex-wrap: nowrap; }
.code-input { font-size: var(--fs-lg); letter-spacing: var(--ls-code); text-transform: uppercase; font-weight: 700; text-align: center; }
.ed-stores { border: 0; padding: 0; margin: 1rem 0 0; }
.ed-stores legend { font-weight: 600; font-size: var(--fs-sm); margin-bottom: .3rem; }
.ed-stores label.row { font-weight: 400; margin: .25rem 0; }
@media (max-width: 640px) { .device-actions { flex-wrap: wrap; } .store-head { flex-direction: column; } }

/* Kiosk pairing */
.kiosk .pairing { text-align: center; max-width: 560px; margin-block: 10vh; } /* 24px text: less air above, so it fits a 768px-tall screen */
.kiosk .pairing > p { font-size: var(--fs-kiosk-text); line-height: var(--lh-snug); }
.pair-code { font-size: var(--fs-kiosk); font-weight: 800; letter-spacing: var(--ls-code); margin: .6rem 0 .2rem; font-variant-numeric: tabular-nums; }
.pair-qr { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-top: 1.2rem; text-align: left; }
.pair-qr #pair-qr { width: 120px; height: 120px; background: #fff; border-radius: 10px; padding: 6px; flex: none; }
.pair-qr #pair-qr svg { width: 100%; height: 100%; display: block; }
.pair-qr p { margin: 0; flex: 1 1 0; min-width: 0; font-size: var(--fs-kiosk-text); line-height: var(--lh-snug); }
.kiosk .pairing h2 { font-size: var(--fs-kiosk-text); }

/* Company look */
.brand-custom { background: #fff; border-radius: 12px; padding: 4px; }
.brand-initials { display: grid; place-items: center; border-radius: 12px; background: var(--yellow); color: var(--yellow-ink);
  font-weight: 800; letter-spacing: var(--ls-label); aspect-ratio: 1; }
.badge-logo.brand-initials { font-size: var(--fs-lg); }
.badge-logo.sm.brand-initials { font-size: var(--fs-sm); }
.badge-logo.big.brand-initials { font-size: var(--fs-d2); }
.brand-initials.is-app { background: url(/favicon.svg) center / contain no-repeat; }
.brand-row { display: flex; align-items: center; gap: 1rem; margin: .4rem 0 .6rem; }
.brand-preview { width: 72px; height: 72px; border-radius: 14px; background: var(--grey-soft); display: grid; place-items: center;
  overflow: hidden; flex: none; border: 1px solid var(--line); }
.brand-preview img { width: 62px; height: 62px; object-fit: contain; background: #fff; border-radius: 10px; padding: 3px; }
.brand-preview span { font-weight: 800; font-size: var(--fs-lg); color: var(--yellow-ink); }
/* Settings, Business: the accent as it will look (button, shift chip, text, kiosk bar), live while picking */
.brand-sample { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .6rem; font-size: var(--fs-sm); }
.bs-btn, .bs-chip { display: inline-flex; align-items: center; background: var(--accent-fill); color: var(--on-accent); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--accent-ring); }
.bs-btn { height: var(--control-h-sm); padding: 0 1rem; border-radius: var(--r-2); }
.bs-chip { height: 24px; padding: 0 .6rem; border-radius: var(--r-1); font-size: var(--fs-xs); }
.bs-text { color: var(--accent-text); font-weight: 700; }
.bs-kiosk { display: inline-flex; align-items: center; gap: .6rem; height: var(--control-h-sm); padding: 0 .8rem; border-radius: var(--r-2);
  background: var(--chrome); color: var(--on-chrome); }
.bs-kiosk b { color: var(--accent-on-chrome); }
.bs-bar { width: 64px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.bs-bar i { display: block; width: 60%; height: 100%; background: var(--accent-on-chrome); }
input[type=color] { width: 56px; height: var(--control-h); padding: 4px; border-radius: var(--control-radius); border: 1px solid var(--control-border); background: var(--field); }
.signup-link { text-align: center; margin: 1rem 0 0; }

/* Getting started */
.checklist { margin-bottom: 1rem; }
.checklist-head { display: flex; justify-content: space-between; align-items: center; }
.checklist-head h3 { margin: 0; }
.checklist-steps { list-style: none; margin: .6rem 0 0; padding: 0; }
.checklist-steps li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.checklist-steps li > div { flex: 1; min-width: 0; }
.checklist-steps li.done b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.step-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
  background: var(--grey-soft); color: var(--muted); flex: none; }
.checklist-steps li.done .step-mark { background: var(--accent-soft); color: var(--accent); }
/* Your first week (§2.2): a thin bar for the progress; the width is a class per step, never an inline style */
.checklist-bar { height: 6px; margin-top: .5rem; border-radius: 3px; background: var(--fill); overflow: hidden; }
.checklist-bar > span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent); }
.checklist-bar.is-1 > span { width: 25%; } .checklist-bar.is-2 > span { width: 50%; }
.checklist-bar.is-3 > span { width: 75%; } .checklist-bar.is-4 > span { width: 100%; }
.checklist-acts { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; justify-content: flex-end; }
.checklist-done { margin: .6rem 0 0; }
/* Phones: the step's words keep the width; How it works and Show me go on their own line under them */
@media (max-width: 640px) {
  .checklist-steps li { flex-wrap: wrap; }
  .checklist-acts { flex-basis: 100%; justify-content: flex-start; padding-inline-start: calc(26px + .75rem); }
}

/* Forgot password, new password, confirm email (docs/design/2026-11-forgot-password.md §9): one centred card, 16px gutter on
   phones, tokens only (dark mode follows them) */
.auth-page { min-height: 100vh; padding: 0 16px 2.5rem; background: var(--bg); }
.auth-page .login-card { width: 100%; margin: 10vh auto 0; }
.auth-page .login-card + .login-card { margin-top: 1rem; }
.auth-page h2 { margin: 0 0 .5rem; font-size: var(--fs-lg); line-height: var(--lh-tight); }
.auth-page h2:focus, .auth-page [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
.auth-page h3 { margin: 0 0 .4rem; font-size: var(--fs-md); }
.auth-btn { width: 100%; margin-top: 1.1rem; }
.auth-links { margin: .9rem 0 0; text-align: center; }
.auth-box { margin-top: 1rem; padding: .8rem .9rem; border-radius: 10px; background: var(--grey-soft); font-size: var(--fs-sm); }
.auth-box p { margin: 0; }
.pw-field { position: relative; }
.pw-field input { padding-right: 4.6rem; }
.pw-field .pw-toggle { position: absolute; right: 2px; top: 0; height: var(--control-h); min-height: var(--control-h); padding: 0 .75rem; }
.auth-skel { display: grid; gap: .6rem; }
.forgot-row { margin: .1rem 0 -.6rem; text-align: right; }
.forgot-row a, .auth-links a { display: inline-flex; align-items: center; min-height: 44px; }
.menu-dot { display: inline-block; width: 8px; height: 8px; margin-left: .45rem; border-radius: 50%; background: var(--amber); }
.email-addr { overflow-wrap: anywhere; min-width: 0; }
.email-pending { flex-basis: 100%; margin: 0; }

/* Sign-up */
.signup-page { min-height: 100vh; display: grid; place-items: start center; padding: 2rem 1rem 3rem; background: var(--bg); }
.signup-card { width: min(520px, 100%); }
.signup-card h1 { font-size: var(--fs-xl); margin: 0 0 .25rem; }
.signup-steps { display: flex; gap: .4rem; margin: 1rem 0 1.2rem; }
.signup-steps span { flex: 1; height: 4px; border-radius: 4px; background: var(--grey-soft); }
.signup-steps span.on { background: var(--ink); }
.signup-card fieldset { border: 0; padding: 0; margin: 0; }
.signup-card legend { font-size: var(--fs-md); font-weight: 700; margin-bottom: .2rem; }
.signup-place { margin: .6rem 0 0; padding: .6rem .8rem; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-sm); }
.signup-nav { display: flex; gap: .6rem; margin-top: 1.2rem; }
.signup-nav button { flex: 1; }

/* Roles */
.role-manager .lead-only, .no-pay .pay-col { display: none !important; }
.role-stores { display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: center; margin-top: .6rem; }
.role-stores label.row { font-weight: 400; margin: 0; }
.invite-form { margin-top: .4rem; }
.owner-list .badge { margin-left: .35rem; vertical-align: 1px; }

/* Employees: links and import */
#imp-text { width: 100%; margin: .6rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm); }
#imp-out { margin-top: .6rem; }
.choose-job { margin-top: 1rem; }
.stack-sm { display: grid; gap: .5rem; }
.stack-sm button { width: 100%; }

/* Schedule */
.sched-week { display: flex; align-items: center; gap: .4rem; }
.sched-label { margin-left: .4rem; font-size: var(--fs-md); white-space: nowrap; }
.sched-card { padding: 0; overflow: hidden; }
.sched-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.sched { border-collapse: collapse; width: 100%; min-width: 860px; table-layout: fixed; }
table.sched th, table.sched td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: .4rem; vertical-align: top; font-size: var(--fs-sm); }
table.sched thead th { text-align: left; font-weight: 700; background: var(--surface); position: sticky; top: 0; }
table.sched thead th span { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
table.sched .sched-who { width: 150px; text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; }
table.sched th.r, table.sched td.r { width: 70px; text-align: right; border-right: 0; }
table.sched td { min-height: 56px; height: 56px; cursor: pointer; }
table.sched .today { background: color-mix(in srgb, var(--yellow) 12%, transparent); }
table.sched tr.open-row th, table.sched tr.open-row td { background: var(--grey-soft); }
table.sched tfoot td, table.sched tfoot th { font-weight: 600; cursor: default; }
table.sched tbody th, table.sched tfoot th { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
table.sched tr.open-row th { color: var(--muted); }
.chip-shift { display: block; width: 100%; min-height: 0; height: auto; padding: .3rem .4rem; margin: 0 0 .3rem; border-radius: 8px;
  background: var(--accent-fill); color: var(--on-accent); border: 1px solid transparent; font-weight: 700; font-size: var(--fs-xs); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-shift.draft { background: var(--surface); color: var(--ink); border: 1.5px dashed var(--ink); }
.chip-shift:hover:where(:not(:disabled)) { background: var(--accent-hover); }
.chip-shift.draft:hover:where(:not(:disabled)) { background: var(--fill); }
.chip-shift i { font-style: normal; margin-left: .2rem; }
.add-shift { display: block; width: 100%; min-height: 0; height: 22px; padding: 0; border: 1px dashed var(--line); background: transparent; color: var(--muted);
  border-radius: 6px; opacity: 0; font-size: var(--fs-sm); line-height: var(--lh-none); }
table.sched td:hover .add-shift, .add-shift:focus-visible { opacity: 1; }
@media (hover: none) { .add-shift { opacity: .7; } }
.away-note { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: .2rem; }
.sched-legend { padding: .7rem 1rem; margin: 0; }
.chip-demo { display: inline-block; width: 22px; height: 12px; border-radius: 4px; background: var(--yellow); vertical-align: -1px; margin-left: .6rem; }
.chip-demo.draft { background: transparent; border: 1.5px dashed var(--ink); margin-left: 0; }
.att { font-size: var(--fs-xs); margin-top: .2rem; color: var(--amber); }
.att-noshow { color: var(--red); font-weight: 600; }
.att-unscheduled { color: var(--muted); }
.att-deleted { font-weight: 600; }
.att-sum { font-size: var(--fs-xs); color: var(--amber); white-space: nowrap; }
tr.noshow td { background: var(--red-soft); }
#my-shifts li.today b { color: var(--accent); }

/* Schedule: drag and drop */
.chip-shift { cursor: grab; touch-action: pan-x pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.chip-shift.lift, .chip-shift.dragging { touch-action: none; }
.chip-shift.lift { transform: scale(1.06); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.chip-shift.dragging { opacity: .35; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; margin: 0; cursor: grabbing;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); transform-origin: top left; }
.drag-ghost.copying::after { content: '+ copy'; margin-left: .35rem; font-weight: 700; }
/* the ghost's second line: a warning about the day under it, or (first drags) how to copy. Words, never colour alone */
.drag-ghost .ghost-note { display: block; margin-top: .15rem; font-weight: 500; white-space: normal; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
body.is-dragging.is-copying, body.is-dragging.is-copying * { cursor: copy !important; }
table.sched td.drop-here { outline: 2px dashed var(--ink); outline-offset: -3px; background: color-mix(in srgb, var(--yellow) 22%, transparent); }
table.sched td.drop-warn { outline: 2px dashed var(--amber); outline-offset: -3px; }
/* The grid's keyboard focus: one cell at a time (roving tabindex), an outline only, so nothing moves */
table.sched td[data-date]:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; box-shadow: none; }
/* Quick add (docs/design/2026-11-schedule-interactions.md 3.1): fixed over the grid at 260px, so nothing reflows. Phones:
   the same list as a bottom sheet. Times are the .menu's 44px items. */
.qa-pop { position: fixed; z-index: var(--z-pop); width: 260px; min-width: 0; max-height: min(70vh, 440px); overflow: auto; }
.qa-pop[hidden] { display: none; }
.qa-title { margin: var(--s-1) .8rem var(--s-2); font-size: var(--fs-sm); font-weight: 700; }
.qa-pop > .qa-time { font-variant-numeric: tabular-nums; }
.qa-pop > .qa-time:first-of-type { font-weight: 700; }
@media (max-width: 639px) {
  .qa-pop { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 70vh; border-radius: var(--r-3) var(--r-3) 0 0;
    padding-bottom: calc(var(--s-1) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .chip-shift.lift { transform: none; }
  .drag-ghost, .qa-pop { transition: none; animation: none; }
}
/* Selecting shifts (interactions 3.3, 7.1): a ring drawn inside the chip and a check badge in its corner. No border, padding
   or margin change, so nothing moves; a draft keeps its dashed edge. Cut shifts fade and get a dotted outline (not opacity alone). */
:where(.chip-shift) { position: relative; } /* (no weight: the drag ghost stays fixed) */
.chip-shift.is-selected { box-shadow: inset 0 0 0 2px var(--ink); }
.chip-shift.is-selected::after { content: "✓"; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ink); color: var(--surface); font-size: var(--fs-xs); line-height: var(--lh-none); }
.chip-shift.pending.is-selected { box-shadow: 0 0 0 2px var(--amber), inset 0 0 0 2px var(--ink); }
.chip-shift.is-cut { opacity: .5; outline: 2px dotted var(--ink); outline-offset: -2px; }
/* The day and person headers are buttons (select that day or week) that look like the headers they were */
.sched-hbtn { display: block; width: 100%; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit;
  font: inherit; text-align: inherit; white-space: normal; cursor: pointer; }
.sched-hbtn:hover:where(:not(:disabled)) { background: none; text-decoration: underline; text-underline-offset: 3px; }
/* A day's ⋯: on hover and focus (always on touch), over the header's corner, so the header keeps its size */
.sched-dmenu { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: 6px;
  background: var(--surface); color: var(--ink); font-size: var(--fs-base); visibility: hidden; }
.sched-dmenu:hover:where(:not(:disabled)) { background: var(--grey-soft); }
table.sched thead th:hover .sched-dmenu, .sched-dmenu:focus-visible, .sched-dmenu[aria-expanded="true"] { visibility: visible; }
/* touch: the ⋯ always shows, 44px (the touch-target block at the end), in the header's corner; the day's own text keeps
   clear of it (it wraps under the ⋯ instead) */
@media (hover: none) {
  .sched-dmenu { visibility: visible; top: 0; right: 0; }
  table.sched thead .sched-hbtn { padding-right: 38px; }
}
.day-menu { position: fixed; z-index: var(--z-pop); }
/* Rubber band (mouse): a fixed rectangle over the grid that never takes a click */
.sched-band { position: fixed; z-index: var(--z-pop); pointer-events: none; border: 1.5px solid var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
body.is-banding, body.is-banding * { -webkit-user-select: none; user-select: none; }
/* The selection bar lies over the filters (interactions 5, the .fm-selbar pattern). The filters keep their room (visibility),
   so the header is the same height with or without it */
#schedule-bar { position: relative; }
.sel-bar { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; align-content: center; gap: .5rem;
  padding: inherit; background: var(--ph-bar-bg); border-radius: inherit; }
.sel-bar.hidden { display: none; }
.sel-count { font-weight: 700; margin-right: .25rem; }
.sel-acts { display: inline-flex; gap: .5rem; }
.sel-acts.hidden { display: none; }
.sel-more { display: none; }
/* Repeat's preview: one line kept free (two on phones), so the window never changes size when it fills in */
.rp-preview { min-height: 3em; margin: .75rem 0 0; }
.sel-nav { display: inline-flex; align-items: center; gap: .4rem; }
.sel-nav.hidden { display: none; }
.sel-nav > button { width: var(--control-h); padding: 0; }
.sel-nav-label { white-space: nowrap; }
#schedule-bar.has-sel > :not(.sel-bar) { visibility: hidden; }
.sched-select .sel-ico { width: 18px; height: 18px; flex: none; }
.sched-select[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.day-acts { display: flex; flex: none; gap: .4rem; }
/* The day window's tick boxes (month interactions 5): a 44px target in front of each shift, and Select all above them */
.day-pick { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -.5rem 0 -.5rem -.6rem; cursor: pointer; }
.day-pick input { margin: 0; width: 18px; height: 18px; }
#day-list .day-row { justify-content: flex-start; gap: .5rem; }
#day-list .day-what { flex: 1; min-width: 0; }
.day-pick-all { display: flex; align-items: center; gap: .5rem; min-height: 44px; margin: 0; font-weight: 600; cursor: pointer; }
.day-sel-note { min-height: 1.5em; margin: .25rem 0 0; }
.skip-list li { flex-wrap: wrap; }
.skip-list .row { flex-basis: 100%; margin: .35rem 0 0; }
.keys-table { width: 100%; }
.keys-table td { vertical-align: top; }
kbd { display: inline-block; min-width: 1.6em; padding: .05rem .35rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  background: var(--surface); font: inherit; font-size: var(--fs-xs); font-weight: 600; text-align: center; }
@media (max-width: 640px) {
  /* phones: the count on the first row, then Copy, Move, Delete and Clear on one row of 44px buttons */
  .sel-bar { gap: .4rem; }
  .sel-count { flex: 1 1 100%; margin: 0; }
  .sel-bar > .grow { display: none; }
  .sel-acts, .sel-nav { flex: 1 1 auto; }
  .sel-nav-label { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; }
  .sel-acts > button, .sel-bar > button { flex: 1 1 0; min-width: 0; height: 44px; padding: 0 .6rem; }
  #sel-repeat { display: none; }
  .sel-more { display: block; flex: none; }
  .sel-more > .ph-more-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .sel-more > .ph-menu { left: auto; right: 0; min-width: 180px; }
  .sel-acts { flex: 1 1 0; min-width: 0; } /* the actions share what Done leaves, on the same row */
  .sel-acts:not(.hidden) ~ #sel-clear { flex: none; } /* Done keeps its label whole */
  .ph-phone #schedule-bar { grid-template-columns: minmax(132px, 1fr) auto minmax(44px, max-content); }
  #schedule-bar > #sched-select { grid-area: 1 / 2; width: 44px; padding: 0; }
  #schedule-bar > #sched-fbtn { grid-area: 1 / 3; }
  .ph-phone .sched-select .sel-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* the narrowest phones (320px): the five selection buttons stay whole on one row (same 44px height, so the bar keeps its size) */
@media (max-width: 360px) {
  .sel-bar, .sel-acts { gap: .3rem; }
  .sel-acts > button, .sel-bar > button { padding: 0 .35rem; font-size: var(--fs-sm); }
}
@media (prefers-reduced-motion: reduce) { .sched-band { transition: none; } }
.show-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .show-touch { display: inline; } .hide-touch { display: none; } }

/* Shift trades */
.chip-shift.pending { box-shadow: 0 0 0 2px var(--amber); }
.trade-status { font-size: var(--fs-xs); color: var(--amber); font-weight: 600; }
.trade-list li { flex-wrap: wrap; }
.trade-actions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.trade-actions p { flex-basis: 100%; margin: 0; }
.swap-pick { width: 100%; text-align: left; height: auto; min-height: var(--control-h-sm); white-space: normal; padding: .55rem .75rem; line-height: var(--lh-snug); }

/* Team: how everyone is doing */
.org-root { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .7rem 1rem; border-radius: 12px;
  background: var(--grey-soft); width: fit-content; margin: 0 auto 1rem; text-align: center; }
.org-stores { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; position: relative; }
.org-store { border: 1px solid var(--line); border-radius: 12px; padding: .7rem; }
.org-store.focus { border-color: var(--ink); box-shadow: 0 0 0 2px var(--yellow); }
.org-store-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; width: 100%; height: auto; min-height: 0; padding: 0 0 .5rem;
  background: none; border: 0; color: var(--ink); text-align: left; font-size: var(--fs-base); }
.org-store-head .muted { flex-basis: 100%; }
.org-store-head.static { cursor: default; }
.org-people { display: flex; flex-wrap: wrap; gap: .35rem; }
/* a person in the org chart: a chip (the shape, edge and hover), flat on purpose at 32px; the dot's meaning is also in words (sr-only, title) */
.chip.org-person { height: 32px; min-height: 0; gap: .35rem; padding: 0 .6rem; }
.org-person b { font-size: var(--fs-xs); color: var(--muted); }
.org-person .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
/* Their own hover: the generic button hover paints the brand colour (near white in dark mode) behind light text. */
.org-store-head { border-radius: 8px; transition: background-color .12s; padding: .35rem .5rem .5rem; margin: -.35rem -.5rem 0; width: calc(100% + 1rem); }
.org-store-head:not(.static):hover { background: var(--grey-soft); }
.org-store-head:not(.static):hover b:first-child { text-decoration: underline; text-underline-offset: 3px; }
.org-store-head.static:hover { background: none; }
.add-shift:hover { background: var(--grey-soft); color: var(--ink); border-color: var(--control-hover); }
.th-sort:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.org-person.working .dot { background: var(--good); }
.org-person.break .dot { background: var(--warn); }
.org-person.danger .dot { background: var(--bad); }
.th-sort { background: none; border: 0; padding: 0; height: auto; min-height: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.th-sort[aria-sort="ascending"]::after { content: ' ▲'; font-size: var(--fs-xs); }
.th-sort[aria-sort="descending"]::after { content: ' ▼'; font-size: var(--fs-xs); }
/* Overtime and other numbers to look at (audit 2.5, D8): warn amber in text, always next to words that say what it is.
   Orange (--viz-2) is only the overtime series in charts, named in their legend. */
td.warn, .kpi .value.warn, .tile .value.warn, .ot { color: var(--warn); }
td.warn { font-weight: 700; }
tr.muted-row td { color: var(--muted); }
.heat-scroll { overflow-x: auto; }
table.heat { border-collapse: separate; border-spacing: 3px; font-size: var(--fs-xs); }
table.heat th { font-weight: 600; text-align: left; white-space: nowrap; padding: 0 .4rem; color: var(--muted); }
table.heat th, table.heat td { border: 0; }
table.heat tbody th { color: var(--ink); font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; padding-right: .8rem; }
table.heat thead th { text-transform: none; letter-spacing: 0; text-align: center; }
table.heat td { width: 46px; height: 30px; text-align: center; border-radius: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
table.heat .h-none { background: var(--grey-soft); color: var(--muted); font-weight: 400; }
table.heat .h1 { background: color-mix(in srgb, var(--viz-1) 12%, var(--surface)); color: var(--ink); }
table.heat .h2 { background: color-mix(in srgb, var(--viz-1) 30%, var(--surface)); color: var(--ink); }
table.heat .h3 { background: color-mix(in srgb, var(--viz-1) 50%, var(--surface)); color: var(--ink); }
table.heat .h4 { background: color-mix(in srgb, var(--viz-1) 72%, var(--surface)); color: var(--ink); }
table.heat .h5 { background: var(--viz-1); color: var(--heat-5-ink); }
.pd-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pd-head h3 { margin: 0; }
.pd-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; margin: .8rem 0 1rem; }
.pd-stats div { display: flex; flex-direction: column; padding: .5rem .6rem; border-radius: 10px; background: var(--grey-soft); }
.pd-stats b { font-size: var(--fs-md); }
table.pd-weeks { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.pd-weeks th, table.pd-weeks td { padding: .35rem .4rem; border-bottom: 1px solid var(--line); }

/* Clock in on the device (PIN) */
.pin-open { margin-top: 1rem; width: 100%; min-height: 56px; font-size: var(--fs-md); background: var(--accent-fill); color: var(--on-accent); border: 0; font-weight: 700; }
.pin-open.big { min-height: 120px; font-size: var(--fs-xl); border-radius: 18px; }
/* hover on the kiosk's own buttons: the accent ones take --accent-hover; the dark ones lighten by 6% of their text colour */
:is(.pin-open, .pf-key.ok, .pf-act.act-IN):hover:where(:not(:disabled)) { background: var(--accent-hover); }
:is(.pf-close, .pf-name, .pf-key:not(.ok), .pf-act:not(.act-IN)):hover:where(:not(:disabled)) { background-image: linear-gradient(color-mix(in srgb, currentColor 6%, transparent) 0 0); }
.pin-flow { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--scrim); display: grid; place-items: center; padding: 1rem; }
.pf-box { background: var(--k-surface); color: var(--on-chrome); width: min(720px, 100%); max-height: 100%; overflow: auto; border-radius: var(--r-4); padding: 1.4rem;
  box-shadow: var(--sh-3); }
.pf-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.pf-head h2 { margin: 0; color: #fff; font-size: var(--fs-lg); }
.pf-close { width: 52px; height: 52px; min-height: 0; border-radius: 50%; background: var(--k-key); color: var(--on-chrome); border: 0; font-size: var(--fs-lg); padding: 0; }
.pf-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; }
.pf-name { min-height: 72px; height: auto; border-radius: 14px; background: var(--k-key); color: var(--on-chrome); border: 0; font-size: var(--fs-md); font-weight: 700;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: .6rem 1rem; text-align: left; }
.pf-state { font-size: var(--fs-xs); font-weight: 600; opacity: .85; }
.pf-state.working { color: #7ee2a8; }
.pf-state.break { color: var(--accent-on-chrome); }
.pf-dots { text-align: center; font-size: var(--fs-xl); letter-spacing: var(--ls-code); min-height: 60px; margin-bottom: .6rem; color: #fff; }
.pf-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 380px; margin: 0 auto; }
.pf-key { min-height: 72px; height: auto; border-radius: 16px; background: var(--k-key); color: var(--on-chrome); border: 0; font-size: var(--fs-xl); font-weight: 700; }
.pf-key.ok { background: var(--accent-fill); color: var(--on-accent); font-size: var(--fs-lg); }
.pf-video { width: 160px; height: 120px; object-fit: cover; border-radius: 14px; display: block; margin: 0 auto 1rem; transform: scaleX(-1); background: #000; }
.pf-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; }
.pf-act { min-height: 96px; height: auto; border-radius: 18px; font-size: var(--fs-lg); font-weight: 700; border: 0; background: var(--k-key); color: var(--on-chrome); }
.pf-act.act-IN { background: var(--accent-fill); color: var(--on-accent); }
.pf-act.act-OUT { background: #fff; color: #121212; }
.pf-cam-note { color: #bbb; text-align: center; margin-top: .8rem; }
.pf-done { text-align: center; padding: 1.5rem 0; font-size: var(--fs-lg); }
.pf-done .pf-warm { margin: .5rem 0 0; color: var(--on-chrome-2); }
.pf-check { width: 96px; height: 96px; border-radius: 50%; background: #2e7d32; color: #fff; display: grid; place-items: center; font-size: var(--fs-d2); margin: 0 auto 1rem; }
.pin-flow .msg.error { color: #ff8a80; text-align: center; margin-top: .8rem; min-height: 1.2em; }

.punch-photo { display: block; width: 120px; height: auto; border-radius: 10px; margin-top: .4rem; }

/* The public website (index, pricing, features, industries, tools, legal, 404) has its own stylesheet, public/site.css, loaded
   after this one: it shares these tokens, so dashboard work and marketing work never touch the same lines (audit 7, D6). */

/* Owners */
.owner-list { list-style: none; padding: 0; margin: .5rem 0 .9rem; }
.owner-list li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.owner-list li:first-child { border-top: 0; }
.owner-list .warn { color: var(--amber); }
.invite-box { margin-top: .9rem; padding: .8rem; background: var(--grey-soft); border-radius: 10px; }
.invite-box p { margin: 0 0 .5rem; }
.row.nowrap { flex-wrap: nowrap; }
.row.nowrap input { flex: 1; min-width: 0; font-size: var(--fs-sm); }
@media (max-width: 640px) { .whoami { display: none; } }

/* Two-step sign-in */
.steps { margin: .5rem 0 .75rem; padding-left: 1.2rem; }
.steps li + li { margin-top: .25rem; }
.twofa-qr { width: 200px; max-width: 100%; padding: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; }
.twofa-qr svg { display: block; width: 100%; height: auto; }
.keytext { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm); background: var(--grey-soft); padding: .1rem .35rem; border-radius: 6px; word-break: break-all; }
.backup-codes { list-style: none; padding: 0; margin: .5rem 0 .75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.backup-codes code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-base); background: var(--grey-soft); padding: .4rem .6rem; border-radius: 8px; text-align: center; letter-spacing: var(--ls-label); }
#twofa-card .toolbar { margin-top: .5rem; }

/* Settings: find store from address */
.loc-actions { margin-top: .75rem; }
.geo-results { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .4rem; }
.geo-results:empty { display: none; }
.geo-pick { width: 100%; height: auto; min-height: var(--control-h); padding: .55rem .8rem; justify-content: space-between; text-align: left; white-space: normal; font-weight: 500; font-size: var(--fs-sm); }

/* Kiosk: grey the code out while it can't refresh */
.qrbox { position: relative; transition: opacity .2s; }
.qrbox.stale svg { opacity: .12; }
.qrbox .stale-note { display: none; position: absolute; inset: 0; place-items: center; text-align: center; color: var(--ink); font-weight: 700; font-size: var(--fs-md); padding: 1rem; }
.qrbox.stale .stale-note { display: grid; }


/* ================================================================ Safari / iOS form fixes */
button, .btn, input, select, textarea { -webkit-appearance: none; appearance: none; }
select { line-height: normal; }
/* Disabled fields: Safari fades the text too much */
input:disabled, select:disabled { -webkit-text-fill-color: var(--muted); opacity: 1; }
/* iPhone zooms the page when a field's text is under 16px. Keep fields at 16px on touch screens. */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea, td input:not([type=checkbox]), td select, .row.nowrap input { font-size: var(--fs-base); }
}

/* ================================================================ Tablets (up to 1024px) */
@media (max-width: 1024px) {
  .admin .page { padding: 1.1rem 1rem 3rem; }
  .grid2 { grid-template-columns: 1fr; }
  td input[type=datetime-local] { min-width: 12rem; }
}

/* ================================================================ Phones (up to 640px) */
@media (max-width: 640px) {
  .hide-sm { display: none !important; }
  .admin .mobile-bar .title { font-size: var(--fs-sm); }
  .admin .page { padding: .9rem .75rem 3rem; }

  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 0 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .chips button { flex: none; }
  .settings-layout .settings-nav { margin: 0 -.75rem; padding: .6rem .75rem; } /* the phone page gutter is .75rem */
  table.stack > tbody > tr > td:has(.perm-tag) { flex-wrap: wrap; justify-content: flex-end; gap: .35rem .3rem; }
  table.stack > tbody > tr > td:has(.perm-tag)::before { margin-right: auto; }
  table.stack td .perm-tag { margin: 0; }
  .toolbar { gap: .6rem; }
  .toolbar .field { flex: 1 1 calc(50% - .3rem); min-width: 0; }
  .toolbar .field.wide { flex-basis: 100%; }
  .toolbar > button, .toolbar > .btn { flex: 1 1 auto; }

  .kpis { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .kpi { padding: .8rem .9rem; }
  .kpi .value { font-size: var(--fs-lg); }

  .card { padding: 1rem; }

  /* Tables become a stack of labelled cards */
  .tablewrap.card { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; }
  table.stack, table.stack > tbody, table.stack > tbody > tr, table.stack > tbody > tr > td { display: block; width: 100%; }
  table.stack > thead { display: none; }
  table.stack > tbody > tr {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: .4rem .9rem; margin-bottom: .6rem;
  }
  table.stack > tbody > tr > td {
    border: 0; padding: .45rem 0; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; text-align: right; min-height: 2.25rem;
  }
  table.stack > tbody > tr > td + td { border-top: 1px solid var(--line); }
  table.stack > tbody > tr > td::before {
    content: attr(data-label); flex: none; text-align: left;
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--muted);
  }
  table.stack > tbody > tr > td[data-label=""]::before { display: none; }
  table.stack > tbody > tr > td.empty::before, table.stack > tbody > tr > td.empty[data-label=""]::before { content: ""; display: block; }
  table.stack > tbody > tr > td[data-label=""] { justify-content: flex-start; text-align: left; }
  table.stack > tbody > tr > td:empty { display: none; }
  table.stack > tbody > tr > td:has(> .caret) { display: none; } /* its own rule: an old browser drops only this one */
  table.stack > tbody > tr > td.empty { display: block; text-align: center; }
  table.stack > tbody > tr > td > input:not([type=checkbox]), table.stack > tbody > tr > td > select { flex: 1 1 auto; max-width: 78%; min-width: 0; }
  table.stack > tbody > tr > td.row { justify-content: flex-end; flex-wrap: wrap; }
  td input[type=datetime-local] { min-width: 0; }

  /* Payroll: name row on top, details tucked under it */
  tr.emp-row > td:nth-child(2) { font-size: var(--fs-md); }
  tr.emp-row > td:nth-child(2)::before { display: none; }
  tr.emp-row.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
  table.stack > tbody > tr.detail { background: var(--row-hover); border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding: .3rem .9rem .9rem; }
  table.stack > tbody > tr.detail.hidden { display: none; }
  table.stack > tbody > tr.detail > td { display: block; padding: 0; }
  tr.detail .row { margin-top: .75rem; }
  tr.detail .row button { width: 100%; }
  tr.total { background: var(--grey-soft) !important; }
  tr.total > td:nth-child(2) { font-size: var(--fs-md); }
  tr.total > td:nth-child(2)::before { display: none; }
  /* Days inside payroll details: lighter, no card-in-card */
  tr.detail table.stack > tbody > tr { box-shadow: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; padding: .5rem 0; background: none; }
  tr.detail table.stack > tbody > tr > td { min-height: 0; padding: .2rem 0; }
  tr.detail table.stack > tbody > tr > td + td { border-top: 0; }

  .owner-list li { align-items: flex-start; }
  .row.nowrap { flex-wrap: wrap; }
  .row.nowrap input { flex-basis: 100%; }
  .backup-codes { grid-template-columns: 1fr 1fr; }
}


/* ================================================================ Dark mode (follows the device) */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e10;
    --surface: #17171a;
    --ink: #f2f2ef;
    --muted: #a3a3a8;
    --line: #2a2a2f;
    --primary: #f2f2ef;        /* primary buttons turn light on dark */
    --on-primary: #121212;
    --primary-hover: #ffffff;
    --good: #4fd18f;
    --good-soft: rgba(79, 209, 143, .14);
    --warn: #f2b84b;
    --warn-soft: rgba(242, 184, 75, .13);
    --bad: #ff7b72;
    --bad-soft: rgba(255, 123, 114, .12);
    --fill: #232328;
    --control-border: #6c6c72;  /* 3:1 against the card */
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .25);

    --viz-1: #3987e5;
    --viz-2: #d95926;
    --chrome: #070708;
    --field: #111113;
    --placeholder: #8a8a90;     /* 5.5:1 on the field */
    --control-hover: #9a9aa0;
    --danger-border: #a2534f;
    --flag-ink: #f5c86e;
    --notice-border: #5c4516;
    --notice-ink: #f6d58e;
    --seg-active: #2c2c31;
    --row-hover: #1d1d21;
    --surface-2: #1e1e22;
    --hover: #2c2c32;
    --heat-5-ink: #0e0e10;      /* 5.30:1 on the dark --viz-1 */
    --scrim: rgba(0,0,0,.6);
    --skel: #26262a;
    --skel-hi: #303035;
    --sh-2: 0 12px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.25);
    --sh-3: 0 24px 64px rgba(0,0,0,.6);
    --detail-line: #2a2a2f;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f2f2ef' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ph-wash: 12%;
    --ph-icon-ring: rgba(255,255,255,.10);
    --ph-bar-bg: #131316;
  }
  /* top bar sits on near-black: a hairline keeps it separate from the page */
  .admin .topbar { border-bottom: 1px solid var(--line); }
  /* the badge is black: give it a light ring so it doesn't vanish on dark backgrounds */
  /* the side menu sits on near-black: a hairline keeps it separate from the page */
  .sidenav { border-right: 1px solid var(--line); }
  /* outlined break buttons on the phone page */
  .actions .act-BREAK_START, .actions .act-BREAK_END { border-color: var(--ink); }
  /* QR codes always on white, so phones can scan them */
  .twofa-qr { background: #fff; border-color: transparent; }
}

/* ================================================================ Custom dropdown + calendar (public/ui.js) */
/* The original field stays in the page for forms and code, just out of sight. */
.ui-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); }

/* The button that replaces a dropdown or date field looks exactly like a field */
.ui-select, .ui-date {
  width: 100%; height: var(--control-h); padding: 0 .85rem; justify-content: space-between; gap: .5rem;
  background: var(--field); color: var(--ink); border: 1.5px solid var(--control-border); border-radius: var(--r-2);
  font-size: var(--fs-base); font-weight: 400; text-align: left; white-space: nowrap; transform: none;
}
.ui-select:hover, .ui-date:hover { border-color: var(--control-hover); }
.ui-select[aria-expanded="true"], .ui-date[aria-expanded="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow); }
.ui-select:disabled { background: var(--grey-soft); color: var(--muted); }
.ui-select { padding-right: 2.4rem; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right .9rem center; }
.ui-select-text, .ui-date-text { overflow: hidden; text-overflow: ellipsis; }
.ui-date-text.is-placeholder { color: var(--placeholder); }
.ui-date-icon { width: 18px; height: 18px; flex: none; color: var(--muted); }
td .ui-select, td .ui-date { height: var(--control-h-sm); font-size: var(--fs-sm); padding-left: .65rem; }
td .ui-select { padding-right: 2.1rem; background-position: right .7rem center; min-width: 9rem; }
td .ui-date { min-width: 13.5rem; }

/* Floating panel shared by both */
.ui-pop {
  position: fixed; z-index: 1000; margin: 0; padding: .35rem; list-style: none;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  font-size: var(--fs-base);
}
.ui-pop:focus { outline: none; }

/* Dropdown list */
.ui-list { max-height: 300px; overflow-y: auto; }
.ui-list li { padding: .55rem .75rem; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; white-space: nowrap; }
.ui-list li.is-active { background: var(--grey-soft); }
.ui-list li[aria-selected="true"] { font-weight: 600; }
.ui-list li[aria-selected="true"]::after { content: ""; width: 14px; height: 14px; flex: none;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.ui-list li[aria-disabled="true"] { color: var(--muted); cursor: default; }

/* Calendar */
.ui-cal { width: 300px; padding: .75rem; }
.ui-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.ui-cal-title { font-weight: 700; font-size: var(--fs-base); }
.ui-cal-nav { width: 34px; height: 34px; padding: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: var(--fs-lg); line-height: var(--lh-none); border: 0; }
.ui-cal-nav:hover { background: var(--fill); }
.ui-cal-week, .ui-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.ui-cal-week span { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: .3rem 0; text-transform: uppercase; letter-spacing: var(--ls-label); }
.ui-day { height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.ui-day:hover { background: var(--fill); }
.ui-day.is-other { color: var(--placeholder); }
.ui-day.is-today { box-shadow: inset 0 0 0 1.5px var(--control-border); }
.ui-day.is-selected, .ui-day.is-selected:hover { background: var(--ink); color: var(--bg); font-weight: 700; }
.ui-day:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; box-shadow: 0 0 0 4px var(--yellow); }
.ui-time { display: flex; align-items: center; gap: .35rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.ui-time-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin-right: auto; }
.ui-time input { width: 3rem; height: 36px; padding: 0; text-align: center; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.ui-time-colon { font-weight: 700; }
.ui-ampm { display: inline-flex; margin-left: .35rem; background: var(--grey-soft); border-radius: 8px; padding: 2px; }
.ui-ampm button { height: 32px; padding: 0 .6rem; font-size: var(--fs-sm); background: transparent; color: var(--muted); border: 0; border-radius: var(--r-1); }
.ui-ampm button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.ui-cal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; }
.ui-cal-link { height: 32px; padding: 0 .5rem; background: transparent; color: var(--ink); border: 0; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.ui-cal-link:hover:where(:not(:disabled)) { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ui-cal-done { height: 34px; padding: 0 1rem; font-size: var(--fs-sm); --busy-pad: 1rem; }

@media screen and (prefers-color-scheme: dark) {
  .ui-pop { background: #1e1e22; border-color: #33333a; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
  .ui-list li.is-active, .ui-day:hover, .ui-cal-nav:hover { background: #2c2c32; }
  .ui-ampm button[aria-pressed="true"] { background: #3a3a41; }
}


/* ================================================================ Overview dashboard */
.ov-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
#tm-tiles:empty { min-height: 116px; } /* Attendance: one row of tiles' room before they arrive, so the table below doesn't drop */
.tile { display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: 1rem 1.1rem; text-align: left; }
.tile .label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--muted); }
.tile .value { font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--ls-display); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.tile .foot { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--ink); overflow-wrap: anywhere; }
.tile .delta { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
button.tile { height: auto; white-space: normal; align-items: stretch; font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
button.tile:hover { border-color: var(--control-border); }
.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ov-wide { grid-column: 1 / -1; }
.ov-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.ov-chart-head h3 { margin: 0; }
.ov-chart-head p { margin: .15rem 0 0; }
.viz-legend { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--muted); }
.viz-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.viz-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sw.viz-s1 { background: var(--viz-1); }
.sw.viz-s2 { background: var(--viz-2); }
.viz-host { position: relative; min-height: 60px; }
.viz { display: block; width: 100%; height: auto; overflow: visible; }
.viz .viz-s1 { fill: var(--viz-1); }
.viz .viz-s2 { fill: var(--viz-2); }
.viz .viz-grid { stroke: var(--line); stroke-width: 1; }
.viz .viz-base { stroke: var(--control-border); stroke-width: 1; }
.viz text { font-family: inherit; }
.viz .viz-axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz .viz-sub { font-size: 10px; }
.viz .viz-strong { fill: var(--ink); font-weight: 700; }
.viz .viz-label { fill: var(--ink); font-size: 13px; }
.viz .viz-value { fill: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.viz .viz-hit { fill: transparent; }
.viz .viz-hit.on { fill: var(--ink); fill-opacity: .045; }
.viz-tip { position: absolute; display: none; z-index: 5; pointer-events: none; min-width: 9rem; padding: .5rem .65rem;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
  font-size: var(--fs-sm); line-height: var(--lh-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
.viz-host .empty { padding: 2.5rem 1rem; }

@media (max-width: 1100px) and (min-width: 641px) {
  .ov-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov-tiles .tile:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 900px) { .ov-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ov-tiles { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .tile { padding: .8rem .9rem; }
  .tile .value { font-size: var(--fs-lg); }
  .ov-tiles .tile:last-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- settings: sections with a side menu */
.settings-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2.25rem; align-items: start; }
.settings-body { max-width: 780px; min-width: 0; }
.settings-nav { position: sticky; top: calc(var(--stuck-top, 0px) + 1rem); display: flex; flex-direction: column; gap: .15rem; }
.settings-nav .set-nav-item {
  height: var(--control-h-sm); width: 100%; justify-content: flex-start; text-align: left; padding: 0 .8rem;
  background: transparent; color: var(--muted); border: 0; border-radius: 8px; font-size: var(--fs-sm); font-weight: 500;
  box-shadow: none; transform: none;
}
.settings-nav .set-nav-item:hover { background: var(--fill); color: var(--ink); }
.settings-nav .set-nav-item[aria-current] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--ink); }
.set-sec { scroll-margin-top: calc(var(--stuck-top, 0px) + 1rem); }
.set-sec + .set-sec { margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.set-sec > .card + .card { margin-top: 1rem; }
.set-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.set-actions { display: flex; gap: .5rem; flex: none; }
@media (max-width: 640px) { .set-head { flex-wrap: wrap; } .set-actions { flex-basis: 100%; margin: -.5rem 0 1rem; } }
.set-head h3 { font-size: var(--fs-lg); outline: none; }
/* a note inside a settings card that asks for a decision (e.g. pay rules that don't match the country) */
.set-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: .35rem 0 .75rem;
  padding: .7rem .9rem; border-radius: 10px; background: var(--amber-soft); color: var(--notice-ink); border: 1px solid var(--notice-border); }
.set-note p { margin: 0; }
.set-note.hidden { display: none; }
/* "A break is due after [6] hours of work, lasting at least [20] minutes" */
.pr-meal-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.pr-meal-line label { font-weight: 400; margin: 0; }
.pr-meal-line, .pr-meal-line label { font-size: var(--fs-sm); }
.pr-pair { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.pr-meal-line input { width: 4.5rem; flex: none; }
.set-text .label { display: block; font-size: var(--fs-sm); font-weight: 600; }
#exp-warn { margin: .25rem 0 .75rem; }
.set-head p { margin: 0 0 1rem; max-width: 60ch; }
.set-sec h4 { font-size: var(--fs-md); margin: 0 0 .35rem; letter-spacing: var(--ls-head); }

/* one setting per row: what it is on the left, the control on the right */
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: .5rem 1.5rem; align-items: center;
  padding: .95rem 0; border-top: 1px solid var(--line); }
.js-settings > .set-row:first-child, .js-settings > .set-row.hidden + .set-row:not(.hidden):nth-child(2) { border-top: 0; padding-top: .15rem; }
.set-row label, label.set-row { margin: 0; }
.set-text p { margin: .2rem 0 0; }
label.set-row { cursor: pointer; font-size: var(--fs-base); font-weight: 400; }
.set-check { grid-template-columns: minmax(0, 1fr) auto; }
.set-stack { grid-template-columns: 1fr; gap: .45rem; }
.set-stack .set-ctl { max-width: 460px; }
.set-check .set-text b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.set-check .set-text .muted { display: block; margin-top: .2rem; }
.set-num { display: flex; align-items: center; gap: .6rem; }
.set-num input { width: 6.5rem; flex: none; }
.set-save { display: flex; align-items: center; gap: 1rem; padding-top: .95rem; border-top: 1px solid var(--line); }
.set-save .msg { margin: 0; min-height: 0; }
.set-pw { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.set-pw label { margin-top: .5rem; }

/* The switch (audit 5.2), the one alternative to the checkbox, for yes-or-no settings: 44 x 26. Off: a grey track, the knob on
   the left. On: an ink track, the knob on the right and a check on the track, so the state is never colour alone. */
.set-check input[type=checkbox] {
  -webkit-appearance: none; appearance: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: var(--r-pill);
  background: var(--control-border); border: 0; transition: background-color var(--t-fast);
}
.set-check input[type=checkbox]::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--t-fast);
}
.set-check input[type=checkbox]:checked { background: var(--ink); }
.set-check input[type=checkbox]:checked::before { transform: translateX(18px); }
.set-check input[type=checkbox]:checked::after { content: ''; position: absolute; top: 7px; left: 10px; width: 5px; height: 10px;
  border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.set-check input[type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }
@media (forced-colors: active) { .set-check input[type=checkbox] { -webkit-appearance: auto; appearance: auto; width: 20px; height: 20px; } .set-check input[type=checkbox]::before, .set-check input[type=checkbox]::after { display: none; } }

@media (max-width: 1279px) {
  .settings-layout { grid-template-columns: 1fr; gap: .75rem; }
  .settings-nav { top: var(--stuck-top, 0px); z-index: 5; flex-direction: row; gap: .4rem; overflow-x: auto; scrollbar-width: none;
    margin: 0 -1rem; padding: .6rem 1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav .set-nav-item { width: auto; flex: none; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); padding: 0 .9rem; }
  .settings-nav .set-nav-item[aria-current] { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-ring); box-shadow: none; }
  .set-sec { scroll-margin-top: calc(var(--stuck-top, 0px) + 4rem); }
}
@media (max-width: 600px) {
  .set-row:not(.set-check) { grid-template-columns: 1fr; }
  .set-pw { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- store map (Leaflet) */
.map-pick { height: 240px; margin-top: .75rem; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; background: var(--grey-soft); z-index: 0; }
.map-pick[hidden] { display: none; }
.map-note { margin: .45rem 0 0; }
.coords { margin-top: .6rem; }
.coords summary { cursor: pointer; color: var(--muted); width: fit-content; }
.coords summary:hover { color: var(--ink); }
.map-pick .leaflet-control-attribution { font-size: 10px; }
.map-pick .leaflet-control-zoom a { color: #121212; }
/* the pin: a round head in the shop's accent colour on a dark stem */
.map-pin span { position: absolute; left: 50%; bottom: 0; width: 22px; height: 22px; margin-left: -11px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--yellow); border: 3px solid #121212; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.map-pin { cursor: grab; }
.map-pin:active { cursor: grabbing; }
.map-ring { stroke: #121212; stroke-width: 2; fill: var(--yellow); fill-opacity: .22; }
/* other places the address search found: tap one to move the pin there */
.map-alt { stroke: #fff; stroke-width: 2; fill: #4a4a50; fill-opacity: .9; cursor: pointer; }
.map-alt:hover { fill: #121212; }
@media (max-width: 640px) { .map-pick { height: 210px; } }
@media screen and (prefers-color-scheme: dark) {
  /* darker map tiles so the map doesn't glare in dark mode */
  .map-pick .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }
  .map-pick { background: #1c1c20; }
  .map-ring { stroke: #fff; }
}

/* ---------------------------------------------------------------- employees: by store, by job */
.chips button .chip-n { margin-left: .4rem; font-weight: 700; opacity: .65; font-variant-numeric: tabular-nums; }
.emp-filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.emp-filters input[type=search] { flex: 1 1 220px; max-width: 360px; }
.emp-filters select { width: auto; flex: 0 1 200px; }
label.emp-off-toggle { margin: 0; font-weight: 500; }
.bulkbar { position: sticky; top: calc(var(--stuck-top, 0px) + .5rem); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .55rem .75rem; border-radius: var(--radius); background: var(--ink); color: var(--bg); box-shadow: var(--shadow); }
.bulkbar select { width: auto; height: var(--control-h-sm); min-height: 0; padding-top: 0; padding-bottom: 0; }
.bulkbar #bulk-clear { margin-left: auto; background: transparent; color: var(--bg); border: 1px solid currentColor; }
.emp-table .sel-col { width: 2.5rem; }
.emp-table.no-stores .store-col, .emp-table.no-jobs .job-col { display: none; }
.store-team { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: .7rem 0;
  padding: .55rem .75rem; background: var(--grey-soft); border-radius: 10px; font-size: var(--fs-sm); }
.ed-access { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.ed-access p { margin: 0 0 .5rem; }
#job-list li .row { gap: .4rem; }
@media (max-width: 640px) {
  .emp-filters input[type=search], .emp-filters select { flex: 1 1 100%; max-width: none; }
  .emp-tabs { flex-wrap: nowrap; overflow-x: auto; }
}
/* custom dropdowns are a button next to the real <select>: hide and size them together */
select.hidden + .ui-select, select[hidden] + .ui-select { display: none !important; }
.emp-filters .ui-select { width: auto; flex: 0 1 220px; }
.bulkbar .ui-select { width: auto; min-width: 11rem; height: var(--control-h-sm); background-color: var(--surface); }
.emp-table td.num { white-space: nowrap; }
@media (max-width: 640px) { .emp-filters .ui-select { flex: 1 1 100%; } }
.cell-stack { display: inline-block; }

/* Employees: the header holds every action of the page */
.add-form label { margin-top: .8rem; }
.add-form .field { margin: 0; }
/* Layout contract 1 (docs/design/2026-11-layout-stability.md): the page column is always full width (max 1180, centred).
   In the flex column next to the app bar, auto margins would shrink it to its content, so every tab and folder had its
   own width. Never wider than the screen either: wide tables scroll inside their card. */
.content-col > .page { min-width: 0; width: 100%; }

/* page headers: title + summary on the left, every action of the page on the right */
.danger-zone { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.danger-zone p { margin: 0 0 .5rem; }

/* ================================================================ Page header (one per dashboard page) */
.ph {
  container: ph / inline-size;
  position: relative; margin: 0 0 1.25rem; padding: 1.25rem 1.5rem;
  background: var(--surface);
  background: radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--yellow) var(--ph-wash), transparent) 0%, transparent 60%), var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-1);
}
/* group name + title share a row with the buttons; description and chips get the full width below */
.ph-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; }
.ph-text { display: contents; }
.ph-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--yellow); color: var(--yellow-ink); box-shadow: inset 0 0 0 1px var(--ph-icon-ring); }
.ph-back, .ph-eyebrow { grid-column: 2; grid-row: 1; align-self: end; }
.ph-title { grid-column: 2; grid-row: 2; align-self: start; }
.ph-desc { grid-column: 2 / -1; grid-row: 3; }
.ph-stats { grid-column: 2 / -1; grid-row: 4; }
.ph-icon svg { width: 26px; height: 26px; }
.ph-eyebrow { margin: 0 0 .2rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; line-height: var(--lh-snug); color: var(--muted); }
.ph-back { display: inline-flex; align-items: center; min-height: 32px; margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none; }
.ph-back:hover { text-decoration: underline; }
.ph-back:not(.hidden) + .ph-eyebrow { display: none; }
.ph-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--ls-display); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.ph-title:focus, .ph-title:focus-visible { outline: none; box-shadow: none; }
/* Layout contract 2: the description is one line on wider screens and at most two on phones (the full text is in its
   title), so every header has the same height whatever the page says */
.ph-desc { margin: .35rem 0 0; min-height: calc(var(--fs-sm) * 1.5); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .ph-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; min-height: calc(var(--fs-sm) * 3); }
}
/* A description with a link in it is never cut: a link you can't see must not take focus */
.ph-desc:has(a, button) { display: block; white-space: normal; overflow: visible; -webkit-line-clamp: unset; }

/* Layout contract 2: the chips' row keeps its space from the first paint (is-empty: there, but invisible) */
.ph-stats { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 32px; margin: .75rem 0 0; padding: 0; list-style: none; }
.ph-stats.is-empty { visibility: hidden; }
/* Narrow headers: the chips stay on one line and scroll sideways instead of wrapping into more rows (the 3px padding
   keeps their focus ring visible) */
@container ph (max-width: 640px) {
  .ph-stats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-height: 38px; padding: 3px; margin: calc(.75rem - 3px) -3px -3px; }
  .ph-stats > li { flex: none; }
}
/* Touch screens: chips that are buttons are 44px tall, and the reserved row is too */
@media (pointer: coarse) {
  .ph-stats { min-height: 44px; }
  @container ph (max-width: 640px) { .ph-stats { min-height: 50px; } }
}
.ph-stats[hidden] { display: none; }
.ph-stat { display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; padding: .3rem .8rem; border: 0; border-radius: var(--r-pill);
  font: inherit; font-size: var(--fs-sm); font-weight: 500; line-height: var(--lh-snug); white-space: nowrap; }
.ph-stat::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .55; flex: none; }
.ph-stat b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ph-stat.is-ok::before, .ph-stat.is-warn::before, .ph-stat.is-bad::before { opacity: 1; }
button.ph-stat { height: auto; cursor: pointer; transform: none; }
button.ph-stat:hover { box-shadow: inset 0 0 0 1.5px currentColor; } /* the edge is the hover: the tone's fill stays */

.ph-actions { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; margin: 0 0 0 .5rem;
  display: flex; align-items: center; gap: .5rem; }
.ph-actions > * { flex: none; }
.ph-more { position: relative; }
.ph-more > summary { list-style: none; }
.ph-more > summary::-webkit-details-marker { display: none; }
.ph-more-btn { display: inline-flex; align-items: center; gap: .45rem; height: var(--control-h); padding: 0 .95rem; cursor: pointer; user-select: none;
  background: var(--field); color: var(--ink); border: 1.5px solid var(--control-border); border-radius: var(--control-radius); font-weight: 600; line-height: var(--lh-none); }
.ph-more-btn:hover, .ph-more[open] > .ph-more-btn { background: var(--grey-soft); border-color: var(--control-hover); }
.ph-more-btn svg { width: 18px; height: 18px; }
/* C3. One menu: the page header's More, a file's ⋯ and the account menu. 44px items, 14px text, a danger item in --bad,
   an <hr> divider and a 12px note line. Each menu only adds where it opens. */
.menu { display: flex; flex-direction: column; min-width: 240px; padding: var(--s-1); background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-2); }
.menu > button, .menu > a { display: flex; align-items: center; gap: var(--s-2); justify-content: flex-start; width: 100%; height: var(--control-h);
  padding: 0 .8rem; background: transparent; color: var(--ink); border: 0; border-radius: var(--r-2); font-size: var(--fs-sm); font-weight: 500;
  text-decoration: none; transform: none; }
.menu > button:hover, .menu > a:hover, .menu > :focus-visible { background: var(--hover); }
.menu > .is-danger { color: var(--bad); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-1) 0; }
.menu-note { margin: var(--s-1) .8rem var(--s-2); color: var(--muted); font-size: var(--fs-xs); max-width: 220px; }
@media (forced-colors: active) { .menu { border-color: CanvasText; } }
.ph-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-menu); }
.role-manager .ph-more:not(:has(.ph-menu > :not(.lead-only))) { display: none; }

/* Every filter bar is at least one row of labelled fields tall: fields shown later (a second store) or a bar of chips
   alone keep the same height, so the content of every page with filters starts at the same place */
.ph-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .75rem; margin: 1.25rem -1.5rem -1.25rem; padding: .85rem 1.5rem;
  min-height: calc(1.7rem + 1px + var(--control-h) + var(--fs-sm) * 1.5 + .35rem);
  background: var(--ph-bar-bg); border-top: 1px solid var(--line); border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px); }
.ph-bar .chips { margin: 0; }
.ph-bar .field { flex: 0 1 220px; min-width: 160px; }
.ph-bar label { margin: 0 0 .35rem; }
.ph-bar .grow { flex: 1; }

@container ph (max-width: 640px) {
  .ph-actions { grid-column: 1 / -1; grid-row: 5; justify-self: stretch; margin: 1rem 0 0; flex-wrap: wrap; }
}
@container ph (max-width: 440px) {
  .ph-desc, .ph-stats { grid-column: 1 / -1; }
  .ph-desc { margin-top: .75rem; }
  .ph-icon { width: 40px; height: 40px; border-radius: 11px; }
  .ph-icon svg { width: 22px; height: 22px; }
  .ph-title { font-size: var(--fs-lg); }
  .ph-actions { flex-wrap: nowrap; }
  .ph-actions > button, .ph-actions > .btn { flex: 1 1 auto; min-width: 0; padding: 0 .85rem; overflow: hidden; text-overflow: ellipsis; }
  .ph-actions > .ph-primary { flex-grow: 2; }
  .ph-more-btn { width: var(--control-h); padding: 0; justify-content: center; }
  .ph-more-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ph-menu { left: 0; right: auto; }
}
@media (max-width: 640px) {
  .ph { padding: 1rem; margin-bottom: 1rem; }
  .ph-bar { margin: 1rem -1rem -1rem; padding: .75rem 1rem; min-height: calc(1.5rem + 1px + var(--control-h) + var(--fs-sm) * 1.5 + .35rem); }
  .ph-bar .field { flex: 1 1 calc(50% - .4rem); min-width: 0; }
}

/* Settings: group labels in its side menu, the outside link, and the arrival highlight */
.settings-nav .set-nav-label { margin: 1rem 0 .25rem; padding: 0 .8rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.settings-nav .set-nav-label:first-child { margin-top: 0; }
.settings-nav .set-nav-out { justify-content: space-between; }
.set-flash { box-shadow: 0 0 0 3px var(--yellow), var(--shadow); transition: box-shadow .25s; }
.inline-add { display: flex; gap: .5rem; align-items: center; }
.inline-add input { flex: 1; min-width: 0; }
@media (max-width: 1279px) { .settings-nav .set-nav-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .set-flash { transition: none; } }

/* empty page-level status lines take no room (dialog lines keep theirs); not display:none, they're live regions */
[data-panel] > .msg:empty { min-height: 0; margin: 0; }
/* the inline "+ New job title" row: full-height buttons next to the text box */
.inline-add > button { height: var(--control-h); flex: none; }
/* Schedule: "Published" reads as done, not as a broken grey button */
/* No fade into "Published": the button starts dark (Publish) and a fade that a background tab pauses mid-way left a blank grey box. */
#sched-publish.is-done { transition: none; }
#sched-publish.is-done:disabled { opacity: 1; background: transparent; color: var(--muted); border-color: var(--line); cursor: default; }

/* Schedule: Week | Month switch, month grid, paste mode, repeat and recent times */
.seg.seg-inline { display: inline-grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(84px, auto); }
.cal-card { padding: 0; overflow: hidden; }
.cal-dow, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow span { padding: .5rem .6rem; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--muted); border-bottom: 1px solid var(--line); }
.cal-day { min-height: 116px; min-width: 0; padding: .35rem; display: flex; flex-direction: column; gap: .2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.cal-day:nth-child(7) { border-right: 0; }
.cal-day:hover { background: var(--row-hover); }
.cal-day.is-other { background: var(--row-hover); }
.cal-day.is-other .cal-date { color: var(--muted); font-weight: 500; }
.cal-day.is-today { background: color-mix(in srgb, var(--yellow) 12%, transparent); }
.cal-date { align-self: flex-start; height: 28px; min-width: 28px; padding: 0 .45rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-size: var(--fs-sm); font-weight: 700; }
.cal-date:hover { background: var(--grey-soft); }
.cal-day.is-today .cal-date { background: var(--yellow); color: var(--yellow-ink); }
.cal-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cal-items li { font-size: var(--fs-xs); line-height: var(--lh-snug); padding: .15rem .35rem; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-shift { background: var(--yellow); color: var(--yellow-ink); font-weight: 600; }
.cal-shift.draft { background: transparent; color: var(--ink); border: 1.5px dashed var(--ink); }
.cal-more { color: var(--muted); font-weight: 600; }
.cal-count { display: none; }
/* The month's shifts and "+N more" are buttons (docs/design/2026-11-schedule-month-interactions.md 2) in the box the plain
   lines had: the li gives up its padding, the button takes it, so a day keeps its height. Focus rings and the pending ring
   show outside the button (the li no longer clips), never as a size change. */
.cal-items li.cal-li { padding: 0; overflow: visible; }
.cal-li > button { display: block; width: 100%; height: auto; min-height: 0; margin: 0; padding: .15rem .35rem; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
  line-height: inherit; text-align: start; border: 0; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal-li > .cal-shift:hover { background: var(--yellow-hover); }
.cal-li > .cal-shift.draft:hover { background: var(--grey-soft); }
.cal-li > .cal-more { background: transparent; }
.cal-li > .cal-more:hover { background: var(--grey-soft); }
.cal-li > .cal-shift { touch-action: pan-x pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cal-li > .cal-shift.lift, .cal-li > .cal-shift.dragging { touch-action: none; }
.cal-li > .cal-shift.lift { transform: scale(1.06); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.cal-li > .cal-shift.dragging { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .cal-li > .cal-shift.lift { transform: none; } }
.cal-shift.pending { box-shadow: 0 0 0 2px var(--amber); }
:where(.cal-li > button) { position: relative; }
/* Picked (as the week's chips): a ring inside and a check badge; cut ones fade with a dotted outline. No size changes. */
.cal-shift.is-selected { box-shadow: inset 0 0 0 2px var(--ink); }
.cal-shift.is-selected::after { content: "✓"; position: absolute; top: 1px; right: 2px; width: 14px; height: 14px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ink); color: var(--surface); font-size: var(--fs-xs); line-height: var(--lh-none); }
.cal-shift.pending.is-selected { box-shadow: 0 0 0 2px var(--amber), inset 0 0 0 2px var(--ink); }
.cal-shift.is-cut { opacity: .5; outline: 2px dotted var(--ink); outline-offset: -2px; }
.cal-more.is-selected { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
/* A day with picked shifts: a ring inside and a badge with how many, top right in the row of the day's number (the chips
   start under that row, so it never covers one). Phones show the star there and use the count pill instead. */
.cal-day.has-sel { box-shadow: inset 0 0 0 2px var(--ink); }
.cal-day.has-sel::after { content: "✓ " attr(data-sel); position: absolute; right: 4px; top: calc(.35rem + 3px); min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem;
  display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font-size: var(--fs-xs);
  font-weight: 700; line-height: var(--lh-none); pointer-events: none; }
/* Dropping a shift on a day: an outline drawn inside (as paste mode's hover), amber when the page knows of a problem */
.cal-day.drop-here { outline: 2px dashed var(--ink); outline-offset: -3px; background: color-mix(in srgb, var(--yellow) 22%, transparent); }
.cal-day.drop-warn { outline: 2px dashed var(--amber); outline-offset: -3px; }
/* The month's one tab stop is a day's number */
#cal-grid .cal-date:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; box-shadow: none; }
@media (max-width: 640px) {
  .cal-day { min-height: 60px; padding: .25rem; align-items: center; }
  .cal-date { align-self: center; }
  .cal-items { display: none; }
  .cal-count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; }
  .cal-day.has-off .cal-date::after { content: ""; display: block; width: 5px; height: 5px; margin: 1px auto 0; border-radius: 50%; background: var(--amber); }
  .cal-day.has-sel::after { content: none; }
  .cal-day.has-sel .cal-count { position: relative; background: var(--ink); color: transparent; border-color: var(--ink); }
  .cal-day.has-sel .cal-count::before { content: attr(data-sel); position: absolute; inset: 0; display: grid; place-items: center; color: var(--surface); }
}
.chip-off { display: block; margin: 0 0 .3rem; padding: .25rem .4rem; border-radius: 8px; border: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 600; color: var(--ink);
  background: repeating-linear-gradient(135deg, var(--grey-soft) 0 6px, transparent 6px 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-off.pending { border: 1.5px dashed var(--amber); color: var(--amber); }
body.is-pasting table.sched td[data-date], body.is-pasting .cal-day { cursor: copy; }
body.is-pasting table.sched td[data-date]:hover, body.is-pasting .cal-day:hover { outline: 2px dashed var(--ink); outline-offset: -3px; }
.sh-repeat { margin-top: 1rem; } .sh-repeat > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.sh-recent { margin: .5rem 0 0; }
.sh-repeat .chips button[aria-disabled="true"] { cursor: default; }
/* phones: Week | Month fills the row; the label sits above ‹ This week › */
@media (max-width: 640px) {
  .ph-bar .seg.seg-inline { display: grid; grid-auto-columns: 1fr; width: 100%; }
  .sched-week { display: grid; grid-template-columns: 44px 1fr 44px; gap: .4rem; width: 100%; }
  .sched-week .sched-label { grid-column: 1 / -1; grid-row: 1; margin: 0; font-size: var(--fs-md); }
  .sched-week > button { width: 100%; }
  /* Schedule: Store and Person share a row (the header stays shorter) */
  #sched-store-field, #sched-person-field { order: -1; }
}
.sh-repeat .chips { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; margin-bottom: .6rem; }
.sh-repeat .chips button { min-width: 0; padding: 0; justify-content: center; }
.sh-repeat .chips button[aria-disabled="true"] { opacity: 1; cursor: default; }
.cal-count.has-draft { background: transparent; border: 1.5px dashed var(--ink); }

/* Employee phone page: bottom tab bar (Clock · Schedule · Time off · News · Me) and tab headers */
.clock.has-tabs .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.etabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-width: 460px; margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
.etabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; height: 58px; padding: 0;
  background: transparent; color: var(--muted); border: 0; border-radius: 10px; font-size: var(--fs-xs); font-weight: 500; transform: none; }
.etabs button[hidden] { display: none; }
.etabs button:hover { background: transparent; color: var(--ink); }
.etabs .ei { display: grid; place-items: center; width: 48px; height: 28px; border-radius: 999px; }
.etabs svg { width: 22px; height: 22px; }
.etabs button[aria-current] { color: var(--ink); font-weight: 600; }
.etabs button[aria-current] .ei { background: var(--accent-fill); color: var(--on-accent); }
.etabs .tab-count { position: absolute; top: 2px; left: calc(50% + 10px); margin: 0; }
/* C6. The phone tab header: the dashboard header's anatomy (.ph: eyebrow, title, one-line description, back link) at 22px,
   on the same card with the same accent glow; a plain surface first for browsers without color-mix() */
.eh { position: relative; background: var(--surface); background: radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--yellow) var(--ph-wash), transparent) 0%, transparent 60%), var(--surface); }
.eh:focus:not(:focus-visible), .eh-title:focus:not(:focus-visible) { outline: none; box-shadow: var(--sh-1); }
.eh-title:focus:not(:focus-visible) { box-shadow: none; }
.eh-title[tabindex="-1"]:focus { outline: none; } /* moved here by script when a tab opens: not something you press */
.eh-eyebrow { margin: 0 0 .2rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; line-height: var(--lh-snug); color: var(--muted); }
.eh-eyebrow:empty { display: none; }
.eh-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--ls-display); overflow-wrap: anywhere; }
.eh-desc { margin: .35rem 0 0; min-height: calc(var(--fs-sm) * 1.5); font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); } /* filled in later: the line is kept */
.e-dl { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: .4rem 1rem; margin: .5rem 0 0; font-size: var(--fs-sm); }
.e-dl + .muted { margin-top: .75rem; }
.e-dl dd .muted { font-weight: 400; }
.e-dl dt { color: var(--muted); } .e-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.e-view .msg:empty { min-height: 0; margin: 0; }
/* The punch confirmation keeps two lines from the first paint (the facts, then Cronta's warm line under them), so nothing
   jumps when it fills; longer text grows downwards, never into the buttons above (docs/design/2026-11-friendly-messages.md D) */
.e-view #punch-msg { min-height: calc(2 * var(--lh-body) * 1em); margin: .6rem 0 0; line-height: var(--lh-body); }
.punch-warm { display: block; font-weight: 400; color: var(--ink); }
/* The welcome above the sign-in form (Settings › Messages, or Cronta's): one quiet line, set before the card shows */
.auth-welcome { margin: 0 0 1rem; font-size: var(--fs-md); font-weight: 500; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.auth-welcome[hidden] { display: none; }

/* Settings › Messages: one row per message (title, status, the line), the edit window with its counter and live preview */
.msgk-list li { align-items: flex-start; }
.msgk-main { min-width: 0; }
.msgk-top { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.msgk-top .msgk-chip { margin: 0; padding: .1rem .6rem; font-size: var(--fs-xs); border: 1px solid var(--line); }
.msgk-chip::before { content: none; }
.msgk-chip.is-own { color: var(--ink); }
.msgk-chip.is-own::before { content: ""; width: .45rem; height: .45rem; }
.msgk-quote { margin: .3rem 0 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.msgk-quote.is-builtin { color: var(--muted); }
#md-text { resize: vertical; min-height: 5.5rem; line-height: var(--lh-body); }
.md-sub { margin: 0 0 .25rem; }
.md-under { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem .75rem; margin-top: .5rem; }
.md-ins { margin: 0; }
.md-ins > button { min-height: 44px; }
.md-count { margin: 0 0 0 auto; color: var(--muted); }
.md-count.is-near { color: var(--notice-ink); font-weight: 600; }
.md-count.is-over { color: var(--bad); font-weight: 600; }
.md-plabel { margin: 1rem 0 .4rem; }
.md-phone { border: 1px solid var(--line); border-radius: 18px; padding: 1rem; background: var(--bg); min-height: 6.5rem; overflow-wrap: anywhere; }
.md-phone .md-punch { margin: 0; line-height: var(--lh-body); }
.md-phone.is-faded .punch-warm, .md-phone.is-faded .auth-welcome { color: var(--muted); }
.md-brand { margin: 0 0 .6rem; font-weight: 700; }
.md-phone .auth-welcome { margin-bottom: .75rem; }
.md-fields { display: grid; gap: .45rem; }
.md-fields span { height: 2.1rem; border-radius: var(--r-2); background: var(--fill); }
.md-fields .md-btn { display: flex; align-items: center; justify-content: center; background: var(--accent-fill); color: var(--on-accent); font-size: var(--fs-sm); font-weight: 600; }
.md-note { margin: .4rem 0 0; }
.mp-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1rem; }
#punch-notes:empty, #todo-card.hidden { display: none; }
/* Announcements (docs/design/2026-11-features.md §5a, friendly-messages D): neutral cards with --ink and --muted text; the
   marigold is only a 4px bar (never text on a light surface), and the word "Announcement" says what it is. The message keeps
   its line breaks. On the Clock tab it sits under the punch area, so it never moves the clock buttons. */
.news-card { border-left: 4px solid var(--yellow); }
.news-card:not(.is-unread) { border-left-color: var(--line); }
.news-meta { margin: 0 0 .3rem; font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.news-kicker { color: var(--ink); font-weight: 700; }
.news-title { margin: 0 0 .35rem; overflow-wrap: anywhere; }
.news-body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--ink); }
.news-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .75rem; }
.news-foot :is(.news-ack, .link) { min-height: 44px; min-width: 44px; }
.news-foot .news-ack { width: auto; flex: none; }
.news-done { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.news-done:focus { outline: none; }
.news-done:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#punch-notes .news-punch { margin: .6rem 0 0; }
.e-news-empty { margin: 0; }
/* Dashboard: the announcement pop-up and list */
.ann-when { border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
.ann-when legend { padding: 0; font-weight: 600; margin-bottom: .25rem; }
.ann-when .row { min-height: 44px; }
.ann-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 .75rem; margin-top: .5rem; }
.ann-acts { display: flex; gap: .5rem; margin-left: auto; }
/* My shifts and pickups: day on the left, times and the action right-aligned */
.shiftlist li > span:nth-of-type(2) { text-align: right; }
.shiftlist li > span:nth-of-type(2) .link { display: inline-flex; min-height: 44px; align-items: center; }
#pickups li > span:nth-of-type(2) .btn-small { margin-top: .35rem; }
@media screen and (prefers-color-scheme: dark) { .etabs { box-shadow: 0 -4px 16px rgba(0,0,0,.4); } }

/* Time off: dashboard page, settings and the employee tab */
.to-list li { flex-wrap: wrap; align-items: flex-start; }
.to-list li > div:first-child { flex: 1 1 260px; min-width: 0; }
.to-list .flag { margin-top: .35rem; }
.to-radios { border: 0; padding: 0; margin: .75rem 0 0; display: grid; gap: .5rem; }
.to-radios label { align-items: flex-start; gap: .55rem; font-weight: 400; }
.to-radios input[type=radio] { margin-top: .1rem; }
.to-q { margin: .9rem 0 .4rem; font-weight: 600; }
.to-seg { margin-bottom: .5rem; }
#tad-part, #tad-half { display: grid; width: 100%; }
.to-over { color: var(--red); font-weight: 600; }
.to-bal-btn { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.to-closed { margin: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; overflow: visible; }
.to-closed button { min-width: 0; padding: 0; justify-content: center; }
/* the 7-up day toggles: too narrow for a leading check, so it sits small in the corner (the day name keeps the middle) */
:is(.to-closed, .sh-repeat .chips) button { position: relative; }
:is(.to-closed, .sh-repeat .chips) button[aria-pressed="true"]:not([aria-busy="true"])::before { position: absolute; top: 3px; left: calc(50% - 2px); width: 4px; height: 7px; margin: 0; border-width: 0 1.5px 1.5px 0; }
#tt-days-wrap { margin: .25rem 0 .5rem 1.6rem; }
.tt-hint { margin: -.25rem 0 .5rem 1.6rem; }
#tt-days-wrap input { max-width: 7rem; }
table.sched td .chip-off { margin-bottom: .25rem; }
.e-balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; }
.e-balances.hidden { display: none; }
.e-balances .tile { margin: 0; }
.to-seg3 { grid-template-columns: repeat(3, 1fr); margin-bottom: .5rem; }
#to-half { margin-bottom: .5rem; }
#to-conflict[hidden] { display: none; }
#to-conflict { display: block; margin: .5rem 0 0; padding: .5rem .65rem; font-size: var(--fs-sm); }
.to-mine li { gap: .75rem; flex-wrap: nowrap; }
.to-mine li > span:first-child { flex: 1; min-width: 0; }
.to-mine .to-side { text-align: right; flex: none; }
.to-mine .to-side .link { display: inline-flex; min-height: 44px; align-items: center; }
.to-mine li.is-new { background: color-mix(in srgb, var(--yellow) 14%, transparent); margin: 0 -.6rem; padding-left: .6rem; padding-right: .6rem; border-radius: 8px; }

/* A page's own message (saved, approved…): a quiet box instead of loose text */
/* (the alert's good and bad tones; the error line keeps its glyph) */
[data-panel] > .msg:not(:empty) { margin: 0; padding: .65rem .9rem; border-radius: var(--r-2); border: 1px solid var(--good);
  border-color: color-mix(in srgb, var(--good) 40%, transparent); background: var(--good-soft); color: var(--ink); }
[data-panel] > .msg.error:not(:empty) { border-color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: var(--bad-soft); }
.tile .foot.muted { color: var(--muted); }
/* Time off on phones: a list instead of the table; calendar dots (grey: off, amber ring: waiting) */
.to-all-list { display: none; }
.to-all-list li > div { min-width: 0; }
.to-legend-phone { display: none; }
#ov-off .ov-chart-head { align-items: flex-start; }
#ov-off-list li .badge { flex: none; }
@media (max-width: 640px) {
  .to-all-list { display: block; }
  .to-all-table { display: none; }
  .to-legend-phone { display: block; }
  #to-cal-empty.to-legend-wide { display: none; }
  #to-calendar .cal-day.has-off .cal-date::after { background: var(--muted); }
  .cal-day.has-pending .cal-date::after { content: ""; display: block; margin: 1px auto 0; border-radius: 50%; background: transparent; border: 1.5px solid var(--amber); width: 6px; height: 6px; }
}
.to-when { white-space: nowrap; }
/* Birthday: Month and Day selects side by side, at every width */
.row.bday-pick { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .6rem; margin: .3rem 0 .4rem; }
.row.bday-pick select { width: 100%; min-width: 0; }
#me-bday label.row { margin: .6rem 0; min-height: 44px; align-items: flex-start; gap: .6rem; } /* top-aligned: the label has a hint under it */
#bd-celebrate { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.bd-hint { display: block; font-weight: 400; }
/* Celebrations on the schedule: a small pill with a star */
.cel-note, .cal-cel { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .4rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink); background: color-mix(in srgb, var(--yellow) 18%, var(--surface)); margin-bottom: .2rem; }
.cel-note::before, .cal-cel::before { content: "★"; color: var(--muted); }
.cal-items li.cal-cel { align-self: flex-start; max-width: 100%; border-radius: 999px; padding: .1rem .4rem; }
.cal-day { position: relative; }
@media (max-width: 640px) {
  .cal-day.has-cel::before { content: "★"; position: absolute; top: 3px; right: 5px; font-size: var(--fs-xs); line-height: var(--lh-none); color: var(--muted); }
}
.day-cel { color: var(--muted); }
/* Overview: Who's off and Celebrations side by side; a card on its own spans the row */
#ov-off.hidden + #ov-cel { grid-column: 1 / -1; }
#ov-off:has(+ #ov-cel.hidden) { grid-column: 1 / -1; }

/* ================================================================ Documents */
.docs-table tr.is-new td { font-weight: 600; }
.docs-table td.r .link { margin-right: .5rem; }
.docs-more { padding: .9rem 0 .2rem; text-align: center; }
.chip-x { align-self: flex-end; height: var(--control-h-sm); padding: 0 .85rem; border-radius: var(--r-pill); background: var(--accent-fill); color: var(--on-accent);
  border: 1.5px solid var(--ink); font-size: var(--fs-sm); font-weight: 500; }
.chip-x:hover:where(:not(:disabled)) { background: var(--accent-hover); }
.du-people { max-height: 220px; overflow: auto; margin-top: .5rem; padding: .2rem .7rem; border: 1px solid var(--line); border-radius: 10px; }
.du-people label { margin: .4rem 0; }
.doc-who { margin: .5rem 0 .2rem; color: var(--ink); font-weight: 500; }
.doc-who:empty { display: none; }
#du-one-hint { margin: -.2rem 0 .2rem; }
#du-file-msg:empty { display: none; }
#dr-sub { margin: -.3rem 0 .8rem; }
.bulkbar #bulk-doc { background: var(--yellow); color: var(--yellow-ink); border: 0; }
#docs-bar .field { flex-basis: 170px; }
.dd-open { gap: .5rem; margin: .4rem 0 .6rem; }
.dd-act-h { margin: 1rem 0 0; }
.dd-activity { max-height: 220px; overflow: auto; }
.docs-cats label { margin: .45rem 0; align-items: flex-start; }
.docs-meter { height: 10px; margin: .4rem 0 .6rem; border-radius: 999px; background: var(--grey-soft); overflow: hidden; }
.docs-meter span { display: block; height: 100%; width: 0; background: var(--ink); border-radius: inherit; }
.docs-meter.is-full span { background: var(--red); }
.ed-docs { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }

/* Phone: My documents (Me tab card and the full #docs view) */
.doc-list { list-style: none; margin: .4rem 0 .8rem; padding: 0; }
.doc-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: .3rem .7rem; min-height: 56px; padding: .5rem 0; border-top: 1px solid var(--line); }
.doc-item:first-child { border-top: 0; }
.doc-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--grey-soft); color: var(--ink); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-label); }
.doc-main { display: flex; flex-direction: column; min-width: 0; color: var(--ink); text-decoration: none; }
.doc-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-main:hover b { text-decoration: underline; }
.doc-item.is-new .doc-main b::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: .4rem; border-radius: 50%; background: var(--ink); vertical-align: middle; }
.doc-item .doc-ack { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.doc-item .doc-ack .btn-small { min-height: 44px; padding: 0 1rem; }
.doc-side { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.doc-year { margin: 1rem 0 .1rem; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
#me-docs .row h3 { flex: 1; }
#me-docs-all { min-height: 44px; display: inline-flex; align-items: center; }
.doc-ack .msg { margin: 0; flex-basis: 100%; }
.eh-back { display: inline-block; margin-bottom: .4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none; }
.eh-back:hover { text-decoration: underline; }

/* Upload payslips (#payslip-dialog): choose, check, send */
#payslip-dialog { width: min(980px, calc(100vw - 2rem)); }
.steps { display: flex; gap: 1rem; margin: 0 0 1rem; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--muted); }
.steps li[aria-current="step"] { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--ink); }
.drop-zone { display: grid; place-items: center; min-height: 140px; margin: .8rem 0 .4rem; padding: 1rem; border: 2px dashed var(--line); border-radius: var(--radius); text-align: center; color: var(--muted); cursor: pointer; line-height: var(--lh-body); }
.drop-zone b { color: var(--ink); }
.drop-zone .ps-choose { margin-top: .6rem; }
.drop-zone.is-over, .drop-zone:hover { border-color: var(--ink); background: var(--grey-soft); color: var(--ink); }
#ps-step1:has(#ps-file:focus-visible) .drop-zone { outline: 2px solid var(--ink); outline-offset: 2px; }
.match-layout { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .match-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, 42%); align-items: start; } }
.match-preview { position: sticky; top: 0; }
.ps-canvas-box { max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.match-preview canvas { display: block; width: 100%; height: auto; background: #fff; }
.ps-canvas-box.is-zoom canvas { width: 200%; max-width: none; }
.ps-prev-head { align-items: center; gap: .5rem; margin-bottom: .3rem; }
.ps-prev-head p { margin: 0; }
.match-table td { vertical-align: top; }
.match-table select { min-width: 12rem; margin: 0; }
.match-table .ps-flags { margin-top: .3rem; }
.match-table tr.is-bad td { background: color-mix(in srgb, var(--red) 8%, transparent); }
.match-table tr.is-skip td { opacity: .55; }
.match-table tr.is-skip td:last-child { opacity: 1; }
.match-table tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--ink); }
.match-table .ps-acts { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.ps-replace.to-radios { border: 1px solid var(--line); border-radius: var(--radius); margin: .3rem 0 .8rem; padding: .6rem .8rem; }
.upl-progress { width: 100%; height: 10px; accent-color: var(--ink); }
@media (max-width: 640px) {
  .match-table select { min-width: 0; width: 100%; }
  .match-table .ps-acts { justify-content: flex-start; }
  .match-table .ps-acts .btn-small { min-height: 44px; }
  .match-preview { position: static; }
}
.ps-pager { align-items: center; gap: .5rem; margin-top: .4rem; } .ps-pager span { text-align: center; }
.ps-bad { color: var(--red); }
#ps-scanned:empty { display: none; }
.match-table .badge { white-space: nowrap; }
@media (max-width: 640px) {
  .match-table td[data-label="How we found them"], .match-table td[data-label="Person"] { display: block; }
  .match-table td[data-label="Person"] select { margin-top: .3rem; }
  .match-table td[data-label="How we found them"] .muted { margin-top: .3rem; text-align: left; }
}
.match-table tr.is-check td { background: color-mix(in srgb, var(--amber) 10%, transparent); }
.ps-warn { background: var(--amber-soft); color: var(--flag-ink); border-radius: 8px; padding: .45rem .7rem; }
.ps-actions { position: sticky; bottom: 0; z-index: 1; background: var(--surface); padding-block: .6rem; border-top: 1px solid var(--line); }
.ps-actions .msg { margin: 0 0 .4rem; }
.ps-actions .msg:empty { display: none; }
#ps-send.is-disabled { opacity: .55; }
.ps-undo { display: inline-flex; align-items: center; min-height: 44px; }
.ps-prev-back { margin-top: .4rem; }
@media (max-width: 640px) {
  .match-table select { min-height: 44px; height: 44px; }
}
@media (min-width: 641px) {
  .match-table td:last-child { width: 8.5rem; }
  .match-table .ps-acts { flex-direction: column; align-items: stretch; }
  .match-table .ps-acts .btn-small { white-space: normal; height: auto; min-height: var(--control-h-sm); line-height: var(--lh-tight); padding-block: .35rem; }
}
#payslip-dialog .ps-actions { bottom: -1.1rem; padding-bottom: 1.1rem; margin-bottom: -1.1rem; }

/* Documents 8c/8d: notes on time off requests, files added from the phone, people who left */
a.to-note { margin: .2rem .3rem .1rem 0; text-decoration: none; gap: .3rem; }
a.to-note .badge { margin: 0; }
.ed-docs-access { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .55rem .8rem; border-radius: var(--radius);
  border: 1px solid var(--notice-border); background: var(--amber-soft); color: var(--notice-ink); }
.ed-docs-access:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
#doc-add-form .doc-who { margin-top: .8rem; }
.da-file-label { margin: .9rem 0 .3rem; font-weight: 600; font-size: var(--fs-sm); }
.da-pick { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; cursor: pointer; }
.da-pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#doc-add-form:has(#da-file:focus-visible) .da-pick { outline: 2px solid var(--ink); outline-offset: 2px; }
#doc-add-form:has(#da-file[aria-invalid="true"]) .da-pick { border-color: var(--bad); }
.da-file-name { margin: .4rem 0 0; overflow-wrap: anywhere; }
#docs-leaver { font-weight: 500; }
#docs-msg:focus { outline: none; }
.stack > #docs-leaver.hidden + * { margin-top: 0; } /* hidden banner: the header stays at the top */

/* Me: header with initials, name, job and stores, and Sign out */
.me-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: .9rem; align-items: center; }
.me-head > .eh-help { align-self: start; }
.me-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--yellow); color: var(--yellow-ink); font-weight: 700; font-size: var(--fs-md); box-shadow: inset 0 0 0 1px var(--ph-icon-ring); }
.me-who { min-width: 0; }
.me-head .eh-title { overflow-wrap: anywhere; }
.me-signout { align-self: start; }
.me-side { margin-top: 1rem; }
/* The phone app's "?" (§2.6): the dashboard's 44px button; on Time off it sits in the header's corner, the title keeps clear of it */
[data-view="timeoff"] .eh > .eh-help { position: absolute; top: .75rem; inset-inline-end: .75rem; }
[data-view="timeoff"] .eh .eh-title, [data-view="timeoff"] .eh .eh-eyebrow { padding-inline-end: 52px; }
.clock-help { margin: 0; text-align: center; }
.clock-help .link { min-height: 44px; }
/* Leaver: Sign out sits in the My documents header */
.docs-head-row { align-items: flex-start; }
.docs-head-row .eh-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Document rows: icon | text. Badges sit under the title, and the title wraps to 2 lines. */
.doc-item { grid-template-columns: 40px minmax(0, 1fr); align-items: start; }
.doc-ico { align-self: start; }                                  /* no row span: empty rows would add gaps */
.doc-main b { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.doc-item.is-new .doc-main b::after { content: none; }           /* the "New" badge says it */
.doc-side { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3rem; }
.doc-side:empty { display: none; }
.doc-side .badge { font-size: var(--fs-xs); padding: .1rem .5rem; }
.doc-side .flag { margin: 0; }
.doc-item .doc-ack { grid-column: 2; flex-wrap: nowrap; margin-top: .15rem; }
.doc-item .doc-ack .muted { line-height: var(--lh-snug); }
.doc-done { color: var(--accent); font-weight: 500; }
#me-docs .row { align-items: center; gap: .5rem; }
/* Me › Email notices: the title, one button and the ⋯ menu in the card's header row (docs/design/2026-11-worker-emails.md §4) */
.mail-head { align-items: center; gap: .5rem; margin-bottom: .35rem; }
.mail-head h3 { flex: 1; margin: 0; }
.mail-more > .ph-more-btn { width: var(--control-h-sm); height: var(--control-h-sm); padding: 0; justify-content: center; }
.mail-more > .ph-menu { min-width: 220px; }
.mail-choose > .set-row:first-of-type { border-top: 0; }
.mail-choose .link { margin-top: .5rem; }
/* Settings › Emails about your team: one line per email, its state as text (On / Off) */
.notify-list { list-style: none; margin: 0; padding: 0; }
.notify-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; border-top: 1px solid var(--line); }
.notify-list li:first-child { border-top: 0; }
.tm-told { align-items: center; gap: .5rem; margin: .75rem 0; }
#me-docs .row .flag { margin: 0; }
#me-docs-all { margin-left: auto; }
#doc-add-go { margin-top: .25rem; }

/* Privacy links: full-width rows, 44px tall */
.me-links { list-style: none; margin: .25rem 0 0; padding: 0; }
.me-links li + li { border-top: 1px solid var(--line); }
.me-links a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: .45rem 0;
  font-size: var(--fs-sm); font-weight: 600; }
.me-links a { text-decoration: none; color: var(--ink); }
.me-links .me-link-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--control-border); }
.me-links a:hover .me-link-t { text-decoration-color: currentColor; }
.me-links a .muted { font-weight: 400; }

/* Tablet: a wider single column (the sign-in screens keep their narrow form) */
@media (min-width: 641px) {
  body.clock.has-tabs .wrap, body.clock.docs-only .wrap, .etabs { max-width: 640px; }
  #doc-add-go { width: auto !important; }                         /* overrides the inline width:100% */
}

/* PC: side menu instead of the bottom bar, and 2 columns on Me */
@media (min-width: 1024px) {
  body.clock.has-tabs { display: grid; grid-template-columns: 208px minmax(0, 880px); justify-content: center; column-gap: 1.5rem; padding: 0 1.5rem; }
  body.clock.has-tabs .wrap { grid-column: 2; grid-row: 1; max-width: none; margin: 0; padding: 1rem 0 3rem; }
  body.clock.has-tabs .etabs { grid-column: 1; grid-row: 1; position: sticky; top: 1rem; bottom: auto; align-self: start;
    margin: calc(2.4rem + 56px) 0 0;                              /* level with the first card, under the brand bar; no auto centring */
    max-width: none; grid-auto-flow: row; grid-auto-columns: auto; gap: .15rem; padding: .5rem;
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
  .etabs button { flex-direction: row; justify-content: flex-start; gap: .55rem; height: var(--control-h); padding: 0 .6rem 0 .2rem; font-size: var(--fs-sm); }
  .etabs button:hover { background: var(--grey-soft); }
  .etabs .ei { width: 40px; height: 30px; }
  .etabs .tab-count { position: static; margin-left: auto; }
  body.clock.has-tabs .e-view:not([data-view="me"]) { max-width: 640px; }
  .me-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
  .me-side { margin-top: 0; }
}

/* Employee Schedule: a Week | Month calendar of my shifts, a sheet per day, and "Add to my calendar" */
.ms-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.ms-title .eh-title { margin: 0; margin-inline-end: auto; }
/* the "?" stays on the title's line; on phones the calendar button wraps to its own row under them */
.ms-title > .eh-help { order: 1; flex: none; }
.ms-title > #ms-sub-open { order: 2; }
.ms-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .75rem; }
.ms-sum { margin: .5rem 0 0; min-height: calc(var(--fs-sm) * 1.5); } /* its line is kept while the shifts load */
#ms-nav .is-disabled { opacity: .45; cursor: not-allowed; }
.ms-week { padding: 0; overflow: hidden; }
.ms-day { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .25rem .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.ms-day:last-child { border-bottom: 0; }
.ms-day.is-today { background: color-mix(in srgb, var(--yellow) 12%, transparent); }
.ms-dname { margin: 0; font-size: var(--fs-sm); } .ms-dname span { display: block; color: var(--muted); font-weight: 500; }
.ms-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.ms-off { min-height: 2.25rem; display: inline-flex; align-items: center; }
.ms-more { padding-left: 0; }
.ms-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; min-width: 0; width: 100%; }
.ms-items button { width: 100%; min-height: 44px; justify-content: flex-start; text-align: left; border-radius: 8px; font-size: var(--fs-sm); }
.ms-chip { height: auto; padding: .35rem .6rem; margin: 0; white-space: normal; line-height: var(--lh-snug); font-weight: 600; border: 1.5px solid transparent; }
.ms-chip.cal-shift:hover { background: var(--yellow-hover); }
.ms-chip.cal-shift.draft:hover, .ms-chip.cal-open:hover, .ms-chip.cal-closed:hover, .ms-chip.cal-cel:hover { background: var(--grey-soft); }
.ms-chip.chip-off { display: flex; margin: 0; border: 1px solid var(--line); }
.ms-chip.chip-off.pending { border: 1.5px dashed var(--amber); }
.ms-chip.chip-off:hover { border-color: var(--control-hover); }
.ms-chip.cal-cel { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; }
.cal-open { background: transparent; color: var(--accent); border: 1.5px dashed var(--accent); font-weight: 600; }
.cal-closed { background: transparent; color: var(--muted); font-style: italic; font-weight: 500; border: 1px solid var(--line); }
.cal-items li.cal-closed { border: 0; }
.ms-legend { margin: 0 .25rem; line-height: var(--lh-loose); }
.ms-lg { white-space: nowrap; }
.ms-legend-m { display: none; }
.ms-key-n { display: inline-grid; place-items: center; min-width: 1.1rem; height: 1.1rem; margin-right: .3rem; border-radius: 999px; background: var(--grey-soft); font-size: var(--fs-xs); font-weight: 700; color: var(--ink); }
.ms-key-ring { display: inline-block; width: .9rem; height: .9rem; margin: 0 .3rem -.1rem 0; border-radius: 999px; border: 1.5px solid var(--accent); }
.ms-key-dot { display: inline-block; width: 6px; height: 6px; margin: 0 .35rem .1rem .2rem; border-radius: 50%; background: var(--amber); }
.ms-key { display: inline-block; width: .9rem; height: .9rem; margin: 0 .3rem -.1rem .5rem; border-radius: 3px; }
.ms-key:first-child { margin-left: 0; }
.ms-key-shift { background: var(--yellow); box-shadow: inset 0 0 0 1px var(--ph-icon-ring); }
.ms-key-wait { border: 1.5px dashed var(--ink); }
.ms-key-open { border: 1.5px dashed var(--accent); }
.ms-key-off { border: 1px solid var(--line); background: repeating-linear-gradient(135deg, var(--grey-soft) 0 3px, transparent 3px 6px); }
.ms-error { margin: 0; grid-column: 1 / -1; }
.ms-grid-err { grid-column: 1 / -1; padding: 1rem; }
#ms-empty { margin-bottom: 0; }
#ms-month .cal-day:focus-within { outline: none; }
.cal-date { position: relative; }
/* Sheets (a day's details, Add to my calendar, Get a new PIN): the .dlg window (C2), so a bottom sheet on phones; what
   follows is only their content: a column of full-width actions */
dialog.sheet .dlg-head h2:focus { outline: none; }
dialog.sheet #ms-day-msg:not(:empty) { margin: 0 0 .75rem; }
dialog.sheet .dlg-foot:empty { display: none; }
dialog.sheet .dlg-foot > button { flex: 1; }
dialog.sheet .sheet-actions-top { margin-top: 1rem; }
dialog.sheet .sheet-actions { display: flex; flex-direction: column; gap: .5rem; } dialog.sheet .sheet-actions > * { min-height: 44px; }
dialog.sheet .sheet-actions > p { min-height: 0; margin: -.25rem 0 .25rem; }
dialog.sheet .sheet-actions > input { min-height: 0; }
dialog.sheet .msg:empty { min-height: 0; margin: 0; }
dialog.sheet .sheet-rule { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
dialog.sheet .sheet-once { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.ms-blk + .ms-blk { border-top: 1px solid var(--line); padding-top: .9rem; margin-top: .9rem; }
.ms-blk h3 { margin: 0 0 .15rem; font-size: var(--fs-base); }
.ms-blk > p { margin: .15rem 0 .6rem; }
.ms-blk .trade-status { color: var(--amber); font-weight: 500; }
.ms-inline { border: 1px solid var(--line); border-radius: var(--control-radius); padding: .25rem .75rem .75rem; }
.ms-inline label { margin-top: .5rem; }
.ms-inline > p { margin: .5rem 0; }
.ms-inline .row { margin-top: .6rem; gap: .5rem; }
dialog.sheet .trade-actions:empty { display: none; }
dialog.sheet .trade-actions { margin-top: 0; }
#ms-sub-links .btn { justify-content: flex-start; gap: .6rem; }
#ms-sub-links button { justify-content: flex-start; gap: .6rem; }
@media (max-width: 640px) {
  .ms-bar .seg.seg-inline { display: grid; grid-auto-columns: 1fr; width: 100%; }  /* nav reuses the admin phone .sched-week rules */
  #ms-sub-open { width: 100%; }
  .ms-body:not(.is-empty) .ms-more { display: none; }          /* the chips open the day; "Details" only on empty days */
  .is-month #ms-legend { display: none; }
  .is-month .ms-legend-m { display: block; }
  .cal-day.has-open .cal-date::before { content: ""; position: absolute; inset: 2px; border-radius: 999px; border: 1.5px solid var(--accent); }
}
@media (min-width: 1024px) {
  body.clock.has-tabs .e-view[data-view="schedule"] { max-width: 880px; }   /* the calendar needs the width; other tabs stay 640 */
  .ms-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .ms-day { grid-template-columns: 1fr; align-content: start; min-height: 180px; border-bottom: 0; border-right: 1px solid var(--line); padding: .5rem; }
  .ms-day:last-child { border-right: 0; }
  .ms-items button { min-height: 32px; font-size: var(--fs-xs); white-space: normal; overflow-wrap: anywhere; line-height: var(--lh-tight); padding: .3rem .45rem; display: block; }
  .ms-day .ms-error { grid-column: auto; }
  .ms-week:has(.ms-error) { grid-template-columns: 1fr; }
}

/* ================================================================ Loading states (docs/design/2026-11-loading-states.md)
   A splash on a cold load only, then skeletons shaped like what's coming; a thin bar when data on screen refreshes.
   Skeleton colours --skel / --skel-hi live in the token blocks. */
html.booting { overflow: hidden; }
.splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: var(--bg); color: var(--ink); transition: opacity .2s; }
body.kiosk .splash { background: var(--chrome); color: #fff; }
.splash-in { display: grid; justify-items: center; gap: .75rem; max-width: 22rem; opacity: 0; animation: fade-in .15s ease-out .15s forwards; text-align: center; }
.splash-logo { width: 96px; height: 96px; border-radius: 22px; object-fit: contain; }
.splash-name { margin: 0; font-weight: 700; font-size: var(--fs-md); overflow-wrap: anywhere; }
.splash-name:empty { display: none; }
.splash .spinner { opacity: 0; animation: fade-in .15s .6s forwards, spin .8s linear infinite; }
body.kiosk .splash .spinner { border-color: rgba(255,255,255,.25); border-top-color: #fff; }
.splash.is-error .splash-in { opacity: 1; animation: none; } /* the message never waits on an animation */
.splash.is-error .spinner { display: none; }
body.kiosk .splash.is-error .spinner { display: inline-block; opacity: 1; animation: spin .8s linear infinite; } /* the kiosk keeps retrying on its own */
.splash-err p { margin: 0; }
.splash-err p + p { margin-top: .25rem; }
.splash-err button { margin-top: 1rem; }
body.kiosk .splash-err .muted { color: rgba(255,255,255,.7); }
.splash.is-done { opacity: 0; pointer-events: none; }
.splash.is-done .spinner { animation: none; opacity: 0; }
body.kiosk .pf-names { --skel: var(--k-key); --skel-hi: var(--k-key-2); } /* skeletons on the kiosk's dark dialog */
/* The one spinner: a ring with a darker head. 24px on a page, 14px (.spinner-sm) inline with text; in a busy button it is
   16px, or the leading icon's own box turned into the ring. */
.spinner, :is(button, .btn)[aria-busy="true"] > svg:first-child {
  display: inline-block; flex: none; border-radius: 50%; border: 3px solid var(--spinner-track, var(--line));
  border-top-color: var(--spinner-head, var(--ink)); animation: spin .8s linear infinite; }
.spinner { width: 24px; height: 24px; }
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
/* A button that is working (audit 5.1): aria-busy="true". The label stays, the spinner in the button's own colour takes the
   leading icon's place (or the start of the label), the width does not change, and pointer presses are ignored. The keyboard can still press it (Enter, Space, a form
   submit): the code that sets aria-busy must also ignore a second press. */
:is(button, .btn)[aria-busy="true"] { pointer-events: none;
  --spinner-track: color-mix(in srgb, currentColor 25%, transparent); --spinner-head: currentColor; }
/* weightless: a button that is already absolute or sticky keeps its own position (and anchors the spinner itself) */
:where(:is(button, .btn)[aria-busy="true"]) { position: relative; }
:is(button, .btn)[aria-busy="true"] > svg:first-child { box-sizing: border-box; border-width: 2px; }
:is(button, .btn)[aria-busy="true"] > svg:first-child > * { visibility: hidden; }
/* No icon to stand in for: a 16px spinner sits in the start padding. The padding moves from the end to the start, so the
   width stays (--busy-pad is the button's side padding: the base's 1.15rem, .btn-small's .8rem; a one-off sets its own). */
:is(button, .btn)[aria-busy="true"]:not(:has(> svg:first-child)) {
  --busy-start: max(var(--busy-pad, 1.15rem), calc(16px + 2 * var(--s-1)));
  padding-inline: var(--busy-start) max(0px, calc(2 * var(--busy-pad, 1.15rem) - var(--busy-start))); }
/* the ring is spelled out again here, not shared with .spinner: a browser without :has() drops this whole rule, and
   must not lose .spinner with it */
:is(button, .btn)[aria-busy="true"]:not(:has(> svg:first-child))::before { content: ""; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid var(--spinner-track, var(--line)); border-top-color: var(--spinner-head, var(--ink));
  animation: spin .8s linear infinite; position: absolute; inset-inline-start: calc(var(--busy-start) - 16px - var(--s-1)); top: calc(50% - 8px); }

/* skeletons: decorative (aria-hidden), never text */
.skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--skel) 0, var(--skel-hi) 40%, var(--skel) 80%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite; color: transparent; }
.skel-line { height: .9em; margin: .35em 0; max-width: 100%; }
.skel-short { width: 40%; }
.skel-num { height: var(--fs-xl); width: 4ch; }
.skel-field { height: var(--control-h); }
.skel-chip { width: 8.5rem; height: 32px; border-radius: 999px; }
.skel-row td { padding-top: .85rem; padding-bottom: .85rem; }
.skel-row td:nth-child(3n+1) .skel { width: 75%; }
.skel-row td:nth-child(3n+2) .skel { width: 55%; }
.skel-row td:nth-child(3n) .skel { width: 35%; }
.skel-li { display: block !important; padding: .55rem 0; border: 0 !important; background: none !important; }
.skel-li .skel-line:first-child { width: 70%; }
.skel-tile .skel-line:last-child { width: 80%; }
.skel-card { min-height: 9rem; }
.skel-card .skel-line:nth-child(2) { width: 85%; }
.skel-card .skel-line:nth-child(3) { width: 60%; }
.skel-block { display: grid; place-items: center; min-height: 230px; }
.ov-chart .viz-host:empty { min-height: 230px; } /* the chart's height is kept while it loads */
/* Overview: "Needs attention" and "Getting started" show with the tiles, never before them */
[data-panel="overview"]:not(:has(#ov-tiles[data-loaded])) :is(#attention, #checklist) { display: none; }
/* a schedule being refreshed (another week): the old one, dimmed, until the new one is in */
[aria-busy="true"] :is(#sched, #ms-week) { opacity: .6; transition: opacity .15s; }
table.sched .skel-cell .skel { height: 26px; margin: 0; border-radius: 8px; }
.ms-day .skel-line { width: 70%; }
.ms-day .skel-line + .skel-line { width: 45%; }
.cal-day.skel-day { min-height: 4.5rem; }

/* refreshing what's already on screen: a 2px bar along the bottom of the page header */
.ph.is-refreshing::after, .eh.is-refreshing::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-text), transparent) 0 0 / 40% 100% no-repeat; animation: progress 1.1s ease-in-out infinite; }

/* forms that edit saved data: disabled, with field skeletons, until the saved values are in */
fieldset.set-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.js-settings > fieldset > .set-row:first-child, .js-settings > fieldset > h4 + .set-row,
.js-settings > fieldset > .set-row.hidden + .set-row:not(.hidden):nth-child(2) { border-top: 0; padding-top: .15rem; }
fieldset.is-loading :is(input, select, textarea, .ui-select, .ui-date, .chips, .brand-preview > *) { visibility: hidden; }
fieldset.is-loading :is(.set-ctl, .set-check, .brand-preview) { position: relative; }
fieldset.is-loading :is(.set-ctl, .brand-preview)::after, fieldset.is-loading .set-check::after {
  content: ""; position: absolute; border-radius: var(--control-radius);
  background: linear-gradient(90deg, var(--skel) 0, var(--skel-hi) 40%, var(--skel) 80%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
fieldset.is-loading .set-ctl::after { left: 0; right: 0; top: 50%; height: var(--control-h); transform: translateY(-50%); }
fieldset.is-loading .set-num::after { right: auto; width: 6.5rem; }
fieldset.is-loading .set-check::after { right: 0; top: 50%; width: 44px; height: 26px; transform: translateY(-50%); border-radius: 999px; }
fieldset.is-loading .brand-preview::after { inset: 0; border-radius: 14px; }
fieldset.is-loading .brand-preview { background: none; }

/* a section that couldn't load: icon, message, Try again (in place, never the whole page) */
.load-error { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; padding: 1.25rem 1rem; text-align: left; color: var(--ink); font-size: var(--fs-sm); }
.load-error p { margin: 0; flex: 1 1 14rem; }
.load-error-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--red-soft); color: var(--red); font-weight: 700; }
.load-error-li { display: block !important; border: 0 !important; background: none !important; padding: 0 !important; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes shimmer { to { background-position: -300% 0; } }
@keyframes progress { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .splash, .splash-in, .splash .spinner { animation: none; opacity: 1; transition: none; }
  .skel, fieldset.is-loading :is(.set-ctl, .brand-preview)::after, fieldset.is-loading .set-check::after { animation: none; }
  /* Spinners pulse instead of turning. !important: the global reduced-motion rule (animation: none !important) would
     otherwise freeze them, and a still ring reads as stuck. */
  .spinner, :is(button, .btn)[aria-busy="true"]::before, :is(button, .btn)[aria-busy="true"] > svg:first-child { animation: pulse 1.6s ease-in-out infinite !important; }
  .splash.is-done .spinner { animation: none !important; }
  .ph.is-refreshing::after, .eh.is-refreshing::after { animation: none; background: var(--accent-text); opacity: .6; }
}

/* a control whose label depends on data that is still coming (e.g. "Publish 3 drafts") keeps its place, unseen */
.is-pending { visibility: hidden; }

/* ================================================================ Phone permissions (docs/design/2026-11-employee-self-edit.md)
   Clock tab: "Clocking in from your phone at [store]", Edit my times (day list + day sheet + Undo toast). Existing tokens only. */
.phone-at { margin: .6rem 0 0; text-align: center; line-height: var(--lh-loose); }
.phone-at select { display: inline-block; width: auto; min-width: 10rem; max-width: 100%; margin: .25rem 0 0 .25rem; vertical-align: middle; }
.self-days li { padding: 0; }
.self-day { width: 100%; height: auto; min-height: 44px; padding: .6rem .25rem; justify-content: space-between; gap: .75rem;
  background: none; color: var(--ink); border: 0; border-radius: 0; text-align: left; font-weight: 400; white-space: normal; }
.self-day:hover { background: var(--row-hover); }
.self-day .sd-l { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 0; }
.self-day .sd-l .num { overflow-wrap: anywhere; }
.self-day .sd-r { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.self-day .sd-go { font-size: var(--fs-lg); line-height: var(--lh-none); color: var(--muted); }
.self-day .sd-paid { color: var(--muted); }
.self-tag { margin: .15rem 0 0; }
.self-more { min-height: 44px; padding-left: 0; }
.self-foot { margin: .5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.self-foot .link { min-height: 44px; padding: 0 .25rem; }
/* The day sheet */
.sd-foot { flex-direction: column; align-items: stretch; gap: 0; }
.sd-review { margin: 0 0 .6rem; font-weight: 500; }
.sd-review:empty { display: none; }
.sd-btns { gap: .5rem; }
.sd-btns button { flex: 1; min-height: 44px; }
/* The toast (C4, showToast in common.js): "Saved. [Undo]", over everything, inside the open sheet when there is one. Ink fill;
   the error tone is the bad alert's look with its × glyph, so it never relies on colour */
.toast { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--z-toast);
  display: flex; align-items: center; gap: .75rem; width: max-content; max-width: min(480px, calc(100vw - 2rem)); min-height: 44px; padding: .5rem 1rem;
  background: var(--primary); color: var(--on-primary); border-radius: var(--r-2); box-shadow: var(--sh-2); font-size: var(--fs-sm); font-weight: 500; }
.toast:has(.toast-undo:not(.hidden)) { padding-right: .5rem; }
.toast.hidden { display: none; }
.toast .toast-undo { color: var(--on-primary); min-height: 44px; min-width: 44px; font-weight: 600; }
.toast.is-bad .toast-undo { color: var(--ink); }
.toast.is-bad { background: var(--surface) linear-gradient(var(--bad-soft), var(--bad-soft)); color: var(--ink); box-shadow: inset 0 0 0 1px var(--bad), var(--sh-2); }
.toast.is-bad::before { content: "×"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bad); color: var(--surface); font-size: var(--fs-base); font-weight: 700; line-height: var(--lh-none); }
@media (forced-colors: active) { .toast { border: 1px solid CanvasText; } }
body.has-tabs > .toast { bottom: calc(5rem + env(safe-area-inset-bottom)); }
/* My shifts and the Shift details sheet (docs/design/2026-11-fix-times.md): the Edit my times row and sheet, reused. Existing tokens only.
   A request that isn't in their hours yet has the dashed outline the schedule uses for "waiting", always with its pill and words. */
.fix-head .ws-add { flex: none; }
.fix-head > div { min-width: 0; }
.ws-list { margin-top: .5rem; }
.ws-list li + li { margin-top: 2px; }
.ws-row-btn { min-height: 48px; padding: .6rem .5rem; }
.ws-row-btn.is-waiting { border: 1.5px dashed var(--ink); border-radius: var(--r-2); }
.ws-pills:empty { display: none; }
.ws-pills { display: flex; flex-wrap: wrap; gap: .25rem; }
.ws-pills .badge { padding: .1rem .5rem; font-size: var(--fs-xs); }
.ws-empty { padding: .75rem 0; }
.ws-sheet .alert { margin-bottom: .75rem; overflow-wrap: anywhere; }
.ws-help:empty, .ws-hint:empty { display: none; }
.ws-help { margin: 0 0 .5rem; }
.ws-sheet .ws-day-line { margin: -.5rem 0 .75rem; }
.ws-day-line:empty { display: none; }
.ws-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 48px; border-top: 1px solid var(--line); }
.ws-row > label { margin: 0; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.ws-row input, .ws-row select { flex: 0 0 auto; width: 9.75rem; max-width: 62%; min-height: 44px; text-align: right; }
.ws-row select { width: 11rem; text-align: left; }
.ws-row input[type=date] { width: 11rem; }
.ws-ctl { display: flex; align-items: center; gap: .5rem; flex: 0 1 auto; min-width: 0; }
.ws-ctl input { max-width: 100%; }
.ws-next { margin: 0; white-space: nowrap; }
.ws-hint { margin: 0 0 .4rem; text-align: right; }
.ws-chips { margin: .25rem 0 .5rem; }
.ws-chips button { min-height: 44px; }
.ws-breaks { border: 0; border-top: 1px solid var(--line); margin: 0; padding: .5rem 0 0; min-width: 0; }
.ws-breaks legend { padding: 0; font-weight: 600; float: left; width: 100%; margin-bottom: .25rem; }
.ws-brk { clear: both; padding: .25rem 0 .5rem; }
.ws-brk-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.ws-brk-name { font-size: var(--fs-sm); color: var(--muted); }
.ws-brk-x { position: static; flex: none; }
.ws-brk-times { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.ws-bt { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex: 1 1 12rem; min-width: 0; }
.ws-bt label { margin: 0; font-size: var(--fs-sm); }
.ws-bt input { width: 9.75rem; max-width: 75%; min-height: 44px; text-align: right; }
.ws-add-break { clear: both; min-height: 44px; padding-left: 0; display: block; }
.ws-sheet #ws-note-label { margin-top: .75rem; }
.ws-sheet #ws-msg:not(:empty) { margin: .75rem 0 0; }
.ws-sheet .sd-btns { flex-wrap: wrap; }
/* Direct mode (Edit my times): Delete sits left of Close; the title keeps room for both, so nothing moves when it shows */
.ws-sheet .dlg-head { padding-right: 6.5rem; }
.ws-sheet .ws-del { right: 3.25rem; display: grid; place-items: center; }
.ws-sheet .ws-del.hidden { display: none; }
/* The scheduled line under the day: its line is kept while adding a shift, so picking another day never moves the form */
.ws-sched { margin: 0 0 .5rem; }
.ws-sched:empty { display: none; }
.ws-sheet.is-new .ws-sched { display: block; min-height: 1.45em; }
/* The live line keeps its line too (it fills in 400 ms after the last change) */
.ws-sheet .sd-review:empty { display: block; min-height: 1.45em; }
.ws-sheet .toast { bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
/* Dashboard: Settings › Clocking in › Phone permissions, Employees tags, Fix punches "changed by employee" */
.set-sub { margin: 1.25rem 0 .15rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.set-sub + p { margin: 0 0 .5rem; }
.set-who { display: block; margin-top: .3rem; }
.set-row.is-off { color: var(--muted); }
.set-row.is-off input { opacity: .6; }
.set-law { display: block; margin: .75rem 0; }
.perm-tag { display: inline-block; margin: .25rem .3rem 0 0; padding: .05rem .45rem; border: 1px solid var(--line); border-radius: 6px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--ink); background: var(--surface); white-space: nowrap; }
td > :where(.badge + .perm-tag) { margin-left: .3rem; }
#punches tr.is-removed td:first-child input { text-decoration: line-through; }
#punches tr.is-removed { color: var(--muted); }
.was-detail { margin-top: .25rem; color: var(--ink); }
.ed-perms label.row { align-items: flex-start; }
.ed-perms label.row input { margin-top: .2rem; }

/* ================================================================ Documents: file manager (docs/design/2026-11-file-manager.md) */
.fm { display: grid; gap: 1rem; }
@media (min-width: 1280px) { .fm { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
.fm-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; padding: .5rem; }
.fm-sheet-head { display: none; }
.fm-smart, .fm-tree, .fm-tree ul { list-style: none; margin: 0; padding: 0; }
.fm-smart { padding-bottom: .4rem; margin-bottom: .4rem; border-bottom: 1px solid var(--line); }
.fm-tree ul { padding-left: 1rem; }
.fm-smart button, .fm-node { display: flex; align-items: center; gap: .5rem; width: 100%; height: auto; min-height: 40px; padding: 0 .6rem; border: 0;
  border-radius: 8px; background: none; color: var(--ink); font-size: var(--fs-sm); font-weight: 500; text-align: left; white-space: normal; cursor: pointer;
  justify-content: flex-start; }
.fm-smart button:hover, .fm-node:hover { background: var(--row-hover); }
.fm-smart [aria-current], .fm-tree [aria-current] > .fm-node, .fm-move-tree [aria-selected="true"] > .fm-node { background: var(--grey-soft); font-weight: 700; }
.fm-tree [role=treeitem] { outline: none; }
.fm-tree [role=treeitem]:focus-visible > .fm-node { outline: 3px solid var(--ink); outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--yellow); }
.fm-tree [aria-disabled="true"] > .fm-node { color: var(--muted); cursor: not-allowed; }
.fm-node-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-node-n, .fm-count { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; }
.fm-node-n { color: var(--muted); }
.fm-count { padding: .05rem .45rem; border-radius: var(--r-pill); }
.fm-caret, .fm-caret-gap { flex: none; width: 20px; height: 28px; display: grid; place-items: center; margin-right: -.25rem; }
.fm-caret::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .12s; }
[aria-expanded="true"] > .fm-node > .fm-caret::before { transform: rotate(45deg); }
.fm-node.is-drop { outline: 2px dashed var(--ink); outline-offset: -2px; }
/* Icons: drawn with borders, in the page's own colours (no images) */
.fm-ico { flex: none; position: relative; display: inline-grid; place-items: center; width: 22px; height: 18px; color: var(--muted); }
.fm-ico-folder::before, .fm-ico-slips::before, .fm-ico-team::before, .fm-ico-all::before { content: ""; position: absolute; inset: 3px 1px 1px; border: 2px solid currentColor; border-radius: 3px; }
.fm-ico-folder::after, .fm-ico-slips::after, .fm-ico-team::after, .fm-ico-all::after { content: ""; position: absolute; left: 1px; top: 0; width: 9px; height: 5px; border: 2px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0; }
.fm-ico-slips, .fm-ico-team { color: var(--ink); }
.fm-ico-slips::before { background: linear-gradient(currentColor, currentColor) 50% 55% / 8px 2px no-repeat; }
.fm-ico-team::before { background: radial-gradient(circle, currentColor 2px, transparent 2.5px) 50% 60% / 8px 8px no-repeat; }
.fm-ico-person::before { content: ""; position: absolute; top: 1px; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; }
.fm-ico-person::after { content: ""; position: absolute; bottom: 0; width: 14px; height: 6px; border: 2px solid currentColor; border-bottom: 0; border-radius: 8px 8px 0 0; }
.fm-ico-file { width: 34px; height: 40px; border-radius: 6px; background: var(--grey-soft); color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: var(--ls-label); }
.fm-list .fm-ico:not(.fm-ico-file) { width: 34px; height: 40px; }
.fm-list .fm-ico-folder::before, .fm-list .fm-ico-slips::before, .fm-list .fm-ico-team::before { inset: 11px 4px 7px; }
.fm-list .fm-ico-folder::after, .fm-list .fm-ico-slips::after, .fm-list .fm-ico-team::after { left: 4px; top: 8px; width: 12px; }
.fm-list .fm-ico-person::before { top: 9px; } .fm-list .fm-ico-person::after { bottom: 8px; }
/* Crumbs and the bar */
.fm-nav { display: flex; align-items: center; gap: .5rem; flex: 1 1 100%; min-width: 0; }
.fm-folders-btn { display: none; flex: none; }
.fm-crumbs { min-width: 0; min-height: 44px; display: flex; align-items: center; } /* the same box in a smart list and in a folder */
.fm-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.fm-crumbs li { display: inline-flex; align-items: center; }
.fm-crumbs li + li::before { content: "›"; margin-right: .25rem; color: var(--muted); }
.fm-crumbs .link { min-height: 44px; padding: 0 .25rem; color: var(--ink); }
.fm-crumbs [aria-current] { font-weight: 700; padding: 0 .25rem; }
.fm-crumbs-short { display: none; margin: 0; font-size: var(--fs-sm); align-items: center; min-width: 0; }
.fm-crumbs-short [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-crumbs-skel { display: block; width: 10rem; }
.fm-sort-row { display: flex; gap: .4rem; }
.fm-sort-row > :first-child { flex: 1; min-width: 0; }
.fm-dir { flex: none; width: var(--control-h); padding: 0; font-size: var(--fs-md); }
#docs-bar .fm-search { flex-basis: 240px; }
#docs-bar .fm-sort { flex-basis: 230px; }
/* The list: folders first, then files; the name opens it, ⋯ has everything else */
.fm-main { padding: .5rem 1rem 1rem; min-width: 0; }
.fm-note { min-height: 2.5rem; margin: .5rem 0; padding: .55rem .75rem; border-radius: 10px; background: var(--grey-soft); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line, always there (full text in its title) */
.fm-note.is-empty { visibility: hidden; }
.fm-list td { vertical-align: middle; }
.fm-name { display: inline-flex; align-items: center; justify-content: flex-start; gap: .7rem; min-height: 48px; height: auto; padding: .25rem 0; border: 0; background: none; color: var(--ink);
  font: inherit; font-weight: 400; text-align: left; text-decoration: none; white-space: normal; cursor: pointer; }
.fm-name:hover b { text-decoration: underline; text-underline-offset: 3px; }
.fm-name-text { display: flex; flex-direction: column; min-width: 0; }
.fm-name-text b { overflow-wrap: anywhere; }
.fm-path { color: var(--muted); font-size: var(--fs-xs); }
.fm-meta { display: none; color: var(--muted); font-size: var(--fs-xs); }
.fm-more { width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-size: var(--fs-md); }
.fm-more:hover, .fm-more[aria-expanded="true"] { background: var(--grey-soft); }
.fm-list tr.fm-folder-row td { font-weight: 500; }
.fm-menu { position: fixed; z-index: var(--z-pop); min-width: 200px; }
/* Move to… and the folder picker */
.fm-move-tree { max-height: min(50vh, 360px); overflow: auto; margin: .5rem 0; padding: .35rem; border: 1px solid var(--line); border-radius: 10px; }
.fm-move-new { margin: .5rem 0; }
.fm-move-new .row { gap: .5rem; }
.fm-pick { width: 100%; justify-content: flex-start; gap: .5rem; font-weight: 500; }
.fm-pick .fm-ico { color: var(--ink); }
.dd-folder { margin: .2rem 0 .4rem; }
.dd-folder .link { min-height: 0; padding: 0 .25rem; }
/* Narrower than a wide laptop: the sidebar is a full-height sheet behind the Folders button */
@media (max-width: 1279px) {
  .fm-folders-btn { display: inline-flex; }
  .fm-side { display: none; }
  .fm-side.is-sheet { display: block; position: fixed; inset: 0 auto 0 0; z-index: var(--z-dialog); width: min(360px, 88vw); max-height: none; height: 100%;
    border-radius: 0; padding: .75rem; overflow: auto; }
  .fm-side.is-sheet .fm-sheet-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 .5rem; padding: 0 .25rem; }
  .fm-side.is-sheet .fm-smart button, .fm-side.is-sheet .fm-node { min-height: 44px; }
}
/* Phones: crumbs collapse to "‹ Parent / Current"; rows become two-line items with ⋯ */
@media (max-width: 640px) {
  .fm-crumbs-full { display: none !important; }
  .fm-crumbs-short { display: flex; }
  .fm-main { padding: .25rem .75rem .75rem; }
  .fm-main .tablewrap { overflow: visible; }
  table.stack.fm-list > tbody > tr { display: flex; align-items: center; gap: .25rem; padding: 0 .25rem 0 .6rem; margin: 0; border: 0; border-radius: 0; box-shadow: none;
    background: none; border-top: 1px solid var(--line); min-height: 56px; }
  table.stack.fm-list > tbody > tr:first-child { border-top: 0; }
  table.stack.fm-list > tbody > tr > td { display: none; border: 0; padding: 0; min-height: 0; }
  table.stack.fm-list > tbody > tr > td:first-child:not(.fm-check), table.stack.fm-list > tbody > tr > td.fm-cell-name { display: block; flex: 1; min-width: 0; text-align: left; }
  .fm-main.is-selecting table.stack.fm-list > tbody > tr > td.fm-check { display: block; flex: none; width: 44px; }
  table.stack.fm-list > tbody > tr > td:last-child { display: block; flex: none; width: auto; }
  table.stack.fm-list > tbody > tr > td::before { display: none; }
  table.stack.fm-list > tbody > tr > td.empty { display: block; flex: 1; padding: 1rem 0; }
  table.stack.fm-list > tbody > tr.skel-row > td:nth-child(-n+2) { display: block; flex: 1; }
  .fm-list .fm-name { display: flex; width: 100%; }
  .fm-list .fm-name-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
  .fm-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fm-list .fm-name-text > .muted { display: none; }
  #docs-bar .fm-search { flex-basis: 100%; }
}
@media (min-width: 641px) { .fm-list > tbody > tr > td:first-child:not(.fm-check), .fm-list > tbody > tr > td.fm-cell-name { width: 38%; min-width: 180px; } .fm-list > tbody > tr > td:last-child { width: 52px; } }
/* Documents has two page actions (More, Upload): they stay next to the title at every size, so the header stays short
   enough on a phone to see the list (no page header taller than 40% of the screen) */
@container ph (max-width: 640px) {
  .ph[data-ph="docs"] .ph-actions { grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin: 0; flex-wrap: nowrap; }
}
@container ph (max-width: 440px) {
  .ph[data-ph="docs"] .ph-main { column-gap: .6rem; }
  .ph[data-ph="docs"] .ph-actions { gap: .4rem; }
  .ph[data-ph="docs"] .ph-actions > .ph-primary { flex: none; padding: 0 .9rem; }
}
@media (max-width: 640px) {
  #docs-bar .field { flex: 1 1 calc(50% - .4rem); }
  #docs-bar .fm-search, #docs-bar .fm-sort { flex-basis: 100%; }
}
.fm-list [data-doc-reads] { white-space: normal; text-align: left; height: auto; min-height: 0; }
.fm-list th { white-space: nowrap; }
.fm-list td[data-label="Kind"] > .muted { white-space: nowrap; }
/* Going somewhere: the old list dims (after a moment) until the new one is in */
.fm-main[aria-busy="true"] :is(.tablewrap, .fm-grid) { opacity: .55; transition: opacity .15s .2s; pointer-events: none; }
.fm-urgent { display: none; }
#fmv-title { overflow-wrap: anywhere; }
.fm-filters-btn { display: none; }
/* Wide screens: the filters and Sort share one row */
#docs-bar .field.fm-filter { flex: 1 1 130px; min-width: 120px; }
#docs-bar .fm-search { flex: 2 1 200px; }
#docs-bar .fm-sort { flex: 1 1 200px; min-width: 180px; }
@media (max-width: 640px) {
  .fm-urgent { display: block; margin: .15rem 0 0; }
  .fm-urgent .badge, .fm-urgent .flag { font-size: var(--fs-xs); }
  .fm-filters-btn { display: inline-flex; flex: 1 1 100%; }
  #docs-bar:not(.show-filters) .fm-filter { display: none; }
  #docs-bar .field.fm-filter { flex: 1 1 calc(50% - .4rem); min-width: 0; }
  #docs-bar .fm-search, #docs-bar .fm-sort { flex: 1 1 100%; }
}

/* ---- File manager, commit 2: Grid, picking several, drag-and-drop, several uploads */
.fm-nav-tools { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex: none; }
.fm-view { flex: none; }
.fm-view.seg.seg-inline { grid-auto-columns: minmax(64px, auto); }
.fm-view.seg.seg-inline button { height: 36px; }
.fm-select-btn { display: none; flex: none; }
.fm-list th.fm-check, .fm-list td.fm-check { width: 44px; padding-right: 0; }
.fm-cb { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.fm-check .fm-cb { display: block; margin: 12px; }
.fm-list tr.is-selected > td { background: var(--grey-soft); }
/* While anything is picked, its actions lie over the filters (the crumbs stay: they take drops). The filters keep their
   space (visibility, not display), so the header keeps its height: nothing below moves when you tick the first item. */
#docs-bar { position: relative; }
.fm-selbar { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; top: calc(.85rem + 44px + .6rem); display: flex; align-items: center; align-content: center;
  gap: .5rem; flex-wrap: wrap; padding: 0 1.5rem .85rem; background: var(--ph-bar-bg); border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px); }
.fm-selbar.hidden { display: none; }
.fm-sel-count { font-weight: 700; margin-right: .25rem; }
.fm-sel-why { flex: 1 1 100%; margin: 0; }
#docs-bar.has-sel > :not(.fm-nav, .fm-selbar) { visibility: hidden; }
/* Grid: 160px tiles, a checkbox top-left on hover or focus (always on touch, and while picking), ⋯ top-right */
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; list-style: none; margin: .5rem 0 0; padding: 0; }
/* List and Grid start at the same height: the grid leaves the room of the list's header row (one fixed height) */
.fm-list > thead > tr { height: 49px; }
@media (min-width: 641px) { .fm-grid { margin-top: calc(.5rem + 49px); } }
.fm-tile { position: relative; display: grid; border: 1px solid var(--line); border-radius: var(--radius); min-height: 132px; background: var(--surface); }
.fm-tile:hover { background: var(--row-hover); }
.fm-tile.is-selected { background: var(--grey-soft); border-color: var(--ink); }
.fm-tile-main { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .3rem; height: auto; min-height: 132px; width: 100%;
  padding: .75rem .75rem .7rem; border: 0; border-radius: var(--radius); background: none; color: var(--ink); text-align: left; text-decoration: none; font-weight: 400; }
.fm-tile-main:hover .fm-tile-name { text-decoration: underline; text-underline-offset: 3px; }
.fm-tile-ico { display: grid; place-items: center; width: 100%; height: 52px; margin-bottom: .15rem; }
.fm-tile-ico .fm-ico-file { width: 40px; height: 48px; font-size: 11px; }
.fm-tile-ico .fm-ico:not(.fm-ico-file) { width: 44px; height: 36px; }
.fm-tile-ico .fm-ico-folder::before, .fm-tile-ico .fm-ico-slips::before, .fm-tile-ico .fm-ico-team::before { inset: 8px 2px 2px; }
.fm-tile-ico .fm-ico-folder::after, .fm-tile-ico .fm-ico-slips::after, .fm-tile-ico .fm-ico-team::after { left: 2px; top: 3px; width: 16px; height: 7px; }
.fm-tile-ico .fm-ico-person { width: 36px; height: 36px; }
.fm-tile-ico .fm-ico-person::before { width: 14px; height: 14px; top: 2px; } .fm-tile-ico .fm-ico-person::after { width: 26px; height: 12px; }
.fm-tile-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: var(--fs-sm); line-height: var(--lh-snug); }
.fm-tile-meta { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.fm-tile-badge .badge, .fm-tile-badge .flag { font-size: var(--fs-xs); }
.fm-tile .fm-path { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.fm-tile-check { position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; opacity: 0; }
.fm-tile:hover .fm-tile-check, .fm-tile:focus-within .fm-tile-check, .fm-tile.is-selected .fm-tile-check, .fm-main.is-selecting .fm-tile-check { opacity: 1; }
@media (hover: none) { .fm-tile-check { opacity: 1; } }
.fm-tile-more { position: absolute; top: 0; right: 0; z-index: 1; }
.fm-grid-empty { grid-column: 1 / -1; padding: 1rem 0; color: var(--muted); }
.fm-grid .skel-li { display: grid; gap: .5rem; align-content: start; padding: .75rem; }
/* Drag-and-drop: where it would land, and what's being dragged */
#fm-crumbs .is-drop, .fm-main [data-row-folder].is-drop { outline: 2px dashed var(--ink); outline-offset: -2px; border-radius: 8px; }
.is-dragging { opacity: .5; }
.fm-main { position: relative; }
.fm-drop-hint { display: none; }
.fm-main.is-drop-files { outline: 2px dashed var(--ink); outline-offset: -6px; }
.fm-main.is-drop-files .fm-drop-hint { display: grid; place-items: center; position: absolute; inset: 0; z-index: 2; margin: 0; border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent); font-weight: 700; color: var(--ink); pointer-events: none; }
/* Upload: several files, each with its title, progress and its own error */
.du-list { list-style: none; margin: .5rem 0; padding: 0; max-height: min(40vh, 320px); overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.du-item { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .6rem; border-top: 1px solid var(--line); }
.du-item:first-child { border-top: 0; }
.du-item .fm-ico-file { margin-top: .15rem; }
.du-item-main { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.du-item-main input { margin: 0; }
.du-item-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-item progress { width: 100%; height: 6px; accent-color: var(--accent); }
.du-item-status:empty { display: none; }
.du-item-status.is-error { color: var(--red); }
.du-item.is-done .du-item-status { color: var(--accent); }
.du-item > button { flex: none; }
@media (max-width: 640px) {
  .fm-nav { flex-wrap: wrap; }
  .fm-nav-tools { flex: 1 1 100%; }
  .fm-select-btn { display: inline-flex; }
  #docs-bar .fm-nav-tools .fm-view.seg.seg-inline { flex: 1 1 auto; width: auto; }
  .fm-grid { grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; } /* starts where the list's first row does */
  .fm-list .fm-check { display: none; }
  table.stack.fm-list > tbody > tr.is-selected { background: var(--grey-soft); }
  table.stack.fm-list > tbody > tr.is-selected > td { background: none; }
  #docs-bar .fm-selbar > button { flex: 1 1 auto; }
}
/* The Folders button: an icon and its name (just the icon on phones) */
.fm-folders-btn { gap: .45rem; }
.fm-folders-btn .fm-ico { color: currentColor; }
/* Phones: Documents' bar is two rows (Folders, where you are, List/Grid; then Search, Filters, Select). The other filters
   and Sort open under them with Filters. The header stays under 40% of the screen, so the list shows. */
@media (max-width: 640px) {
  #docs-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; }
  #docs-bar .fm-nav, #docs-bar .fm-nav-tools { display: contents; }
  #docs-bar .fm-folders-btn { grid-area: 1 / 1; width: var(--control-h); padding: 0; justify-content: center; }
  .fm-folders-label, #docs-bar .fm-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #docs-bar .fm-crumbs { grid-area: 1 / 2 / 2 / 4; }
  #docs-bar .fm-nav-tools .fm-view.seg.seg-inline { grid-area: 1 / 4; width: auto; grid-auto-columns: minmax(48px, auto); }
  #docs-bar .fm-search { grid-area: 2 / 1 / 3 / 3; }
  #docs-bar .fm-filters-btn { grid-area: 2 / 3; }
  #docs-bar .fm-select-btn { grid-area: 2 / 4; }
  #docs-bar > :is(.fm-filter, .fm-sort, .chip-x) { grid-column: 1 / -1; }
  #docs-bar:not(.show-filters) .fm-sort { display: none; }
  /* the selection's actions: one row over Search, Filters and Select, scrolling sideways (the crumbs stay) */
  #docs-bar .fm-selbar { top: auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: .5rem 1rem .75rem; }
  #docs-bar .fm-selbar > * { flex: none; }
  #docs-bar .fm-selbar > .fm-sel-why { white-space: nowrap; }
  /* Select lies under that row: out of focus order and the reading order while it is covered */
  #docs-bar.has-sel .fm-select-btn { visibility: hidden; }
}
/* Employee "My files" › From work: a tile per group (made from what each file is, never the business's folders) */
.fw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; list-style: none; margin-bottom: 0; padding: 0; }
.fw-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; width: 100%; height: auto; min-height: 96px; padding: .85rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-align: left; font-weight: 400; box-shadow: var(--shadow); }
.fw-tile:hover { background: var(--row-hover); }
.fw-tile b { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.fw-tile .fm-ico-folder { width: 30px; height: 24px; margin-bottom: .25rem; color: var(--ink); }
.fw-tile.is-waiting { border-color: var(--amber); background: var(--amber-soft); }
.fw-wait { color: var(--amber); font-weight: 600; }
.fw-crumbs { margin: -.4rem 0 0; }
.fw-back { min-height: 44px; padding: 0; color: var(--ink); }
.fw-title { margin: 0 0 .5rem; }
.fw-title:focus { outline: none; }
@media (max-width: 640px) { .fw-tiles { grid-template-columns: 1fr 1fr; } }
.fm-tile.is-selected .fm-ico-file { background: var(--surface); }

/* ================================================================ Documents made simple, upgrades, the app bar
   (docs/design/2026-11-docs-simplify-upgrades-header.md) */

/* D. No empty space past the end: no bounce, and the side menu's colour never ends */
html:has(body.admin) { background: var(--bg); overscroll-behavior-y: none; }
@media (min-width: 1024px) {
  body.admin:has(#app:not(.hidden)) { background: linear-gradient(to right, var(--chrome) 248px, var(--bg) 248px) fixed; }
  .sidenav { height: 100dvh; align-self: start; }
  .admin .shell { min-height: 100dvh; }
}
.admin .page { padding-bottom: 2rem; }
.no-pay .ov-grid > .ov-chart:last-child { grid-column: 1 / -1; }

/* A6, C1. One window for the whole app, in three sizes: header (title, optional line, ×), a body that scrolls, a footer bar
   (destructive far left, Cancel, primary right) and the status line under it. Every dashboard window and the phone sheets
   use it; under 640px it is a bottom sheet. */
.dlg { position: fixed; z-index: var(--z-dialog); inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 2rem); max-width: none; padding: 0;
  display: flex; flex-direction: column; overflow: hidden; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-3); box-shadow: var(--sh-3); }
/* forced colours drop the shadow: every dialog keeps a visible edge (the kiosk's PIN window has no border of its own) */
@media (forced-colors: active) { .dlg, .pf-box { border: 1px solid CanvasText; } }
.dlg:not([open]) { display: none; }
.dlg::backdrop { background: var(--scrim); }
.dlg-sm { width: min(400px, calc(100vw - 2rem)); } .dlg-md { width: min(520px, calc(100vw - 2rem)); } .dlg-lg { width: min(820px, calc(100vw - 2rem)); }
/* flex-basis auto, not 0: Safari collapses a 0-basis child of a fit-content column, so the window opened zero pixels tall */
.dlg-form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.dlg-head { position: relative; padding: 1.25rem 3.5rem .75rem 1.5rem; } .dlg-head h2, .dlg-head h3 { margin: 0; font-size: var(--fs-md); font-weight: 700; }
.dlg-sub { margin: .25rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.dlg-sub:empty { display: none; }
.dlg-x { position: absolute; top: .5rem; right: .5rem; width: 44px; height: 44px; padding: 0; background: none; color: var(--muted); font-size: var(--fs-lg); border: 0; }
.dlg-x:hover { background: var(--hover); color: var(--ink); }
.dlg-body { padding: 0 1.5rem 1rem; overflow-y: auto; overscroll-behavior: contain; min-height: 0; } .dlg-body > label:first-child { margin-top: 0; }
.dlg-foot { display: flex; gap: .5rem; align-items: center; padding: .875rem 1.5rem; border-top: 1px solid var(--line); background: var(--ph-bar-bg); }
.dlg-foot .grow { flex: 1; }
.dlg-note { margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.dlg-msg:empty { display: none; } .dlg-msg { margin: 0; padding: 0 1.5rem 1rem; }
.dlg .msg:empty { min-height: 0; margin: 0; }
@media (max-width: 640px) { .dlg { inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 92dvh; border-radius: var(--r-3) var(--r-3) 0 0; }
  .dlg-head { padding-left: 1rem; } .dlg-body, .dlg-msg, .dlg-form > .msg { padding-left: 1rem; padding-right: 1rem; }
  .dlg-foot { padding: .875rem 1rem max(.875rem, env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .dlg > .dlg-body:last-child { padding-bottom: max(1rem, env(safe-area-inset-bottom)); } .dlg-foot > button { flex: 1; } .dlg-foot .grow { display: none; } .dlg-foot .dlg-note { flex-basis: 100%; order: -1; } }
/* the shared askConfirm / askText window: opens on top of any other window; its text keeps the line breaks it was given */
#confirm-dialog #cf-body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
#confirm-dialog input { width: 100%; }
#confirm-dialog.dlg .dlg-body:has(#cf-body.hidden):has(#cf-field.hidden) { display: none; }

/* A2. Upload: files, Save in, Who is it for, Tags, More options */
.du-drop { display: grid; place-items: center; gap: .35rem; min-height: 120px; padding: 1rem; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--control-border); border-radius: 12px; background: var(--ph-bar-bg); margin: 0; font-weight: 400; }
.du-drop:hover, .du-drop.is-over { border-color: var(--ink); background: var(--grey-soft); }
.du-drop:focus-within { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.du-drop .du-drop-more { display: none; }
.du-drop.is-compact { min-height: 0; padding: .55rem .8rem; place-items: start; }
.du-drop.is-compact > :not(.du-drop-more) { display: none; }
.du-drop.is-compact .du-drop-more { display: inline; font-weight: 600; }
.du-q { margin: 1rem 0 .4rem; font-weight: 600; font-size: var(--fs-sm); }
.du-fixed { margin: 0; padding: .65rem .85rem; border-radius: var(--control-radius); background: var(--grey-soft); }
.du-check { display: flex; align-items: center; gap: .5rem; color: var(--muted); margin: .4rem 0 0; }
/* the one "who" field: tokens + a type-ahead list */
.who-wrap { position: relative; }
.who-field { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-height: var(--control-h); padding: .3rem .5rem;
  background: var(--field); border: 1.5px solid var(--control-border); border-radius: var(--control-radius); cursor: text; }
.who-field:focus-within:not([aria-invalid="true"]) { border-color: var(--ink); box-shadow: 0 0 0 2px var(--accent-fill), 0 0 0 4px var(--accent-text); }
.who-field input { flex: 1 1 10rem; min-width: 8rem; height: 32px; border: 0; padding: 0 .3rem; background: transparent; box-shadow: none; margin: 0; }
.who-field input:focus { outline: none; box-shadow: none; }
.who-token { display: inline-flex; align-items: center; gap: .2rem; height: 30px; padding: 0 .2rem 0 .65rem; border-radius: 999px;
  background: var(--grey-soft); color: var(--ink); font-size: var(--fs-sm); font-weight: 500; }
.who-token button { width: 26px; height: 26px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: var(--fs-base); line-height: var(--lh-none); }
.who-token button:hover { background: var(--line); color: var(--ink); }
.who-list { position: static; margin-top: 4px !important; z-index: 5; margin: 0; padding: .3rem; list-style: none; max-height: 240px; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.who-list li[role="option"] { padding: .55rem .7rem; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: .5rem; }
.who-list li[role="option"][aria-selected="true"], .who-list li[role="option"]:hover { background: var(--grey-soft); }
.who-list .who-group { padding: .45rem .7rem .2rem; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--muted); }
.who-list .who-none { padding: .55rem .7rem; color: var(--muted); }
/* tags: built-in chips, own chips, "+ Tag" */
.tag-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tag-chips > button.tag-add { border-style: dashed; }
.tag-chips .tag-input { width: 11rem; height: var(--control-h-sm); margin: 0; font-size: var(--fs-sm); }
.tag-help { margin: .4rem 0 0; }
.tag { display: inline-block; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
  padding: .05rem .5rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; line-height: var(--lh-loose); margin: .15rem .25rem 0 0; }
.du-more { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .25rem; }
.du-more > summary { cursor: pointer; padding: .6rem 0; font-weight: 600; font-size: var(--fs-sm); list-style-position: inside; }
.du-more > summary .muted { font-weight: 400; margin-left: .35rem; }
/* A3. "This looks like payslips for 12 people" */
.du-split { margin: 1rem 0 0; padding: .8rem .9rem; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--ink); }
.du-split p { margin: 0 0 .6rem; }
.du-split .row { gap: .75rem; }
.du-split-view .match-layout { margin-top: .75rem; }
.dlg-lg .du-split-view { padding-top: .25rem; }

/* A5. Details */
.dd-sec { margin: 1rem 0 0; }
.dd-sec > h4 { margin: 0 0 .35rem; font-size: var(--fs-sm); }
.dd-meta { margin: .25rem 0 0; }

/* B. Plan and billing */
.plan-now { display: grid; gap: .75rem; }
.plan-now-head { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.plan-now-head h4 { margin: 0; font-size: var(--fs-md); display: flex; align-items: center; gap: .5rem; }
.plan-meter { display: grid; gap: .3rem; font-size: var(--fs-sm); }
.plan-meter-bar { height: 8px; border-radius: 999px; background: var(--grey-soft); overflow: hidden; }
.plan-meter-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.plan-meter.is-near .plan-meter-bar > i { background: var(--amber); }
.plan-meter.is-over .plan-meter-bar > i { background: var(--red); }
.plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .5rem 0; }
@media (max-width: 640px) { .plan-cards { grid-template-columns: 1fr; } }
.plan-card { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.plan-card.is-current { border-color: var(--ink); }
.plan-card h4 { margin: 0; font-size: var(--fs-md); display: flex; gap: .5rem; align-items: center; justify-content: space-between; }
.plan-card ul { margin: 0; padding-left: 1.1rem; font-size: var(--fs-sm); }
.plan-card .plan-price { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.plan-card .plan-price small { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.plan-card > button, .plan-card > .badge { margin-top: auto; align-self: flex-start; }
.addon-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; margin: .5rem 0; }
.addon-row h4 { margin: 0 0 .15rem; font-size: var(--fs-base); }
.addon-row p { margin: 0; }
.stepper { display: inline-flex; align-items: center; gap: .35rem; }
.stepper button { width: 44px; padding: 0; }
.stepper output { min-width: 2.5rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.support-card { padding: 1rem; border-radius: 12px; background: var(--ph-bar-bg); border: 1px solid var(--line); }
.support-card h4 { margin: 0 0 .25rem; }
.support-card p { margin: 0 0 .75rem; }
.amount-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.amount-chips input { width: 7rem; margin: 0; }
.bill-h, .set-sec .bill-h { margin: 1.5rem 0 .25rem; font-size: var(--fs-base); }
/* Plans and pricing (docs/design/2026-11-plans-pricing.md §4): header actions keep their space while loading; 4 plan
   cards in a row from 1024px, 2×2 from 640px, stacked below */
.bill-summary { min-height: 1.4em; }
/* Thank-you and care moments (docs/design/2026-11-emails-prefs-care.md C1, C3): a static marigold mark (no animation), the
   "Supporter since" badge (text, not colour alone) and the quiet Overview cards. Accent tokens, so both themes and a
   business's own colour keep their contrast. */
.thanks-mark { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 0 .75rem; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent); }
.thanks-dlg .dlg-body p { margin: 0 0 .75rem; }
.thanks-sign { font-weight: 600; }
.bill-summary .badge.supporter { margin-left: .5rem; padding: .1rem .55rem; font-size: var(--fs-xs); background: var(--accent-fill); color: var(--on-accent); vertical-align: 1px; }
.badge.supporter::before { content: none; }
.badge.supporter svg { width: 14px; height: 14px; flex: none; }
.moment-card { position: relative; margin-bottom: 1rem; padding-right: 3.5rem; }
.moment-card .dlg-x { top: .25rem; right: .25rem; }
.moment-card h3 { margin: 0 0 .35rem; }
.moment-card p { margin: 0 0 .75rem; }
.moment-card p:last-child { margin-bottom: 0; }
.bill-actions { align-items: center; }
.bill-actions.is-pending { visibility: hidden; }
.bill-actions [hidden] { display: none; }
.plan-cards.plan-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .plan-cards.plan-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plan-cards.plan-cards-4 { grid-template-columns: 1fr; } }
.plan-card.is-popular { border-color: var(--accent); }
.plan-card.is-current { border-color: var(--ink); }
.plan-badges { display: inline-flex; flex-wrap: wrap; gap: .25rem; justify-content: flex-end; }
.plan-badges .badge, .badge.plan-save { font-size: var(--fs-xs); padding: .1rem .5rem; }
.badge.plan, .badge.plan-save { background: var(--amber-soft); color: var(--notice-ink); }
.plan-card p { margin: 0; }
.plan-card-go { margin-top: auto; display: flex; flex-wrap: wrap; gap: .4rem; }
/* A card is narrow (four across): its buttons fill the card's width and wrap their text, so none can stick out past the edge */
.plan-card { min-width: 0; }
.plan-card-go > button { flex: 1 1 100%; min-width: 0; max-width: 100%; height: auto; min-height: 44px; padding-block: .5rem; white-space: normal; text-align: center; }
.plan-card .plan-price small { display: inline-block; }
.plan-card-go .flag { margin: 0; }
.plans-toggle, .bill-plans-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .75rem; }
.bill-plans-head { margin: 1.5rem 0 .5rem; }
.bill-plans-head .bill-h { margin: 0; }
.plan-change { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.btn-link { background: none; border: 0; padding: 0; min-height: 0; height: auto; color: var(--accent); text-decoration: underline; font-weight: 600; cursor: pointer; }
/* A feature the plan doesn't have: this card stands in for the page */
.plan-lock-row { display: flex; gap: 1rem; align-items: flex-start; }
.plan-lock-row h3 { margin: 0 0 .25rem; font-size: var(--fs-md); }
.plan-lock-row p { margin: 0 0 .75rem; }
.plan-lock-icon { width: 28px; height: 28px; flex: none; color: var(--muted); }
[data-panel].is-locked > :not(.ph):not(.plan-lock) { display: none; }

/* C. The app bar */
.appbar { display: none; }
@media (min-width: 1024px) {
  .content-col { min-width: 0; display: flex; flex-direction: column; }
  .appbar { position: sticky; top: 0; z-index: 20; display: block; height: 64px;
    background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--yellow) 60%, transparent); }
  .appbar-in { max-width: 1180px; height: 100%; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; gap: 1rem; }
}
.ab-left { min-width: 0; flex: 1; }
.ab-hello { margin: 0; font-weight: 700; font-size: var(--fs-base); line-height: var(--lh-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-date { margin: 0; color: var(--muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-live { color: var(--ink); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.ab-live:hover { text-decoration: underline; }
.ab-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.ab-live.is-zero i { background: var(--control-border); }
.ab-live.pulse i { animation: ab-pulse 1.2s ease-out 1; }
@keyframes ab-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .ab-live.pulse i { animation: none; } }
.ab-right { display: flex; align-items: center; gap: .5rem; flex: none; }
.ab-plan { display: inline-flex; align-items: center; gap: .4rem; height: var(--control-h-sm); padding: 0 .8rem; border-radius: 999px; text-decoration: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink); background: var(--grey-soft); border: 1px solid var(--line); white-space: nowrap; }
.ab-plan:hover { border-color: var(--control-hover); }
.ab-plan .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.ab-plan.is-near { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.ab-plan.is-over, .ab-plan.is-failed { background: var(--red-soft); color: var(--red); border-color: transparent; }
.ab-plan .ab-plus { font-weight: 700; }
.ab-bell, .ab-me { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  background: transparent; color: var(--ink); border: 1px solid transparent; }
.ab-bell:hover, .ab-me:hover, .ab-bell[aria-expanded="true"], .ab-me[aria-expanded="true"] { background: var(--grey-soft); }
.ab-bell svg { width: 20px; height: 20px; }
.ab-dot { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: var(--bg);
  font-size: var(--fs-xs); font-weight: 700; line-height: 18px; text-align: center; }
.ab-dot[hidden] { display: none; }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-label); }
.mobile-bar .ab-bell, .mobile-bar .ab-me { color: #fff; flex: none; }
.mobile-bar .ab-bell:hover, .mobile-bar .ab-me:hover, .mobile-bar .ab-bell[aria-expanded="true"], .mobile-bar .ab-me[aria-expanded="true"] { background: rgba(255,255,255,.12); }
.mobile-bar .ab-mobile { margin-left: auto; display: flex; gap: .15rem; align-items: center; }
.mobile-bar .mobile-page { display: none; }
.ab-pop { position: fixed; z-index: var(--z-pop); width: min(360px, calc(100vw - 1rem)); max-height: min(70vh, 520px); overflow: auto; padding: .5rem;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-2); }
.ab-pop[hidden] { display: none; }
.ab-pop-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .5rem .5rem; }
.ab-pop-head b { font-size: var(--fs-sm); }
.ab-pop .alert-list { margin: 0; }
.ab-pop .alert.is-new { box-shadow: inset 3px 0 0 var(--red); }
.ab-pop-empty { padding: .75rem .5rem; color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.ab-menu { width: min(280px, calc(100vw - 1rem)); }
.ab-menu .ab-who { padding: .5rem .8rem .6rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
.ab-menu .ab-who b { display: block; }
.ab-menu .ab-who span { display: block; color: var(--muted); font-size: var(--fs-sm); }
@media (min-width: 1024px) { .ab-menu .ab-phone-only { display: none !important; } }
.sidenav-head { padding-bottom: .75rem; border-bottom: 1px solid color-mix(in srgb, var(--yellow) 60%, transparent); }
.sidenav-head .badge-logo.sm { width: 40px; height: 40px; }
/* desktop: the menu's gold line continues the app bar's (both end 64px from the top) */
@media (min-width: 1024px) { .sidenav-head { box-sizing: border-box; height: calc(63px - 1rem); padding-top: 0; padding-bottom: 0; border-bottom-width: 2px; } }
/* phones: the greeting and live line sit at the top of Overview */
.ov-hello, .ph-desc.ov-hello { display: none; }
@media (max-width: 1023px) {
  .ov-hello { display: block; margin: 0 0 .25rem; font-weight: 600; color: var(--ink); }
  .ph-desc.ov-hello { display: block; grid-row: 3; } .ph-desc.ov-hello + .ph-desc { grid-row: 4; margin-top: .15rem; }
  .ov-hello .ab-live { font-weight: 600; }
}
.dlg-form > .msg { margin: 0; padding: 0 1.5rem 1rem; }
.dlg-form > .msg:empty { display: none; }
.fm-tile-tags:empty { display: none; }
.fm-tile-tags { display: block; }
/* Phone account menu: the plan line replaces "Plan and billing", coloured like the desktop chip */
@media (max-width: 1023px) { #ab-menu-plan:not([hidden]) ~ #ab-billing { display: none; } }
.ab-menu > a.is-near { color: var(--amber); } .ab-menu > a.is-over, .ab-menu > a.is-failed { color: var(--red); }
.ab-menu .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }

/* Tag chips under a file's name on phones (the Tags column is hidden there) */
.fm-tags-sm { display: none; }
@media (max-width: 640px) { .fm-list .fm-tags-sm:not(:empty) { display: block; margin-top: .15rem; } }
/* Details: the title is the header (an input when it can be changed) */
.dd-title-input { width: 100%; margin: 0; height: auto; padding: .2rem .4rem; margin-left: -.4rem; font-size: var(--fs-md); font-weight: 700;
  border: 1px solid transparent; background: transparent; border-radius: 8px; }
.dd-title-input:hover { border-color: var(--line); }
.dd-title-input:focus { border-color: var(--ink); background: var(--field); }

/* ================================================================ Phone headers (docs/design/2026-11-phone-headers.md)
   Schedule, Time off, Employees and Fix punches: on a phone the page actions sit beside the title and the filters go in a
   sheet, so each header is at most 325 px tall. Every rule that changes the layout is inside max-width: 640px (a container
   query alone also matches tablets); wider screens never show the new parts. */
.ph-plus, .ph-count, .ph-lbl-short, .fbtn, .ph-summary, .nav-short, .nav-ico { display: none; }
.fs-wrap, .ph-row2 { display: contents; }
.ph-menu > .btn-secondary { border: 0; }
html:has(dialog.fsheet[open]) { overflow: hidden; }
/* count badges: the active-chip look, so light and dark work as they do */
.fb-n, .ph-count:not(:empty) { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  align-items: center; justify-content: center; background: var(--yellow); color: var(--yellow-ink); border: 1.5px solid var(--ink);
  font-size: var(--fs-xs); font-weight: 700; line-height: var(--lh-none); font-variant-numeric: tabular-nums; }
.fb-n { display: inline-flex; }
@media (max-width: 640px) {
  /* T: icon, group, title and the buttons on one row */
  .ph-phone .ph-main { column-gap: .6rem; }
  .ph-phone .ph-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ph-phone .ph-actions { grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin: 0; flex-wrap: nowrap; gap: .4rem; }
  .ph-phone .ph-actions > .ph-primary { position: relative; flex: none; padding: 0 .9rem; display: inline-flex; align-items: center; gap: .3rem; overflow: visible; }
  .ph-phone .ph-actions > .ph-more { flex: none; }
  .ph-phone .ph-menu { left: auto; right: 0; max-width: calc(100vw - 2rem); } /* the buttons are on the right now */
  .ph-phone .ph-plus { display: block; width: 18px; height: 18px; flex: none; }
  .ph-phone .ph-lbl-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ph-phone .ph-lbl-short { display: inline; }
  .ph-phone .ph-count:not(:empty) { display: inline-flex; }
  .ph-phone .is-pending .ph-count { display: none; }
  /* B: the bar is two fixed 44 px rows (row 1: view switch + Filters; row 2: the period, a summary or a chip row) */
  .ph-phone .ph-bar { display: grid; grid-template-columns: minmax(132px, 1fr) minmax(44px, max-content); grid-template-rows: 44px 44px;
    gap: .5rem; align-items: center; min-height: 0; }
  .ph-phone .ph-bar > * { min-width: 0; }
  .ph-phone .ph-bar .r-full { grid-column: 1 / -1; }
  .ph-phone .ph-bar .r-row2, .ph-phone .ph-bar .ph-summary { grid-area: 2 / 1 / 3 / -1; }
  .ph-phone .seg { padding: 0; }
  .ph-phone .seg button { height: 44px; }
  .ph-phone .chips button { height: 44px; }
  /* the Filters button: 44 high, an icon, maybe a short text, and a corner count */
  .fbtn { display: inline-flex; position: relative; height: 44px; min-width: 44px; max-width: 11rem; padding: 0 .8rem; gap: .4rem; overflow: visible; }
  .fbtn-icon { width: 44px; padding: 0; }
  .fbtn.is-off { visibility: hidden; }
  .fb-ico { width: 18px; height: 18px; flex: none; }
  .fb-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fb-sub { flex: none; color: var(--muted); font-weight: 500; }
  .ph-summary { display: block; margin: 0; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* ‹ label › Today on one 44 px row */
  .ph-phone .pnav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px auto; gap: .4rem; align-items: center; width: 100%; }
  .ph-phone .pnav > .nav-prev { grid-column: 1; grid-row: 1; }
  .ph-phone .pnav > .sched-label { grid-column: 2; grid-row: 1; margin: 0; text-align: center; font-size: var(--fs-base); font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ph-phone .pnav > .nav-next { grid-column: 3; grid-row: 1; }
  .ph-phone .pnav > .nav-today { grid-column: 4; grid-row: 1; width: auto; padding: 0 .8rem; }
  .ph-phone .nav-full { display: none; }
  .ph-phone .nav-short { display: inline; }
  /* chip rows scroll on one line; 3 px of room so the focus ring is not cut */
  .ph-phone .emp-tabs, .ph-row2 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; }
  .ph-phone .emp-tabs > button { flex: none; max-width: 12rem; }
  .emp-tabs .chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ph-row2 { display: flex; align-items: center; gap: .4rem; }
  .ph-row2 > *, .ph-row2 .chips { flex: none; flex-wrap: nowrap; }
  /* small screens: the icon is decoration (the app bar names the page), so the title and buttons fit. The header's
     content box is 317 px on a 375 px phone and 262 px at 320, so this fires on the 320 to ~355 px phones only */
  @container ph (max-width: 300px) {
    .ph-phone .ph-icon { display: none; }
    .ph-phone .ph-main { grid-template-columns: minmax(0, 1fr) auto; }
    .ph-phone .ph-eyebrow, .ph-phone .ph-title { grid-column: 1; }
    .ph-phone .ph-actions { grid-column: 2; }
    .ph-phone .pnav { grid-template-columns: 44px minmax(0, 1fr) 44px 44px; gap: 4px; }
    .ph-phone .pnav > .sched-label { font-size: var(--fs-sm); }
    .ph-phone .pnav > .nav-today { width: 44px; padding: 0; }
    .ph-phone .nav-short { display: none; }
    .ph-phone .nav-ico { display: block; width: 20px; height: 20px; }
  }
  /* Time off: the three views share the segmented row equally (a long name is cut, never wrapped) */
  .ph-phone #to-views { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-phone #to-views button { display: block; min-width: 0; padding: 0 .4rem; line-height: 41px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @container ph (max-width: 300px) { .ph-phone #to-views button { padding: 0; } }
  /* Employees: its chips row never fills, so the phone gives it back; the bar is the store chips; search + Filters below */
  .ph[data-ph="employees"] .ph-stats { display: none; }
  #employees-bar { display: block; min-height: 0; }
  .emp-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
  .emp-filters input[type=search] { max-width: none; }
  /* Fix punches: one "who and which dates" button (the name is cut, the dates stay) */
  #p-fbtn { max-width: none; width: 100%; justify-content: flex-start; }
  #se-seen { height: 44px; }
  /* the sheets */
  .fsheet-body { display: flex; flex-direction: column; gap: .9rem; padding-top: .25rem; }
  .fsheet-body > .field, .fsheet-body > .fs-wrap > * { width: 100%; }
  .fsheet-body label { margin: 0 0 .35rem; }
  .fsheet-body label.row { min-height: 44px; margin: 0; }
  .fsheet-body > .fs-wrap { display: flex; flex-direction: column; gap: .9rem; }
  .fsheet-body .toolbar { margin: 0; }
  #p-sheet .toolbar .field:first-child, #p-sheet #p-run { flex-basis: 100%; }
}

/* ================================================================ What's new (docs/design/2026-11-whats-new.md)
   Chips: New · Better · Fixed · Security, soft fill + its ink (AA in light and dark); the dot uses the business accent */
.wn-chip { display: inline-flex; align-items: center; gap: .3rem; min-height: 22px; padding: 0 .55rem; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-tight); vertical-align: middle; white-space: nowrap; }
.wn-chip.is-new { background: var(--accent-soft); color: var(--accent); }
.wn-chip.is-improved { background: var(--grey-soft); color: var(--ink); }
.wn-chip.is-fixed { background: var(--amber-soft); color: var(--flag-ink); }
.wn-chip.is-security { background: var(--grey-soft); color: var(--muted); }
.wn-chip.is-security::before { content: ""; width: 9px; height: 10px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M2 4V3a2.5 2.5 0 0 1 5 0v1h.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5zm1 0h3V3a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M2 4V3a2.5 2.5 0 0 1 5 0v1h.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5zm1 0h3V3a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (forced-colors: active) { .wn-chip { border: 1px solid CanvasText; } }
/* the unread dot: on the avatar, in the account menu, and on the Me tab */
.ab-me.has-new::after { content: ""; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.ab-new-dot { display: inline-block; width: 8px; height: 8px; margin-left: .4rem; border-radius: 50%; background: var(--accent); vertical-align: middle; }
#ab-news:not(.has-new) .ab-new-dot { display: none; }
.ab-menu .ab-ver { margin: .3rem 0 0; padding: .45rem .8rem .2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); }
.tab-count.is-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; background: var(--accent); }
/* the version lines (Settings › Your account, Me) */
.wn-foot { margin: 1rem 0 0; color: var(--muted); font-size: var(--fs-xs); display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; }
.wn-foot .link { font-size: inherit; min-height: 44px; }
.wn-foot a { color: inherit; }
/* the sheet: from the right on wide screens (full height, 440px), from the bottom below 1024px */
dialog.wn-sheet { width: min(440px, 100vw); }
@media (min-width: 1024px) {
  dialog.wn-sheet { inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  dialog.wn-sheet .wn-handle { display: none; }
}
@media (max-width: 1023px) {
  dialog.wn-sheet { inset: auto 0 0 0; margin: 0 auto; width: min(640px, 100%); height: 85dvh; max-height: 85dvh; border-radius: var(--r-3) var(--r-3) 0 0; }
}
dialog.wn-sheet[open] { display: flex; flex-direction: column; }
.wn-handle { display: block; width: 36px; height: 4px; margin: .5rem auto 0; border-radius: 2px; background: var(--line); }
.wn-sheet .dlg-body { flex: 1 1 auto; }
.wn-rel { margin: 0 0 1.25rem; }
.wn-rel h3 { margin: .5rem 0 .1rem; font-size: var(--fs-base); }
.wn-rel > .muted { margin: 0 0 .5rem; }
.wn-list { list-style: none; margin: 0; padding: 0; }
.wn-item { padding: .75rem 0 .75rem .75rem; border-top: 1px solid var(--line); border-left: 3px solid transparent; }
.wn-item.is-unread { border-left-color: var(--yellow, var(--line)); }
.wn-item b { font-weight: 600; }
.wn-item p { margin: .25rem 0 0; font-size: var(--fs-sm); }
.wn-item .wn-where { color: var(--muted); }
.wn-item .btn-small { margin-top: .5rem; }
.wn-all { display: inline-block; margin: .25rem 0 1rem; font-size: var(--fs-sm); }
/* Overview highlight card and the employee Me card */
.wn-card, .wn-emp { position: relative; }
.wn-card h3, .wn-emp h3 { margin: 0 0 .5rem; padding-right: 2.5rem; }
.wn-card ul, .wn-emp ul { list-style: none; margin: 0; padding: 0; }
.wn-card li, .wn-emp li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .35rem 0; }
.wn-emp li { align-items: flex-start; }
.wn-emp li p { margin: .1rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.wn-card .wn-card-foot, .wn-emp .wn-card-foot { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
/* Show me: two soft rings on the real control, then a short note; reduced motion: a still outline */
.wn-spot { animation: wn-ring .8s ease-out 2; } /* rings only: no position or z-index (a stacking context would trap menus) */
@keyframes wn-ring {
  from { box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow) 45%, transparent); }
  to { box-shadow: 0 0 0 12px color-mix(in srgb, var(--yellow) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .wn-spot { animation: none; outline: 2px solid var(--yellow); outline-offset: 2px; } }
.wn-tip { position: absolute; z-index: var(--z-pop); max-width: min(320px, calc(100vw - 2rem)); padding: .75rem .9rem; border-radius: var(--r-2);
  background: var(--ink); color: var(--bg); font-size: var(--fs-sm); box-shadow: var(--sh-2);
  display: flex; align-items: center; gap: .75rem; }
.wn-tip button { flex: none; min-height: 44px; background: transparent; color: inherit; border: 1px solid currentColor; }
/* Kiosk: the version only, quiet, bottom right */
.kiosk-ver { position: fixed; right: .75rem; bottom: .5rem; margin: 0; color: var(--muted); font-size: var(--fs-xs); opacity: .5; pointer-events: none; }


/* Find anything (docs/design/2026-11-help-and-search.md §1.7): the app bar's field-like button (icon only under 1180 so
   the bar never wraps), the icon in the phone bar, and one window: top-aligned on wider screens, full screen on phones */
.ab-find { display: inline-flex; align-items: center; justify-content: flex-start; gap: .5rem; width: 220px; height: var(--control-h); padding: 0 .5rem 0 .75rem;
  background: var(--field); color: var(--muted); border: 1.5px solid var(--control-border); border-radius: var(--control-radius);
  font-size: var(--fs-sm); font-weight: 500; }
.ab-find:hover { background: var(--field); border-color: var(--control-hover); color: var(--ink); }
.ab-find svg, .ab-find-m svg { width: 20px; height: 20px; flex: none; }
.ab-find-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.ab-find-k { flex: none; color: var(--muted); font-size: var(--fs-xs); }
.ab-find-k:empty { display: none; }
@media (max-width: 1179px) {
  .ab-find { width: 44px; padding: 0; justify-content: center; border-radius: 50%; border-color: transparent; background: transparent; color: var(--ink); }
  .ab-find:hover { background: var(--grey-soft); border-color: transparent; }
  .ab-find-t, .ab-find-k { display: none; }
}
.ab-find-m { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  background: transparent; color: #fff; border: 1px solid transparent; }
.ab-find-m:hover { background: rgba(255,255,255,.12); }

dialog.dlg-find { width: min(560px, calc(100vw - 2rem)); inset: 0 0 auto 0; margin: 12vh auto auto; max-height: calc(88vh - 1rem); }
dialog .find-bar { display: flex; align-items: center; gap: .25rem; padding: .25rem .5rem .25rem 1rem; border-bottom: 1px solid var(--line); }
.find-ico { display: grid; place-items: center; color: var(--muted); }
.find-ico svg { width: 20px; height: 20px; }
#find-q { flex: 1; min-width: 0; height: 52px; margin: 0; padding: 0 .25rem; border: 0; background: transparent; box-shadow: none; font-size: var(--fs-md); color: var(--ink); }
.find-clear, .find-cancel { flex: none; height: 44px; min-width: 44px; padding: 0 .5rem; background: transparent; color: var(--muted); border: 0; font-size: var(--fs-sm); }
.find-clear { font-size: var(--fs-lg); font-weight: 400; }
.find-clear:hover, .find-cancel:hover { background: var(--hover); color: var(--ink); }
.find-clear[hidden] { display: none; }
.find-x { padding: .05rem .4rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font-size: var(--fs-xs); font-weight: 600; }
.find-cancel-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
dialog .find-results { flex: 1 1 auto; min-height: 0; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; padding: .25rem .5rem .5rem; }
.find-msg:empty, .find-extra:empty { display: none; }
.find-g + .find-g { margin-top: .25rem; }
.find-gl { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 32px; padding: .35rem .75rem .15rem; color: var(--muted); font-size: var(--fs-xs); }
.find-gl > span { font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; }
.find-gl .link { min-height: 32px; padding: 0 .25rem; font-size: var(--fs-xs); }
.find-opt { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .35rem .75rem; border-radius: var(--r-2); cursor: pointer; }
.find-opt[aria-selected="true"] { background: var(--grey-soft); }
.find-opt[aria-selected="true"]::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--accent); }
.find-opt[aria-disabled="true"] { cursor: default; }
.find-ti { flex: none; display: grid; place-items: center; color: var(--muted); }
.find-ti svg { width: 20px; height: 20px; }
.find-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: var(--lh-snug); }
.find-t, .find-w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-t { color: var(--ink); font-weight: 600; }
.find-t mark { background: var(--accent-soft); color: var(--ink); border-radius: 3px; }
.find-w { color: var(--muted); font-size: var(--fs-sm); }
.find-tag { flex: none; padding: .1rem .55rem; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.find-opt.is-locked .find-t, .find-opt.is-skel .find-t { color: var(--muted); font-weight: 500; }
.find-none { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem .75rem .5rem; color: var(--muted); font-size: var(--fs-sm); }
.find-none svg { flex: none; width: 32px; height: 32px; }
.find-none p { margin: 0; } .find-none b { color: var(--ink); overflow-wrap: anywhere; }
.find-hint { margin: .5rem .75rem .25rem; color: var(--muted); font-size: var(--fs-sm); }
.find-note { cursor: default; margin: 0 .5rem; } .find-note .find-t { color: var(--muted); font-weight: 500; }
.find-clear-recent { margin: 0 .5rem .25rem; }
.find-alert { margin: .5rem .25rem; }
.find-foot { margin: 0; padding: .6rem 1rem; border-top: 1px solid var(--line); background: var(--ph-bar-bg); color: var(--muted); font-size: var(--fs-xs); }
@media (hover: none) and (pointer: coarse) { .find-foot { display: none; } }
@media (prefers-reduced-motion: no-preference) { dialog.dlg-find[open] { animation: find-in .12s ease-out; } }
@keyframes find-in { from { opacity: 0; transform: translateY(-6px); } }
@media (forced-colors: active) { .find-opt[aria-selected="true"] { outline: 2px solid Highlight; } .find-t mark { forced-color-adjust: none; } }
@media (max-width: 640px) {
  dialog.dlg-find { inset: 0; margin: 0; width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  #find-q { font-size: var(--fs-base); } /* 16px: iPhones don't zoom into the field */
  dialog .find-bar { padding-left: .75rem; }
  dialog .find-results { max-height: none; }
  .find-opt { min-height: 56px; }
  .find-x { display: none; }
  .find-cancel { color: var(--ink); font-weight: 600; }
  .find-cancel-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* How this page works (§2.1): the "?" in every page header (44px, never folded into More) and its window */
.ph-help { position: relative; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--field); color: var(--ink);
  border: 1.5px solid var(--control-border); }
.ph-help:hover { background: var(--fill); border-color: var(--control-hover); }
.ph-help svg { width: 20px; height: 20px; }
.ph-help-dot { display: none; position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ph-help.is-new .ph-help-dot { display: block; }
.ph-actions > .ph-help { flex: none; width: 44px; min-width: 44px; padding: 0; }
/* A header whose only action is "?" keeps it next to the title on narrow screens (no extra row) */
@container ph (max-width: 640px) {
  .ph-actions:not(:has(> :not(.ph-help))), .role-manager .ph-actions:not(:has(> :not(.ph-help, .lead-only))) {
    grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin: 0 0 0 .5rem; }
}
/* Phone headers (docs/design/2026-11-phone-headers.md) keep their title row for the title and the page's own buttons:
   the "?" sits at the end of the description row there (still in the header, never in More) */
@media (max-width: 640px) {
  .ph-phone .ph-actions > .ph-help { position: absolute; top: calc(1rem + 58px); inset-inline-end: 1rem; }
  .ph-phone .ph-desc { padding-inline-end: 52px; }
}
.ph-tip { grid-column: 2 / -1; grid-row: 4; align-self: center; margin: .75rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 640px), (hover: none) and (pointer: coarse) { .ph-tip { display: none; } }
.help-dlg .dlg-head h2:focus { outline: none; }
.help-for { margin: 0 0 .5rem; }
.help-h { margin: 1rem 0 .25rem; font-size: var(--fs-sm); font-weight: 700; }
.help-steps, .help-good { margin: 0; padding-inline-start: 1.25rem; }
.help-steps li, .help-good li { margin: .25rem 0; }
/* Help centre links in the app: More in the help centre, an article's own notes, Learn more under a Settings section */
.help-more { margin: 1rem 0 0; font-size: var(--fs-sm); }
.help-more a, .set-learn { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.help-dlg .help-note, .help-dlg .help-tip { margin: .75rem 0; padding: .6rem .8rem; border-radius: var(--r-2); background: var(--fill); }
.help-show { min-height: 44px; padding: 0 .35rem; vertical-align: middle; color: var(--ink); font-weight: 600; }

.set-learn-line { margin: .25rem 0 0; }
/* Was this useful? at the foot of a "?" window or an article (a count only) */
.help-dlg .help-useful { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line); }
.help-dlg .help-useful p { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
/* Help on the phone's Me tab: rows that are buttons, laid out like the links above them */
.me-link-btn { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; min-height: 44px; padding: .45rem 0;
  border: 0; border-radius: 0; background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.me-link-btn:hover { background: none; }
.me-link-btn, .me-link-btn > span { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.me-link-btn .me-link-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--control-border); }
.ehelp-list { margin-top: .5rem; }
.wn-item .wn-how { display: inline-flex; align-items: center; min-height: 44px; margin-inline-start: .75rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }

/* ================================================================ Touch targets (audit 6): one rule
   On a touch screen every control is at least 44px tall. The first list is weightless (:where), so a control that is flat on
   purpose (a shift chip in a calendar cell, a sort header, a folder link: min-height 0) keeps that. The second list is the
   compact controls that set a smaller min-height of their own, and links styled as controls. Keep it last in the file. */
@media (pointer: coarse) {
  :where(button, .btn, [role="tab"], summary, select:not(.ui-native), input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], .ui-native, .sr-only, .who-field input)),
  .link, button.ph-stat, .ph-back, .eh-back, a.to-note, .to-note-link, .site .btn.site-cta-sm, .rate-btn, .swap-pick, .fm-smart button, .fm-node,
  .ms-items button, .match-table .ps-acts .btn-small, .chip-shift, .add-shift, .sched-dmenu, .sched-hbtn { min-height: 44px; }
  .ph-back, .eh-back, a.to-note, .to-note-link { display: inline-flex; align-items: center; }
  .ui-cal-nav, .cal-date, .ps-pager .btn-small, #ps-pg-zoom, .sched-dmenu { min-width: 44px; }
  /* the x on a person token: a 44px target; the token keeps its 30px height (the margin takes the extra back) and the
     circle stays 26px (the padding is outside the painted area) */
  .who-token button { min-width: 44px; min-height: 44px; margin: -9px; padding: 9px; background-clip: content-box; }
}