/* Gallop v1.0: normalized tokens. See docs/IMPLEMENTATION.md. */
:root{
  --g-color-navy:#142E40;
  --g-color-teal:#147E65;
  --g-color-mint:#DFF1E4;
  --g-color-ivory:#FFFDF5;
  --g-color-muted:#5D7169;
  --g-color-gold:#E7BD66;
  --g-color-white:#FFFFFF;
  --g-color-line:#B9CABC;
  --g-color-teal-pressed:#125B46;
  --g-color-error:#A63429;
  --g-color-error-surface:#FFF0E9;
  --g-color-warning:#805510;
  --g-color-warning-surface:#FFF0DB;
  --g-color-staff-surface:#EEE7FA;
  --g-font-body:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --g-font-accent:"Segoe Print", "Bradley Hand", cursive;
  --g-font-size-caption:12px;
  --g-font-size-small:14px;
  --g-font-size-body:16px;
  --g-font-size-heading-small:20px;
  --g-font-size-heading:25px;
  --g-font-size-display:29px;
  --g-font-size-metric:38px;
  --g-line-height-body:1.5;
  --g-line-height-heading:1.2;
  --g-space-4:4px;
  --g-space-8:8px;
  --g-space-12:12px;
  --g-space-14:14px; /* Compact phone gutter at 320 px (IMPLEMENTATION.md). */
  --g-space-16:16px;
  --g-space-18:18px;
  --g-space-24:24px;
  --g-space-32:32px;
  --g-space-48:48px;
  --g-radius-input:10px;
  --g-radius-button:13px;
  --g-radius-card:18px;
  --g-radius-hero:20px;
  --g-radius-phone:32px;
  --g-radius-round:999px;
  --g-shadow-card:0 6px 17px #24491B06;
  --g-shadow-raised:0 3px 0 #125B46;
  --g-shadow-phone:0 16px 48px #173B2310;
  --g-motion-card:180ms;
  --g-motion-greet:800ms;
  --g-motion-bell:900ms;
  --g-motion-cheer:1050ms;
  --g-motion-goodbye:1100ms;
  --g-motion-splash:2400ms;
  --g-motion-ease:cubic-bezier(.22,.7,.3,1);
  --g-size-touch:44px;
  --g-size-primary:48px;
  --g-size-phone:390px;
}
@media(prefers-reduced-motion:reduce){:root{--g-motion-card:0ms;--g-motion-greet:0ms;--g-motion-bell:0ms;--g-motion-cheer:0ms;--g-motion-goodbye:0ms;--g-motion-splash:0ms}}

/* The manager web stylesheet. Colours, type sizes, spacing and radii are the brand kit's tokens (the
   block above is design/brand/tokens/tokens.css, copied verbatim; a spec checks that, and that nothing
   below it spells a colour of its own). Look and component rules follow
   design/brand/proposed/web-base/components.html, approved 14 Oct 2026.
   The names below are the 17 Sep palette's. Views and a few inline <style> blocks still use them, so
   they stay, each one pointing at the token that now stands for it. */
:root {
  --navy: var(--g-color-navy); --teal: var(--g-color-teal); --ink: var(--g-color-navy);
  --slate: var(--g-color-muted); --soft: var(--g-color-muted);
  --border: var(--g-color-line); --border-hover: var(--g-color-muted);
  --surface: var(--g-color-ivory); --off: var(--g-color-ivory); --card: var(--g-color-white);
  --ok: var(--g-color-teal); --warn: var(--g-color-warning); --crit: var(--g-color-error); --info: var(--g-color-teal);
  /* Small text on mint is navy (mint with teal or muted text is under 4.5:1), so every text shade that can
     land on a mint chip or tile is navy; the colour comes from the surface, the shape or a word. */
  --ok-bg: var(--g-color-mint);   --ok-text: var(--g-color-navy);
  --warn-bg: var(--g-color-warning-surface); --warn-text: var(--g-color-warning); --warn-line: var(--g-color-gold);
  --crit-bg: var(--g-color-error-surface);   --crit-text: var(--g-color-error);   --crit-line: var(--g-color-error);
  --teal-bg: var(--g-color-mint); --teal-line: var(--g-color-line); --teal-text: var(--g-color-navy);
  --shadow: var(--g-shadow-card);
  --acting: var(--g-color-staff-surface);
  /* The page's side gutter: the topbar and the acting banner bleed to the edge by taking it back. */
  --gutter: var(--g-space-32);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--g-color-ivory); color: var(--g-color-navy); font-family: var(--g-font-body); font-size: var(--g-font-size-body); line-height: var(--g-line-height-body); }
h1 { font-size: var(--g-font-size-display); font-weight: 700; line-height: var(--g-line-height-heading); margin: 0 0 var(--g-space-12); }
h2 { font-size: var(--g-font-size-heading-small); font-weight: 700; line-height: var(--g-line-height-heading); margin: 0 0 var(--g-space-8); }
h3 { font-size: var(--g-font-size-body); font-weight: 700; margin: 0 0 var(--g-space-8); }
h4 { font-size: var(--g-font-size-small); font-weight: 700; margin: 0 0 var(--g-space-4); }
p { margin: 0 0 var(--g-space-12); }
a { color: var(--g-color-navy); text-underline-offset: var(--g-space-4); }
.sub { color: var(--g-color-muted); font-size: var(--g-font-size-small); margin-bottom: var(--g-space-12); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--g-space-4) solid var(--g-color-navy); outline-offset: var(--g-space-4); }

/* Outside the login: the wordmark, then the same hero-and-pose arrangement Home uses, one card wide. */
.auth { max-width: var(--g-size-phone); margin: 0 auto; padding: var(--g-space-48) var(--g-space-18); }
.auth__brand { display: flex; justify-content: center; }
.auth__logo { height: var(--g-space-32); width: auto; }
.auth .hero--with-pose { margin-top: 112px; }
.auth .hero__pose { right: var(--g-space-18); width: 128px; margin-bottom: -46px; }
.auth__card { position: relative; z-index: 1; }
.auth__title { font-size: var(--g-font-size-heading-small); margin-bottom: var(--g-space-4); }
.auth__actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--g-space-12); margin-top: var(--g-space-18); }
.auth__link { color: var(--g-color-navy); font-weight: 600; }

/* Cards */
.card { background: var(--g-color-white); border-radius: var(--g-radius-card); box-shadow: var(--g-shadow-card); padding: var(--g-space-24); }
.card + .card { margin-top: var(--g-space-16); }
.card--float { box-shadow: var(--g-shadow-card); }

/* Buttons. Every button is 44 px at least and a primary one 48. A bare <button> gets the plain look; the
   classes below pick the family member. */
button { font: inherit; color: inherit; cursor: pointer; min-height: var(--g-size-touch); min-width: var(--g-size-touch); padding: var(--g-space-8) var(--g-space-16); border: 0; border-radius: var(--g-radius-button); background: var(--g-color-mint); font-weight: 600; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--g-space-8); min-height: var(--g-size-touch); min-width: var(--g-size-touch); padding: var(--g-space-8) var(--g-space-16); border: 0; border-radius: var(--g-radius-button); background: var(--g-color-mint); color: var(--g-color-navy); font: inherit; font-weight: 600; line-height: var(--g-line-height-heading); text-decoration: none; cursor: pointer; }
.btn:hover { box-shadow: var(--g-shadow-card); }
.btn--primary { min-height: var(--g-size-primary); background: var(--g-color-teal); color: var(--g-color-white); box-shadow: var(--g-shadow-raised); }
.btn--primary:hover { background: var(--g-color-teal-pressed); box-shadow: var(--g-shadow-raised); }
.btn--primary:active { background: var(--g-color-teal-pressed); box-shadow: none; }
.btn--secondary { box-shadow: var(--g-shadow-card); }
.btn--quiet { background: var(--g-color-white); text-decoration: underline; text-underline-offset: var(--g-space-4); }
.btn--danger { background: var(--g-color-error); color: var(--g-color-white); }
.btn:disabled, button:disabled { background: var(--g-color-line); color: var(--g-color-navy); cursor: not-allowed; box-shadow: none; }
.link { display: inline-flex; align-items: center; min-height: var(--g-size-touch); padding: 0 var(--g-space-8); background: none; border: 0; border-radius: var(--g-radius-input); color: var(--g-color-navy); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: var(--g-space-4); }

/* Page messages: a mint notice with a teal edge; trouble gets the error or warning surface and its own edge. */
.flash, .alert { padding: var(--g-space-16); border-radius: var(--g-radius-input); margin-bottom: var(--g-space-16); background: var(--g-color-mint); border-inline-start: var(--g-space-4) solid var(--g-color-teal); color: var(--g-color-navy); font-weight: 600; }
.flash--warn, .alert--warning { background: var(--g-color-warning-surface); border-inline-start-color: var(--g-color-warning); }
.alert--error { background: var(--g-color-error-surface); border-inline-start-color: var(--g-color-error); }
.flash > :last-child, .alert > :last-child { margin-bottom: 0; }
.alert ul { margin: var(--g-space-8) 0 0; padding-left: var(--g-space-24); font-weight: 400; }

/* Form fields. The border is the muted token because a control's edge has to be seen, not just hinted. */
.field { display: flex; flex-direction: column; gap: var(--g-space-8); margin-bottom: var(--g-space-16); }
.field label { display: flex; align-items: center; gap: var(--g-space-12); font-size: var(--g-font-size-small); font-weight: 700; color: var(--g-color-navy); }
.field label:has(input[type=checkbox], input[type=radio]) { min-height: var(--g-size-touch); }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]), select, textarea { min-height: var(--g-size-touch); padding: var(--g-space-8) var(--g-space-12); border: var(--g-space-4) solid var(--g-color-muted); border-radius: var(--g-radius-input); background: var(--g-color-white); color: var(--g-color-navy); font: inherit; }
.field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea { display: block; width: 100%; }
textarea { resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--g-color-teal); width: var(--g-space-24); height: var(--g-space-24); margin: 0; flex-shrink: 0; }
input[type=file] { max-width: 100%; font: inherit; }
input[aria-invalid=true] { border-color: var(--g-color-error); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--g-space-16); min-width: 0; }
legend { padding: 0; font-size: var(--g-font-size-small); font-weight: 700; }

