/* ===== The Evolve OS design system (owner, 23 Oct 2026). Built from the approved Reports / Billing concept
   (docs/00-project/design-concept-tables.md); every building block defined ONCE here, with its states: normal, hover,
   focus (the concept's soft warm glow — never the browser's blue ring), pressed, selected, disabled and error.
   Opt-in by class (ds-*): Reports and Work Photos use it now; the other modules move to it in the next run.
   The list of blocks and when to use each: docs/00-project/design-system.md. The living page: #/design-system (Admin).
   Each hover / focus / pressed rule also answers to [data-state~="hover" | "focus" | "pressed"], so the living page can show
   every state side by side; the app never sets data-state. */

:root {
  /* Colour: ink, paper and the logo's blush; the brand red only for the main button and the glow; navy for links. */
  --ds-ink: #16191D;
  --ds-ink-2: #33383E;
  --ds-muted: #4A5058;
  --ds-faint: #63686F;
  --ds-paper: #F2F0EA;
  --ds-surface: #FFFFFF;
  --ds-surface-2: #FBFAF7;
  --ds-surface-3: #F2EFE8;
  --ds-line: #DCD8CE;
  --ds-line-soft: #E8E4DB;
  --ds-line-strong: #BDB9B0;
  --ds-blush: #F6E3E2;
  --ds-blush-soft: #FBF5F4;
  --ds-hover: #F7EEEC;
  --ds-edge-warm: #E3D3D1;
  --ds-brand: #A60D13;
  --ds-brand-hover: #8F0B10;
  --ds-brand-press: #760910;
  --ds-link: #1E3A5F;
  --ds-brass: #9C7A3C;
  /* Meaning (the app's families): green done / better, amber waiting / part, red owed / worse, navy information. */
  --ds-ok-bg: #E4F1E8; --ds-ok: #0B5536;
  --ds-warn-bg: #FBEBD2; --ds-warn: #7A4300;
  --ds-bad-bg: #F7E1DE; --ds-bad: #A11E14;
  --ds-info-bg: #E3EBF5; --ds-info: #1E3A5F;
  --ds-autvel-bg: #F6E3D6; --ds-autvel: #7A3410;
  /* Shape. */
  --ds-r-control: 10px;
  --ds-r-card: 12px;
  --ds-r-pill: 999px;
  --ds-r-plate: 4px;
  --ds-r-thumb: 10px;
  /* Size: one control height for inputs, selects, pill tracks and buttons. */
  --ds-h: 42px;
  --ds-h-sm: 36px;
  --ds-h-lg: 48px;
  /* Focus and glow. */
  --ds-focus-border: #B98E8A;
  --ds-focus: 0 0 0 3px rgba(166, 13, 19, 0.18);
  --ds-focus-bad: 0 0 0 3px rgba(161, 30, 20, 0.2);
  --ds-glow: 0 0 0 4px rgba(166, 13, 19, 0.06), 0 6px 22px rgba(166, 13, 19, 0.16);
  --ds-shadow-card: 0 1px 2px rgba(22, 25, 29, 0.04);
  --ds-shadow-pop: 0 14px 40px rgba(22, 25, 29, 0.16);
  /* Type scale (14 px minimum on screen). */
  --ds-fs-label: 14px;
  --ds-fs-body: 15px;
  --ds-fs-h3: 18px;
  --ds-fs-h2: 22px;
  --ds-fs-h1: 34px;
  --ds-fs-figure: 28px;
  --ds-fs-lead: 48px;
  /* Spacing. */
  --ds-sp-1: 4px; --ds-sp-2: 8px; --ds-sp-3: 12px; --ds-sp-4: 16px; --ds-sp-5: 24px; --ds-sp-6: 32px;
  /* Motion (Reports only; nothing moves with "reduce motion"). */
  --ds-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ds-fast: 160ms;
  --ds-base: 260ms;
  --ds-slow: 520ms;
}
/* Touch: every control at least 44 px high at phone width. */
@media (max-width: 640px) { :root { --ds-h: 44px; } }

/* ---------- Buttons: main (one per screen), secondary, link, icon ---------- */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--ds-h); padding: 0 18px; border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-r-pill); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-fs-body); font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--ds-fast) ease, border-color var(--ds-fast) ease, box-shadow var(--ds-fast) ease; }
.ds-btn:hover, .ds-btn[data-state~="hover"] { border-color: var(--ds-ink); background: var(--ds-surface-2); color: var(--ds-ink); text-decoration: none; }
.ds-btn:active, .ds-btn[data-state~="pressed"] { background: var(--ds-surface-3); }
.ds-btn:focus-visible, .ds-btn[data-state~="focus"] { outline: none; border-color: var(--ds-focus-border); box-shadow: var(--ds-focus); }
.ds-btn.on, .ds-btn[aria-pressed="true"] { background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { background: var(--ds-surface-2); border-color: var(--ds-line); color: var(--ds-faint); cursor: not-allowed; box-shadow: none; }
.ds-btn-main { background: var(--ds-brand); border-color: var(--ds-brand); color: #FFFFFF; box-shadow: 0 2px 6px rgba(166, 13, 19, 0.18); }
.ds-btn-main:hover, .ds-btn-main[data-state~="hover"] { background: var(--ds-brand-hover); border-color: var(--ds-brand-hover); color: #FFFFFF; box-shadow: var(--ds-glow); }
.ds-btn-main:active, .ds-btn-main[data-state~="pressed"] { background: var(--ds-brand-press); border-color: var(--ds-brand-press); }
.ds-btn-main:focus-visible, .ds-btn-main[data-state~="focus"] { border-color: var(--ds-brand); box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px rgba(166, 13, 19, 0.35); }
.ds-btn-main:disabled, .ds-btn-main[aria-disabled="true"] { background: var(--ds-edge-warm); border-color: var(--ds-edge-warm); color: #5C3F3C; box-shadow: none; }
.ds-btn-link { height: auto; padding: 4px 2px; border: 0; border-radius: 6px; background: transparent; color: var(--ds-link); font-weight: 600; text-decoration: underline;
  text-decoration-color: rgba(30, 58, 95, 0.35); text-underline-offset: 4px; }
.ds-btn-link:hover, .ds-btn-link[data-state~="hover"] { background: transparent; color: var(--ds-link); text-decoration-color: currentColor; }
.ds-btn-link:active, .ds-btn-link[data-state~="pressed"] { background: transparent; color: var(--ds-ink); }
.ds-btn-link:focus-visible, .ds-btn-link[data-state~="focus"] { box-shadow: var(--ds-focus); }
.ds-btn-link:disabled { background: transparent; color: var(--ds-faint); text-decoration: none; }
.ds-btn-icon { width: var(--ds-h); padding: 0; }
.ds-btn-lg { height: var(--ds-h-lg); padding: 0 24px; font-size: 16px; }
.ds-btn-sm { height: var(--ds-h-sm); padding: 0 14px; font-size: var(--ds-fs-label); }
.ds-btn-block { width: 100%; }

/* The one highlighted control of a page (the Reports period pill): white, the warm edge and the soft glow. */
.ds-btn-glow { height: 44px; padding: 0 18px 0 16px; border-color: var(--ds-edge-warm); box-shadow: 0 0 0 4px rgba(166, 13, 19, 0.06), 0 6px 22px rgba(166, 13, 19, 0.12); }
.ds-btn-glow:hover, .ds-btn-glow[data-state~="hover"] { border-color: #C9A9A6; background: var(--ds-surface); }
.ds-btn-glow[aria-expanded="true"] { border-color: var(--ds-focus-border); box-shadow: 0 0 0 4px rgba(166, 13, 19, 0.1), 0 6px 22px rgba(166, 13, 19, 0.12); }
.ds-btn-glow:focus-visible, .ds-btn-glow[data-state~="focus"] { border-color: var(--ds-focus-border); box-shadow: var(--ds-focus), 0 6px 22px rgba(166, 13, 19, 0.12); }

/* ---------- Fields: text, search, number / money, date, select, text area ---------- */
.ds-input, .ds-select, .ds-textarea { width: 100%; min-width: 0; height: var(--ds-h); padding: 0 14px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-control);
  background-color: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-fs-body); line-height: 1.4;
  transition: border-color var(--ds-fast) ease, box-shadow var(--ds-fast) ease; }
.ds-input:hover, .ds-select:hover, .ds-textarea:hover, .ds-input[data-state~="hover"], .ds-select[data-state~="hover"], .ds-textarea[data-state~="hover"] { border-color: #8F8A80; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus, .ds-input:focus-visible, .ds-select:focus-visible, .ds-textarea:focus-visible, .ds-select.menu-open, .ds-input[data-state~="focus"], .ds-select[data-state~="focus"], .ds-textarea[data-state~="focus"], .ds-input[data-state~="focus"], .ds-select[data-state~="focus"], .ds-textarea[data-state~="focus"] {
  outline: none; border-color: var(--ds-focus-border); box-shadow: var(--ds-focus); }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-faint); }
.ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled { background-color: var(--ds-surface-2); color: var(--ds-faint); border-color: var(--ds-line); cursor: not-allowed; }
.ds-input.invalid, .ds-select.invalid, .ds-textarea.invalid, .ds-input[aria-invalid="true"], .ds-select[aria-invalid="true"], .ds-textarea[aria-invalid="true"] { border: 1.5px solid var(--ds-bad); }
.ds-input.invalid:focus, .ds-select.invalid:focus, .ds-textarea.invalid:focus, .ds-input[aria-invalid="true"]:focus, .ds-textarea[aria-invalid="true"]:focus, .ds-input.invalid[data-state~="focus"], .ds-select.invalid[data-state~="focus"], .ds-textarea.invalid[data-state~="focus"], .ds-input[aria-invalid="true"][data-state~="focus"], .ds-textarea[aria-invalid="true"][data-state~="focus"] { box-shadow: var(--ds-focus-bad); }
.ds-search { padding-left: 40px; background: var(--ds-surface) no-repeat 14px 50% / 16px 16px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%234A5058' stroke-width='1.6'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%234A5058' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ds-search::-webkit-search-cancel-button { cursor: pointer; }
/* The search box and the dropdown are pills, the height of the pill switches beside them. */
.ds-search, .ds-select { border-radius: var(--ds-r-pill); }
.ds-money { text-align: right; font-variant-numeric: tabular-nums; }
.ds-input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }
.ds-select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--ds-surface) no-repeat right 14px center / 12px 8px
  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='%2316191D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ds-select.on { border-color: var(--ds-ink); box-shadow: inset 0 0 0 1px var(--ds-ink); }