/* Tables: a mint header, plain rows that alternate white and ivory, text 14 px. */
.table { width: 100%; border-collapse: collapse; font-size: var(--g-font-size-small); background: var(--g-color-white); }
.table th { text-align: left; vertical-align: middle; font-weight: 600; background: var(--g-color-mint); padding: var(--g-space-12) var(--g-space-16); }
.table td { text-align: left; vertical-align: middle; padding: var(--g-space-12) var(--g-space-16); overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.table tr:nth-child(even) td { background: var(--g-color-ivory); }
.table td:first-child { font-weight: 600; }
.table .sub { margin: 0; }

/* Chips: a plain one is a label, --teal is the picked one, and the rest say how it is going in words as well as colour. */
.chip { display: inline-flex; align-items: center; gap: var(--g-space-8); border-radius: var(--g-radius-round); padding: var(--g-space-4) var(--g-space-12); font-size: var(--g-font-size-small); font-weight: 600; background: var(--g-color-white); color: var(--g-color-navy); border: 1px solid var(--g-color-line); white-space: nowrap; }
.chip--teal { background: var(--g-color-mint); border-color: var(--g-color-teal); }
.chip--warn { background: var(--g-color-warning-surface); color: var(--g-color-warning); border-color: var(--g-color-gold); }
.chip--crit { background: var(--g-color-error-surface); color: var(--g-color-error); border-color: var(--g-color-error); }
.chip--ok { background: var(--g-color-mint); border-color: var(--g-color-line); }
.chip--grey { background: var(--g-color-line); border-color: var(--g-color-line); }
a.chip, button.chip { min-height: var(--g-size-touch); text-decoration: none; }
.row { display: flex; gap: var(--g-space-12); align-items: center; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-size-phone)), 1fr)); gap: var(--g-space-16); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Roster page: the leave and availability card */
.roster__availability { margin-top: var(--g-space-24); }
.roster__availability .row { align-items: flex-end; flex-wrap: wrap; }

/* Task board, the "Why" screen, and the handover / escalation queues */
.dot { display: inline-block; width: var(--g-space-8); height: var(--g-space-8); border-radius: 50%; vertical-align: middle; }
.board { margin-top: var(--g-space-12); }
.board td { vertical-align: middle; }
.board__time { width: 120px; }
.board__filters { flex-wrap: wrap; }
.board__filters .chip { text-decoration: none; }
.steps { margin: var(--g-space-8) 0 var(--g-space-24); padding-left: var(--g-space-24); }
.steps li { margin-bottom: var(--g-space-8); }
.run { margin-bottom: var(--g-space-16); }
.run .row { flex-wrap: wrap; }
.run__steps, .run__scores { margin-bottom: var(--g-space-12); }
.run h4 { margin: var(--g-space-12) 0 var(--g-space-4); }
.pick { margin-top: var(--g-space-12); }
.pick .row { align-items: flex-end; flex-wrap: wrap; }
.pick .field { max-width: var(--g-size-phone); }

/* Setup tabs: a row of buttons over a line; the page you are on is mint with a teal edge. */
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-8); margin: 0 0 var(--g-space-24); padding-bottom: var(--g-space-12); border-bottom: var(--g-space-4) solid var(--g-color-line); }
.tab { display: inline-flex; align-items: center; min-height: var(--g-size-touch); padding: var(--g-space-8) var(--g-space-16); border-radius: var(--g-radius-input); border-bottom: var(--g-space-4) solid transparent; background: var(--g-color-white); color: var(--g-color-navy); font-weight: 600; text-decoration: none; }
.tab:hover { background: var(--g-color-mint); }
.tab--on { background: var(--g-color-mint); border-bottom-color: var(--g-color-teal); font-weight: 700; }

/* The workflow builder, as three steps */
.step { background: var(--g-color-white); border-radius: var(--g-radius-card); box-shadow: var(--g-shadow-card); padding: var(--g-space-24); margin-bottom: var(--g-space-18); }
.step h2 { display: flex; align-items: center; gap: var(--g-space-12); margin: 0 0 var(--g-space-4); }
.step__n { display: inline-flex; align-items: center; justify-content: center; width: var(--g-space-32); height: var(--g-space-32); border-radius: 50%; background: var(--g-color-teal); color: var(--g-color-white); font-size: var(--g-font-size-small); font-weight: 700; flex-shrink: 0; }

/* .field is display:flex, which beats the browser default for [hidden] */
[hidden] { display: none !important; }

/* An invoice is a document somebody prints. The app's furniture — sidebar, tab bar, buttons — is
   noise on paper, and a customer's accountant should get the invoice and nothing else. */
@media print {
  /* .acting is in the list because a printed invoice that carries "You are inside Kampunglah" is a
     Gallop-internal banner on a document a customer files with their accounts. */
  .sidebar, .topbar, .tabs, .flash, .no-print, .btn, .acting { display: none !important; }
  .main { margin: 0; padding: 0; }
}
.invoice__meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--g-space-4) var(--g-space-16); }
.invoice__meta dt { font-weight: 700; }
.invoice__meta dd { margin: 0; }

/* Trouble floats to the top of the customer list and is marked, so a row still reads as trouble
   after somebody has scrolled past the sort order. */
.table tr.portal__row--overdue td { background: var(--g-color-error-surface); }
.table tr.portal__row--renewing_soon td { background: var(--g-color-warning-surface); }
.portal__actions { white-space: nowrap; }
.portal__actions form { display: inline; }

/* The customer's outlets in the portal (D-R6): one card per outlet, ready-to-check first, Start work and
   Go live beside each. A row on a wide screen, stacked on a phone. */
.outlets { display: grid; gap: var(--g-space-12); }
.outlet { background: var(--g-color-ivory); border-radius: var(--g-radius-card); padding: var(--g-space-16); }
.outlet__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--g-space-16); align-items: center; }
.outlet__row h4 { overflow-wrap: anywhere; }
.outlet__state { margin: 0; font-size: var(--g-font-size-small); }
.outlet__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-12); }
.outlet__actions .sub, .outlet > .sub { margin: 0; }
.outlet details { margin-top: var(--g-space-8); }
.outlet summary { min-height: var(--g-size-touch); display: flex; align-items: center; font-size: var(--g-font-size-small); font-weight: 600; cursor: pointer; }
.outlet-confirm { max-width: calc(var(--g-size-phone) * 2); }
.outlet-confirm__actions { flex-wrap: wrap; margin-top: var(--g-space-16); }
.portal__flags { display: flex; flex-wrap: wrap; gap: var(--g-space-8); margin-top: var(--g-space-4); }
@media (max-width: 640px) { .outlet__row { grid-template-columns: minmax(0, 1fr); } }

/* The shell: mint sidebar, ivory page, a white title bar. */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 240px; flex-shrink: 0; align-self: flex-start; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--g-color-mint); padding: var(--g-space-24); display: flex; flex-direction: column; gap: var(--g-space-24); }
.sidebar__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-16); }
.sidebar__logo { height: var(--g-space-32); width: auto; display: block; }
.sidebar__menu { display: none; }
.sidebar__menu summary { list-style: none; display: flex; align-items: center; min-height: var(--g-size-touch); padding: var(--g-space-8) var(--g-space-16); background: var(--g-color-white); border-radius: var(--g-radius-button); font-weight: 600; cursor: pointer; }
.sidebar__menu summary::-webkit-details-marker { display: none; }
.sidebar__links { display: flex; flex: 1; flex-direction: column; gap: var(--g-space-24); }
.sidebar__staff { display: grid; gap: var(--g-space-4); }
.sidebar__tenant { font-size: var(--g-font-size-small); font-weight: 700; overflow-wrap: anywhere; }
.sidebar__group { font-size: var(--g-font-size-caption); font-weight: 700; letter-spacing: .06em; padding: 0 var(--g-space-16); }
.sidebar__note { font-size: var(--g-font-size-small); margin: 0; }
.nav-group { display: grid; gap: var(--g-space-4); }
.nav { display: flex; align-items: center; gap: var(--g-space-8); min-height: var(--g-size-touch); padding: var(--g-space-8) var(--g-space-16) var(--g-space-8) var(--g-space-12); border-inline-start: var(--g-space-4) solid transparent; border-radius: var(--g-radius-input); color: var(--g-color-navy); text-decoration: none; transition: background var(--g-motion-card) var(--g-motion-ease); }
.nav:hover { background: var(--g-color-ivory); }
.nav--on, .nav--on:hover { background: var(--g-color-white); border-inline-start-color: var(--g-color-gold); font-weight: 700; box-shadow: var(--g-shadow-card); }
.nav__count { margin-left: auto; font-size: var(--g-font-size-caption); font-weight: 700; background: var(--g-color-white); color: var(--g-color-navy); border-radius: var(--g-radius-round); padding: 0 var(--g-space-8); font-variant-numeric: tabular-nums; }
.nav--on .nav__count { background: var(--g-color-mint); }
.sidebar__bottom { margin-top: auto; }
.sidebar__user { display: flex; align-items: center; gap: var(--g-space-8); font-size: var(--g-font-size-small); }
.sidebar__user form { margin-left: auto; }
.sidebar__user .link { white-space: nowrap; }
.sidebar__name { min-width: 0; overflow-wrap: anywhere; }
.avatar { width: var(--g-space-32); height: var(--g-space-32); border-radius: 50%; background: var(--g-color-navy); color: var(--g-color-white); font-size: var(--g-font-size-caption); font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.main { flex: 1; min-width: 0; padding: 0 var(--gutter) var(--g-space-32); }
.topbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--g-space-12) var(--g-space-16); margin: 0 calc(var(--gutter) * -1) var(--g-space-24); padding: var(--g-space-16) var(--gutter); background: var(--g-color-white); }
.topbar__title { font-size: var(--g-font-size-heading); font-weight: 800; margin: 0; }
.topbar__action { margin-left: var(--g-space-4); }
.topbar__chip { margin-left: var(--g-space-8); }
.topbar__switch { margin-left: auto; display: flex; align-items: center; gap: var(--g-space-12); }
.topbar__switch form { display: flex; align-items: center; flex-wrap: wrap; gap: var(--g-space-12); margin: 0; }
.topbar__label { font-size: var(--g-font-size-small); font-weight: 700; }
.topbar__go { padding: var(--g-space-8) var(--g-space-16); }
.acting { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--g-space-8) var(--g-space-16); background: var(--g-color-staff-surface); color: var(--g-color-navy); padding: var(--g-space-12) var(--gutter); margin: 0 calc(var(--gutter) * -1); font-size: var(--g-font-size-small); font-weight: 600; }
.acting .btn { background: var(--g-color-white); color: var(--g-color-navy); }
@media (max-width: 640px) {
  :root { --gutter: var(--g-space-18); }
  .shell { display: block; }
  .sidebar { width: auto; position: static; height: auto; overflow: visible; padding: var(--g-space-18); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--g-space-16); }
  .sidebar__menu { display: block; }
  /* Collapsed until Menu is opened. The links sit beside the <details>, not in it, so they are never
     hidden from anything that reads the page; only this rule hides them. */
  .sidebar__links { display: none; grid-column: 1 / -1; }
  .sidebar__menu[open] ~ .sidebar__links { display: flex; }
  .nav-group { display: flex; flex-wrap: wrap; }
  .nav { padding-inline-end: var(--g-space-12); }
  .topbar__switch { margin-left: 0; width: 100%; }
  .topbar__switch form { width: 100%; }
  .topbar__switch select { flex: 1; min-width: 0; }
  .card { padding: var(--g-space-16); }
  .row { flex-wrap: wrap; }
  /* A table wider than the phone scrolls inside itself; the page does not scroll sideways. */
  .table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Tile — a number with a next tap */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g-space-16); margin-top: var(--g-space-16); }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tiles { grid-template-columns: 1fr; } }