.ds-textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: none; overflow: hidden; }
/* A field and its message: the message right under the box (owner rule: never at the bottom of the page). */
.ds-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ds-label { font-size: var(--ds-fs-label); font-weight: 600; color: var(--ds-muted); }
.ds-field-msg { display: flex; align-items: flex-start; gap: 6px; font-size: var(--ds-fs-label); font-weight: 600; color: var(--ds-bad); }
.ds-field-msg::before { content: '!'; flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--ds-bad); color: #FFFFFF; font-size: 13px; line-height: 18px; text-align: center; }
.ds-field-msg.ok { color: var(--ds-ok); }
.ds-field-msg[hidden] { display: none; }
.ds-field-msg.ok::before { content: '✓'; background: var(--ds-ok); }

/* The option list of a ds-select (core/select-menu.js gives the list the ds-menu class): rounded, the concept's colours,
   keyboard usable (↑ ↓ Home End, Enter, Esc, typing). */
.select-menu.ds-menu { border: 1px solid var(--ds-edge-warm); border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow-pop); padding: 6px; }
.select-menu.ds-menu .select-opt { position: relative; padding: 9px 12px 9px 32px; border-radius: 8px; border: 0; box-shadow: none; font-size: var(--ds-fs-body); color: var(--ds-ink); background: transparent; }
.select-menu.ds-menu .select-opt.active { background: var(--ds-hover); }
.select-menu.ds-menu .select-opt.on { background: var(--ds-blush-soft); font-weight: 700; }
.select-menu.ds-menu .select-opt.on.active { background: var(--ds-blush); }
.select-menu.ds-menu .select-opt.on::before { content: ''; position: absolute; left: 12px; top: 50%; width: 10px; height: 6px; border-left: 2px solid var(--ds-brand); border-bottom: 2px solid var(--ds-brand);
  transform: translateY(-70%) rotate(-45deg); }
.select-menu.ds-menu .select-opt.off { color: var(--ds-faint); }
.select-menu.ds-menu .select-group { padding: 10px 12px 4px; font-size: var(--ds-fs-label); font-weight: 700; color: var(--ds-muted); }

/* A small panel under its button (a period picker, a Download menu): the option list's card. Options carry a tick when chosen;
   menu items are plain actions. */
.ds-pop { background: var(--ds-surface); border: 1px solid var(--ds-edge-warm); border-radius: var(--ds-r-card); box-shadow: var(--ds-shadow-pop); padding: 6px; }
.ds-pop[hidden] { display: none; }
.ds-option { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ds-ink);
  font: inherit; font-size: var(--ds-fs-body); font-weight: 500; text-align: left; cursor: pointer; }
.ds-option::before { content: ''; flex: 0 0 16px; width: 16px; height: 9px; }
.ds-option:hover, .ds-option[data-state~="hover"] { background: var(--ds-hover); }
.ds-option:focus-visible, .ds-option[data-state~="focus"] { outline: none; box-shadow: var(--ds-focus); }
.ds-option.on, .ds-option[aria-pressed="true"] { background: var(--ds-blush-soft); font-weight: 700; }
.ds-option.on::before, .ds-option[aria-pressed="true"]::before { width: 12px; height: 7px; border-left: 2px solid var(--ds-brand); border-bottom: 2px solid var(--ds-brand); transform: rotate(-45deg) translate(2px, -2px); box-sizing: border-box; }
.ds-option:disabled { color: var(--ds-faint); cursor: not-allowed; background: transparent; }
.ds-menu-item { display: block; width: 100%; padding: 10px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ds-ink); font: inherit; font-size: var(--ds-fs-body);
  text-align: left; text-decoration: none; cursor: pointer; }
.ds-menu-item:hover, .ds-menu-item[data-state~="hover"] { background: var(--ds-hover); color: var(--ds-ink); text-decoration: none; }
.ds-menu-item:focus-visible, .ds-menu-item[data-state~="focus"] { outline: none; background: var(--ds-hover); box-shadow: inset 0 0 0 2px rgba(166, 13, 19, 0.18); }
.ds-menu-item:disabled { color: var(--ds-faint); cursor: not-allowed; background: transparent; }

/* ---------- Menus and dropdowns: one behaviour (owner, 23 Oct 2026; the AWS "Support" menu) ----------
   Open: the arrow turns from down to up (200 ms), the control takes the open-pill look, and the list drops in below as a
   clean white rounded panel with a soft shadow (fades in and slides down a few pixels); options well spaced, no lines; a
   soft rose highlight under the pointer or the keyboard; the picked option a small tick. Closed: the arrow turns back.
   Escape or a click outside closes; ↑ ↓ Home End move, Enter picks. Reduce motion: no turn and no slide, just shown. */
.ds-caret { display: inline-block; flex: 0 0 auto; transition: transform 200ms var(--ds-ease); transform-origin: 50% 50%; }
[aria-expanded="true"] > .ds-caret, .ds-select-box:has(> .menu-open) > .ds-caret { transform: rotate(180deg); }
.ds-select-box { position: relative; display: block; min-width: 0; }
.ds-select-box > .ds-select { background-image: none; }
.ds-select-caret { position: absolute; right: 15px; top: 50%; width: 12px; height: 8px; margin-top: -4px; pointer-events: none;
  background: no-repeat center / 12px 8px 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='%2316191D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ds-select-box > .ds-select:disabled + .ds-select-caret { opacity: 0.45; }
/* The open-pill look of the control whose list is open. */
.ds-btn[aria-expanded="true"]:not(.ds-btn-glow), .ds-select.menu-open { background-color: var(--ds-surface); border-color: var(--ds-edge-warm); box-shadow: 0 0 0 4px rgba(166, 13, 19, 0.05), 0 6px 18px rgba(22, 25, 29, 0.1); }
/* The list: drops in below. */
.select-menu.ds-menu, .ds-pop:not([hidden]) { animation: ds-drop 180ms var(--ds-ease); }
@keyframes ds-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.select-menu.ds-menu .select-opt:hover, .ds-option:hover, .ds-menu-item:hover { background: var(--ds-hover); }
@media (prefers-reduced-motion: reduce) {
  .ds-caret { transition: none; }
  .select-menu.ds-menu, .ds-pop:not([hidden]) { animation: none; }
}

/* Checkbox, radio, toggle. */
.ds-check { display: inline-flex; align-items: center; gap: 10px; font-size: var(--ds-fs-body); cursor: pointer; }
.ds-check input[type="checkbox"], .ds-check input[type="radio"] { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--ds-line-strong);
  border-radius: 6px; background: var(--ds-surface) no-repeat center / 12px 9px; cursor: pointer; transition: background-color var(--ds-fast) ease, border-color var(--ds-fast) ease; }
.ds-check input[type="radio"] { border-radius: 50%; }
.ds-check input:hover, .ds-check input[data-state~="hover"] { border-color: var(--ds-ink); }
.ds-check input:focus-visible, .ds-check input[data-state~="focus"] { outline: none; box-shadow: var(--ds-focus); border-color: var(--ds-focus-border); }
.ds-check input[type="checkbox"]:checked { background-color: var(--ds-ink); border-color: var(--ds-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5l3.2 3L11 1' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ds-check input[type="radio"]:checked { border: 6px solid var(--ds-ink); }
.ds-check input:disabled { background-color: var(--ds-surface-2); border-color: var(--ds-line); cursor: not-allowed; }
.ds-check input.invalid, .ds-check input[aria-invalid="true"] { border-color: var(--ds-bad); }
/* A tick that reads as a step in a row of buttons (Customer informed in the Job Card bar): the box in a secondary-button pill. */
.ds-check-pill { height: var(--ds-h); padding: 0 16px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-pill); background: var(--ds-surface); font-weight: 500; }
.ds-check-pill:hover { border-color: var(--ds-ink); background: var(--ds-surface-2); }
.ds-check-pill:has(input:checked) { border-color: var(--ds-ink); }
.ds-check-pill:has(input:disabled) { color: var(--ds-faint); background: var(--ds-surface-2); border-color: var(--ds-line); cursor: not-allowed; }
.ds-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: var(--ds-fs-body); cursor: pointer; }
.ds-toggle input { -webkit-appearance: none; appearance: none; position: relative; width: 42px; height: 24px; margin: 0; border-radius: var(--ds-r-pill); background: var(--ds-line-strong); cursor: pointer;
  transition: background-color var(--ds-fast) ease; }
.ds-toggle input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(22, 25, 29, 0.3);
  transition: transform var(--ds-fast) var(--ds-ease); }
.ds-toggle input:checked { background: var(--ds-ok); }
.ds-toggle input:checked::after { transform: translateX(18px); }
.ds-toggle input:focus-visible, .ds-toggle input[data-state~="focus"] { outline: none; box-shadow: var(--ds-focus); }
.ds-toggle input:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Choices: pill switch, chips, tabs, stage tiles ---------- */
.ds-pills { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-pill); background: var(--ds-surface); max-width: 100%; }
.ds-pills > button { height: calc(var(--ds-h) - 8px); padding: 0 16px; border: 0; border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-ink); font: inherit; font-size: var(--ds-fs-label);
  font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--ds-fast) ease; }
.ds-pills > button:hover:not(.on):not([aria-pressed="true"]), .ds-pills > button[data-state~="hover"]:not(.on):not([aria-pressed="true"]) { background: var(--ds-surface-3); }
.ds-pills > button:focus-visible, .ds-pills > button[data-state~="focus"] { outline: none; box-shadow: var(--ds-focus); }
.ds-pills > button.on, .ds-pills > button[aria-pressed="true"] { background: var(--ds-ink); color: #FFFFFF; }
.ds-pills > button:disabled { color: var(--ds-faint); cursor: not-allowed; }
.ds-pills.invalid { border: 1.5px solid var(--ds-bad); }   /* error: nothing picked where one answer is needed (Fuel level) */
@media (max-width: 640px) {
  .ds-pills { flex-wrap: wrap; border: 0; background: transparent; padding: 0; gap: 8px; }
  .ds-pills > button { height: var(--ds-h); border: 1px solid var(--ds-line-strong); background: var(--ds-surface); }
  .ds-pills > button.on, .ds-pills > button[aria-pressed="true"] { border-color: var(--ds-ink); }
}
.ds-chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ds-h); padding: 0 16px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-pill);
  background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-fs-body); font-weight: 500; cursor: pointer;
  transition: background-color var(--ds-fast) ease, border-color var(--ds-fast) ease; }
.ds-chip:hover:not(.on):not([aria-pressed="true"]), .ds-chip[data-state~="hover"]:not(.on):not([aria-pressed="true"]) { border-color: var(--ds-ink); background: var(--ds-surface-2); }
.ds-chip:focus-visible, .ds-chip[data-state~="focus"] { outline: none; border-color: var(--ds-focus-border); box-shadow: var(--ds-focus); }
.ds-chip:active, .ds-chip[data-state~="pressed"] { background: var(--ds-surface-3); }
.ds-chip.on, .ds-chip[aria-pressed="true"] { background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; font-weight: 600; }
.ds-chip.on::before, .ds-chip[aria-pressed="true"]::before { content: ''; width: 10px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
.ds-chip:disabled { color: var(--ds-faint); background: var(--ds-surface-2); border-color: var(--ds-line); cursor: not-allowed; }
.ds-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-chip-sm { min-height: var(--ds-h-sm); padding: 0 14px; font-size: var(--ds-fs-label); }
.ds-chips.invalid > .ds-chip, .ds-seg.invalid { border-color: var(--ds-bad); }
/* The chips of one question as one track (three answers side by side). */
.ds-seg { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-pill); background: var(--ds-surface); }
.ds-seg > .ds-chip { flex: 1 1 0; border: 0; min-height: 40px; line-height: 1.2; }
.ds-tabs { display: flex; flex-wrap: wrap; gap: 4px 6px; border-bottom: 1px solid var(--ds-line); }
.ds-tabs > a, .ds-tabs > button { padding: 10px 14px 13px; border: 0; background: transparent; color: var(--ds-muted); font: inherit; font-size: var(--ds-fs-body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.ds-tabs > a:hover, .ds-tabs > button:hover, .ds-tabs > a[data-state~="hover"], .ds-tabs > button[data-state~="hover"] { color: var(--ds-ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--ds-line-strong); }
.ds-tabs > a:focus-visible, .ds-tabs > button:focus-visible, .ds-tabs > a[data-state~="focus"], .ds-tabs > button[data-state~="focus"] { outline: none; box-shadow: var(--ds-focus); border-radius: 8px; }
.ds-tabs > .on, .ds-tabs > [aria-current="page"], .ds-tabs > [aria-selected="true"] { color: var(--ds-ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ds-brand); }
/* A stage tile: white; its stage's colour in the label; the chosen one in its own tint fading to white. Tones: --tint, --edge,
   --ink-t (the tile families). */
:where(.ds-tile) { --tint: #EEF0F2; --edge: #A7ACB3; --ink-t: var(--ds-ink); }
.ds-tile.tone-white { --tint: #F4F3EF; --edge: var(--ds-line-strong); --ink-t: var(--ds-ink); }
.ds-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-card);
  background: var(--ds-surface); box-shadow: var(--ds-shadow-card); color: var(--ds-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--ds-fast) ease; }
.ds-tile:hover, .ds-tile[data-state~="hover"] { border-color: var(--edge); }
.ds-tile:focus-visible, .ds-tile[data-state~="focus"] { outline: none; box-shadow: var(--ds-focus); border-color: var(--ds-focus-border); }
.ds-tile.on, .ds-tile[aria-pressed="true"] { background: var(--ds-surface) linear-gradient(180deg, var(--tint) 0%, var(--ds-surface) 92%); border-color: var(--edge); box-shadow: 0 0 0 1px var(--edge); }
.ds-tile-label { font-size: var(--ds-fs-label); font-weight: 600; color: var(--ink-t); line-height: 1.25; }
.ds-tile-count { font-size: var(--ds-fs-figure); font-weight: 700; color: var(--ds-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ds-tile-count.is-zero { color: var(--ds-faint); }
.ds-tile:disabled { cursor: not-allowed; opacity: 0.6; }

/* ---------- Containers: cards, tables, paging, breadcrumbs ---------- */
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-card); box-shadow: var(--ds-shadow-card); }
.ds-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--ds-line); }
.ds-card-head h2, .ds-card-title { margin: 0; font-size: var(--ds-fs-h3); font-weight: 600; }
.ds-card-body { padding: 18px 20px; }
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table thead th { background: var(--ds-surface); color: var(--ds-muted); font-size: var(--ds-fs-label); font-weight: 600; text-align: left; padding: 16px 12px 12px; border-bottom: 1px solid var(--ds-line-strong); }
.ds-table tbody td { padding: 14px 12px; border-bottom: 1px solid var(--ds-line-soft); vertical-align: top; font-size: var(--ds-fs-body); }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover td, .ds-table tbody tr[data-state~="hover"] td { background: var(--ds-surface-2); }
.ds-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-table-empty td, .ds-empty { padding: 40px 16px; text-align: center; color: var(--ds-muted); font-size: var(--ds-fs-body); background: var(--ds-surface); }
.ds-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 18px; border-top: 1px solid var(--ds-line-soft); background: var(--ds-surface);
  font-size: var(--ds-fs-label); color: var(--ds-muted); }
.ds-pager .pt-pg { min-width: 36px; height: 34px; padding: 0 10px; border: 0; border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-ink-2); font: inherit; font-size: var(--ds-fs-label);
  font-weight: 600; box-shadow: none; cursor: pointer; }
.ds-pager .pt-pg:hover:not(:disabled):not(.on), .ds-pager .pt-pg[data-state~="hover"]:not(:disabled):not(.on) { background: var(--ds-surface-3); }
.ds-pager .pt-pg:focus-visible, .ds-pager .pt-pg[data-state~="focus"] { outline: none; box-shadow: var(--ds-focus); }
.ds-pager .pt-pg.on, .ds-pager .pt-pg.on:hover, .ds-pager .pt-pg.on[data-state~="hover"] { background: var(--ds-ink); color: #FFFFFF; border-radius: var(--ds-r-pill); box-shadow: none; }
.ds-pager .pt-pg:disabled { color: var(--ds-faint); background: transparent; cursor: not-allowed; }
.ds-pager .paging, .ds-pager .rows-per-page { display: inline-flex; align-items: center; gap: 4px; }
.ds-pager-left { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.ds-pager .pt-pg-gap { color: var(--ds-faint); padding: 0 2px; }
.ds-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--ds-fs-body); color: var(--ds-muted); }
.ds-crumbs a { color: var(--ds-link); text-decoration: underline; text-decoration-color: rgba(30, 58, 95, 0.35); text-underline-offset: 4px; }
.ds-crumbs a:hover, .ds-crumbs a[data-state~="hover"] { text-decoration-color: currentColor; }
.ds-crumbs a:focus-visible, .ds-crumbs a[data-state~="focus"] { outline: none; box-shadow: var(--ds-focus); border-radius: 4px; }
.ds-crumbs .sep { color: var(--ds-faint); }