.tile { display: flex; flex-direction: column; gap: var(--g-space-4); background: var(--g-color-mint); border-inline-start: var(--g-space-4) solid transparent; border-radius: var(--g-radius-card); box-shadow: var(--g-shadow-card); padding: var(--g-space-16) var(--g-space-24); color: var(--g-color-navy); text-decoration: none; transition: box-shadow var(--g-motion-card) var(--g-motion-ease); }
.tile:hover { box-shadow: var(--g-shadow-raised); }
.tile--attention { border-inline-start-color: var(--g-color-gold); }
.tile--critical { border-inline-start-color: var(--g-color-error); }
.tile__label { font-size: var(--g-font-size-small); font-weight: 600; }
.tile__value { font-size: var(--g-font-size-metric); font-weight: 800; line-height: var(--g-line-height-heading); font-variant-numeric: tabular-nums; }
.tile__note { font-size: var(--g-font-size-small); font-weight: 600; display: inline-flex; align-items: center; gap: var(--g-space-8); }


/* Pakcu strip — his one line, leaning in from behind the box */
.pakcu-strip { position: relative; display: flex; flex-direction: column; justify-content: center; margin-top: var(--g-space-12); background: var(--g-color-mint); border-radius: var(--g-radius-input); padding: var(--g-space-12) var(--g-space-16); min-height: 56px; }
.pakcu-strip--with-pose { margin-left: 44px; padding-left: 62px; min-height: 64px; }
/* The artwork is a transparent cut-out (17 Sep set), so nothing is scaled or cropped inside the box:
   he stands whole, anchored to the strip's bottom-left, clipped to the strip's own height so he never
   covers the row above. Tuned by eye against all 20 poses at one canvas size (~1250px, aspect 0.93–1.10). */
.pakcu-strip__pose { position: absolute; left: -40px; top: -1px; bottom: -1px; width: 100px; overflow: hidden; border-radius: var(--g-radius-input) 0 0 var(--g-radius-input); pointer-events: none; }
.pakcu-strip__pose img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.pakcu-strip__tag { font-size: var(--g-font-size-caption); font-weight: 700; letter-spacing: .06em; }
.pakcu-strip__title { font-weight: 600; }
.pakcu-strip__body { margin: var(--g-space-4) 0 0; font-size: var(--g-font-size-small); }

/* Home's greeting, with Pakcu behind it */
/* The cut-out stands behind the card: the card (z-index 1) hides his lower body, the rest rises into
   the room .hero's top margin leaves under the topbar. No crop box — a transparent PNG needs none. */
.hero { position: relative; margin-top: var(--g-space-24); }
/* The extra room is for Pakcu, who rises out of the card's top edge. Without him there is
   nothing above the card to make room for, and the gap read as a missing element. */
.hero--with-pose { margin-top: 80px; }
.hero__pose { position: absolute; right: var(--g-space-32); bottom: 100%; margin-bottom: -54px; width: 140px; z-index: 0; pointer-events: none; }
.hero__pose img { display: block; width: 100%; height: auto; }
.hero__bubble { position: absolute; right: 172px; top: -40px; z-index: 2; background: var(--g-color-white); border-radius: var(--g-radius-card); padding: var(--g-space-8) var(--g-space-12); font-size: var(--g-font-size-small); font-weight: 600; box-shadow: var(--g-shadow-card); max-width: 240px; }
.hero__card { position: relative; z-index: 1; border-radius: var(--g-radius-hero); }
.hero__greeting { font-size: var(--g-font-size-heading-small); font-weight: 800; margin: 0; }
.hero__facts { margin: var(--g-space-4) 0 0; font-size: var(--g-font-size-small); font-feature-settings: "tnum"; }
@media (max-width: 640px) { .hero__bubble { right: auto; left: 0; } }

/* Onboarding steps — ten rows per outlet, a word for status, a link for the next tap */
.steps { list-style: none; margin: var(--g-space-8) 0 0; padding: 0; }
.steps__row { display: grid; grid-template-columns: var(--g-space-32) 1fr auto; align-items: center; gap: var(--g-space-12); padding: var(--g-space-8) 0; border-top: 1px solid var(--g-color-mint); }
.steps__number { font-weight: 700; font-feature-settings: "tnum"; }
.steps__name { font-weight: 600; }
.steps__hint { margin-left: var(--g-space-8); color: var(--g-color-muted); font-size: var(--g-font-size-small); }
.steps__status { font-size: var(--g-font-size-small); font-weight: 700; }
.steps__status--open { text-decoration: underline; text-underline-offset: var(--g-space-4); }
.steps__checklist { margin-top: var(--g-space-12); padding-top: var(--g-space-12); border-top: 1px solid var(--g-color-mint); font-size: var(--g-font-size-small); }
.steps__checklist ul { margin: var(--g-space-8) 0 0; padding-left: var(--g-space-24); }
.steps__tailor { grid-column: 2 / span 2; display: flex; gap: var(--g-space-12); align-items: center; flex-wrap: wrap; }

/* Dialogs */
dialog { width: 100%; max-width: var(--g-size-phone); margin: auto; padding: var(--g-space-24); border: 0; border-radius: var(--g-radius-card); background: var(--g-color-ivory); color: var(--g-color-navy); box-shadow: var(--g-shadow-phone); }
dialog::backdrop { background: var(--g-color-mint); }
dialog p { margin-block: var(--g-space-16); }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--g-space-16); margin-top: var(--g-space-24); }
@media (max-width: 640px) { dialog { padding: var(--g-space-18); } }

/* Setup link (design D-S8, design/brand/proposed/setup-link/). The staff set-password page sits outside
   the shell, one phone column wide; the manager's Setup link panel sits on a person's page. */
.set-password { max-width: var(--g-size-phone); margin: 0 auto; padding: var(--g-space-24) var(--g-space-18) var(--g-space-48); }
.set-password h1 { font-size: var(--g-font-size-display); margin: 0; }
.set-password h2 { font-size: var(--g-font-size-heading-small); margin: 0; }
.set-password p { margin: 0; }
.set-password__language { margin-bottom: var(--g-space-24); }
.set-password__language label { display: block; font-size: var(--g-font-size-small); font-weight: 600; margin-bottom: var(--g-space-8); }
.set-password__language select { display: block; width: 100%; }
.set-password__brand { text-align: center; margin-bottom: var(--g-space-24); }
.set-password__wordmark { display: block; width: calc(var(--g-space-48) * 3); height: auto; margin: auto; }
.set-password__brand p { font-size: var(--g-font-size-small); margin-top: var(--g-space-8); }
.set-password__hero { display: flex; align-items: center; gap: var(--g-space-12); padding: var(--g-space-16); background: var(--g-color-mint); border-radius: var(--g-radius-hero); margin-bottom: var(--g-space-24); }
.set-password__hero > div { flex: 1; min-width: 0; }
.set-password__hero p { margin-top: var(--g-space-12); }
.set-password__hero--state { align-items: flex-start; }
.set-password__hero--state h1 { font-size: var(--g-font-size-heading); }
.set-password__pose { width: calc(var(--g-space-48) * 2); height: calc(var(--g-space-48) * 3); object-fit: contain; flex-shrink: 0; }
.set-password__guide { width: calc(var(--g-space-32) * 2); height: calc(var(--g-space-48) * 2); object-fit: contain; flex-shrink: 0; }
.set-password__error-heading { margin-bottom: var(--g-space-24); }
.set-password__error-heading p { margin-top: var(--g-space-12); }
.set-password [hidden] { display: none; }
.set-password__card { padding: var(--g-space-16); }
.set-password__stack { display: grid; gap: var(--g-space-16); }
.set-password__form { display: grid; gap: var(--g-space-18); }
.set-password__form label { display: block; font-weight: 600; font-size: var(--g-font-size-small); margin-bottom: var(--g-space-8); }
.set-password__field { display: flex; align-items: center; border: 2px solid var(--g-color-muted); border-radius: var(--g-radius-input); background: var(--g-color-white); }
.set-password__field:has([aria-invalid=true]) { border-color: var(--g-color-error); }
.set-password__field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]) { width: 100%; min-width: 0; min-height: var(--g-size-primary); border: 0; background: transparent; padding: var(--g-space-12); border-radius: var(--g-radius-input); }
.set-password__toggle { background: transparent; padding: var(--g-space-8) var(--g-space-12); flex-shrink: 0; }
.set-password__help { font-size: var(--g-font-size-small); color: var(--g-color-muted); margin-top: var(--g-space-8); }
.set-password .field-error, .setup-link .field-error { font-size: var(--g-font-size-small); color: var(--g-color-error); margin-top: var(--g-space-8); }
.set-password .field-error:empty, .setup-link .field-error:empty { display: none; }
.set-password__submit { width: 100%; }
.set-password__waiting { font-size: var(--g-font-size-small); }
.set-password__waiting:empty { display: none; }
.set-password__footnote { margin-top: var(--g-space-24); text-align: center; font-size: var(--g-font-size-small); color: var(--g-color-muted); }
.set-password__link { display: inline-flex; align-items: center; min-height: var(--g-size-touch); min-width: var(--g-size-touch); color: var(--g-color-teal); }
.set-password__success { text-align: center; padding: var(--g-space-24) var(--g-space-16); border-radius: var(--g-radius-hero); background: var(--g-color-mint); margin-bottom: var(--g-space-24); }
.set-password__success .set-password__pose { display: block; margin: 0 auto var(--g-space-16); }
.set-password__success p { margin-top: var(--g-space-12); }
.set-password__steps { padding: 0; margin: var(--g-space-16) 0; list-style: none; display: grid; gap: var(--g-space-16); }
.set-password__step { display: flex; gap: var(--g-space-12); }
.set-password__number { display: grid; place-items: center; width: var(--g-space-32); height: var(--g-space-32); flex-shrink: 0; background: var(--g-color-mint); border-radius: var(--g-radius-round); font-weight: 600; }
.set-password__stores { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-12); }
.set-password__store { display: inline-flex; min-height: var(--g-size-primary); }
.set-password__store img { display: block; height: var(--g-size-primary); width: auto; }
@media (max-width: 320px) { .set-password { padding-inline: var(--g-space-14); } .set-password__hero { gap: var(--g-space-8); } .set-password__hero h1 { font-size: var(--g-font-size-heading); } }

.setup-link { display: grid; gap: var(--g-space-24); margin-bottom: var(--g-space-24); }
.setup-link__card { padding: var(--g-space-24); }
.setup-link__head { display: flex; justify-content: space-between; align-items: start; gap: var(--g-space-24); flex-wrap: wrap; margin-bottom: var(--g-space-24); }
.setup-link__head h2 { font-size: var(--g-font-size-heading); margin: 0; }
.setup-link__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-size-phone)), 1fr)); gap: var(--g-space-32); }
.setup-link__actions { display: grid; gap: var(--g-space-12); align-content: start; }
.setup-link__actions > p:first-child { margin-bottom: var(--g-space-12); }
.setup-link__actions .sub { margin: 0; }
.setup-link__form, .setup-link__form .btn, .setup-link__actions > .btn { width: 100%; }
.setup-link__edit { display: inline-flex; align-items: center; min-height: var(--g-size-touch); min-width: var(--g-size-touch); color: var(--g-color-teal); }
.setup-link__label { font-size: var(--g-font-size-small); font-weight: 600; margin-bottom: var(--g-space-12); }
.setup-link__message { background: var(--g-color-ivory); border: 1px solid var(--g-color-line); border-radius: var(--g-radius-card); padding: var(--g-space-16); display: grid; gap: var(--g-space-12); overflow-wrap: anywhere; }
.setup-link__message p { margin: 0; }
.setup-link__live { padding: var(--g-space-12); background: var(--g-color-mint); border-radius: var(--g-radius-input); font-size: var(--g-font-size-small); margin: var(--g-space-16) 0 0; }
.setup-link__live:empty { display: none; }
.setup-link__note { display: flex; flex-wrap: wrap; gap: var(--g-space-16); align-items: center; background: var(--g-color-mint); border-radius: var(--g-radius-hero); padding: var(--g-space-16) var(--g-space-24); }
.setup-link__note > div { min-width: 0; }
.setup-link__note img { width: calc(var(--g-space-32) * 2); height: calc(var(--g-space-48) * 2); object-fit: contain; }
.setup-link__note p { font-size: var(--g-font-size-small); margin: var(--g-space-4) 0 0; }
@media (max-width: 390px) { .setup-link__card { padding: var(--g-space-16); } .setup-link__note { padding: var(--g-space-16); } }

/* Outlet and company pages (D-OUT, design/brand/proposed/company-outlet/redesign-local). Cards, buttons, fields and
   chips are the shared ones above; these are the few shapes only these pages have. */
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-16); flex-wrap: wrap; margin-bottom: var(--g-space-16); }
.pagehead h1 { margin-bottom: var(--g-space-4); }
.pagehead p { margin-bottom: 0; }
.pagehead__pakcu { height: calc(var(--g-space-48) * 2); width: auto; object-fit: contain; flex-shrink: 0; }
.outlet-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-16); align-items: start; margin-bottom: var(--g-space-16); }
.outlet-cards > .card, .outlet-cards + .card { margin-top: 0; }
@media (max-width: 780px) { .outlet-cards { grid-template-columns: 1fr; } }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-12); flex-wrap: wrap; margin-bottom: var(--g-space-12); }
.card__head h2 { margin: 0; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-12) var(--g-space-16); margin: 0 0 var(--g-space-12); }
.facts dt { font-size: var(--g-font-size-small); color: var(--g-color-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts dd > a { display: inline-flex; align-items: center; min-height: var(--g-size-touch); }
.summary-value { font-size: var(--g-font-size-metric); font-weight: 700; line-height: var(--g-line-height-heading); margin: 0; }
.summary-caption { font-size: var(--g-font-size-small); color: var(--g-color-muted); margin: 0 0 var(--g-space-8); }
.hours-group { padding: var(--g-space-8) 0; border-top: var(--g-space-4) solid var(--g-color-mint); }
.hours-group:first-of-type { border-top: 0; }
.hours-group strong { display: block; }
.fold { margin-top: var(--g-space-8); }
.fold > summary { cursor: pointer; display: flex; align-items: center; min-height: var(--g-size-touch); font-weight: 600; }
.fold[open] > summary { margin-bottom: var(--g-space-8); }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: var(--g-space-16); }
.tree__section { background: var(--g-color-ivory); border-radius: var(--g-radius-input); padding: var(--g-space-8) var(--g-space-12); margin-bottom: var(--g-space-8); }
.tree__role { font-weight: 600; margin: var(--g-space-8) 0 var(--g-space-4); }
.tree a { display: inline-flex; align-items: center; min-height: var(--g-size-touch); }
.field-error { font-size: var(--g-font-size-small); color: var(--g-color-navy); background: var(--g-color-error-surface); border-radius: var(--g-radius-input); padding: var(--g-space-8) var(--g-space-12); margin: var(--g-space-4) 0 0; }
.field-hint { font-size: var(--g-font-size-small); color: var(--g-color-muted); margin: 0; }
.read-only { background: var(--g-color-ivory); border-radius: var(--g-radius-input); padding: var(--g-space-12); }
.times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-space-12); }
@media (max-width: 430px) { .times { gap: var(--g-space-8); } }
.week-day { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--g-space-12); align-items: center; padding: var(--g-space-12); background: var(--g-color-ivory); border-radius: var(--g-radius-input); margin-bottom: var(--g-space-8); }
.check.touch { display: inline-flex; align-items: center; gap: var(--g-space-8); min-height: var(--g-size-touch); cursor: pointer; }
.tree__section > details > summary { cursor: pointer; display: flex; align-items: center; min-height: var(--g-size-touch); }
.week-day__title { display: flex; flex-direction: column; gap: var(--g-space-4); }
.week-day .field { margin-bottom: 0; }
@media (max-width: 640px) { .week-day { grid-template-columns: 1fr; } .week-day__title { flex-direction: row; justify-content: space-between; align-items: center; } }
.holiday-row { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-12); flex-wrap: wrap; padding: var(--g-space-12); background: var(--g-color-ivory); border-radius: var(--g-radius-input); margin-bottom: var(--g-space-8); }
.holiday-row__what { min-width: 0; overflow-wrap: anywhere; }
.holiday-row__what p { margin: 0; }
.holiday-row__actions { display: flex; gap: var(--g-space-8); flex-wrap: wrap; align-items: center; }
.holiday-row__actions form { margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--g-space-16); }
.form-grid .wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.actions { display: flex; gap: var(--g-space-12); flex-wrap: wrap; align-items: center; }

/* Manager work pages (D-WK, approved 20 Oct 2026): Tasks, one task, Handovers, Escalations, Goals settings.
   Tokens only. Pakcu sits in the page header and in empty states, never in a form, table or dialog. */