/* ---------- Marks: tags, unit badges, car plates, status pills ---------- */
.ds-tag { display: inline-flex; align-items: center; padding: 1px 10px; border-radius: var(--ds-r-pill); background: var(--ds-surface-3); color: var(--ds-muted); font-size: var(--ds-fs-label); font-weight: 600; white-space: nowrap; }
.ds-tag.dark { background: var(--ds-ink); color: #FFFFFF; }
.ds-unit { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: var(--ds-r-pill); background: var(--ds-info-bg); color: var(--ds-info); font-size: var(--ds-fs-label); font-weight: 600;
  letter-spacing: 0.02em; white-space: nowrap; }
.ds-unit.AUTVEL { background: var(--ds-autvel-bg); color: var(--ds-autvel); }
.ds-plate { display: inline-block; padding: 1px 7px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-plate); background: var(--ds-surface); color: var(--ds-ink); font-family: var(--mono);
  font-size: var(--ds-fs-body); font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; }
.ds-plate-lg { font-size: 24px; padding: 2px 10px; border-radius: 6px; line-height: 1.25; }
.ds-status { display: inline-flex; align-items: center; padding: 1px 10px; border-radius: var(--ds-r-pill); font-size: var(--ds-fs-label); font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: var(--ds-surface-3); color: var(--ds-ink-2); }
.ds-status.ok { background: var(--ds-ok-bg); color: var(--ds-ok); }
.ds-status.warn { background: var(--ds-warn-bg); color: var(--ds-warn); }
.ds-status.bad { background: var(--ds-bad-bg); color: var(--ds-bad); }
.ds-status.info { background: var(--ds-info-bg); color: var(--ds-info); }
.ds-status.outline { background: var(--ds-surface); border: 1px solid var(--ds-line-strong); }
/* Locked (owner, 24 Oct 2026): a fact, not an alarm — calm grey with the lock; red stays for problems (overdue, outstanding, declined). */
.ds-status.lock { gap: 4px; background: var(--ds-surface-3); color: var(--ds-ink-2); box-shadow: inset 0 0 0 1px var(--ds-line); }

/* ---------- Photos: upload box, thumbnails ---------- */
.ds-upload { position: relative; display: flex; align-items: center; justify-content: center; padding: 16px; border: 1.5px dashed #A7ACB3; border-radius: var(--ds-r-card); background: var(--ds-surface-2);
  color: var(--ds-link); font-size: var(--ds-fs-body); font-weight: 600; text-align: center; cursor: pointer; transition: border-color var(--ds-fast) ease, background-color var(--ds-fast) ease; }
.ds-upload:hover, .ds-upload[data-state~="hover"] { border-color: var(--ds-link); background: #F4F7FB; }
.ds-upload:focus-within, .ds-upload[data-state~="focus"] { border-color: var(--ds-focus-border); box-shadow: var(--ds-focus); }
.ds-upload.drop, .drop > .ds-upload { border-style: solid; border-color: var(--ds-link); background: var(--ds-info-bg); }
.ds-upload.invalid { border-color: var(--ds-bad); border-style: solid; }
.ds-upload.disabled { color: var(--ds-faint); border-color: var(--ds-line); cursor: not-allowed; }
.ds-thumb { position: relative; display: block; padding: 0; border: 0; border-radius: var(--ds-r-thumb); overflow: hidden; background: #3E4650; cursor: zoom-in; }
.ds-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-thumb:hover img, .ds-thumb[data-state~="hover"] img { filter: brightness(1.05); }
.ds-thumb:focus-visible, .ds-thumb[data-state~="focus"] { outline: none; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px rgba(166, 13, 19, 0.35); }

/* ---------- Feedback: modal, toast, empty, loading ---------- */
.ds-modal-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(22, 25, 29, 0.45); }
.ds-modal { width: 100%; max-width: 460px; padding: 24px; border-radius: 16px; background: var(--ds-surface); box-shadow: var(--ds-shadow-pop); }
.ds-modal h2 { margin: 0; font-size: var(--ds-fs-h3); font-weight: 700; }
.ds-modal p { margin: 10px 0 0; color: var(--ds-ink-2); font-size: var(--ds-fs-body); }
.ds-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.ds-toast { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: var(--ds-r-pill); background: var(--ds-ink); color: #FFFFFF; font-size: var(--ds-fs-body); font-weight: 600;
  box-shadow: var(--ds-shadow-pop); }
.ds-toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #7FCB98; }
.ds-toast.bad::before { background: #F08A80; }
.ds-loading { display: inline-flex; align-items: center; gap: 10px; color: var(--ds-muted); font-size: var(--ds-fs-body); }
.ds-loading::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ds-line); border-top-color: var(--ds-brand); animation: ds-spin 800ms linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ds-loading::before { animation: none; }
  .ds-btn, .ds-input, .ds-select, .ds-textarea, .ds-chip, .ds-pills > button, .ds-tile, .ds-upload, .ds-toggle input, .ds-toggle input::after, .ds-check input { transition: none; }
}

/* ===== Added for the full-app rollout (owner, 24 Oct 2026; docs/00-project/full-app-design-rollout.md). Same family: the
   tokens above, nothing new in colour, shape or motion. ===== */