.page-intro { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-24); border-radius: var(--g-radius-hero); background: var(--g-color-mint); padding: var(--g-space-16) var(--g-space-24); margin-bottom: var(--g-space-24); }
.page-intro > * { min-width: 0; }
.page-intro__title { font-size: var(--g-font-size-display); line-height: var(--g-line-height-heading); margin: var(--g-space-8) 0; overflow-wrap: anywhere; }
.page-intro p { margin: 0; max-width: calc(var(--g-size-phone) * 2); overflow-wrap: anywhere; }
.page-intro__pose { width: calc(var(--g-space-48) * 2); height: calc(var(--g-space-48) * 3); object-fit: contain; flex-shrink: 0; }
.eyebrow { font-size: var(--g-font-size-caption); font-weight: 600; text-transform: uppercase; margin: 0; }
.work-nav { display: flex; flex-wrap: wrap; gap: var(--g-space-8); margin-bottom: var(--g-space-24); }
.work-nav .btn[aria-current="page"] { background: var(--g-color-navy); color: var(--g-color-white); }
.back-link { margin-bottom: var(--g-space-16); }
.back-link a { display: inline-flex; align-items: center; min-height: var(--g-size-touch); padding: 0 var(--g-space-16); background: var(--g-color-white); border-radius: var(--g-radius-button); color: var(--g-color-navy); font-weight: 600; text-decoration: underline; text-underline-offset: var(--g-space-4); }
.work-stack { display: grid; gap: var(--g-space-24); }
.work-stack > * { min-width: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--g-space-16); margin-bottom: var(--g-space-12); }
.section-heading h2, .section-heading h3 { margin: 0; }
.day-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--g-space-16); margin-bottom: var(--g-space-16); }
.day-form .field { margin-bottom: 0; }
.board-chips { display: flex; flex-wrap: wrap; gap: var(--g-space-8); margin: 0 0 var(--g-space-16); }
.board-chip { display: inline-flex; align-items: center; min-height: var(--g-size-touch); padding: var(--g-space-8) var(--g-space-16); border-radius: var(--g-radius-button); border-bottom: var(--g-space-4) solid transparent; background: var(--g-color-ivory); color: var(--g-color-navy); font-size: var(--g-font-size-small); font-weight: 600; text-decoration: none; }
.board-chip[aria-current="page"] { background: var(--g-color-mint); border-bottom-color: var(--g-color-teal); }
.board-wrap { container: task-board / inline-size; }
table.board { width: 100%; border-collapse: collapse; font-size: var(--g-font-size-small); table-layout: fixed; background: var(--g-color-white); }
table.board caption { text-align: left; padding-bottom: var(--g-space-12); }
table.board th { background: var(--g-color-mint); font-weight: 600; text-align: left; padding: var(--g-space-12) var(--g-space-8); }
table.board td { padding: var(--g-space-12) var(--g-space-8); vertical-align: middle; overflow-wrap: anywhere; }
table.board tbody tr:nth-child(even) { background: var(--g-color-ivory); }
table.board th:nth-child(1) { width: 18%; }
table.board th:nth-child(2) { width: 27%; }
table.board th:nth-child(3) { width: 14%; }
table.board th:nth-child(4) { width: 20%; }
table.board th:nth-child(5) { width: 21%; }
table.board .board__time { font-weight: 600; white-space: normal; }
table.board .chip { white-space: normal; }
.board__why { display: block; }
/* Narrow: one block per task, label beside each value, Who and Status always in view. */
@container task-board (width < 780px) {
  table.board { table-layout: auto; }
  table.board thead { display: none; }
  table.board tbody, table.board tr { display: block; }
  table.board tr { padding: var(--g-space-12); border-bottom: var(--g-space-4) solid var(--g-color-ivory); }
  table.board td { display: grid; grid-template-columns: var(--g-space-48) minmax(0, 1fr); gap: var(--g-space-12); padding: var(--g-space-4) 0; }
  table.board td::before { content: attr(data-label); font-size: var(--g-font-size-caption); font-weight: 600; }
}
.empty-state { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-24); padding: var(--g-space-24); border-radius: var(--g-radius-card); background: var(--g-color-mint); }
.empty-state > * { min-width: 0; }
.empty-state h2 { margin: 0 0 var(--g-space-8); }
.empty-state p { margin: 0; }
.task-split { display: flex; flex-wrap: wrap; gap: var(--g-space-24); align-items: flex-start; }
.task-split > * { flex: 1 1 calc(var(--g-size-phone) / 2); min-width: 0; }
.task-split > :first-child { flex: 2 1 var(--g-size-phone); }
.task-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-16); margin: 0 0 var(--g-space-16); }
.task-facts dt { font-size: var(--g-font-size-small); color: var(--g-color-muted); }
.task-facts dd { margin: var(--g-space-4) 0 0; font-weight: 600; overflow-wrap: anywhere; }
.card details { border-top: var(--g-space-4) solid var(--g-color-ivory); }
.card details > summary { min-height: var(--g-size-touch); display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.card details > .details__body { padding-bottom: var(--g-space-16); }
.card details form .field:last-of-type { margin-bottom: var(--g-space-16); }
.note { padding: var(--g-space-12) var(--g-space-16); background: var(--g-color-ivory); border-radius: var(--g-radius-input); }
.change-context { padding: var(--g-space-12) var(--g-space-16); background: var(--g-color-ivory); border-radius: var(--g-radius-input); margin: 0 0 var(--g-space-16); font-weight: 600; overflow-wrap: anywhere; }
.change-actions { display: grid; gap: var(--g-space-12); }
.change-actions > .btn, .change-actions form > .btn, .change-actions button { width: 100%; }
.change-actions form { margin: 0; }
.helper { font-size: var(--g-font-size-small); color: var(--g-color-muted); margin: 0; }
.reading { display: flex; align-items: center; flex-wrap: wrap; gap: var(--g-space-16); }
.reading strong { font-size: var(--g-font-size-heading); }
.photo-row { display: flex; flex-wrap: wrap; gap: var(--g-space-12); }
.photo-row img { width: 160px; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--g-radius-input); }
.queue-card { display: grid; gap: var(--g-space-16); }
.queue-card > * { min-width: 0; margin: 0; }
.queue-heading { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--g-space-16); }
.queue-heading h3 { font-size: var(--g-font-size-heading-small); margin: 0 0 var(--g-space-8); overflow-wrap: anywhere; }
.queue-actions { display: flex; flex-wrap: wrap; gap: var(--g-space-12); align-items: center; }
.queue-actions form { margin: 0; }
.queue-actions .btn[disabled] { background: var(--g-color-line); color: var(--g-color-navy); cursor: not-allowed; box-shadow: none; }
.level-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-12); margin: var(--g-space-24) 0 var(--g-space-16); }
.level-heading h2 { margin: 0; }
.category-heading { margin: var(--g-space-24) 0 var(--g-space-12); }
.goal-card { display: grid; gap: var(--g-space-12); margin-bottom: var(--g-space-16); }
.goal-card > * { min-width: 0; margin: 0; }
.goal-card details { border-top: var(--g-space-4) solid var(--g-color-ivory); }
.goal-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-16); margin: 0; }
.goal-facts dt { font-size: var(--g-font-size-small); color: var(--g-color-muted); }
.goal-facts dd { margin: var(--g-space-4) 0 0; font-weight: 600; overflow-wrap: anywhere; }
.library { margin-top: var(--g-space-32); }
@media (max-width: 390px) {
  .page-intro { padding: var(--g-space-16); gap: var(--g-space-12); }
  .page-intro__pose { width: var(--g-space-48); height: calc(var(--g-space-48) * 1.5); }
  .task-facts, .goal-facts { grid-template-columns: minmax(0, 1fr); gap: var(--g-space-12); }
  .queue-actions .btn, .queue-actions form { width: 100%; }
  .queue-actions form .btn { width: 100%; }
  .empty-state { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 320px) { .page-intro__pose { display: none; } }
/* Setup pages (D-SET, design/brand/proposed/setup/, approved 21 Oct 2026): People, one person, Add person,
   Import. Tokens only. Pakcu sits in the page header and empty states, never in a form, table or dialog. */
.dset-tabs { display: flex; flex-wrap: wrap; gap: var(--g-space-8); margin: 0 0 var(--g-space-24); padding-bottom: var(--g-space-12); border-bottom: var(--g-space-4) solid var(--g-color-line); }
.dset-tab { display: inline-flex; align-items: center; min-height: var(--g-size-touch); padding: var(--g-space-8) var(--g-space-16); border-radius: var(--g-radius-button); border-bottom: var(--g-space-4) solid transparent; color: var(--g-color-navy); font-weight: 600; text-decoration: none; }
.dset-tab:hover { background: var(--g-color-mint); }
.dset-tab[aria-current="page"] { background: var(--g-color-mint); border-bottom-color: var(--g-color-teal); font-weight: 700; }
.people-card { display: grid; gap: var(--g-space-16); }
.people-card > * { min-width: 0; margin: 0; }
.people-card__actions { display: flex; flex-wrap: wrap; gap: var(--g-space-12); }
.people-search .field { margin: 0; }
.people-search__row { display: flex; gap: var(--g-space-12); }
.people-search__row input { flex: 1; min-width: 0; }
.people-group { display: grid; gap: var(--g-space-12); min-width: 0; }
.people-group__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--g-space-8); }
.people-group__head h3 { margin: 0; }
.people-group__head .sub, .people-group > .sub { margin: 0; }
/* Wide: the table scrolls inside its card, never the page. Narrow: one block per person, label above each value. */
.people-table { container: people-table / inline-size; max-width: 100%; overflow-x: auto; }
.people-table .table { min-width: calc(var(--g-size-phone) * 1.5); }
.people-table__line { display: block; }
.people-table__tags { display: flex; flex-wrap: wrap; gap: var(--g-space-4); }
@media (max-width: 390px) {
  .people-table .table { display: block; min-width: 0; }
  .people-table thead { display: none; }
  .people-table tbody, .people-table tr, .people-table td { display: block; }
  .people-table tr { padding: var(--g-space-12) 0; border-bottom: var(--g-space-4) solid var(--g-color-ivory); }
  .people-table tr:nth-child(even) td { background: transparent; }
  .people-table td { padding: var(--g-space-4) 0; }
  .people-table td::before { content: attr(data-label); display: block; font-size: var(--g-font-size-caption); font-weight: 600; color: var(--g-color-muted); }
}
.person-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--g-space-16); margin-bottom: var(--g-space-16); }
.person-head .back-link { margin: 0; }
.person-head__chips { display: flex; flex-wrap: wrap; gap: var(--g-space-8); margin: var(--g-space-8) 0 0; }
.person-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-size-phone)), 1fr)); gap: var(--g-space-24); }
.person-grid > * { min-width: 0; }
.person-grid > .card + .card { margin-top: 0; }
.work-stack > .card + .card { margin-top: 0; }
.person-facts { grid-template-columns: minmax(0, 1fr); }
.person-outlet { background: var(--g-color-ivory); border-radius: var(--g-radius-input); padding: var(--g-space-16); margin-bottom: var(--g-space-12); }
.person-outlet .task-facts { margin-bottom: var(--g-space-8); }
.person-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--g-space-12); padding: var(--g-space-8) 0; }
.person-row form { margin: 0; }
.person-list { list-style: none; margin: 0 0 var(--g-space-16); padding: 0; display: grid; gap: var(--g-space-12); }
.person-list--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--g-size-phone) * 0.75)), 1fr)); }
.person-tile { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--g-space-12); background: var(--g-color-ivory); border-radius: var(--g-radius-input); padding: var(--g-space-16); }
.person-tile > div:first-child { min-width: 0; flex: 1; }
.person-tile h3 { margin: 0 0 var(--g-space-4); }
.person-tile .sub { margin: 0 0 var(--g-space-8); }
.person-tile form { margin: 0; }
.person-document { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--g-size-phone) * 0.75)), 1fr)); gap: var(--g-space-24); margin-bottom: var(--g-space-24); }
.person-document > * { min-width: 0; }
.person-document__photo { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--g-color-line); border-radius: var(--g-radius-input); overflow: hidden; }
.person-document__photo a { display: block; width: 100%; height: 100%; }
.person-document__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--g-space-16); }
.dialog-head h2 { margin: 0; overflow-wrap: anywhere; }
.dialog-list { margin: var(--g-space-12) 0; padding-left: var(--g-space-18); }
.dialog-list li { margin-bottom: var(--g-space-8); }
.dialog-actions form { margin: 0; }
dialog .note p { margin: 0 0 var(--g-space-8); }
.import-steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--g-space-8); margin: 0 0 var(--g-space-24); padding: 0; }
.import-steps li { display: inline-flex; align-items: center; min-height: var(--g-size-touch); padding: var(--g-space-8) var(--g-space-12); border-radius: var(--g-radius-button); font-size: var(--g-font-size-small); }
.import-steps li[aria-current="step"] { background: var(--g-color-mint); font-weight: 700; }
.import-card { display: grid; gap: var(--g-space-12); }
.import-card > * { min-width: 0; }
.import-card h2, .import-card .sub, .import-card .alert { margin: 0; }
.import-wrap { container: import-table / inline-size; }
.import-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--g-font-size-small); }
.import-table th { background: var(--g-color-mint); font-weight: 600; text-align: left; padding: var(--g-space-12) var(--g-space-8); }
.import-table td { vertical-align: top; padding: var(--g-space-12) var(--g-space-8); }
.import-table .field { margin-bottom: var(--g-space-12); }
.import-table input:not([type=checkbox]), .import-table select { width: 100%; min-width: 0; }
.import-row--fix td { background: var(--g-color-error-surface); }
.import-row--out td { background: var(--g-color-ivory); }
.import-table .helper { margin: 0 0 var(--g-space-8); }
.import-table .field-error, .dset-form .field-error { font-size: var(--g-font-size-small); color: var(--g-color-error); margin: 0; }
/* Narrow: each row is a card with every field in view. */
@container import-table (width < 760px) {
  .import-table, .import-table tbody, .import-table tr, .import-table td { display: block; }
  .import-table thead { display: none; }
  .import-table tr { border-radius: var(--g-radius-input); margin-bottom: var(--g-space-16); overflow: hidden; border: 1px solid var(--g-color-line); }
  .import-table td { padding: var(--g-space-8) var(--g-space-12); }
}
.import-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--g-space-12); }
.import-actions .sub { margin: 0; }
.added-person { background: var(--g-color-white); border-radius: var(--g-radius-card); box-shadow: var(--g-shadow-card); padding: var(--g-space-24) var(--g-space-24) 0; }
.added-person .section-heading h2 a { text-decoration: none; }
.added-person .setup-link__card { box-shadow: none; padding: 0; }
.dset-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--g-size-phone) * 0.75)), 1fr)); gap: 0 var(--g-space-16); }
.dset-wide { width: 100%; }
@media (max-width: 390px) {
  .person-head .btn, .people-card__actions .btn { flex: 1; }
  .people-search__row { flex-wrap: wrap; }
  .people-search__row .btn { width: 100%; }
  .added-person { padding: var(--g-space-16) var(--g-space-16) 0; }
  .import-actions .queue-actions .btn { width: 100%; }
}

/* Shared by the roster side grid (rosters/_side_grid): a wide table scrolls inside itself. */
.table-scroll { overflow: auto; }
/* Workflow builder and list (D-WF, design/brand/proposed/workflows/, approved 20 Oct 2026). The page sits
   on ivory like every other web page (DECISIONS 20 Oct); mint is for dialog backdrops, highlights and the
   main goal. Item rows are compact: one line at desktop width, two at phone width. */
.wfb { display: grid; gap: var(--g-space-16); }
.wfb .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wfb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-16); }
.wfb-head > div { min-width: 0; }
.wfb-head h1 { margin: var(--g-space-4) 0; overflow-wrap: anywhere; }
.wfb-head p { margin: 0; }
.wfb-crumb { font-size: var(--g-font-size-small); color: var(--g-color-muted); }
.wfb-crumb a { color: var(--g-color-muted); }
.wfb-pose { width: calc(var(--g-space-48) * 2); height: calc(var(--g-space-48) * 2); object-fit: contain; flex-shrink: 0; }
.wfb-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-12); }
.wfb-row--between { justify-content: space-between; }
.wfb-row--nowrap { flex-wrap: nowrap; }
.wfb-row form { margin: 0; }
.wfb-status .sub { margin: 0; }
.wfb-form { display: grid; gap: var(--g-space-16); }
.wfb-section { display: grid; gap: var(--g-space-12); align-content: start; }
.wfb-section h2 { display: flex; align-items: center; gap: var(--g-space-8); margin: 0; }
.wfb-section .field { margin-bottom: 0; }
.wfb-section .sub { margin: 0; }
.wfb .step__n { background: var(--g-color-mint); color: var(--g-color-navy); }
.wfb-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-size-phone)), 1fr)); gap: var(--g-space-16); }
.wfb-two > .card + .card { margin-top: 0; }
.wfb-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--g-size-phone) / 2)), 1fr)); gap: 0 var(--g-space-16); }
.wfb-fields > .sub { grid-column: 1 / -1; }
.wfb-actions { margin-top: var(--g-space-8); }
.wfb-error { color: var(--g-color-error); font-size: var(--g-font-size-small); font-weight: 600; margin: 0; }
.wfb-notice { padding: var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-mint); border-inline-start: var(--g-space-4) solid var(--g-color-teal); margin: 0 0 var(--g-space-16); }
.wfb-notice .sub { margin: var(--g-space-4) 0 0; }
.wfb-notice--warn { background: var(--g-color-warning-surface); border-inline-start-color: var(--g-color-warning); font-size: var(--g-font-size-small); }
.wfb-choice { display: flex; align-items: center; gap: var(--g-space-12); min-height: var(--g-size-touch); font-weight: 400; overflow-wrap: anywhere; }
.wfb-choice--type { align-items: flex-start; padding-block: var(--g-space-8); }
.wfb-choice--type > span { display: grid; gap: var(--g-space-4); }
.wfb-choice--type .sub { margin: 0; }
.wfb-indent { padding-inline-start: calc(var(--g-space-24) + var(--g-space-12)); }
.wfb-icon { width: var(--g-size-primary); height: var(--g-size-primary); object-fit: contain; border-radius: var(--g-radius-input); flex-shrink: 0; }
.wfb-type { font-size: var(--g-font-size-small); margin: 0; }
.wfb-empty-items { color: var(--g-color-muted); margin: 0; }

/* Compact item rows. */
.wfb-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g-space-8); }
.wfb-item { display: grid; grid-template-columns: var(--g-space-32) minmax(0, 1fr) auto auto auto auto; grid-template-areas: "icon text meta edit up down"; align-items: center; gap: var(--g-space-8) var(--g-space-12); padding: var(--g-space-8) var(--g-space-12); border-radius: var(--g-radius-input); background: var(--g-color-ivory); }
.wfb-item--open { box-shadow: inset 0 0 0 2px var(--g-color-teal); }
.wfb-item .wfb-icon { grid-area: icon; width: var(--g-space-32); height: var(--g-space-32); }
.wfb-item__text { grid-area: text; display: flex; align-items: baseline; gap: var(--g-space-8); min-width: 0; }
.wfb-item__kind { font-size: var(--g-font-size-caption); color: var(--g-color-muted); white-space: nowrap; }
.wfb-item__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfb-item__meta { grid-area: meta; font-size: var(--g-font-size-small); white-space: nowrap; }
.wfb-item__meta .chip { white-space: normal; margin-inline-start: var(--g-space-8); }
.wfb-item__actions { display: contents; }
.wfb-item__edit { grid-area: edit; }
.wfb-item__up { grid-area: up; }
.wfb-item__down { grid-area: down; }
@media (max-width: 900px) {
  .wfb-item { grid-template-columns: var(--g-space-32) minmax(0, 1fr) auto auto; grid-template-areas: "icon text text edit" "meta meta up down"; align-items: start; }
  .wfb-item__text { flex-direction: column; align-items: flex-start; gap: 0; }
  .wfb-item__kind, .wfb-item__title, .wfb-item__meta { white-space: normal; overflow-wrap: anywhere; }
  .wfb-item__meta { align-self: center; }
}

/* Goals on an item: the main goal is mint. */
.wfb-goals { list-style: none; margin: 0 0 var(--g-space-12); padding: 0; display: grid; gap: var(--g-space-8); }
.wfb-goal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--g-space-12); padding: var(--g-space-8) var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-white); overflow-wrap: anywhere; }
.wfb-goal--main { background: var(--g-color-mint); }
.wfb-goal--none { color: var(--g-color-muted); }
.wfb-goal-add { align-items: flex-end; flex-wrap: nowrap; }
.wfb-goal-add .field { flex: 1; min-width: 0; margin-bottom: 0; }

/* The item editor drawer and the builder's dialogs. */
.wfb-drawer { margin: 0 0 0 auto; width: min(100%, calc(var(--g-size-phone) + var(--g-space-48) * 4)); max-width: 100%; height: 100dvh; max-height: 100dvh; padding: 0; border-radius: 0; overflow: auto; background: var(--g-color-ivory); }
.wfb-drawer[open]:not(:modal) { position: fixed; inset: 0 0 0 auto; z-index: 10; box-shadow: var(--g-shadow-phone); }
.wfb-drawer__head, .wfb-drawer__foot { padding: var(--g-space-24); background: var(--g-color-white); }
.wfb-drawer__head { display: grid; gap: var(--g-space-12); }
.wfb-drawer__head .sub { margin: 0; }
.wfb-drawer__head h2 { font-size: var(--g-font-size-heading); margin: 0; overflow-wrap: anywhere; }
.wfb-drawer__body { padding: var(--g-space-24); }
.wfb-drawer__body fieldset { margin-bottom: var(--g-space-16); }
.wfb-drawer__body legend { margin-bottom: var(--g-space-8); }
.wfb-drawer__remove { padding: var(--g-space-16) var(--g-space-24) var(--g-space-24); }
.wfb-more { margin-top: var(--g-space-8); }
.wfb-more summary { display: flex; align-items: center; min-height: var(--g-size-touch); font-weight: 600; cursor: pointer; }
.wfb-dialog { max-width: min(100%, calc(var(--g-size-phone) + var(--g-space-48) * 4)); }
.wfb-dialog fieldset { margin: var(--g-space-16) 0; }
.wfb-dialog .dialog-actions form { margin: 0; }
.wfb-dialog[open]:not(:modal) { position: fixed; inset: 0; z-index: 10; }

/* The list. */
.wfb-list-bar { align-items: flex-end; }
.wfb-filter { display: flex; align-items: flex-end; gap: var(--g-space-12); margin: 0; }
.wfb-filter .field { margin: 0; }
.wfb-table-card { padding: var(--g-space-16); overflow-x: auto; }
.wfb-table caption { text-align: left; font-size: var(--g-font-size-small); font-weight: 600; padding-bottom: var(--g-space-12); }
.wfb-table td, .wfb-table th { overflow-wrap: normal; word-break: normal; }
.wfb-table-empty { margin: var(--g-space-12) 0 0; }
.wfb-empty { display: flex; align-items: center; gap: var(--g-space-24); }
.wfb-empty__pose { width: calc(var(--g-space-48) * 3); height: calc(var(--g-space-48) * 3); object-fit: contain; flex-shrink: 0; }
@media (max-width: 640px) {
  .wfb-pose { width: var(--g-space-48); height: calc(var(--g-space-48) * 2); }
  .wfb-drawer__head, .wfb-drawer__body, .wfb-drawer__foot { padding: var(--g-space-18); }
  .wfb-empty { flex-direction: column; align-items: flex-start; }
  .wfb-empty__pose { width: calc(var(--g-space-48) * 2); height: calc(var(--g-space-48) * 2); }
  .wfb-goal-add { flex-wrap: wrap; }
}

/* Tickets on the manager web (D-TW, approved 20 Oct 2026; T2w): the list, one ticket, the dashboard and
   Ticket settings. Tokens only. Pakcu sits in the page header and in empty states, never in a form, a
   table or a dialog. Tables keep all their columns and scroll inside their own box on a narrow screen. */
.ticket-updated { margin-top: var(--g-space-8); }
.page-intro .back-link { margin: 0 0 var(--g-space-8); }
.ticket-offline { margin-bottom: var(--g-space-16); }
.ticket-filters__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--g-size-phone) / 2.5)), 1fr)); gap: 0 var(--g-space-16); }
.ticket-filters__actions { flex-wrap: wrap; margin-bottom: var(--g-space-12); }
.ticket-table-wrap { overflow-x: auto; border-radius: var(--g-radius-input); }
.ticket-table { width: 100%; min-width: calc(var(--g-size-phone) * 2); border-collapse: collapse; font-size: var(--g-font-size-small); background: var(--g-color-white); }
.ticket-breakdown { min-width: calc(var(--g-size-phone) * 1.25); }
.ticket-table caption { text-align: left; padding-bottom: var(--g-space-12); }
.ticket-table th { text-align: left; font-weight: 600; background: var(--g-color-mint); padding: var(--g-space-12) var(--g-space-8); }
.ticket-table td { padding: var(--g-space-12) var(--g-space-8); vertical-align: middle; overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.ticket-table tbody tr:nth-child(even) { background: var(--g-color-ivory); }
.ticket-table tbody th { background: var(--g-color-mint); }
.ticket-table__title { display: block; font-weight: 600; }
.ticket-table__title a, .ticket-table td .link { color: var(--g-color-navy); text-underline-offset: var(--g-space-4); }
.ticket-table__title a { display: inline-flex; align-items: center; min-height: var(--g-size-touch); }
.ticket-table td .link { min-width: var(--g-size-touch); justify-content: center; }
.ticket-table__meta { display: block; margin-top: var(--g-space-4); font-size: var(--g-font-size-caption); font-weight: 600; }
.ticket-pages { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--g-space-12); margin-top: var(--g-space-16); }
.ticket-pages p { margin: 0; }
.ticket-pages .row { flex-wrap: wrap; }
.ticket-tiles { margin: 0 0 var(--g-space-24); }
.ticket-tiles .tile--attention { background: var(--g-color-warning-surface); }
.ticket-tiles .tile--critical { background: var(--g-color-error-surface); }
.ticket-average .reading { margin: 0 0 var(--g-space-8); }
.ticket-average__label { font-size: var(--g-font-size-heading-small); font-weight: 700; }
.ticket-repeats__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g-space-12); }
.ticket-repeats__list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--g-space-12); padding: var(--g-space-12) var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-ivory); }
.ticket-repeats__list li > div { display: grid; gap: var(--g-space-4); min-width: 0; overflow-wrap: break-word; }
/* One ticket: the timeline and comments, with "This ticket" beside them; below them on a tablet, and
   above them on a phone so the owner can act without scrolling two screens. */