/* ---------- Tones: the tile and status families (shared/tile-tones.js), as tokens for ds-tile and ds-status ---------- */
.tone-neutral, .tone-white { --tint: #F4F3EF; --edge: var(--ds-line-strong); --ink-t: var(--ds-ink); }
.tone-stone { --tint: #E8E3D9; --edge: #B5AB98; --ink-t: #3E4650; }
.tone-green { --tint: #DAEDDF; --edge: #7FB291; --ink-t: #0B5536; }
.tone-navy { --tint: #DCE6F3; --edge: #87A3C8; --ink-t: #1E3A5F; }
.tone-amber { --tint: #F9E2BE; --edge: #D49A4A; --ink-t: #7A4300; }
.tone-red { --tint: #F5DAD6; --edge: #D48A80; --ink-t: #A11E14; }
.tone-purple { --tint: #ECE6F3; --edge: #C3B3DA; --ink-t: #4A2E7A; }
/* A stage tile's small line icon and its sub-line take the tile's own colour. */
.ds-tile .tile-icon { color: var(--ink-t); stroke: currentColor; }
.ds-tile .tile-sub { font-size: var(--ds-fs-label); color: var(--ds-muted); }
/* A status pill in a list (core/status.js): the family's tint and ink, no dot (the words carry it). */
.ds-status .dot { display: none; }

/* ---------- Quiet icon button: the row's ⋯ and a × (no edge until hovered) ---------- */
.ds-btn-quiet { border-color: transparent; background: transparent; color: var(--ds-ink-2); }
.ds-btn-quiet:hover, .ds-btn-quiet[data-state~="hover"], .ds-btn-quiet[aria-expanded="true"] { border-color: var(--ds-line); background: var(--ds-surface-3); color: var(--ds-ink); }

/* ---------- Message note: a short message in a page or a card (owed red, waiting amber, information navy, done green) ----------
   One rounded tinted box with a small mark; the words in the family's ink. A message about a box stays right under that box
   (ds-field-msg); a note is for the page or the card as a whole. */
.ds-note { position: relative; display: block; padding: 12px 16px 12px 34px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-card);
  background: var(--ds-surface-2); color: var(--ds-ink-2); font-size: var(--ds-fs-body); line-height: 1.45; }
.ds-note::before { content: ''; position: absolute; left: 16px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-faint); }   /* the words stay one flow of text */
.ds-note.bad { background: var(--ds-bad-bg); border-color: #E7B9B3; color: var(--ds-bad); }
.ds-note.bad::before { background: var(--ds-bad); }
.ds-note.warn { background: var(--ds-warn-bg); border-color: #EBC995; color: var(--ds-warn); }
.ds-note.warn::before { background: #B8741A; }
.ds-note.info { background: var(--ds-info-bg); border-color: #BCCDE3; color: var(--ds-info); }
.ds-note.info::before { background: var(--ds-info); }
.ds-note.ok { background: var(--ds-ok-bg); border-color: #B5D6BF; color: var(--ds-ok); }
.ds-note.ok::before { background: var(--ds-ok); }
.ds-note[hidden] { display: none; }
.ds-note a, .ds-note .ds-btn-link { white-space: nowrap; }   /* an action in a message is never split across two lines */

/* ---------- Drawer: a panel on the right over a list (the list never squeezes) ---------- */
.ds-drawer { background: var(--ds-surface); border-left: 1px solid var(--ds-edge-warm); border-radius: 16px 0 0 16px; box-shadow: -14px 0 40px rgba(22, 25, 29, 0.14); }
.ds-drawer-backdrop { background: rgba(22, 25, 29, 0.18); }

/* ---------- Action bar: the Job Card's bar at the foot of the screen ----------
   White, a hairline on top, a soft shadow upward; its controls are ds-btn pills (the main one red); its menus ds-pop panels. */
.ds-bar { background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--ds-line); box-shadow: 0 -6px 22px rgba(22, 25, 29, 0.06); }   /* no backdrop blur (speed, owner 24 Oct 2026: unseen behind 96 % white, re-blurred on every scroll) */

/* ---------- Base: every tick box and round choice in the app takes the ds-check box (also outside a ds-check label) ---------- */
:where(#app, .ds-modal-overlay, .modal-overlay) input:where([type="checkbox"], [type="radio"]) { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 0;
  border: 1.5px solid var(--ds-line-strong); border-radius: 6px; background: var(--ds-surface) no-repeat center / 12px 9px; cursor: pointer; vertical-align: middle;
  transition: background-color var(--ds-fast) ease, border-color var(--ds-fast) ease; }
:where(#app, .ds-modal-overlay, .modal-overlay) input:where([type="radio"]) { border-radius: 50%; }
:where(#app, .ds-modal-overlay, .modal-overlay) input:where([type="checkbox"], [type="radio"]):hover { border-color: var(--ds-ink); }
:where(#app, .ds-modal-overlay, .modal-overlay) input:where([type="checkbox"], [type="radio"]):focus-visible { outline: none; box-shadow: var(--ds-focus); border-color: var(--ds-focus-border); }
:where(#app, .ds-modal-overlay, .modal-overlay) input:where([type="checkbox"]):checked { background-color: var(--ds-ink); border-color: var(--ds-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5l3.2 3L11 1' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:where(#app, .ds-modal-overlay, .modal-overlay) input:where([type="radio"]):checked { border: 6px solid var(--ds-ink); }
:where(#app, .ds-modal-overlay, .modal-overlay) input:where([type="checkbox"], [type="radio"]):disabled { background-color: var(--ds-surface-2); border-color: var(--ds-line); cursor: not-allowed; }
:where(#app, .ds-modal-overlay, .modal-overlay) input:where([type="checkbox"]):checked:disabled { background-color: var(--ds-faint); border-color: var(--ds-faint); }

/* ---------- Base: no browser focus ring anywhere — the design system's soft rose glow instead ---------- */
:where(#app, .ds-modal-overlay, .modal-overlay, .select-menu) :where(a, button, [tabindex]):focus-visible { outline: none; box-shadow: var(--ds-focus); }
:where(#app, .ds-modal-overlay, .modal-overlay) :where(input, select, textarea):focus-visible { outline: none; }

/* ---------- A menu panel's items: ds-menu-item, or any role="menuitem" in a ds-pop (the row ⋯ menus, the bar menus) ---------- */
.ds-pop [role="menuitem"] { display: block; width: 100%; min-height: 40px; padding: 10px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ds-ink); font: inherit;
  font-size: var(--ds-fs-body); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; }
.ds-pop [role="menuitem"]:hover, .ds-pop [role="menuitem"][data-state~="hover"] { background: var(--ds-hover); color: var(--ds-ink); text-decoration: none; }
.ds-pop [role="menuitem"]:focus-visible { outline: none; background: var(--ds-hover); box-shadow: inset 0 0 0 2px rgba(166, 13, 19, 0.18); }
.ds-pop [role="menuitem"]:disabled, .ds-pop [role="menuitem"][aria-disabled="true"] { color: var(--ds-faint); background: transparent; cursor: not-allowed; }

/* ---------- Table cell field: a box inside an editing table (the estimate grid). No edge, the row's own height; a faint fill
   on hover; on focus white with the warm edge and the soft rose glow inside the cell; an error in the owed tint and edge. A
   dropdown cell sits in a ds-select-box with its turning arrow and opens the design system's list. ---------- */
.ds-cell { border: 0; border-radius: 8px; background-color: transparent; color: var(--ds-ink); font: inherit; outline: none; transition: background-color var(--ds-fast) ease, box-shadow var(--ds-fast) ease; }
.ds-cell:hover, .ds-cell[data-state~="hover"] { background-color: var(--ds-surface-2); box-shadow: inset 0 0 0 1px var(--ds-line); }
.ds-cell:focus, .ds-cell.menu-open, .ds-cell[data-state~="focus"] { outline: none; background-color: var(--ds-surface); box-shadow: inset 0 0 0 1px var(--ds-focus-border), var(--ds-focus); }
.ds-cell.bad, .ds-cell[aria-invalid="true"] { outline: none; background-color: var(--ds-bad-bg); box-shadow: inset 0 0 0 1.5px var(--ds-bad); }
select.ds-cell { -webkit-appearance: none; appearance: none; padding-right: 30px; cursor: pointer; }
.ds-select-box > .ds-cell + .ds-select-caret { right: 10px; }
.ds-select-box:has(> .ds-cell) { height: 100%; }

/* ---------- A field with something inside it (an icon, a fixed part): the box is the ds-input, the bare input fills it ----------
   Used where a search box holds its own icon or a chosen value beside the typing (Parts › Inward, Not on the estimate). */
.ds-input-box { display: flex; align-items: center; gap: 10px; min-height: var(--ds-h); padding: 0 14px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-r-control);
  background: var(--ds-surface); color: var(--ds-muted); transition: border-color var(--ds-fast) ease, box-shadow var(--ds-fast) ease; }
.ds-input-box-pill { border-radius: var(--ds-r-pill); }
.ds-input-box:hover, .ds-input-box[data-state~="hover"] { border-color: #8F8A80; }
.ds-input-box:focus-within, .ds-input-box[data-state~="focus"] { border-color: var(--ds-focus-border); box-shadow: var(--ds-focus); }
.ds-input-bare { flex: 1; min-width: 0; height: calc(var(--ds-h) - 2px); padding: 0; border: 0; outline: none; background: transparent; color: var(--ds-ink); font: inherit; font-size: var(--ds-fs-body); }
.ds-input-bare::placeholder { color: var(--ds-faint); }

/* ---------- A dense row of fields (ds-compact on the row): the small height and tighter padding, so narrow boxes (GST %, HSN)
   show their whole value. The Inward and Give lines. ---------- */
.ds-compact .ds-input, .ds-compact .ds-select, .ds-compact .ds-input-box { height: var(--ds-h-sm); min-height: var(--ds-h-sm); padding-left: 10px; padding-right: 10px; }
.ds-compact .ds-select { padding-right: 28px; }
.ds-compact .ds-select-box > .ds-select + .ds-select-caret { right: 10px; }
.ds-compact .ds-btn { height: var(--ds-h-sm); padding: 0 14px; font-size: var(--ds-fs-label); }

/* ---------- Danger button: an action that cannot be undone (Leave without saving, Cancel Tax Invoice). Owed red outline ---------- */
.ds-btn-danger { border-color: #E0A39C; color: var(--ds-bad); }
.ds-btn-danger:hover, .ds-btn-danger[data-state~="hover"] { border-color: var(--ds-bad); background: var(--ds-bad-bg); color: var(--ds-bad); }
.ds-btn-danger:active, .ds-btn-danger[data-state~="pressed"] { background: #F2D3CF; }

/* ---------- The living style page #/design-system (Admin): its layout only ---------- */
.dsp { display: flex; flex-direction: column; gap: 22px; }
.dsp-head { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.dsp-title { margin: 0; font-family: var(--display); font-size: var(--ds-fs-h1); font-weight: 700; letter-spacing: -0.01em; }
.dsp-index { display: flex; flex-wrap: wrap; gap: 8px; }
.dsp-section { scroll-margin-top: 16px; }
.dsp-section .ds-card-body { display: flex; flex-direction: column; gap: 0; padding-top: 4px; padding-bottom: 4px; }
.dsp-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ds-line-soft); }
.dsp-row:last-child { border-bottom: 0; }
.dsp-row-name { font-size: var(--ds-fs-body); font-weight: 600; color: var(--ds-ink); padding-top: 26px; }
.dsp-cells { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 22px; min-width: 0; }
.dsp-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 100%; }
.dsp-cell .ds-input, .dsp-cell .ds-textarea { width: 230px; max-width: 100%; }
.dsp-cell .ds-select { width: auto; min-width: 230px; max-width: 100%; }
.dsp-state { font-size: var(--ds-fs-label); color: var(--ds-muted); }
.dsp-cell:has(.dsp-wide) { flex: 1 1 100%; }
.dsp-static { position: static; width: 260px; max-width: 100%; }
.dsp-pop { width: 240px; display: flex; flex-direction: column; }
.dsp-upload { width: 180px; aspect-ratio: 4 / 3; }
.dsp-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dsp-thumb { width: 160px; aspect-ratio: 4 / 3; }
.dsp-table-wrap { overflow-x: auto; }
.dsp-hover td { background: var(--ds-surface-2); }
.dsp-modal-host { position: relative; width: 520px; max-width: 100%; height: 230px; border-radius: var(--ds-r-card); overflow: hidden; }
.dsp-static-overlay { position: absolute; }
.dsp-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 14px 0; }
.dsp-swatch { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; font-size: var(--ds-fs-body); }
.dsp-chip { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ds-line); }
.dsp-mono { font-family: var(--mono); font-size: var(--ds-fs-label); color: var(--ds-muted); }
.dsp-type { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--ds-line-soft); }
.dsp-t1 { font-family: var(--display); font-size: var(--ds-fs-h1); font-weight: 700; }
.dsp-t2 { font-size: var(--ds-fs-h2); font-weight: 600; }
.dsp-t3 { font-size: var(--ds-fs-h3); font-weight: 600; }
.dsp-tb { font-size: var(--ds-fs-body); }
.dsp-tl { font-size: var(--ds-fs-label); color: var(--ds-muted); font-weight: 600; }
.dsp-shapes { display: flex; flex-wrap: wrap; gap: 16px; padding: 14px 0 18px; border-top: 1px solid var(--ds-line-soft); }
.dsp-shape { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 56px; padding: 0 16px; border: 1px solid var(--ds-line-strong); background: var(--ds-surface); font-size: var(--ds-fs-label); font-weight: 600; }
.dsp-shape.r-control { border-radius: var(--ds-r-control); }
.dsp-shape.r-card { border-radius: var(--ds-r-card); }
.dsp-shape.r-pill { border-radius: var(--ds-r-pill); }
.dsp-shape.glow { border-radius: var(--ds-r-pill); border-color: var(--ds-edge-warm); box-shadow: var(--ds-glow); }
.dsp-shape.focus { border-radius: var(--ds-r-control); border-color: var(--ds-focus-border); box-shadow: var(--ds-focus); }
@media (max-width: 760px) {
  .dsp-row { grid-template-columns: 1fr; gap: 10px; }
  .dsp-row-name { padding-top: 0; }
}

/* ---------- The page wash: the soft fade under the top bar, alive (owner, 23 Oct 2026) ----------
   One shared style on every page (.page). The rose fade is the still base (::before); over it a second wash (::after),
   warm peach on the left drifting to a cool lilac blush on the right, slowly breathes in and out (18 s, opacity only, so the
   browser's compositor does it: no repaint, no effect on scrolling). Speed (owner, 24 Oct 2026): the breath moves in small
   steps, about five a second (the ease-in-out curve kept by its keyframes), not 60: a smooth fade redrew the whole 400 px
   wide band every frame, all day. Both fade down into the page colour and out at the
   sides, starting right under the red line. Reduce motion: the rose base alone, still. Never printed, never in a PDF. */
.page { position: relative; isolation: isolate; }
.page::before, .page::after { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 400px; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
/* No ghost shape (owner, 24 Oct 2026): both washes die away on an eased tail, so on a short page their lower edge never
   reads as a faint rounded box behind the content. */
.page::before { background: radial-gradient(55% 85% at 80% 0%, rgba(166, 13, 19, 0.045), transparent 70%),
  linear-gradient(180deg, rgba(246, 227, 226, 0.95) 0%, rgba(246, 227, 226, 0.62) 22%, rgba(245, 232, 229, 0.34) 44%, rgba(243, 236, 231, 0.14) 66%, rgba(242, 239, 233, 0.04) 84%, rgba(242, 240, 234, 0) 100%); }
.page::after { opacity: 0; will-change: opacity; animation: ds-wash 18s steps(11, jump-none) infinite;
  background: linear-gradient(100deg, rgba(250, 226, 214, 0.95) 0%, rgba(248, 228, 222, 0.8) 45%, rgba(243, 224, 234, 0.95) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.62) 22%, rgba(0, 0, 0, 0.32) 44%, rgba(0, 0, 0, 0.12) 66%, rgba(0, 0, 0, 0.03) 84%, transparent 100%), linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.62) 22%, rgba(0, 0, 0, 0.32) 44%, rgba(0, 0, 0, 0.12) 66%, rgba(0, 0, 0, 0.03) 84%, transparent 100%), linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect; }
@keyframes ds-wash { 0%, 100% { opacity: 0; } 12.5%, 87.5% { opacity: 0.11; } 25%, 75% { opacity: 0.425; } 37.5%, 62.5% { opacity: 0.74; } 50% { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .page::after { animation: none; opacity: 0; } }
@media print { .page::before, .page::after { display: none; } }
.dsp-menu { position: relative; display: inline-block; }
.dsp-menu-pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; min-width: 180px; display: flex; flex-direction: column; }
.dsp-menu-hold { height: 150px; }
.dsp-chev { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dsp-wash { display: block; width: 180px; height: 90px; border-radius: var(--ds-r-card); border: 1px solid var(--ds-line); background: linear-gradient(180deg, var(--w) 0%, var(--ds-paper) 100%); }
.dsp-wash.rose { --w: #F6E3E2; } .dsp-wash.peach { --w: #FAE2D6; } .dsp-wash.lilac { --w: #F3E0EA; }
.dsp-wash.alive { position: relative; isolation: isolate; overflow: hidden; --w: #F6E3E2; }
.dsp-wash.alive::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, #FAE2D6, #F3E0EA); -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
  opacity: 0; animation: ds-wash 6s steps(4, jump-none) infinite; }
@media (prefers-reduced-motion: reduce) { .dsp-wash.alive::after { animation: none; } }
.dsp-drawer-host { position: relative; width: 560px; max-width: 100%; height: 200px; overflow: hidden; border-radius: var(--ds-r-card); border: 1px solid var(--ds-line); background: var(--ds-paper); }
.dsp-fill { position: absolute; inset: 0; }
.dsp-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 280px; }
.dsp-bar { display: flex; align-items: center; gap: 10px; width: 560px; max-width: 100%; padding: 10px 16px; border-radius: var(--ds-r-card); }
.dsp-grow { flex: 1; }

/* ---------- Every control answers (owner, 24 Oct 2026: "you can't tell a click happened") ----------
   One rule for every button, pill, chip, tab, page number and tile: the pointer over it shows the soft rose highlight
   and a firmer edge; pressing it sinks it a pixel with a deeper tint (an inner shadow), so a click is seen; the picked
   one stays ink (switches, chips, page numbers) or underlined in brand red (tabs). Every state keeps the round pill.
   Placed last so it answers over the blocks above. Reduce motion: the same states, no transition. */
.ds-btn:not(.ds-btn-main):not(.ds-btn-link):not(.ds-btn-quiet):not(.ds-btn-danger):not(.on):not([aria-pressed="true"]):not(:disabled):hover,
.ds-btn:not(.ds-btn-main):not(.ds-btn-link):not(.ds-btn-quiet):not(.ds-btn-danger):not(.on):not([aria-pressed="true"])[data-state~="hover"] {
  background: var(--ds-hover); border-color: var(--ds-ink); box-shadow: 0 2px 8px rgba(22, 25, 29, 0.1); }
.ds-btn:not(:disabled):active, .ds-btn[data-state~="pressed"] { transform: translateY(1px); }
.ds-btn:not(.ds-btn-main):not(.ds-btn-link):not(.on):not([aria-pressed="true"]):not(:disabled):active,
.ds-btn:not(.ds-btn-main):not(.ds-btn-link):not(.on):not([aria-pressed="true"])[data-state~="pressed"] {
  background: #EFDFDB; border-color: var(--ds-ink); box-shadow: inset 0 2px 4px rgba(22, 25, 29, 0.16); }
.ds-btn-main:not(:disabled):active, .ds-btn-main[data-state~="pressed"] { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28); }
.ds-btn-quiet:not(:disabled):hover, .ds-btn-quiet[data-state~="hover"] { background: var(--ds-hover); border-color: var(--ds-line-strong); color: var(--ds-ink); }
.ds-btn-link:not(:disabled):hover, .ds-btn-link[data-state~="hover"] { background: rgba(30, 58, 95, 0.08); text-decoration-color: currentColor; }
.ds-btn-link:not(:disabled):active, .ds-btn-link[data-state~="pressed"] { background: rgba(30, 58, 95, 0.16); color: var(--ds-ink); }
.ds-btn.on:not(:disabled):hover, .ds-btn[aria-pressed="true"]:not(:disabled):hover { background: var(--ds-ink-2); border-color: var(--ds-ink-2); color: #FFFFFF; }
/* Switches (ds-pills): one clean pill track, its options round in every state, no inner borders. */
@media (min-width: 641px) { .ds-pills > button { border: 0 !important; border-radius: var(--ds-r-pill) !important; } }   /* a phone keeps each option's own outline */
.ds-pills > button:hover:not(.on):not([aria-pressed="true"]):not(:disabled), .ds-pills > button[data-state~="hover"]:not(.on):not([aria-pressed="true"]) { background: var(--ds-hover); box-shadow: inset 0 0 0 1px var(--ds-edge-warm); }
.ds-pills > button:active:not(:disabled), .ds-pills > button[data-state~="pressed"] { background: #EFDFDB; box-shadow: inset 0 2px 4px rgba(22, 25, 29, 0.16); }
.ds-pills > button.on:active, .ds-pills > button[aria-pressed="true"]:active { background: var(--ds-ink-2); }
/* Chips. */
.ds-chip:hover:not(.on):not([aria-pressed="true"]):not(:disabled), .ds-chip[data-state~="hover"]:not(.on):not([aria-pressed="true"]) { background: var(--ds-hover); border-color: var(--ds-ink); box-shadow: 0 2px 8px rgba(22, 25, 29, 0.08); }
.ds-chip:active:not(:disabled), .ds-chip[data-state~="pressed"] { transform: translateY(1px); background: #EFDFDB; box-shadow: inset 0 2px 4px rgba(22, 25, 29, 0.16); }
.ds-chip.on:active, .ds-chip[aria-pressed="true"]:active { background: var(--ds-ink-2); }
/* Tabs. */
.ds-tabs > a:hover, .ds-tabs > button:hover, .ds-tabs > a[data-state~="hover"], .ds-tabs > button[data-state~="hover"] { background: var(--ds-hover); border-radius: 8px 8px 0 0; }
.ds-tabs > a:active, .ds-tabs > button:active, .ds-tabs > a[data-state~="pressed"], .ds-tabs > button[data-state~="pressed"] { background: #EFDFDB; color: var(--ds-ink); }
/* Page numbers and Rows per page: the same round pill in every state. */
.ds-pager .pt-pg { border: 0; border-radius: var(--ds-r-pill); }
.ds-pager .pt-pg.jc-pg-wide, .ds-pager .pt-pg.vh-pg-wide { box-shadow: inset 0 0 0 1px var(--ds-line-strong); }
.ds-pager .pt-pg:hover:not(:disabled):not(.on), .ds-pager .pt-pg[data-state~="hover"]:not(:disabled):not(.on) { background: var(--ds-hover); color: var(--ds-ink); box-shadow: inset 0 0 0 1px var(--ds-edge-warm); }
.ds-pager .pt-pg:active:not(:disabled):not(.on), .ds-pager .pt-pg[data-state~="pressed"] { background: #EFDFDB; box-shadow: inset 0 2px 4px rgba(22, 25, 29, 0.16); }
/* Tiles, menu items, the tick-box pill. */
.ds-tile:hover:not(.on):not([aria-pressed="true"]), .ds-tile[data-state~="hover"]:not(.on) { box-shadow: 0 6px 18px rgba(22, 25, 29, 0.08); }
.ds-tile:active, .ds-tile[data-state~="pressed"] { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(22, 25, 29, 0.1); }
.ds-menu-item:active, .ds-option:active, .select-menu.ds-menu .select-opt:active { background: #EFDFDB; }
.ds-check-pill:hover { background: var(--ds-hover); box-shadow: 0 2px 8px rgba(22, 25, 29, 0.08); }
.ds-check-pill:active { transform: translateY(1px); background: #EFDFDB; }
/* Pressed beats hover (a press is always over the control). */
.ds-btn:not(.ds-btn-main):not(.ds-btn-link):not(.ds-btn-quiet):not(.ds-btn-danger):not(.on):not([aria-pressed="true"]):not(:disabled):hover:active,
.ds-btn-quiet:not(:disabled):hover:active, .ds-btn-danger:not(:disabled):hover:active {
  background: #EFDFDB; border-color: var(--ds-ink); box-shadow: inset 0 2px 4px rgba(22, 25, 29, 0.16); }
.ds-pills > button:hover:active:not(.on):not([aria-pressed="true"]):not(:disabled),
.ds-chip:hover:active:not(.on):not([aria-pressed="true"]):not(:disabled) { background: #EFDFDB; box-shadow: inset 0 2px 4px rgba(22, 25, 29, 0.16); }

/* ---------- Loading placeholders (owner, 24 Oct 2026) ----------
   While a page's data is on its way it shows its own shape in soft warm bars (a tile's number, table rows, cards), at the
   size the real content takes, so nothing jumps when it arrives. The bars breathe gently; with "reduce motion" they stay
   still. Screen readers hear "Loading…". Never a <table>, never a heading: tests and readers wait for the real ones. */
.ds-skel { display: block; border-radius: 8px; background: linear-gradient(90deg, #ECE7DE, #F3EFE8 55%, #ECE7DE); animation: ds-skel 1.4s ease-in-out infinite; }
@keyframes ds-skel { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .ds-skel { animation: none; } }
.ds-skel-count { width: 48px; height: 30px; margin-top: 2px; }
.ds-skel-line { height: 14px; margin: 6px 0; }
.ds-skel-line.short { width: 40%; }
.ds-skel-line.mid { width: 65%; }
.ds-skel-title { width: 220px; height: 30px; margin: 6px 0 14px; border-radius: 10px; }
.ds-skel-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-card); box-shadow: var(--ds-shadow-card); padding: 18px 20px; }
.ds-skel-table { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-card); box-shadow: var(--ds-shadow-card); overflow: hidden; }
.ds-skel-row { display: grid; grid-template-columns: var(--skel-cols, 2fr 1.4fr 1.4fr 1fr 2fr 1.4fr 1.6fr 1fr); gap: 18px; align-items: center; height: 74px; padding: 0 16px; border-bottom: 1px solid var(--ds-line-soft); }
.ds-skel-row.head { height: 50px; border-bottom-color: var(--ds-line-strong); }
.ds-skel-row.head .ds-skel { height: 12px; width: 60%; opacity: 0.7; }
.ds-skel-row:last-child { border-bottom: 0; }
.ds-skel-row .ds-skel { height: 14px; }
.ds-skel-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.ds-skel-tiles .ds-skel-card { height: 90px; }
.ds-skel-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.ds-skel-stack { display: flex; flex-direction: column; gap: 20px; }
.ds-skel-page { padding-top: 4px; }

/* ---------- Hub block (owner, 24 Oct 2026; the Reports home block for every hub page of link cards) ----------
   A page made of choices (Parts › Adjustments …): each choice one white block with its icon in the blush circle, its title,
   one line, and its action words; the whole block is the link (hover: the warm edge and the soft red glow; press: it
   sinks a pixel; keyboard focus: the ring round the block). */
.ds-hubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
/* Four blocks (owner, 24 Oct 2026): a 2 × 2 grid, wide enough that every title stays on one line; every block the same
   height, its action ("Start counting ›", "Open ›") at the same place at the bottom; one column on a narrow screen. */
.ds-hubs:has(> :nth-child(4):last-child), .ds-hubs:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; max-width: 1080px; }
@media (max-width: 760px) { .ds-hubs:has(> :nth-child(4):last-child), .ds-hubs:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; grid-auto-rows: auto; } }
.ds-hub-block { position: relative; display: flex; align-items: flex-start; gap: 18px; min-height: 128px; padding: 24px 26px; background: var(--ds-surface); border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-card); box-shadow: var(--ds-shadow-card); color: var(--ds-ink); transition: box-shadow var(--ds-fast) ease, border-color var(--ds-fast) ease; }
.ds-hub-block:hover, .ds-hub-block[data-state~="hover"] { border-color: var(--ds-edge-warm); box-shadow: 0 0 0 4px rgba(166, 13, 19, 0.05), 0 10px 28px rgba(166, 13, 19, 0.12); }
.ds-hub-block:active, .ds-hub-block[data-state~="pressed"] { transform: translateY(1px); box-shadow: 0 0 0 4px rgba(166, 13, 19, 0.07), 0 4px 12px rgba(166, 13, 19, 0.12); }
.ds-hub-block:has(.ds-hub-go:focus-visible) { border-color: var(--ds-focus-border); box-shadow: var(--ds-focus), 0 10px 28px rgba(166, 13, 19, 0.12); }
.ds-hub-icon { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--ds-brand);
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, var(--ds-blush-soft) 45%, var(--ds-blush) 100%); border: 1px solid var(--ds-edge-warm); }
.ds-hub-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ds-hub-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 2px; align-self: stretch; flex: 1 1 auto; }
.ds-hub-block h2, .ds-hub-title { margin: 0; font-family: var(--display, inherit); font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--ds-ink); }
.ds-hub-block p, .ds-hub-line { margin: 0; font-size: var(--ds-fs-body); line-height: 1.4; color: var(--ds-muted); }
.ds-hub-go { margin-top: auto; padding-top: 4px; font-size: var(--ds-fs-label); font-weight: 600; color: var(--ds-link); text-decoration: none; }
.ds-hub-go::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.ds-hub-go:hover, .ds-hub-go:focus-visible { text-decoration: none; outline: none; }
@media (prefers-reduced-motion: reduce) { .ds-hub-block { transition: none; } }

/* ---------- Colour with meaning and a clear hierarchy (owner, 24 Oct 2026: "plain colour, no highlights") ----------
   Card heads carry a soft tint from the concept palette (blush by default, the family tint where the card has a meaning);
   the key fact of a block is big and strong, its second lines muted and smaller. Families: ok green (done, received),
   warn amber (waiting, missing, next step), bad red (overdue, owed, declined), info navy (in work, information). */
.ds-card-head, .ds-card > .side-head, .ds-card > .wide-head { background: linear-gradient(180deg, var(--ds-blush-soft) 0%, var(--ds-surface) 100%); border-bottom-color: var(--ds-line-soft); }
.ds-card.money-due > .side-head { background: linear-gradient(180deg, var(--ds-bad-bg) 0%, var(--ds-surface) 100%); }
.ds-card.money-paid > .side-head { background: linear-gradient(180deg, var(--ds-ok-bg) 0%, var(--ds-surface) 100%); }
.ds-card > .side-head h2, .ds-card-head h2 { font-size: 17px; font-weight: 700; }
.side-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: var(--ds-r-pill); background: var(--ds-surface-3); color: var(--ds-muted); font-size: var(--ds-fs-label); font-weight: 600; }
/* A status as the big fact of its block. */
.ds-status-lg, .jc-status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: var(--ds-r-pill); font-size: 18px; font-weight: 700; line-height: 1.3; }
.ds-status-lg::before, .jc-status-pill::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.tone-stone .jc-status-pill { background: var(--ds-surface-3); color: var(--ds-ink-2); }
.tone-warn .jc-status-pill { background: var(--ds-warn-bg); color: var(--ds-warn); }
.tone-info .jc-status-pill { background: var(--ds-info-bg); color: var(--ds-info); }
.tone-ok .jc-status-pill { background: var(--ds-ok-bg); color: var(--ds-ok); }
.tone-done .jc-status-pill { background: var(--ds-ok-bg); color: var(--ds-ok); }
.tone-bad .jc-status-pill { background: var(--ds-bad-bg); color: var(--ds-bad); }
/* The next step: the line the eye finds first — a warm callout with the brand edge. */
.next-line { display: block; width: fit-content; max-width: 100%; margin-top: 8px; padding: 6px 12px 6px 10px; border-left: 3px solid var(--ds-brand); border-radius: 0 8px 8px 0;
  background: var(--ds-blush); color: var(--ds-ink-2); font-size: var(--ds-fs-label); line-height: 1.4; }
.next-line b { color: var(--ds-brand-press); font-weight: 700; }
.next-line + .next-line { margin-top: 4px; }
/* Facts with a meaning. */
.is-overdue { color: var(--ds-bad) !important; }
.is-missing { color: var(--ds-warn) !important; }
.is-unset { color: var(--ds-faint) !important; font-weight: 500 !important; }
.money-due { color: var(--ds-bad) !important; font-weight: 700; font-size: 16px; }
.money-in, .money-clear { color: var(--ds-ok) !important; font-weight: 600; }
.money-over { color: var(--ds-warn) !important; font-weight: 600; }
.ws-tone-ok { color: var(--ds-ok); font-weight: 600; }
.ws-tone-info { color: var(--ds-info); font-weight: 600; }
.ws-tone-warn { color: var(--ds-warn); font-weight: 600; }
.ws-tone-bad { color: var(--ds-bad); font-weight: 600; }
.ws-tone-stone { color: var(--ds-faint); }
/* The selected one answers too: hover deepens it, a press sinks it. */
.ds-pills > button.on:hover:not(:disabled), .ds-pills > button[aria-pressed="true"]:hover:not(:disabled),
.ds-chip.on:hover:not(:disabled), .ds-chip[aria-pressed="true"]:hover:not(:disabled),
.ds-pager .pt-pg.on:hover:not(:disabled) { background: var(--ds-ink-2); color: #FFFFFF; }
.ds-pills > button.on:hover:active, .ds-pills > button[aria-pressed="true"]:hover:active,
.ds-chip.on:hover:active, .ds-chip[aria-pressed="true"]:hover:active,
.ds-pager .pt-pg.on:hover:active { background: #0B0D10; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35); }
.ds-tile.on:hover, .ds-tile[aria-pressed="true"]:hover { box-shadow: 0 0 0 1px var(--edge), 0 6px 18px rgba(22, 25, 29, 0.08); }
.ds-tile.on:hover:active, .ds-tile[aria-pressed="true"]:hover:active { transform: translateY(1px); box-shadow: 0 0 0 1px var(--edge), inset 0 2px 4px rgba(22, 25, 29, 0.1); }
/* A tile's figure still coming takes exactly the figure's line, so the tile does not change height when it arrives. */
.ds-tile-count.is-loading { display: flex; align-items: center; height: 1.1em; line-height: 1.1; }
.ds-tile-count.is-loading .ds-skel-count { height: 24px; margin: 0; }

/* ---------- "Waiting for you" (owner, 24 Oct 2026; docs/00-project/20-notification-bell, FROZEN) ----------
   In the dark top bar, left of the person's name: the red pill (the brand red of "OS" and the main button) with the number
   in a white circle; nothing open: a plain grey pill "Nothing waiting". The panel slides in from the right (460 px, full
   height) over a dim page; on a phone the bell with a red number, and the list slides up from the bottom. A new item: a
   small dark pop-up under the button for 6 seconds. Reduce motion: no slide, no fade. */
.waiting-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 14px; border: 1px solid var(--ds-brand); border-radius: var(--ds-r-pill);
  background: var(--ds-brand); color: #FFFFFF; font: inherit; font-size: var(--ds-fs-label); font-weight: 600; white-space: nowrap; cursor: pointer; align-self: center;
  box-shadow: 0 0 0 3px rgba(166, 13, 19, 0.25); transition: background-color var(--ds-fast) ease; }
.waiting-btn:hover { background: var(--ds-brand-hover); }
.waiting-btn:active { background: var(--ds-brand-press); transform: translateY(1px); }
.waiting-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px rgba(166, 13, 19, 0.5); }
.waiting-n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #FFFFFF; color: var(--ds-brand); font-weight: 700; }
.waiting-btn.is-none { padding: 0 14px; background: #2C3138; border-color: #3A4048; color: #C9CCD1; box-shadow: none; }
.waiting-btn.is-none:hover { background: #343A42; }
.waiting-bell, .waiting-badge { display: none; }
.waiting-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(22, 25, 29, 0.35); }
.waiting-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100vw; display: flex; flex-direction: column; background: var(--ds-surface);
  box-shadow: -14px 0 40px rgba(22, 25, 29, 0.18); animation: waiting-in 220ms var(--ds-ease); }
@keyframes waiting-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.waiting-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--ds-line); }
.waiting-head h2 { margin: 0; font-size: var(--ds-fs-h3); font-weight: 700; }
.waiting-head-n { color: var(--ds-muted); font-weight: 600; }
.waiting-head .ds-btn { margin-left: auto; }
.waiting-body { flex: 1 1 auto; overflow-y: auto; }
.waiting-group-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background: var(--ds-surface-2); border-bottom: 1px solid var(--ds-line-soft);
  font-size: var(--ds-fs-label); font-weight: 600; color: var(--ds-muted); }
.waiting-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ds-brand); color: #FFFFFF; font-weight: 700; }
.waiting-list { list-style: none; margin: 0; padding: 0; }
.waiting-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 20px; border-bottom: 1px solid var(--ds-line-soft); color: var(--ds-ink); text-decoration: none; }
.waiting-row:hover { background: var(--ds-hover); color: var(--ds-ink); text-decoration: none; }
.waiting-row:active { background: #EFDFDB; }
.waiting-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(166, 13, 19, 0.3); }
.waiting-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--ds-brand); }
.waiting-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.waiting-text b { font-size: var(--ds-fs-body); font-weight: 600; }
.waiting-plate { font-size: var(--ds-fs-label); padding: 0 6px; }
.waiting-detail { font-size: var(--ds-fs-label); color: var(--ds-muted); }
.waiting-age { font-size: var(--ds-fs-label); color: var(--ds-muted); white-space: nowrap; }
.waiting-age.is-old { color: var(--ds-bad); font-weight: 700; }
.waiting-empty { padding: 48px 20px; }
.waiting-pop { position: fixed; z-index: 75; display: flex; align-items: center; gap: 16px; max-width: 380px; padding: 12px 16px; border-left: 3px solid var(--ds-brand); border-radius: var(--ds-r-card);
  background: var(--ds-ink); color: #FFFFFF; box-shadow: var(--ds-shadow-pop); animation: ds-drop 180ms var(--ds-ease); transition: opacity 400ms ease; }
.topbar > .waiting-pop { position: absolute; top: calc(100% + 10px); right: 16px; }
.waiting-pop.is-going { opacity: 0; }
.waiting-pop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--ds-fs-label); }
.waiting-pop-text span { color: #C9CCD1; }
.waiting-pop a, .waiting-pop-open { margin-left: auto; padding: 0; border: 0; background: none; color: #FFFFFF; font: inherit; font-size: var(--ds-fs-label); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .waiting-panel, .waiting-pop { animation: none; } .waiting-pop { transition: none; } }
/* Phone: the bell with the red number; the list slides up from the bottom. */
@media (max-width: 640px) {
  .waiting-btn, .waiting-btn.is-none { position: relative; width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; background: transparent; box-shadow: none; color: #FFFFFF; }
  .waiting-label, .waiting-n { display: none; }
  .waiting-bell { display: block; }
  .waiting-badge { display: inline-flex; position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; align-items: center; justify-content: center; border-radius: 999px;
    background: var(--ds-brand); color: #FFFFFF; font-size: 12px; font-weight: 700; }
  .waiting-panel { top: auto; left: 0; right: 0; width: auto; max-height: 82vh; border-radius: 16px 16px 0 0; animation-name: waiting-up; }
  @keyframes waiting-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}