.ticket-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--g-space-24); align-items: start; }
.ticket-split > .ticket-facts { order: 2; }
.ticket-split > .ticket-main { order: 1; }
.ticket-split > .card + .card, .ticket-main > .card + .card { margin-top: 0; }
.ticket-chips { display: flex; flex-wrap: wrap; gap: var(--g-space-8); }
.ticket-fact { display: grid; justify-items: start; gap: var(--g-space-4); overflow-wrap: break-word; }
.ticket-actions { margin-top: var(--g-space-16); }
.ticket-actions dialog .btn, .ticket-actions dialog button { width: auto; }
.ticket-actions dialog .dialog-actions { justify-content: flex-start; }
.ticket-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--g-space-24); border-inline-start: var(--g-space-4) solid var(--g-color-line); display: grid; gap: var(--g-space-16); }
.ticket-timeline li { position: relative; display: grid; gap: var(--g-space-4); overflow-wrap: break-word; }
.ticket-timeline li::before { content: ""; position: absolute; inset-inline-start: calc(var(--g-space-24) * -1 - var(--g-space-8)); top: var(--g-space-4); width: var(--g-space-12); height: var(--g-space-12); border-radius: var(--g-radius-round); background: var(--g-color-teal); }
.ticket-timeline p, .ticket-approvals p { margin: 0; }
.ticket-approvals ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g-space-16); }
.ticket-category, .ticket-time { padding: var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-ivory); margin-bottom: var(--g-space-12); }
.ticket-category__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--g-size-phone) / 2)), 1fr)); gap: 0 var(--g-space-16); }
.ticket-time { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--g-size-phone) / 2)), 1fr)); gap: 0 var(--g-space-16); align-items: start; }
.ticket-time legend { font-size: var(--g-font-size-body); margin-bottom: var(--g-space-8); }
.ticket-settings .field-error { font-size: var(--g-font-size-small); font-weight: 600; color: var(--g-color-error); margin: 0; }
.ticket-settings__actions { flex-wrap: wrap; margin: var(--g-space-24) 0; }
@media (max-width: 900px) {
  .ticket-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 390px) {
  .ticket-split > .ticket-facts { order: 0; }
  .ticket-pages .btn, .ticket-filters__actions .btn { flex: 1 1 auto; }
}

/* Standards pages (D-SOP, design/brand/proposed/standards-web, approved 20 Oct 2026): the list, one standard,
   the editor and its Save changes dialog, approvals. Tokens only. The trainer sits in the page header and the
   guide in the empty state; never in a form, a table or a dialog. */
.standards-head { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-24); margin-bottom: var(--g-space-16); }
.standards-head__copy { min-width: 0; flex: 1; }
.standards-head__title { font-size: var(--g-font-size-display); line-height: var(--g-line-height-heading); margin: var(--g-space-8) 0; overflow-wrap: anywhere; }
.standards-head__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-8); margin-top: var(--g-space-8); }
.standards-head__pose { width: calc(var(--g-space-48) * 2); height: calc(var(--g-space-48) * 3); object-fit: contain; flex-shrink: 0; }
.standards-whose { margin-bottom: var(--g-space-16); }
.standards-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-12); margin-bottom: var(--g-space-24); }
.standards-actions form { margin: 0; }
.standards-actions--tight { margin: var(--g-space-12) 0 0; gap: var(--g-space-8); }
.standards-more > summary, .standards-item > summary, details.standards-fold > summary { min-height: var(--g-size-touch); display: flex; align-items: center; cursor: pointer; font-weight: 600; list-style: none; }
.standards-more > summary { padding: 0 var(--g-space-16); }
.standards-more > summary::before { content: "+"; margin-right: var(--g-space-12); }
.standards-more[open] > summary::before { content: "−"; }
.standards-more__body { display: flex; flex-wrap: wrap; gap: var(--g-space-8); padding-top: var(--g-space-8); }
.standards-more__body form { margin: 0; }
.standards-empty__action { margin-top: var(--g-space-16); }
.standards-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--g-space-16); }
.standards-filters .field { flex: 1 1 calc(var(--g-size-phone) / 2); min-width: 0; }
.standards-filters__actions { display: flex; gap: var(--g-space-8); margin-bottom: var(--g-space-16); }
.standards-table-wrap { container: standards-table / inline-size; }
table.standards-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--g-font-size-small); background: var(--g-color-white); }
table.standards-table caption { text-align: left; padding-bottom: var(--g-space-12); }
table.standards-table th { background: var(--g-color-mint); font-weight: 600; text-align: left; padding: var(--g-space-12); }
table.standards-table th:first-child { width: 28%; }
table.standards-table td { padding: var(--g-space-12); vertical-align: middle; overflow-wrap: break-word; }
table.standards-table td:first-child { font-weight: 600; }
table.standards-table tbody tr:nth-child(even) { background: var(--g-color-ivory); }
table.standards-table td a { display: inline-flex; align-items: center; min-height: var(--g-size-touch); }
table.standards-table .chip { white-space: normal; }
table.standards-table .row-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Narrow: one block per standard, the column's name beside each value. */
@container standards-table (width < 780px) {
  table.standards-table, table.standards-table tbody, table.standards-table tr, table.standards-table td { display: block; width: 100%; }
  table.standards-table thead { display: none; }
  table.standards-table tr { padding: var(--g-space-12) 0; border-bottom: 1px solid var(--g-color-line); }
  table.standards-table td { display: flex; align-items: baseline; gap: var(--g-space-12); padding: var(--g-space-4) 0; }
  table.standards-table td:first-child { display: block; }
  table.standards-table .row-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; flex: 0 0 32%; font-weight: 600; }
}
.standards-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--g-space-24); align-items: start; }
.standards-split .card + .card { margin-top: 0; }
.standards-section-title { display: flex; align-items: center; gap: var(--g-space-12); margin-bottom: var(--g-space-8); }
.standards-section-title h3, .standards-page .card > h3 { font-size: var(--g-font-size-heading-small); margin: 0 0 var(--g-space-12); }
.standards-section-title h3 { margin: 0; }
.standards-icon { width: var(--g-size-primary); height: var(--g-size-primary); border-radius: var(--g-radius-input); object-fit: contain; flex-shrink: 0; }
.standards-step { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--g-size-primary) * 2); gap: var(--g-space-16); padding-block: var(--g-space-16); border-bottom: 1px solid var(--g-color-line); }
.standards-step h4 { font-size: var(--g-font-size-body); margin: 0; overflow-wrap: anywhere; }
.standards-photo { display: block; width: 100%; max-height: calc(var(--g-size-phone) / 2); object-fit: contain; border-radius: var(--g-radius-input); }
.standards-photo--none { display: grid; place-content: center; min-height: var(--g-size-primary); padding: var(--g-space-8); background: var(--g-color-ivory); border: 1px dashed var(--g-color-muted); color: var(--g-color-muted); font-size: var(--g-font-size-caption); text-align: center; }
.standards-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-16); }
.standards-pair .standards-photo--none { min-height: calc(var(--g-space-48) * 2); }
.standards-example h4 { margin: var(--g-space-8) 0; }
.standards-video { width: 100%; max-height: var(--g-size-phone); background: var(--g-color-ivory); border-radius: var(--g-radius-input); }
.standards-good { background: var(--g-color-mint); border-radius: var(--g-radius-card); padding: var(--g-space-24); }
.standards-good h3 { font-size: var(--g-font-size-heading-small); margin: 0 0 var(--g-space-12); }
.standards-good p { margin: 0; overflow-wrap: anywhere; }
.approval-card .standards-good { padding: var(--g-space-16) var(--g-space-24); }
.approval-card .standards-good h3 { font-size: var(--g-font-size-body); }
.approval-card h2 { overflow-wrap: anywhere; }
.approval-card { max-width: calc(var(--g-size-phone) * 2); }
.card.standards-fold { padding: var(--g-space-8) var(--g-space-24); }
.card.standards-fold > summary { border: 0; }
.standards-page details > summary { list-style: none; }
.standards-page details > summary::-webkit-details-marker { display: none; }
.standards-page .card details > summary::before, .standards-page details.card > summary::before, .standards-item > summary::before { content: "+"; margin-right: var(--g-space-12); }
.standards-page .card details[open] > summary::before, .standards-page details.card[open] > summary::before, .standards-item[open] > summary::before { content: "−"; }
.standards-tags { overflow-wrap: anywhere; }
.standards-panel { max-width: calc(var(--g-size-phone) * 2); display: grid; gap: var(--g-space-16); margin-bottom: var(--g-space-32); }
.standards-panel .card + .card { margin-top: 0; }
.standards-panel__head h2 { font-size: var(--g-font-size-display); line-height: var(--g-line-height-heading); margin: var(--g-space-8) 0; }
.standards-panel__head .helper { margin: 0; }
.standards-list { gap: var(--g-space-12); margin-bottom: var(--g-space-16); }
.standards-item { border: 1px solid var(--g-color-line); border-radius: var(--g-radius-card); padding: var(--g-space-4) var(--g-space-16); }
.card .standards-item { border-top: 1px solid var(--g-color-line); }
.standards-item > summary { gap: var(--g-space-8); overflow-wrap: anywhere; }
.standards-item__body { padding-bottom: var(--g-space-16); gap: var(--g-space-12); }
.standards-item__body .field { margin-bottom: 0; }
.standards-add { width: 100%; }
.standards-checks { display: flex; flex-wrap: wrap; gap: var(--g-space-4) var(--g-space-24); }
.standards-page .choice { display: flex; align-items: center; gap: var(--g-space-12); min-height: var(--g-size-touch); font-weight: 400; }
.standards-learners legend { font-size: var(--g-font-size-body); margin-bottom: var(--g-space-8); }
.standards-narrow { max-width: var(--g-size-phone); margin-top: var(--g-space-12); }
.standards-reason { display: flex; align-items: flex-end; gap: var(--g-space-12); }
.standards-reason .field { flex: 1; min-width: 0; }
.standards-reason[hidden] { display: none; }
.standards-savebar { max-width: calc(var(--g-size-phone) * 2); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--g-space-16); }
.standards-editor .field-error, .standards-dialog .field-error { font-size: var(--g-font-size-small); color: var(--g-color-error); margin: 0; }
.standards-editor .field-error:empty { display: none; }
dialog.standards-dialog { max-width: calc(var(--g-size-phone) + var(--g-space-48) * 4); max-height: calc(100% - var(--g-space-32)); overflow: auto; }
.standards-dialog h2 { margin: 0; }
.standards-dialog legend { margin-bottom: var(--g-space-12); }
.standards-option { display: flex; align-items: flex-start; gap: var(--g-space-12); padding: var(--g-space-16); border: 2px solid var(--g-color-muted); border-radius: var(--g-radius-card); background: var(--g-color-white); cursor: pointer; }
.standards-option:has(:checked) { background: var(--g-color-mint); border-color: var(--g-color-teal); }
.standards-option input { margin-top: var(--g-space-4); }
.standards-option span { font-weight: 600; }
.standards-option small { display: block; font-weight: 400; font-size: var(--g-font-size-small); margin-top: var(--g-space-8); }
.standards-dialog .helper { margin: var(--g-space-4) 0 0; }
@media (max-width: 900px) {
  .standards-split, .standards-pair { grid-template-columns: minmax(0, 1fr); }
  .standards-split > * { min-width: 0; }
  .standards-step { grid-template-columns: minmax(0, 1fr); }
  .standards-head__pose { width: calc(var(--g-space-32) * 2); height: calc(var(--g-space-48) * 2); }
}
@media (max-width: 390px) {
  .standards-head { gap: var(--g-space-12); }
  .card.standards-fold, .standards-good { padding: var(--g-space-16); }
  .standards-reason { flex-wrap: wrap; }
  .standards-reason .field { min-width: 60%; }
  .standards-filters__actions { width: 100%; }
  dialog.standards-dialog { width: calc(100% - var(--g-space-24)); }
}
@media (max-width: 320px) { .standards-head__pose { display: none; } }
/* Onboarding (ONBa, the approved onboarding design): a whole page of its own, outside the app shell. The steps rail on the
   left, the screen on the right; below 780px the rail becomes a row of chips above the screen. Pakcu sits
   in the hero, never in a form. Values from the tokens only. */
.onb-top { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-16); flex-wrap: wrap; padding: var(--g-space-16) var(--g-space-32); border-bottom: 1px solid var(--g-color-line); }
.onb-top__logo { width: calc(var(--g-size-primary) * 3); height: auto; }
.onb-top__who { text-align: center; font-size: var(--g-font-size-small); }
.onb-badge { display: inline-block; padding: var(--g-space-4) var(--g-space-12); border-radius: var(--g-radius-round); background: var(--g-color-mint); font-size: var(--g-font-size-small); font-weight: 600; }
.onb-offline { background: var(--g-color-warning-surface); padding: var(--g-space-12) var(--g-space-32); font-weight: 600; }
.onb-layout { display: grid; grid-template-columns: calc(var(--g-size-primary) * 5) minmax(0, 1fr); max-width: 1280px; margin: 0 auto; }
.onb-rail { padding: var(--g-space-24); border-right: 1px solid var(--g-color-line); }
.onb-rail ol { list-style: none; padding: 0; margin: var(--g-space-16) 0; }
.onb-rail li { margin-bottom: var(--g-space-4); border-radius: var(--g-radius-input); font-size: var(--g-font-size-small); }
.onb-rail li > a, .onb-rail li > span { display: flex; align-items: center; min-height: var(--g-size-touch); padding: var(--g-space-8) var(--g-space-12); color: var(--g-color-navy); text-decoration: none; border-radius: var(--g-radius-input); }
.onb-rail li.is-current { background: var(--g-color-mint); font-weight: 700; }
.onb-rail .onb-state { color: var(--g-color-muted); font-weight: 400; }
.onb-rail__note { font-size: var(--g-font-size-small); }
.onb-main { padding: var(--g-space-24) var(--g-space-32); min-width: 0; }
.onb-hero { display: flex; align-items: center; gap: var(--g-space-24); background: var(--g-color-mint); padding: var(--g-space-24); border-radius: var(--g-radius-hero); margin-bottom: var(--g-space-24); }
.onb-hero > div { flex: 1; }
.onb-hero h1 { margin: var(--g-space-4) 0 var(--g-space-8); }
.onb-hero p { margin: 0; }
.onb-eyebrow { font-size: var(--g-font-size-small); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.onb-art { width: calc(var(--g-size-primary) * 2); height: calc(var(--g-size-primary) * 3); object-fit: contain; flex: none; }
.onb .card { border: 1px solid var(--g-color-line); padding: var(--g-space-16); }
.onb .card + .card { margin-top: 0; }
.onb .card input:not([type=checkbox]):not([type=radio]), .onb .card select { background: var(--g-color-ivory); }
.onb-stack { display: grid; gap: var(--g-space-16); }
.onb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-12); }
.onb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-12); }
.onb-fields label, .onb-field { display: block; font-size: var(--g-font-size-small); font-weight: 600; }
.onb-fields input, .onb-fields select, .onb-field input, .onb-field select { display: block; width: 100%; margin-top: var(--g-space-4); }
.onb-check { display: flex; align-items: center; gap: var(--g-space-12); min-height: var(--g-size-touch); font-size: var(--g-font-size-body); font-weight: 600; }
.onb-check input[type=checkbox] { width: var(--g-size-touch); height: var(--g-size-touch); }
.onb-editor { padding: var(--g-space-16) 0; border-top: 1px solid var(--g-color-line); }
.onb-editor:first-child { border-top: 0; padding-top: 0; }
.onb-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-space-12); margin-bottom: var(--g-space-24); }
.onb-stage div { padding: var(--g-space-12); border-radius: var(--g-radius-input); border: 1px solid var(--g-color-line); overflow-wrap: anywhere; }
.onb-stage .is-current { background: var(--g-color-mint); }
.onb-metric { font-size: var(--g-font-size-metric); font-weight: 700; }
.onb-notice { background: var(--g-color-warning-surface); color: var(--g-color-navy); padding: var(--g-space-16); border-radius: var(--g-radius-input); margin: var(--g-space-16) 0; }
.onb-notice--error { background: var(--g-color-error-surface); }
.onb-notice--ok { display: flex; align-items: center; gap: var(--g-space-12); background: var(--g-color-mint); }
.onb-notice--ok img { width: var(--g-size-primary); height: calc(var(--g-size-primary) * 1.5); object-fit: contain; }
.onb-notice p { margin: var(--g-space-4) 0 0; }
.onb-footer { margin-top: var(--g-space-24); display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-16); flex-wrap: wrap; }
.onb-actions { display: flex; flex-wrap: wrap; gap: var(--g-space-8); margin-top: var(--g-space-12); align-items: center; }
.onb details { border-top: 1px solid var(--g-color-line); margin-top: var(--g-space-12); }
.onb summary { min-height: var(--g-size-touch); padding: var(--g-space-12) 0; cursor: pointer; font-weight: 600; }
.onb-small { font-size: var(--g-font-size-small); }
.onb-muted { color: var(--g-color-muted); }
.onb-pill { display: inline-block; padding: var(--g-space-4) var(--g-space-12); border-radius: var(--g-radius-round); background: var(--g-color-mint); font-size: var(--g-font-size-small); font-weight: 600; }
.onb-equip { display: grid; gap: var(--g-space-4); margin-top: var(--g-space-12); }
.onb-equip__row { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-12); flex-wrap: wrap; }
.onb-equip__count { display: flex; align-items: center; gap: var(--g-space-8); font-size: var(--g-font-size-small); font-weight: 600; }
.onb-equip__count input { width: calc(var(--g-size-primary) * 2); }
.onb-tasks { margin: 0; padding-left: var(--g-space-24); font-size: var(--g-font-size-small); }
.onb-work__group + .onb-work__group { margin-top: var(--g-space-24); }
.onb form[aria-busy=true] { opacity: .65; pointer-events: none; }
@media (max-width: 780px) {
  .onb-layout { display: block; }
  .onb-rail { border-right: 0; padding: var(--g-space-16) var(--g-space-18); }
  .onb-rail ol { display: flex; flex-wrap: wrap; gap: var(--g-space-4); margin: var(--g-space-8) 0; }
  .onb-rail__note { display: none; }
  .onb-main { padding: var(--g-space-16) var(--g-space-18); }
  .onb-top { padding: var(--g-space-16) var(--g-space-18); }
  .onb-top__who { text-align: left; }
  .onb-hero { padding: var(--g-space-16); gap: var(--g-space-12); }
  .onb-art { width: var(--g-size-primary); height: calc(var(--g-size-primary) * 1.5); }
  .onb-grid, .onb-fields { grid-template-columns: 1fr; }
  .onb-hero h1 { font-size: var(--g-font-size-heading); }
  .onb-footer .btn--primary { width: 100%; }
}
@media (max-width: 480px) { .onb-stage { grid-template-columns: 1fr; } }
@media (max-width: 350px) { .onb-main, .onb-rail, .onb-top { padding-left: var(--g-space-14); padding-right: var(--g-space-14); } }

/* ONBb start */
/* Onboarding, second half (ONBb, the approved onboarding design frames 7–12): Stock items, People rows with
   their setup links, the Roster grid that scrolls inside its card, Preview problems, and Home's card.
   Values from the tokens only. */
.onb-fields--3 { grid-template-columns: 2fr 1fr 1fr; }
.onb-pill--warn { background: var(--g-color-warning-surface); }
.onb-person__head { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-12); flex-wrap: wrap; }
.onb-person__head h2, .onb-person__head h3 { margin: 0; }
.onb-person .onb-actions form { margin: 0; }
.onb-message { background: var(--g-color-ivory); border: 1px solid var(--g-color-line); border-radius: var(--g-radius-input); padding: var(--g-space-12); overflow-wrap: anywhere; }
.onb-message p { margin: 0 0 var(--g-space-4); }
.onb-error-text { color: var(--g-color-navy); }
.onb-error-text:not(:empty) { background: var(--g-color-error-surface); padding: var(--g-space-8) var(--g-space-12); border-radius: var(--g-radius-input); }
.onb-tags { border: 0; padding: 0; margin: var(--g-space-12) 0; display: flex; flex-wrap: wrap; gap: var(--g-space-4) var(--g-space-16); }
.onb-tags legend { font-size: var(--g-font-size-small); font-weight: 600; padding: 0; }
.onb textarea { display: block; width: 100%; margin-top: var(--g-space-4); background: var(--g-color-ivory); }
.onb-usual { border: 1px solid var(--g-color-line); border-radius: var(--g-radius-input); padding: var(--g-space-12); margin: 0; min-width: 0; }
.onb-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--g-space-12); }
.onb-roster { overflow-x: auto; border: 1px solid var(--g-color-line); border-radius: var(--g-radius-input); }
.onb-roster table { border-collapse: collapse; min-width: 100%; }
.onb-roster th, .onb-roster td { padding: var(--g-space-8); border-bottom: 1px solid var(--g-color-line); text-align: left; white-space: nowrap; vertical-align: middle; }
.onb-roster tbody th { position: sticky; left: 0; background: var(--g-color-white); }
.onb-roster select { min-height: var(--g-size-touch); min-width: calc(var(--g-size-primary) * 2.5); background: var(--g-color-ivory); }
.onb-problem { border-left: var(--g-space-4) solid var(--g-color-error); padding: var(--g-space-8) var(--g-space-16); margin-top: var(--g-space-12); }
.onb-problem p { margin: 0 0 var(--g-space-8); }
.onb-home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-12); margin-bottom: var(--g-space-24); }
.onb-home h2 { margin: var(--g-space-8) 0; }
.onb-home form { margin: 0; }
@media (max-width: 780px) {
  .onb-fields--3, .onb-home { grid-template-columns: 1fr; }
  .onb-footer .btn { width: 100%; }
}
/* ONBb end */
/* BRANDw start */
/* The approved wordmark (design/brand/assets/approved/logo, USAGE.md): at least 120 px wide, with clear
   space of a quarter of its visible height on every side. The image is 144 px wide inside 8 px of padding,
   so the glyphs are about 134 x 44 px and a quarter is 11 px; the SVG's own margin (4 to 7 px) plus the
   padding leaves at least 12 px on every side. */
.auth__logo, .sidebar__logo { display: block; width: calc(var(--g-space-48) * 3 + var(--g-space-8) * 2); height: auto; padding: var(--g-space-8); }
/* The approved poses are 1024 x 1536 (2:3), taller than the old near-square art. Sized by width with the
   height following, so he keeps his proportions; the room above the card grows to the height he rises. */
.hero__pose, .auth .hero__pose { width: calc(var(--g-space-48) * 2); }
.hero--with-pose { margin-top: calc(var(--g-space-48) * 2); }
@media (min-width: 641px) { .hero__bubble { right: calc(var(--g-space-32) + var(--g-space-48) * 2 + var(--g-space-8)); } }
.hero__pose img, .pakcu-strip__pose img, .page-intro__pose, .pagehead__pakcu, .setw-empty__art { object-fit: contain; }
/* BRANDw end */