/* Studio Enso — Module 0 shell.
   Every colour, radius and component convention here comes from DESIGN-SYSTEM.md.
   Nothing is invented; where the design system is silent the rule is restraint. */

/* ---- Colour tokens — light ------------------------------------------------ */
:root {
  --plane:#F2E7E1;
  --surface-1:#FDF8F4; --surface-2:#F8F0E9; --surface-3:#F3E9E1;
  --ink-1:#2F3A33;     --ink-2:#6C766E;     --ink-muted:#A0A79F;
  --hair:#EDE1D7;      --axis:#DFD1C5;
  --brand:#657166;     --brand-ink:#FDF8F4; --brand-soft:#CFD6C4;
  --sky:#99CDD8; --mint:#DAEBE3; --cream:#FDE8D3; --blush:#F3C3B2; --sage:#CFD6C4;
  --booked:#5C6A5E; --booked-ink:#F6F2EC;
  --free:#EFB3A0;   --free-ink:#6E3323;
  --restday:#E7DED4; --today:#1f7dab;
  --r-lg:22px; --r-md:14px; --r-sm:10px;

  /* status — reserved, never themed, never reused as a series colour */
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;

  --shadow-card: 0 1px 2px rgba(90,64,48,.05), 0 6px 16px -6px rgba(90,64,48,.14);
  --shadow-raise: 0 1px 1px rgba(90,64,48,.06), 0 2px 6px -2px rgba(90,64,48,.16);
  --shadow-inset: inset 0 1px 3px rgba(90,64,48,.13);
}

/* ---- Colour tokens — dark. A selected set, not a computed inversion. ------ */
:root[data-theme="dark"] {
  --plane:#171514;
  --surface-1:#262322; --surface-2:#2E2A28; --surface-3:#373230;
  --ink-1:#F3ECE5;     --ink-2:#B9B1A8;     --ink-muted:#8B837B;
  --hair:#36312E;      --axis:#454039;
  --brand:#A9B8A6;     --brand-ink:#1E211E;  --brand-soft:#3A423A;
  --booked:#DCE3D6; --booked-ink:#22271F;
  --free:#8A4634;   --free-ink:#FBDDD2;
  --restday:#302B28; --today:#7FB6C6;

  --shadow-card: 0 1px 2px rgba(0,0,0,.34), 0 8px 20px -8px rgba(0,0,0,.5);
  --shadow-raise: 0 1px 1px rgba(0,0,0,.3), 0 2px 6px -2px rgba(0,0,0,.45);
  --shadow-inset: inset 0 1px 3px rgba(0,0,0,.4);
}

* { box-sizing:border-box; }

html, body { height:100%; }
body {
  margin:0;
  background:var(--plane);
  color:var(--ink-1);
  font-family:'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight:450;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.num { font-variant-numeric:tabular-nums; }

/* Display face: the wordmark and large standalone figures only. Never data. */
.wordmark {
  font-family:'Instrument Serif', Georgia, serif;
  font-weight:400; letter-spacing:.01em;
}

/* ---- Buttons and controls — fully pill-shaped ---------------------------- */
.btn {
  font:inherit; font-weight:600;
  border-radius:999px; border:1px solid var(--hair);
  background:var(--surface-1); color:var(--ink-1);
  padding:10px 20px; cursor:pointer;
  box-shadow:var(--shadow-raise);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover { background:var(--surface-2); }
.btn:active { transform:translateY(1px); }
.btn--primary { background:var(--brand); color:var(--brand-ink); border-color:transparent; }
.btn--primary:hover { background:var(--brand); filter:brightness(1.06); }
.btn--quiet { background:transparent; box-shadow:none; color:var(--ink-2); }
.btn--danger { background:var(--blush); color:var(--free-ink); border-color:transparent; }
.btn--danger:hover { background:var(--blush); filter:brightness(0.96); }
:root[data-theme="dark"] .btn--danger, :root[data-theme="dark"] .btn--danger:hover { background:var(--free); color:var(--free-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--danger,
  :root:not([data-theme="light"]) .btn--danger:hover { background:var(--free); color:var(--free-ink); } }
.btn[disabled] { opacity:.55; cursor:not-allowed; box-shadow:none; }

/* ---- Small round icon buttons (Delete on Brand/Size rows) ----------------- */
.iconbtn {
  width:32px; height:32px; padding:0; flex:none;
  border-radius:999px; border:1px solid var(--hair);
  background:var(--surface-1); color:var(--ink-2); cursor:pointer;
  display:grid; place-items:center;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.iconbtn svg { width:16px; height:16px; display:block; }
.iconbtn:hover { background:var(--surface-2); }
.iconbtn--danger { color:var(--free-ink); }
.iconbtn--danger:hover { background:var(--blush); border-color:transparent; }
.iconbtn[disabled] { opacity:.4; cursor:not-allowed; background:var(--surface-1); color:var(--ink-muted); }
.iconbtn--xs { width:22px; height:22px; display:inline-grid; vertical-align:middle; }
.iconbtn--xs svg { width:13px; height:13px; }

:where(a,button,input,select,[tabindex]):focus-visible {
  outline:2px solid var(--today); outline-offset:2px; border-radius:var(--r-sm);
}

.field { display:block; margin-bottom:14px; }
.field > span { display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.input {
  width:100%; font:inherit; font-size:14px; color:var(--ink-1);
  background:var(--surface-2); border:1px solid var(--hair);
  border-radius:999px; padding:11px 18px;
  box-shadow:var(--shadow-inset);
}
.input:focus { outline:2px solid var(--today); outline-offset:1px; }

select.input { border-radius:999px; padding-right:14px; }

/* ---- Cards --------------------------------------------------------------- */
.card {
  background:var(--surface-1);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}

/* ---- Chips — 7px radius, 2px surface-coloured border --------------------- */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  border-radius:7px; border:2px solid var(--surface-1);
  padding:2px 9px; font-size:12px; font-weight:600;
  background:var(--surface-3); color:var(--ink-2);
}
.chip--good     { background:var(--mint);  color:#1d4d3a; }
.chip--warning  { background:var(--cream); color:#6b4a12; }
.chip--critical { background:var(--blush); color:var(--free-ink); }

/* ---- Sign in ------------------------------------------------------------- */
.signin { min-height:100%; display:grid; place-items:center; padding:24px; }
.signin__card { width:100%; max-width:400px; padding:36px 34px 30px; }
.signin__mark { font-size:40px; line-height:1.05; margin:0 0 4px; }
.signin__sub  { color:var(--ink-2); font-size:13.5px; margin:0 0 26px; }
.signin__foot { margin-top:18px; font-size:12.5px; color:var(--ink-muted); }
/* D123 · waiting for approval */
.pending { text-align:center; }
.pending__icon { width:44px; height:44px; margin:2px auto 12px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2, rgba(0,0,0,.05)); color:var(--ink-2); }
.pending__title { font-size:18px; font-weight:650; margin:0 0 8px; }
.pending__text { color:var(--ink-2); font-size:13.5px; line-height:1.5; margin:0 0 6px; }
.pending__who { color:var(--ink-muted); font-size:12.5px; margin:0 0 20px; overflow-wrap:anywhere; }
.tab__badge { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px;
  border-radius:9px; background:var(--critical); color:#fff; font-size:11px; font-weight:700; line-height:1; }
.users-group { font-size:12px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted); margin:6px 2px 0; }
.userrow--pending { border-left:3px solid var(--warning, #b8891a); flex-wrap:wrap; }
.userrow__when { color:var(--ink-muted); font-size:12px; }
.userrow__act { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.userrow__msg { flex-basis:100%; font-size:12.5px; }
@media (max-width:640px){ .userrow--pending .userrow__act { width:100%; } .userrow--pending .userrow__act .input { flex:1; } }

.notice { border-radius:var(--r-md); padding:11px 15px; font-size:13.5px; margin-bottom:16px; }
.notice--error { background:var(--blush); color:var(--free-ink); }
.notice--info  { background:var(--surface-3); color:var(--ink-2); }

/* ---- App frame ----------------------------------------------------------- */
.app { display:none; min-height:100%; flex-direction:column; }
.app.is-on { display:flex; }

.topbar {
  display:flex; align-items:center; gap:14px;
  padding:14px 22px 0;
  background:var(--plane);
}
.topbar__mark { font-size:23px; margin:0; }
.topbar__spacer { flex:1; }

.who { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-2); }
.who__dot {
  width:28px; height:28px; border-radius:999px;
  background:var(--brand-soft); color:var(--ink-1);
  display:grid; place-items:center; font-size:11.5px; font-weight:700;
}

/* ---- Tabs — 2px bottom border in brand, no background fill --------------- */
.tabs {
  display:flex; gap:4px; padding:10px 22px 0;
  border-bottom:1px solid var(--hair);
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar { display:none; }
.tab {
  font:inherit; font-weight:600; font-size:13.5px;
  background:none; border:0; cursor:pointer;
  color:var(--ink-2); padding:9px 13px 10px;
  border-bottom:2px solid transparent;
  margin-bottom:-1px; white-space:nowrap;
}
.tab:hover { color:var(--ink-1); }
.tab[aria-selected="true"] { color:var(--ink-1); border-bottom-color:var(--brand); }

.main { flex:1; padding:22px; max-width:1180px; width:100%; margin:0 auto; }
.panel { display:none; }
.panel.is-on { display:block; }

.panel__head { margin:0 0 16px; }
.panel__title { font-size:19px; font-weight:700; margin:0 0 3px; letter-spacing:-.01em; }
.panel__note  { font-size:13.5px; color:var(--ink-2); margin:0; }
/* On an item's own page, the whole "Item library / N items · N categories"
   header is redundant — the item's own name sits right below it — so it's
   dropped there only, not on the category tiles or the item-list views
   (Oct 2026 addendum, points 2 and this follow-up). */
#panel-library:has(#library-item:not([hidden])) .panel__head { display:none; }

/* ---- Empty states — a muted sentence, never a blank panel ---------------- */
.empty { padding:34px 30px; color:var(--ink-2); font-size:14px; max-width:56ch; }
.empty strong { color:var(--ink-1); font-weight:650; display:block; margin-bottom:5px; }

/* ---- Tables -------------------------------------------------------------- */
.tablewrap { overflow:auto; border-radius:var(--r-lg); }
table.g { width:100%; border-collapse:collapse; font-size:13.5px; }
table.g th, table.g td { padding:9px 14px; text-align:left; }
table.g thead th {
  position:sticky; top:0; z-index:2;
  background:var(--surface-2); color:var(--ink-2);
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--axis);
}
table.g tbody tr { border-bottom:1px solid var(--hair); }
table.g tbody tr:last-child { border-bottom:0; }
table.g td.n { text-align:right; font-variant-numeric:tabular-nums; }
table.g .blockrow td {
  background:var(--surface-3); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2);
}
.unset { color:var(--ink-muted); font-style:italic; }

.stack { display:flex; flex-direction:column; gap:14px; }
.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.userrow { padding:13px 18px; display:flex; align-items:center; gap:14px; }
.userrow__name { font-weight:650; }
.userrow__mail { color:var(--ink-muted); font-size:12.5px; }

.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:13.5px; padding:18px; }
.kv dt { color:var(--ink-2); }
.kv dd { margin:0; font-variant-numeric:tabular-nums; }

@media (max-width:640px) {
  .main { padding:16px; }
  .topbar { padding:12px 16px 0; }
  .tabs { padding:8px 16px 0; }
  .btn { padding:11px 20px; }        /* thumb, not mouse */
  .who__name { display:none; }
}

/* ===========================================================================
   Module 2 — Catalogue: products, brands, sizes, priced rows, rates
   =========================================================================== */

/* ---- Segmented control (sub-nav inside a panel) --------------------------- */
.seg { display:inline-flex; gap:3px; padding:3px; border-radius:999px;
       background:var(--surface-2); box-shadow:var(--shadow-inset); }
.seg button {
  font:inherit; font-size:13px; font-weight:600; border:0; cursor:pointer;
  background:transparent; color:var(--ink-2); padding:7px 15px; border-radius:999px;
  white-space:nowrap;
}
.seg button[aria-pressed="true"] {
  background:var(--surface-1); color:var(--ink-1); box-shadow:var(--shadow-raise);
}

.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.toolbar__spacer { flex:1; }
.input--search { min-width:250px; }
.btn--sm { padding:7px 15px; font-size:13px; }

.subpanel { display:none; }
.subpanel.is-on { display:block; }

/* ---- Chips reused from the preview ---------------------------------------- */
.chip--supplier { background:var(--sage); color:#2c3a2c; }
:root[data-theme="dark"] .chip--supplier { background:var(--brand-soft); color:#DCE3D6; }
.chip--inactive { background:var(--surface-3); color:var(--ink-muted); text-decoration:line-through; }

/* ---- Expandable material rows (Materials & rates) -------------------------- */
table.g tr.matrow { cursor:pointer; }
table.g tr.matrow:hover td { background:var(--surface-2); }
table.g tr.matrow.is-open td { background:var(--surface-2); }
.caret {
  display:inline-grid; place-items:center; width:17px; height:17px; margin-right:7px;
  border-radius:5px; background:var(--surface-3); color:var(--ink-2);
  font-size:9px; transition:transform .14s ease; vertical-align:-3px; border:0; cursor:pointer;
}
tr.is-open .caret { transform:rotate(90deg); }
.caret--none { visibility:hidden; }
.matname { font-weight:600; }
.matspec { color:var(--ink-muted); font-size:12px; font-weight:450; white-space:nowrap; }

table.g tr.varrow td { background:var(--surface-2); font-size:13px; }
table.g tr.varrow td:first-child { padding-left:40px; }
.varlead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rail { display:inline-block; width:2px; height:15px; border-radius:2px;
        background:var(--axis); margin-right:2px; vertical-align:-3px; }

.asof { color:var(--ink-muted); font-size:11.5px; }
.ppr { color:var(--ink-2); font-size:12px; }
.delta--up   { color:var(--serious); font-weight:650; }
.delta--down { color:var(--good); font-weight:650; }
:root[data-theme="dark"] .delta--down { color:#5BD35B; }

.rowbtn {
  font:inherit; font-size:11.5px; font-weight:650; cursor:pointer;
  border:1px solid var(--hair); border-radius:999px; padding:3px 10px;
  background:var(--surface-1); color:var(--ink-1); box-shadow:var(--shadow-raise);
}
.rowbtn:hover { background:var(--surface-2); }
.addvarrow td { padding-left:40px; }
.addvarrow .rowbtn { color:var(--brand); }
:root[data-theme="dark"] .addvarrow .rowbtn { color:var(--brand); }

/* ---- Simple list rows (Brands / Sizes) ------------------------------------- */
.listrow { padding:12px 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.listrow__name { font-weight:650; }
.listrow__meta { color:var(--ink-muted); font-size:12px; }
.listrow__meta--sm { font-size:11px; }
.listrow__spacer { flex:1; }

/* ---- Drawer — a centred popup card over a blurred scrim --------------------
   Despite the name (kept for the class hooks used throughout app.js), this is
   no longer a side panel: it opens in the middle of the screen, like every
   other confirmation and form in the app, rather than pinned to one edge. */
.scrim {
  position:fixed; inset:0; background:rgba(30,25,20,.38); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  z-index:50; opacity:0; pointer-events:none;
  transition:opacity .16s ease;
}
.scrim.is-on { opacity:1; pointer-events:auto; }
.drawer {
  width:min(560px, 100%); max-height:min(640px, calc(100vh - 48px));
  background:var(--surface-1); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); overflow-y:auto;
  transform:translateY(10px) scale(.98); opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}
.scrim.is-on .drawer { transform:translateY(0) scale(1); opacity:1; }
.drawer__head {
  display:flex; align-items:flex-start; gap:12px; padding:22px 22px 14px;
  border-bottom:1px solid var(--hair); position:sticky; top:0; background:var(--surface-1); z-index:1;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.drawer__title { font-size:17px; font-weight:700; margin:0 0 3px; }
.drawer__note { font-size:12.5px; color:var(--ink-2); margin:0; max-width:32ch; }
.drawer__close {
  margin-left:auto; width:30px; height:30px; border-radius:999px; border:1px solid var(--hair);
  background:var(--surface-2); color:var(--ink-2); cursor:pointer; font-size:15px; flex:none;
  display:grid; place-items:center;
}
.drawer__body { padding:18px 22px 26px; }
.drawer__foot {
  display:flex; gap:10px; padding:16px 22px 22px; border-top:1px solid var(--hair);
  position:sticky; bottom:0; background:var(--surface-1);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.drawer__msg { border-radius:var(--r-md); padding:10px 13px; font-size:13px; margin:0 0 14px; }
.drawer__msg--error { background:var(--blush); color:var(--free-ink); }
.drawer__msg--good  { background:var(--mint); color:#1d4d3a; }
:root[data-theme="dark"] .drawer__msg--good { background:#28453a; color:#CFEBDD; }

.fieldrow { display:flex; gap:10px; align-items:flex-end; }
.fieldrow .field { flex:1; }
.field textarea.input { border-radius:var(--r-md); padding:10px 14px; resize:vertical; min-height:64px; }
.checkfield { display:flex; align-items:center; gap:8px; font-size:13.5px; margin-bottom:14px; }
.checkfield input { width:16px; height:16px; }

.blockchecks { display:flex; flex-wrap:wrap; gap:4px 16px; padding:10px 14px;
               background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--r-md); }
.checkfield--inline { margin-bottom:0; min-width:40%; }

/* ---- Item library: category tiles (home) --------------------------------- */
.cattiles {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
  gap:14px;
}
.cattile {
  font:inherit; text-align:left; cursor:pointer;
  background:var(--surface-1); border:1px solid var(--hair);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  padding:22px 20px; display:flex; flex-direction:column; gap:16px;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.cattile:hover { background:var(--surface-2); transform:translateY(-2px); }
.cattile:active { transform:translateY(0); }
.cattile--uncat { border-style:dashed; }
/* D128 · items as picture tiles inside a category */
#library-wrap.libtiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(176px, 1fr)); gap:14px; }
.libtile { font:inherit; text-align:left; cursor:pointer; padding:10px; display:flex; flex-direction:column; gap:10px; min-width:0;
  background:var(--surface-1); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  transition:transform .12s ease, background .12s ease; }
.libtile:hover { background:var(--surface-2); transform:translateY(-2px); }
.libtile:focus-visible { outline:2px solid var(--today); outline-offset:2px; }
.libtile__pic { position:relative; aspect-ratio:1/1; border-radius:var(--r-md); overflow:hidden; background:var(--surface-2);
  border:1px solid var(--hair); display:grid; place-items:center; }
.libtile__pic img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.libtile__pic--none { color:var(--brand); }
.libtile__pic--none svg { width:34%; height:34%; opacity:.75; }
.libtile__body { padding:0 4px 4px; min-width:0; display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
.libtile__name { font-weight:650; font-size:14px; line-height:1.3; color:var(--ink-1);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.libtile__meta { font-size:12px; color:var(--ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.libtile--inactive .libtile__pic { opacity:.55; }
@media (max-width:520px) { #library-wrap.libtiles { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } .libtile { padding:8px; } }
.cattile__icon {
  width:46px; height:46px; border-radius:var(--r-md); flex:none;
  background:var(--surface-3); color:var(--brand);
  display:grid; place-items:center;
}
.cattile__icon svg { width:24px; height:24px; }
.cattile__icon--sm { width:34px; height:34px; border-radius:10px; }
.cattile__icon--sm svg { width:18px; height:18px; }
.cattile__name { font-weight:650; font-size:15px; color:var(--ink-1); }
.cattile__count { font-size:12.5px; color:var(--ink-muted); margin-top:2px; }

/* ---- Item library: category detail header --------------------------------- */
.libhead { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.libhead__back {
  display:inline-flex; align-items:center; gap:5px;
  background:transparent; border:none; color:var(--ink-2);
  font:inherit; font-weight:600; font-size:13.5px; cursor:pointer; padding:6px 2px 6px 0;
}
.libhead__back:hover { color:var(--ink-1); }
.libhead__back svg { width:16px; height:16px; }
/* The item page's own Back control, shrunk to 10px per Daniyal's request —
   scoped to #item-back only, not #lib-back (the category-detail back
   button), which keeps its normal size. */
#item-back { font-size:10px; gap:4px; }
#item-back svg { width:10px; height:10px; }
.libhead__icon {
  width:34px; height:34px; border-radius:10px; flex:none;
  background:var(--surface-3); color:var(--brand);
  display:grid; place-items:center;
}
.libhead__icon svg { width:18px; height:18px; }
.libhead__title { font-size:18px; font-weight:650; color:var(--ink-1); }

/* ---- Icon picker (category drawer) ----------------------------------------- */
.iconpick { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.iconpick__opt {
  width:42px; height:42px; border-radius:12px; flex:none;
  border:1px solid var(--hair); background:var(--surface-2); color:var(--ink-2);
  cursor:pointer; display:grid; place-items:center;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.iconpick__opt svg { width:21px; height:21px; }
.iconpick__opt:hover { background:var(--surface-3); }
.iconpick__opt.is-active { background:var(--brand); color:var(--brand-ink); border-color:transparent; }

/* ---- Item detail: hero image, cost summary, notes, header, recipe editor ---- */

/* Large square hero (object-fit:contain, so a portrait or a landscape photo
   both sit inside without cropping) beside the "Nutrition Facts"-style cost
   summary. Stacks to one column on phones — Actuals/library entry is
   mobile-first per the project's architecture rules. */
.itemhero { display:grid; grid-template-columns:minmax(320px, 620px) 1fr; gap:16px; margin-bottom:16px; align-items:start; }
@media (max-width:760px) { .itemhero { grid-template-columns:1fr; } }
.itemhero__right { display:flex; flex-direction:column; gap:16px; }

.itemhero__imagewrap { padding:14px; }
.itemhero__image {
  position:relative; width:100%; aspect-ratio:1/1; border-radius:var(--r-md); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--hair); display:grid; place-items:center;
}
/* D127: the frame's size is set by the layout alone; the photo sits inside it and never resizes it */
.itemhero__image img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; background:var(--surface-2); }
.itemhero__image.is-zoomable { cursor:zoom-in; }
.itemhero__image:focus-visible { outline:2px solid var(--today); outline-offset:2px; }
.itemhero__nav { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; border:none; cursor:pointer; z-index:2;
  background:rgba(20,16,14,.55); color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.itemhero__nav:hover { background:rgba(20,16,14,.75); }
.itemhero__nav svg { width:20px; height:20px; }
.itemhero__nav--prev { left:10px; } .itemhero__nav--next { right:10px; }
.itemhero__count { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:2;
  padding:3px 10px; border-radius:999px; background:rgba(20,16,14,.55); color:#fff; font-size:12px; font-weight:600; pointer-events:none; }
.itemhero__thumbstrip .itemthumb { cursor:pointer; }
.itemhero__thumbstrip .itemthumb.is-current { outline:2px solid var(--brand); outline-offset:2px; }
.lightbox { position:fixed; inset:0; z-index:1000; background:rgba(10,8,7,.92); display:grid; place-items:center; }
.lightbox__stage { width:100%; height:100%; display:grid; place-items:center; padding:56px 64px; box-sizing:border-box; }
.lightbox__media { max-width:calc(100vw - 128px); max-height:calc(100vh - 112px); width:auto; height:auto; object-fit:contain; display:block; border-radius:6px; }
.lightbox__close, .lightbox__nav { position:absolute; border:none; cursor:pointer; color:#fff; background:rgba(255,255,255,.12);
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; }
.lightbox__close:hover, .lightbox__nav:hover { background:rgba(255,255,255,.24); }
.lightbox__close { top:14px; right:14px; } .lightbox__close svg, .lightbox__nav svg { width:22px; height:22px; }
.lightbox__nav { top:50%; transform:translateY(-50%); } .lightbox__nav--prev { left:12px; } .lightbox__nav--next { right:12px; }
.lightbox__count { position:absolute; top:24px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; font-weight:600; }
body.has-lightbox { overflow:hidden; }
@media (max-width:640px) { .lightbox__stage { padding:56px 8px; } .lightbox__media { max-width:calc(100vw - 16px); max-height:calc(100vh - 150px); } .lightbox__nav { top:auto; bottom:18px; transform:none; } }
.itemhero__placeholder { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink-muted); font-size:13px; }
.itemhero__placeholder svg { width:36px; height:36px; }
.itemhero__playbadge { position:absolute; inset:0; display:grid; place-items:center; background:rgba(20,16,14,.3); color:#fff; pointer-events:none; }
.itemhero__playbadge svg { width:40px; height:40px; }
.itemhero__thumbstrip { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.itemhero__thumbstrip .itemthumb { width:56px; height:56px; }
.itemhero__thumbstrip .itemthumb__hero, .itemhero__thumbstrip .itemthumb__del { width:19px; height:19px; }
.itemhero__thumbstrip .itemthumb__hero svg, .itemhero__thumbstrip .itemthumb__del svg { width:10px; height:10px; }
.itemhero__hint { margin:10px 0 0; }

/* ---- Cost summary — "Nutrition Facts" pattern, adapted to our own tokens:
   a bold hero figure under a thick rule, then a bucket per hairline row
   (dataviz skill §1/§4 — hero number, recessive dividers, no chart). ------ */
.costfacts { padding:18px 20px; margin-bottom:0; }
.costfacts__eyebrow { font-weight:650; font-size:11px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.08em; }
.costfacts__head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:6px; padding-bottom:10px; border-bottom:3px solid var(--ink-1); }
.costfacts__label { font-weight:650; font-size:16px; color:var(--ink-1); }
.costfacts__total { font-family:'Instrument Serif', Georgia, serif; font-size:42px; line-height:1; color:var(--ink-1); font-variant-numeric:tabular-nums; }
.costfacts__warn { margin-top:10px; display:flex; width:fit-content; }
.costfacts__warn + .costfacts__warn { margin-top:6px; }
.costfacts__warn svg { width:13px; height:13px; }
.costfacts__list { margin-top:4px; }
/* Each bucket is its own bordered tile — a clear boundary between buckets,
   rather than a hairline-separated list (Oct 2026 addendum, point 1). */
.costfacts__row {
  border:1px solid var(--hair); border-radius:var(--r-sm); background:var(--surface-2);
  padding:10px 14px; margin-bottom:8px;
}
.costfacts__row:last-child { margin-bottom:0; }
.costfacts__rowtop { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.costfacts__name { font-size:13.5px; color:var(--ink-1); font-weight:600; }
.costfacts__amt { font-size:13.5px; color:var(--ink-1); font-variant-numeric:tabular-nums; font-weight:650; white-space:nowrap; }
.costfacts__note { font-size:11px; color:var(--ink-muted); margin-top:3px; }


/* ---- Margin ladder — a 0-300% slider under the hero row (M2b, last piece).
   A native range input sits invisibly on top of a drawn track + thumb, so drag,
   touch and keyboard are the browser's own; the drawn thumb carries the
   percentage. The thumb is 50px wide in BOTH the native input and the drawn
   circle, which is what keeps the two lined up across the whole travel.
   Bar colours are slots 1-2 of DESIGN-SYSTEM's validated categorical set
   (#1f7dab, #cf6b3f), each carrying a text label + amount. ----------------- */
.ladder { padding:18px 22px; margin-bottom:16px; }
.ladder__head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.ladder__title { font-weight:650; font-size:16px; color:var(--ink-1); }
.ladder__sub { font-size:11.5px; color:var(--ink-muted); }

.ladder__slider { --p:0; --thumb:50px; position:relative; height:var(--thumb); margin:2px 0 4px; }
.ladder__track {
  position:absolute; left:0; right:0; top:50%; height:12px; transform:translateY(-50%);
  border-radius:999px; background:var(--surface-3); box-shadow:var(--shadow-inset);
}
.ladder__fill {
  position:absolute; left:0; top:0; bottom:0; border-radius:999px;
  width:calc(var(--p) * (100% - var(--thumb)) + var(--thumb) / 2);
  background:linear-gradient(90deg, #ffb07c, #ff4f7b);
  box-shadow:0 0 10px rgba(255,111,111,.35);
}
.ladder__thumb {
  position:absolute; top:0; left:calc(var(--p) * (100% - var(--thumb)));
  width:var(--thumb); height:var(--thumb); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#2F3A33; font-size:12.5px; font-weight:700; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; pointer-events:none; user-select:none;
  box-shadow:0 0 0 4px rgba(255,255,255,.55), 0 2px 8px rgba(90,64,48,.28);
}
.ladder__input {
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
  opacity:0; cursor:grab; -webkit-appearance:none; appearance:none; background:transparent;
  touch-action:pan-y;
}
.ladder__input:active { cursor:grabbing; }
.ladder__input::-webkit-slider-runnable-track { height:var(--thumb); background:transparent; border:0; }
.ladder__input::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:var(--thumb); height:var(--thumb); border:0; background:transparent; }
.ladder__input::-moz-range-track { height:var(--thumb); background:transparent; border:0; }
.ladder__input::-moz-range-thumb { width:var(--thumb); height:var(--thumb); border:0; background:transparent; }
.ladder__slider:has(.ladder__input:focus-visible) .ladder__thumb {
  box-shadow:0 0 0 3px var(--brand), 0 2px 8px rgba(90,64,48,.28);
}

.ladder__out { margin-top:14px; }
.ladder__hint { margin:0; font-size:13px; color:var(--ink-2); }
.ladder__figs { display:flex; flex-wrap:wrap; gap:10px 28px; align-items:flex-end; }
.ladder__fig { display:flex; flex-direction:column; gap:3px; }
.ladder__figlabel { font-size:11px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em; font-weight:650; }
.ladder__figval { font-size:16px; font-weight:650; color:var(--ink-1); font-variant-numeric:tabular-nums; }
.ladder__fig--big .ladder__figval { font-family:'Instrument Serif', Georgia, serif; font-size:42px; line-height:1; font-weight:400; }
.ladder__bar { display:flex; gap:2px; height:12px; margin-top:16px; }
.ladder__seg { min-width:4px; }
.ladder__seg--cost { background:#1f7dab; border-radius:6px; }
.ladder__seg--keep { background:#cf6b3f; border-radius:0 6px 6px 0; }
.ladder__seg--cost:not(:last-child) { border-radius:6px 0 0 6px; }
.ladder__key { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:8px; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.ladder__keyitem::before { content:''; display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.ladder__keyitem--cost::before { background:#1f7dab; }
.ladder__keyitem--keep::before { background:#cf6b3f; }
.ladder__warn { margin-top:12px; }
.ladder__warn svg { width:13px; height:13px; }
@media (max-width:640px) {
  .ladder { padding:16px; }
  .ladder__fig--big { flex-basis:100%; }
}

/* ---- Notes & instructions — pointers, added one at a time (point 5) ------ */
.notescard { padding:18px 22px; margin-bottom:16px; }
.notescard__head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.notescard__title { font-weight:650; font-size:12px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; }
.notescard__spacer { flex:1; }
.notescard__list { display:flex; flex-direction:column; gap:8px; }
.notescard__row { display:flex; align-items:center; gap:8px; }
.notescard__bullet { color:var(--ink-muted); font-size:16px; line-height:1; flex:none; }
.notescard__point { flex:1; }
.notescard__del {
  flex:none; width:28px; height:28px; border-radius:999px; border:none; display:grid; place-items:center;
  background:transparent; color:var(--ink-muted); cursor:pointer; transition:background .12s ease, color .12s ease;
}
.notescard__del svg { width:13px; height:13px; }
.notescard__del:hover { background:var(--free); color:var(--free-ink); }
.notescard__add {
  margin-top:10px; background:var(--surface-2); border:1px dashed var(--hair); color:var(--ink-2);
}
.notescard__add:hover { background:var(--surface-3); }
.notescard__status { font-size:11.5px; color:var(--ink-muted); white-space:nowrap; }
.notescard__msg { margin:10px 0 0; }

.itemthumb { position:relative; width:96px; height:96px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--hair); background:var(--surface-2); flex:none; }
.itemthumb img { width:100%; height:100%; object-fit:cover; display:block; }
.itemthumb__placeholder { width:100%; height:100%; display:grid; place-items:center; color:var(--ink-muted); }
.itemthumb__placeholder svg { width:26px; height:26px; }
.itemthumb__video { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.28); color:#fff; pointer-events:none; }
.itemthumb__video svg { width:22px; height:22px; }
.itemthumb__hero, .itemthumb__del {
  position:absolute; width:24px; height:24px; border-radius:999px; border:none;
  display:grid; place-items:center; background:rgba(20,16,14,.5); color:#fff; cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.itemthumb__hero { bottom:5px; left:5px; }
.itemthumb__hero svg { width:13px; height:13px; }
.itemthumb__hero.is-hero { background:var(--brand); color:var(--brand-ink); }
.itemthumb__del { top:5px; right:5px; }
.itemthumb__del svg { width:12px; height:12px; }
.itemthumb__del:hover { background:var(--free); color:var(--free-ink); }
.itemthumb--add {
  display:grid; place-items:center; color:var(--ink-muted); font-size:26px; font-weight:300;
  background:var(--surface-2); border:1px dashed var(--hair); cursor:pointer;
}
.itemthumb--add:hover { background:var(--surface-3); color:var(--ink-2); }

.itemhead { padding:20px 22px; display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.itemhero__right .itemhead { margin-bottom:0; }
.itemhead__main { flex:1; min-width:160px; }
.itemhead__namerow { display:flex; align-items:center; gap:8px; }
.itemhead__editbtn { flex:none; }
.itemhead__name { font-size:19px; font-weight:650; color:var(--ink-1); }
.itemhead__meta { color:var(--ink-muted); font-size:13px; margin-top:4px; }

.recipe-card { padding:20px 22px; margin-bottom:16px; }
.recipe-card__head { display:flex; align-items:center; gap:10px; margin-bottom:2px; flex-wrap:wrap; }
.recipe-card__title { font-weight:650; font-size:15px; color:var(--ink-1); }
.recipe-card__version { color:var(--ink-muted); font-size:12.5px; }
.recipe-card__spacer { flex:1; }

.recipe-card__hint { margin:6px 0 14px; }

/* ---- Full breakdown: one editable row per line ---------------------------
   Category / Item / Brand / Dimensions / Quantity are the inputs; Unit price
   and Price are read-only. Every row (and the header) shares one grid
   template so the columns line up top to bottom. Selects are pill-shaped
   (select.input) so they get a tighter font here to fit five across. */
.recipe-rows { display:flex; flex-direction:column; gap:8px; }
.recipe-row {
  display:grid; grid-template-columns:1.05fr 1.35fr 1fr 1.1fr 84px 104px 112px 34px;
  align-items:center; gap:8px; padding:8px 12px;
}
.recipe-row--head { background:none; border:0; box-shadow:none; padding:0 12px 2px; }
.recipe-line__h {
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted);
}
.recipe-line__h--right { text-align:right; }
.rrow__cell { min-width:0; display:flex; flex-direction:column; }
.rrow__lbl { display:none; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); margin-bottom:3px; }
.rrow__itemwrap { min-width:0; display:flex; }
.rrow__itemwrap > .input { flex:1; min-width:0; }
.recipe-row .input { font-size:12.5px; padding:7px 10px; min-width:0; width:100%; text-overflow:ellipsis; }
.recipe-row select.input { padding-right:10px; }
.recipe-row .input:disabled { color:var(--ink-muted); opacity:.7; }
.recipe-row input[type=number] { text-align:right; }
.rrow__cell--num { text-align:right; align-items:flex-end; }
.rrow__unitprice { color:var(--ink-muted); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rrow__cost { font-size:13px; font-weight:650; color:var(--ink-1); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rrow__cost.chip svg { width:12px; height:12px; }
.rrow__generic { outline:1.5px solid var(--warning, #c98a1b); outline-offset:0; }
.rrow__del { justify-self:end; }
.rrow__msg { grid-column:1 / -1; margin:2px 0 0; }
.rrow__msg.drawer__msg { margin:2px 0 0; padding:7px 11px; font-size:12.5px; }
/* Settings > Labour rates still uses these two for its own cost cell. */
.recipe-line__cost { font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink-1); font-weight:600; justify-self:end; }
.recipe-line__cost.chip svg { width:12px; height:12px; }
.recipe-addrowbtn { margin-top:12px; display:inline-flex; align-items:center; gap:6px; }
.recipe-addrowbtn svg { width:14px; height:14px; }

@media (max-width:900px) {
  .recipe-row--head { display:none; }
  .recipe-row { grid-template-columns:1fr 1fr; gap:10px; padding:12px; }
  .rrow__lbl { display:block; }
  .rrow__cell--num { align-items:stretch; text-align:left; }
  .recipe-row input[type=number] { text-align:left; }
  .rrow__del { grid-column:2; }
  .rrow__cost.chip .recipe-line__costlabel { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
}

/* Warning chip: keep its own ink (not the surrounding price colour), and give
   it a dark-mode face so "Not estimated" stays readable (O22, warning only). */
.chip--warning.rrow__cost, .chip--warning.recipe-line__cost { color:#6b4a12; }
:root[data-theme="dark"] .chip--warning,
:root[data-theme="dark"] .chip--warning.rrow__cost,
:root[data-theme="dark"] .chip--warning.recipe-line__cost { background:#3d3220; color:#f1d79a; }

/* ==========================================================================
   Module 3a · Enquiries
   ========================================================================== */
.chip--status { background:var(--brand-soft); color:var(--ink-1); }
/* O22 · the good and critical chips get their own dark faces (warning got one
   on Oct 13). The enquiry health card is the first screen to show chip--good. */
:root[data-theme="dark"] .chip--good     { background:#1f3a2c; color:#bfe6cf; }
:root[data-theme="dark"] .chip--critical { background:#4a2622; color:#f6c9bd; }
.chip svg { width:13px; height:13px; flex:none; }

.savestate { font-size:11.5px; color:var(--ink-muted); min-height:1em; }
.savestate--ok { color:var(--ink-2); }
.savestate--err { color:var(--free-ink); font-weight:600; }
:root[data-theme="dark"] .savestate--err { color:#f6c9bd; }

/* list */
.enqrow { gap:14px; }
.enqrow__name { min-width:0; }
.enqrow__sub { font-weight:500; color:var(--ink-2); }
.enqrow__fig { display:flex; flex-direction:column; align-items:flex-end; min-width:110px; }
.enqrow__figlabel { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); font-weight:650; }
.enqrow__figval { font-size:16px; font-weight:650; color:var(--ink-1); font-variant-numeric:tabular-nums; }

/* page grid */
.enq { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start; }
.enq__main { display:flex; flex-direction:column; gap:16px; min-width:0; }
.enq__side { display:flex; flex-direction:column; gap:16px; position:sticky; top:16px; }
.enq .card { margin-bottom:0; }

.enqhead { padding:12px 18px; }
.enqhead__top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:34px; }
.enqhead__title { font-size:19px; font-weight:700; color:var(--ink-1); letter-spacing:-.01em; }
.enqhead__sub { font-weight:500; color:var(--ink-2); }
.enqhead__meta { white-space:nowrap; }

.enqitems { padding:18px 22px; }
.enqitems__head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.enqitems__title { font-weight:650; font-size:16px; color:var(--ink-1); }
.enqitems__empty { margin:10px 0 2px; font-size:13.5px; color:var(--ink-2); }

.enqitem { border:1px solid var(--hair); border-radius:var(--r-md); background:var(--surface-2); padding:14px 16px 10px 14px; margin-top:12px;
  display:grid; grid-template-columns:112px minmax(0,1fr); gap:16px; align-items:start; }
.enqitem__body { min-width:0; }
/* The item's hero photo, so the eye finds the piece before reading the numbers.
   contain, not cover (as D49): portrait and landscape shots both show whole. */
.enqitem__thumb { width:112px; height:112px; border-radius:var(--r-sm); overflow:hidden;
  background:var(--surface-1); border:1px solid var(--hair); display:grid; place-items:center; }
.enqitem__thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.enqitem__thumb--none { color:var(--ink-muted); }
.enqitem__thumb--none svg { width:40px; height:40px; }
.enqitem__top { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.enqitem__name { display:flex; flex-direction:column; gap:2px; flex:1; min-width:160px; }
.enqitem__title { font-weight:650; font-size:15px; color:var(--ink-1); }
.enqitem__chips { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.enqitem__figs { display:grid; grid-template-columns:96px repeat(4, minmax(0,1fr)); gap:10px 16px; margin-top:12px; align-items:end; }
.enqitem__fig { display:flex; flex-direction:column; gap:4px; min-width:0; }
.enqitem__figlabel { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); font-weight:650; }
.enqitem__figval { font-size:15px; font-weight:600; color:var(--ink-1); font-variant-numeric:tabular-nums; white-space:nowrap; }
.enqitem__fig--strong .enqitem__figval { font-weight:750; }
.enqitem__qty { width:96px; padding:7px 12px; font-variant-numeric:tabular-nums; }
.enqitem__margin { display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; align-items:center; margin-top:12px; }
.enqitem__mlabel { display:flex; flex-direction:column; gap:3px; }
.enqitem__onprice { font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.enqitem__slider { --thumb:40px; margin:0; }
.enqitem__slider .ladder__thumb { font-size:12px; }
.enqitem__msg { margin-top:4px; }

.enqtotals { padding:18px 20px; }
.enqtotals__list { margin-top:8px; }
.enqtotals__row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--hair); }
.enqtotals__label { font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:650; color:var(--ink-2); }
.enqtotals__val { font-size:15px; font-weight:650; color:var(--ink-1); font-variant-numeric:tabular-nums; }
.enqtotals__input { width:130px; padding:6px 12px; text-align:right; font-variant-numeric:tabular-nums; }
.enqtotals__reason { width:100%; margin:8px 0 0; padding:7px 12px; font-size:13px; }
.enqtotals__head { margin-top:14px; }
.enqtotals__note { font-size:11.5px; color:var(--ink-muted); margin:6px 0 0; }
.enqtotals__econ { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:16px; }
.enqtotals__warns { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:14px; }
.enqtotals__warns:empty { display:none; }
.enqtotals .chip { white-space:normal; line-height:1.35; }

.enqhealth { padding:16px 20px; }
.enqhealth__row { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--hair); }
.enqhealth__row:last-of-type { border-bottom:0; }
.enqhealth__icon { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:none; background:var(--mint); color:#1d4d3a; }
.enqhealth__row--warn .enqhealth__icon { background:var(--cream); color:#6b4a12; }
:root[data-theme="dark"] .enqhealth__icon { background:#1f3a2c; color:#bfe6cf; }
:root[data-theme="dark"] .enqhealth__row--warn .enqhealth__icon { background:#3d3220; color:#f1d79a; }
.enqhealth__icon svg { width:14px; height:14px; }
.enqhealth__txt { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.enqhealth__label { font-size:13.5px; color:var(--ink-1); font-weight:600; }
.enqhealth__n { font-size:15px; font-weight:700; color:var(--ink-1); font-variant-numeric:tabular-nums; }
.enqhealth__note { font-size:11.5px; color:var(--ink-muted); margin:8px 0 0; }
.enqhealth__ok { font-size:13px; color:var(--ink-2); margin:8px 0 0; }
.enqhealth__okchip { margin-top:10px; white-space:normal; }

.enqnew__match { margin:-6px 0 12px; }
.enqpick { margin-top:12px; gap:8px; }
.enqpick__row { padding:10px 12px; border:1px solid var(--hair); border-radius:var(--r-md); background:var(--surface-1); }
.enqpick__cost { font-size:13px; font-weight:650; color:var(--ink-1); font-variant-numeric:tabular-nums; }

@media (max-width: 980px) {
  .enq { grid-template-columns:minmax(0,1fr); }
  .enq__side { position:static; }
}
@media (max-width: 640px) {
  .enqitem { grid-template-columns:64px minmax(0,1fr); gap:12px; }
  .enqitem__thumb { width:64px; height:64px; }
  .enqitem__thumb--none svg { width:26px; height:26px; }
  .enqhead__top { row-gap:6px; }
  .enqhead__top > .toolbar__spacer { display:none; }
  .enqhead__top > .btn { margin-left:auto; }
  .enqhead__meta { white-space:normal; flex-basis:100%; order:5; }
  .enqitem__figs { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .enqitem__margin { grid-template-columns:minmax(0,1fr); gap:8px; }
  .enqrow__fig { align-items:flex-start; }
  .enqitem__chips { order:3; flex-basis:100%; justify-content:flex-start; }
  .enqtotals__input { width:110px; }
}
.chip--lost { background:var(--blush); color:var(--free-ink); }
:root[data-theme="dark"] .chip--lost { background:#4a2622; color:#f6c9bd; }

/* M3a addendum · source picker, phone match, client history */
.sourcepick__new { margin-top:8px; }
.enqnew__phonehint { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-6px 0 14px;
  border-radius:var(--r-md); padding:10px 13px; font-size:13px; background:var(--mint); color:#1d4d3a; }
:root[data-theme="dark"] .enqnew__phonehint { background:#1f3a2c; color:#bfe6cf; }
.enqnew__phonehint[hidden] { display:none; }
.clienthist { margin-top:18px; padding-top:14px; border-top:1px solid var(--hair); }
.clienthist__row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; margin-top:8px;
  padding:9px 12px; border:1px solid var(--hair); border-radius:var(--r-md); background:var(--surface-2);
  color:var(--ink-1); font:inherit; cursor:pointer; }
.clienthist__row:hover { background:var(--surface-3); }
.clienthist__left { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.clienthist__code { font-weight:650; font-size:13px; font-variant-numeric:tabular-nums; }
.clienthist__total { font-weight:650; font-size:13.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.clienthist--top { margin:0 0 18px; padding:0 0 14px; border-top:0; border-bottom:1px solid var(--hair); }

/* ==========================================================================
   Item page, Oct 14 review: labour in its own section, plain Cost summary
   rows, a divider above the costing, and everything a size smaller.
   Same fonts, same hierarchy — only size and weight come down. Scoped to the
   item page (#library-item) so no other screen changes.
   ========================================================================== */
/* Two equal columns; the picture card stretches to the height of the right
   column (heading + cost + margin), the photo filling it, uncropped. */
#library-item .itemhero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-bottom:14px; align-items:stretch; }
#library-item .itemhero__right { gap:14px; min-width:0; }
#library-item .itemhero__imagewrap { padding:12px; display:flex; flex-direction:column; min-width:0; }
#library-item .itemhero__image { aspect-ratio:auto; flex:1 1 auto; min-height:320px; }
#library-item .itemhero__right .ladder { margin-bottom:0; }
#library-item .itemhead { padding:14px 16px; }
#library-item .itemhead__name { font-size:16px; font-weight:600; }
#library-item .itemhead__meta { font-size:11.5px; margin-top:2px; }

/* Cost summary: rows, not boxed tiles — roughly half the height. */
#library-item .costfacts { padding:14px 16px; }
#library-item .costfacts__eyebrow { font-size:10px; font-weight:600; }
#library-item .costfacts__head { margin-top:4px; padding-bottom:8px; border-bottom-width:2px; }
#library-item .costfacts__label { font-size:13px; font-weight:600; }
#library-item .costfacts__total { font-size:30px; }
#library-item .costfacts__warn { font-size:11px; padding:1px 8px; margin-top:8px; }
#library-item .costfacts__warn + .costfacts__warn { margin-top:5px; }
#library-item .costfacts__list { margin-top:6px; }
#library-item .costfacts__row {
  border:0; border-radius:0; background:none; margin:0;
  padding:5px 0; border-bottom:1px solid var(--hair);
}
#library-item .costfacts__row:last-child { border-bottom:0; padding-bottom:0; }
#library-item .costfacts__name { font-size:12.5px; font-weight:500; }
#library-item .costfacts__amt { font-size:12.5px; font-weight:600; }
#library-item .costfacts__note { font-size:10.5px; margin-top:1px; }

/* Notes */
#library-item .notescard { padding:14px 18px; margin-bottom:0; }
#library-item .notescard__title { font-size:10.5px; font-weight:600; }
#library-item .notescard .input { font-size:13px; padding:7px 14px; }
#library-item .notescard__add { font-size:12px; }

/* The line between "about the piece" and "what it costs". The warm peach of
   the margin slider, so it reads as a deliberate break, not another hairline. */
.itemdivider { height:2px; border-radius:2px; background:var(--free); margin:22px 0 20px; }
:root[data-theme="dark"] .itemdivider { background:var(--blush); }

/* Margin ladder */
#library-item .ladder { padding:14px 18px; margin-bottom:14px; }
#library-item .ladder__head { margin-bottom:10px; }
#library-item .ladder__title { font-size:13.5px; font-weight:600; }
#library-item .ladder__sub { font-size:10.5px; }
#library-item .ladder__slider { --thumb:40px; }
#library-item .ladder__thumb { font-size:11px; }
#library-item .ladder__out { margin-top:10px; }
#library-item .ladder__figs { gap:8px 22px; }
#library-item .ladder__figlabel { font-size:9.5px; font-weight:600; }
#library-item .ladder__figval { font-size:13.5px; font-weight:600; }
#library-item .ladder__fig--big .ladder__figval { font-size:30px; font-weight:400; }
#library-item .ladder__bar { height:9px; margin-top:12px; }
#library-item .ladder__key { font-size:11px; }
#library-item .ladder__warn { font-size:11px; }

/* Full breakdown and Labour */
#library-item .recipe-card { padding:14px 18px; margin-bottom:14px; }
#library-item .recipe-card__title { font-size:13.5px; font-weight:600; }
#library-item .recipe-card__version { font-size:11px; }
#library-item .recipe-card__hint { font-size:11px; margin:4px 0 10px; }
#library-item .recipe-rows { gap:6px; }
#library-item .recipe-row { padding:6px 10px; gap:6px; }
#library-item .recipe-row--head { padding:0 10px 0; }
#library-item .recipe-line__h { font-size:9.5px; font-weight:600; }
#library-item .recipe-row .input { font-size:12px; padding:5px 9px; }
#library-item .rrow__unitprice { font-size:11.5px; }
#library-item .rrow__cost { font-size:12px; font-weight:600; }
#library-item .recipe-row .iconbtn { width:28px; height:28px; }
#library-item .recipe-row .iconbtn svg { width:14px; height:14px; }
#library-item .recipe-addrowbtn, #library-item .recipe-addlabourbtn { font-size:12px; padding:6px 13px; }
.recipe-addlabourbtn { margin-top:12px; display:inline-flex; align-items:center; gap:6px; }
.recipe-addlabourbtn svg { width:14px; height:14px; }
/* Labour rows: the number columns keep the breakdown's widths, so Quantity,
   Unit price and Price line up down the page across both cards. */
.recipe-row.recipe-row--labour { grid-template-columns:minmax(0,1fr) 84px 104px 112px 34px; }
@media (max-width:900px) { .recipe-row.recipe-row--labour { grid-template-columns:1fr 1fr; } }
@media (max-width:760px) {
  #library-item .itemhero { grid-template-columns:minmax(0,1fr); }
  #library-item .itemhero__image { aspect-ratio:1/1; flex:none; min-height:0; }
}

/* Library item code: issued by the database, shown read-only (D65). */
.itemcode__value { font-weight:650; font-variant-numeric:tabular-nums; color:var(--ink-1); padding:4px 0; }

/* Full breakdown split into sections (Oct 14): Wood & Allied, Polishing &
   Lacquer, Upholstery, Misc., then Labour — each its own card with a subtotal. */
.breakdownhead { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 2px 10px; }
.breakdownhead__hint { font-size:11px; }
#library-item .breakdownhead .recipe-card__title { font-size:14.5px; }
.recipe-sec__total { font-size:13px; font-weight:650; color:var(--ink-1); font-variant-numeric:tabular-nums; }
.recipe-sec__empty { margin:2px 0 0; font-size:11.5px; }
.recipe-row[hidden], .recipe-sec__empty[hidden] { display:none; }
#library-item .recipe-sec__title { font-size:13px; }
.recipe-sec__unest { font-size:11px; font-weight:500; color:var(--ink-muted); }

/* ==========================================================================
   Top bar, Oct 14: the logo, the tabs, then who / theme / sign out — one line.
   The logo is a transparent PNG of the wordmark (black ink); in dark mode it
   is inverted to light ink. If it ever fails to load, a marked placeholder
   box takes its place rather than a broken image.
   ========================================================================== */
.topbar {
  display:flex; align-items:center; gap:18px; flex-wrap:nowrap;
  padding:0 22px; min-height:58px;
  background:var(--plane); border-bottom:1px solid var(--hair);
}
.brandmark { display:flex; align-items:center; flex:none; text-decoration:none; }
.brandmark__logo { height:34px; width:auto; display:block; }
:root[data-theme="dark"] .brandmark__logo { filter:invert(1) brightness(.93); }
.brandmark__placeholder { display:none; }
.brandmark--placeholder .brandmark__logo { display:none; }
.brandmark--placeholder .brandmark__placeholder {
  display:grid; place-items:center; width:92px; height:30px;
  border:1.5px dashed var(--axis); border-radius:var(--r-sm);
  font-size:10.5px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted);
}
.topbar .tabs {
  align-self:stretch; display:flex; align-items:stretch; gap:2px;
  padding:0; border-bottom:0; min-width:0;
}
.topbar .tab { display:flex; align-items:center; padding:0 11px; font-size:13px; margin-bottom:-1px; }
.topbar .who { flex:none; }
.topbar .btn { flex:none; }

/* Narrower screens: the tabs drop to their own scrolling row under the logo. */
@media (max-width:1100px) {
  .topbar { flex-wrap:wrap; padding:10px 16px 0; row-gap:4px; }
  .topbar .tabs { order:5; flex-basis:100%; overflow-x:auto; min-height:42px; }
  .topbar .tab { padding:0 11px; }
}

/* Item page: Download PDF (internal costing sheet) */
.itemhead__pdf { display:inline-flex; align-items:center; gap:6px; flex:none; align-self:center; }
.itemhead__pdf svg { width:14px; height:14px; }
.itemhead__pdfmsg { flex-basis:100%; margin:4px 0 0; }

/* Catalogue, Oct 14: title row carries Import/Export; Rates groups fold. */
.panel__head--row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.panel__head--row .panel__title { margin:0; }
#panel-catalogue .input--search { flex:1 1 260px; max-width:360px; }
.blockrow__toggle {
  display:flex; align-items:center; gap:8px; width:100%; padding:0; background:none; border:0;
  font:inherit; font-weight:inherit; color:inherit; cursor:pointer; text-align:left;
}
.blockrow__toggle svg { width:14px; height:14px; flex:none; transition:transform .15s; }
.blockrow.is-collapsed .blockrow__toggle svg { transform:rotate(-90deg); }
.blockrow__count { font-size:11px; font-weight:600; color:var(--ink-muted); background:var(--surface-3);
  border-radius:999px; padding:1px 8px; font-variant-numeric:tabular-nums; }
/* Fixed column widths, so the headings don't shift when groups are folded. */
#cat-table { table-layout:fixed; width:100%; }
#cat-table thead th:nth-child(1) { width:36%; }
#cat-table thead th:nth-child(2) { width:10%; }
#cat-table thead th:nth-child(3) { width:22%; }
#cat-table thead th:nth-child(4) { width:18%; }
#cat-table thead th:nth-child(5) { width:14%; }
@media (max-width:640px) { #cat-table { table-layout:auto; } }
#cat-table thead th.n { text-align:right; }

/* ==========================================================================
   Module 3b · The quotation — a working copy, sent copies, held prices,
   alternatives, history. Same tokens as the enquiry it sits under.
   ========================================================================== */
.enqitems__err { margin:8px 0 0; }
.chip--alt { background:var(--sky); color:#14414d; }
:root[data-theme="dark"] .chip--alt { background:#22404a; color:#bfe3ec; }
.chip--superseded { background:var(--surface-3); color:var(--ink-2); }

/* held price, under an item's figures */
.enqitem__held { display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; margin-top:10px;
  padding:8px 12px; border-radius:var(--r-sm); background:var(--surface-1); border:1px solid var(--hair);
  font-size:12.5px; color:var(--ink-2); }
.enqitem__held[hidden] { display:none; }
.enqitem__held strong { color:var(--ink-1); font-weight:650; font-variant-numeric:tabular-nums; }
.enqitem__held--moved { background:var(--cream); border-color:transparent; color:#6b4a12; }
.enqitem__held--moved strong { color:#4f360c; }
:root[data-theme="dark"] .enqitem__held--moved { background:#3d3220; color:#f1d79a; }
:root[data-theme="dark"] .enqitem__held--moved strong { color:#fbe7b8; }
.enqitem__heldmoved { display:inline-flex; align-items:center; gap:5px; font-weight:600; }
.enqitem__heldmoved svg { width:14px; height:14px; flex:none; }
.enqitem__held .btn { margin-left:auto; }

/* alternatives (D31) */
.enqitem__alt { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; font-size:12.5px; color:var(--ink-2); }
.enqitem__alt[hidden] { display:none; }
.enqitem__alticon { width:20px; height:20px; display:grid; place-items:center; color:var(--ink-muted); flex:none; }
.enqitem__alticon svg { width:15px; height:15px; }
.enqitem__altsel { width:auto; max-width:280px; padding:5px 10px; font-size:12.5px; }
.enqitem__alt--on { padding:7px 10px; border-radius:var(--r-sm); background:var(--surface-1); border:1px dashed var(--axis); }
.enqitem__alt--on .enqitem__alticon { color:#1f6e86; }
:root[data-theme="dark"] .enqitem__alt--on .enqitem__alticon { color:#99CDD8; }
.enqitem__alt--on .enqitem__altlabel { flex:1 1 200px; min-width:0; }
.enqitem--off { background:transparent; border-style:dashed; }
.enqitem--off .enqitem__figval { color:var(--ink-2); }

/* removed after being sent (D28) */
.retired { margin-top:16px; padding-top:12px; border-top:1px solid var(--hair); }
.retired[hidden] { display:none; }
.retired__title { font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:650; color:var(--ink-muted); }
.retired__note { font-size:12px; color:var(--ink-muted); margin:3px 0 4px; }
.retired__row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid var(--hair); }
.retired__row:last-child { border-bottom:0; }
.retired__name { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.retired__item { font-size:13.5px; color:var(--ink-2); text-decoration:line-through; text-decoration-color:var(--axis); }

/* the quotation card */
.quotecard { padding:18px 22px; }
.quotecard__head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.quotecard__state { font-size:12.5px; }
.quotecard__send { display:inline-flex; align-items:center; gap:7px; }
.quotecard__send svg { width:14px; height:14px; }
.quotecard__intro { font-size:13.5px; color:var(--ink-2); margin:8px 0 12px; max-width:68ch; }
.quotecard__flash { display:none; margin-top:10px; padding:9px 13px; border-radius:var(--r-md); font-size:13px;
  background:var(--mint); color:#1d4d3a; }
.quotecard__flash.is-on { display:block; }
:root[data-theme="dark"] .quotecard__flash { background:#1f3a2c; color:#bfe6cf; }
.quotecard__err { margin:10px 0 0; }
.quotecard__changed { font-size:12.5px; color:var(--ink-2); margin-top:8px; }
.quotecard__changed:empty { display:none; }
.quotecard__changedlabel { font-weight:650; color:var(--ink-1); }

.qlines { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.qline { border:1px solid var(--hair); border-radius:var(--r-md); background:var(--surface-2); padding:12px 14px 10px; }
.qline--alt { border-style:dashed; background:var(--surface-1); }
.qline--mixed { border-color:var(--warning, #fab219); }
.qline__head { display:flex; align-items:center; gap:10px; }
.qline__no { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--brand-soft); color:var(--ink-1); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.qline__name { flex:1; min-width:0; font-weight:650; font-size:14.5px; padding:6px 12px; }
.qline__alttag[hidden] { display:none; }
.qline__tools { display:flex; gap:2px; flex:none; }
.qline__bullets { list-style:none; margin:8px 0 0 34px; padding:0; display:flex; flex-direction:column; gap:5px; }
.qline__bullet { display:flex; align-items:center; gap:6px; }
.qline__bullet::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--ink-muted); flex:none; }
.qline__bulletin { flex:1; min-width:0; padding:5px 11px; font-size:13px; }
.qline__addb { margin:4px 0 0 28px; }
.qline__items { margin:8px 0 0 34px; display:flex; flex-direction:column; gap:4px; }
.qline__item { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 10px; border-radius:var(--r-sm);
  background:var(--surface-1); border:1px solid var(--hair); font-size:12.5px; }
.qline__itemname { display:flex; align-items:center; gap:6px; flex:1; min-width:140px; color:var(--ink-1); font-weight:600; }
.qline__itemfig { color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.qline__move { width:auto; max-width:220px; padding:4px 10px; font-size:12px; }
.qline__empty { font-size:12.5px; color:var(--ink-muted); margin:2px 0; }
.qline__foot { display:flex; align-items:baseline; gap:10px; margin:8px 0 0 34px; }
.qline__note { font-size:12px; color:var(--ink-muted); }
.qline--mixed .qline__note { color:#6b4a12; font-weight:600; }
:root[data-theme="dark"] .qline--mixed .qline__note { color:#f1d79a; }
.qline__amount { font-size:15px; font-weight:700; color:var(--ink-1); font-variant-numeric:tabular-nums; white-space:nowrap; }
.qline--alt .qline__amount { color:var(--ink-2); font-weight:600; }
.qline__status { margin:2px 0 0 34px; }

.qtray { margin-top:14px; padding:12px 14px; border:1px dashed var(--axis); border-radius:var(--r-md); }
.qtray__title { font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:650; color:var(--ink-muted); }
.qtray__note { font-size:12px; color:var(--ink-muted); margin:3px 0 6px; }
.qtray__row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 0; }
.qtray__name { font-size:13.5px; font-weight:600; color:var(--ink-1); }

.qtotals { margin:14px 0 0 auto; max-width:340px; }
.qtotals__row { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--hair); }
.qtotals__label { font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:650; color:var(--ink-2); }
.qtotals__val { font-size:14.5px; font-weight:650; color:var(--ink-1); font-variant-numeric:tabular-nums; }
.qtotals__row--total { border-bottom:0; padding-top:10px; }
.qtotals__row--total .qtotals__label { color:var(--ink-1); }
.qtotals__row--total .qtotals__val { font-size:22px; font-weight:750; }

.qsent { margin-top:16px; padding-top:12px; border-top:1px solid var(--hair); }
.qsent[hidden] { display:none; }
.qsent__row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:9px 0; border-bottom:1px solid var(--hair); }
.qsent__row:last-child { border-bottom:0; }
.qsent__ver { width:36px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none;
  background:var(--surface-3); color:var(--ink-1); font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; }
.qsent__mid { display:flex; flex-direction:column; gap:2px; flex:1; min-width:180px; }
.qsent__line { font-size:13.5px; font-weight:600; color:var(--ink-1); font-variant-numeric:tabular-nums; }
.qsent__pdf { display:inline-flex; align-items:center; gap:6px; }
.qsent__pdf svg { width:14px; height:14px; }

/* the send drawer */
.sendq__sum { padding:4px 0 12px; border-bottom:1px solid var(--hair); margin-bottom:6px; }
.sendq__total { font-family:'Instrument Serif', Georgia, serif; font-size:36px; line-height:1.1; color:var(--ink-1); font-variant-numeric:tabular-nums; }
.sendq__eyebrow { margin-top:12px; }
.sendq__block .enqhealth__icon { background:var(--blush); color:var(--free-ink); }
:root[data-theme="dark"] .sendq__block .enqhealth__icon { background:#4a2622; color:#f6c9bd; }

/* history */
.histcard { padding:16px 20px; }
.histcard__list { margin-top:6px; }
.histcard__row { display:flex; flex-direction:column; gap:1px; padding:8px 0; border-bottom:1px solid var(--hair); }
.histcard__row:last-of-type { border-bottom:0; }
.histcard__sum { font-size:13px; color:var(--ink-1); }
.histcard__row--sent .histcard__sum { font-weight:650; }
.histcard__list > .btn { margin-top:6px; }

/* Settings · what every quotation carries */
.qsettings { padding:18px 22px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 28px; }
.qsettings__ro { grid-column:1 / -1; margin:0; }
.qsettings__group { min-width:0; }
.qsettings__head { display:flex; align-items:baseline; gap:10px; }
.qsettings__title { font-weight:650; font-size:14.5px; color:var(--ink-1); }
.qsettings__note { font-size:12px; color:var(--ink-muted); margin:3px 0 10px; }
.qsettings__inline { display:flex; align-items:center; gap:8px; }
.qsettings__num { width:110px; text-align:right; font-variant-numeric:tabular-nums; }
.qsettings__terms { display:flex; flex-direction:column; gap:6px; }
.qsettings__term { display:flex; align-items:center; gap:8px; }
.qsettings__pct { width:76px; text-align:right; font-variant-numeric:tabular-nums; }
.qsettings__label { flex:1; min-width:0; }
.qsettings__sum { font-size:12px; color:var(--ink-2); margin:8px 0 4px; font-variant-numeric:tabular-nums; }
.qsettings__sum--bad { color:var(--free-ink); font-weight:650; }
:root[data-theme="dark"] .qsettings__sum--bad { color:#f6c9bd; }
.qsettings .field { margin-bottom:10px; }

@media (max-width: 640px) {
  .quotecard { padding:16px 14px; }
  .qline { padding:10px 10px 8px; }
  .qline__bullets, .qline__items, .qline__foot, .qline__status { margin-left:0; }
  .qline__addb { margin-left:-6px; }
  .qline__move { max-width:100%; flex-basis:100%; }
  .qtotals { max-width:none; }
  .qsettings { grid-template-columns:minmax(0,1fr); padding:16px 14px; }
  .enqitem__held .btn { margin-left:0; }
  .enqitem__altsel { max-width:100%; }
}
/* 3b · with alternative and moved-cost chips an item can carry three chips;
   they wrap among themselves, the trash icon stays on the name's row. */
@media (min-width: 641px) {
  .enqitem__top { flex-wrap:nowrap; }
  .enqitem__chips { flex:0 1 auto; min-width:0; }
}

/* ── Module 3c · confirming the order ─────────────────────────────────────── */
.btn--good { background:var(--mint); color:#1d4d3a; border-color:transparent; }
.btn--good:hover { background:var(--mint); filter:brightness(0.97); }
:root[data-theme="dark"] .btn--good { background:#1f3a2c; color:#bfe6cf; }
.quotecard__confirm { display:inline-flex; align-items:center; gap:7px; }
.quotecard__confirm svg { width:14px; height:14px; }
.quotecard__intro--order { margin-top:8px; }
.enqhead__code, .ordrow__code { font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.enqhead__code { color:var(--ink-2); font-weight:650; }
.ordrow__code { font-weight:750; }
.ordrow .enqrow__fig { min-width:96px; }
.ordrow__short { white-space:nowrap; }
.ordflash { display:flex; align-items:center; gap:10px; padding:12px 16px; margin-bottom:14px;
  background:var(--mint); color:#1d4d3a; border-color:transparent; font-size:14px; font-weight:600; }
.ordflash svg { width:18px; height:18px; flex:none; }
:root[data-theme="dark"] .ordflash { background:#1f3a2c; color:#bfe6cf; }

/* a locked piece: the price is settled, so the slider gives way to the figure */
.enqitem__margin--locked .enqitem__mlabel { margin-bottom:0; }
.enqitem__held--locked { background:var(--surface-2); }
.enqitem__held--locked .enqitem__heldtxt { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.enqitem__held--locked .enqitem__heldtxt svg { width:14px; height:14px; flex:none; color:var(--brand); }
.enqitem__held--locked.enqitem__held--moved { background:var(--cream); }
.chip--added { white-space:normal; }

/* the confirm drawer */
.confirmq__row { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.confirmq__short { display:flex; align-items:flex-start; gap:8px; margin:-4px 0 12px; padding:9px 12px; border-radius:var(--r-md);
  background:var(--surface-2); font-size:13px; line-height:1.4; color:var(--ink-2); }
.confirmq__short:empty { display:none; }
.confirmq__shorticon { width:18px; height:18px; flex:none; display:grid; place-items:center; }
.confirmq__shorticon:empty { display:none; }
.confirmq__shorticon svg { width:16px; height:16px; }
.confirmq__short.is-short { background:var(--cream); color:#6b4a12; }
.confirmq__short.is-ok { background:var(--mint); color:#1d4d3a; }
.confirmq__short.is-bad { background:var(--blush); color:var(--free-ink); }
:root[data-theme="dark"] .confirmq__short.is-short { background:#3d3220; color:#f1d79a; }
:root[data-theme="dark"] .confirmq__short.is-ok { background:#1f3a2c; color:#bfe6cf; }
:root[data-theme="dark"] .confirmq__short.is-bad { background:#4a2622; color:#f6c9bd; }
.confirmq__choice { border:1px solid var(--hair); border-radius:var(--r-md); padding:10px 14px 8px; margin:14px 0 4px; }
.confirmq__choice legend { padding:0 6px; margin-left:-6px; }
.confirmq__opt { display:flex; align-items:center; gap:10px; padding:7px 0; cursor:pointer; flex-wrap:wrap; }
.confirmq__opt input { width:18px; height:18px; accent-color:var(--brand); margin:0; }
.confirmq__optname { font-weight:650; color:var(--ink-1); font-size:14px; }
.confirmq__opt .listrow__meta { margin-left:auto; font-variant-numeric:tabular-nums; }

/* payments on an order */
.paycard { padding:16px 20px; }
.paycard__head { margin-top:8px; }
.paycard__stages { margin-top:12px; border-top:1px solid var(--hair); }
.paycard__stage { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--hair); }
.paycard__stage .enqhealth__icon:empty { background:var(--surface-3); }
.paycard__stage--due .enqhealth__icon, .paycard__stage--part .enqhealth__icon { background:var(--cream); color:#6b4a12; }
:root[data-theme="dark"] .paycard__stage--due .enqhealth__icon,
:root[data-theme="dark"] .paycard__stage--part .enqhealth__icon { background:#3d3220; color:#f1d79a; }
:root[data-theme="dark"] .paycard__stage--done .enqhealth__icon { background:#1f3a2c; color:#bfe6cf; }
.paycard__stage--later .enqhealth__label, .paycard__stage--later .enqhealth__n { color:var(--ink-2); font-weight:600; }
.paycard__list { margin-top:12px; }
.paycard__row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--hair); }
.paycard__left { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.paycard__kind { font-size:13.5px; font-weight:650; color:var(--ink-1); }
.paycard__amt { font-size:15px; font-weight:700; color:var(--ink-1); font-variant-numeric:tabular-nums; white-space:nowrap; }
.paycard__add { margin-top:12px; }

@media (max-width: 640px) {
  .ordrow { flex-wrap:wrap; }
  .ordrow .enqrow__name { flex-basis:100%; }
  .ordrow .listrow__spacer { display:none; }
  .ordrow .enqrow__fig { min-width:0; align-items:flex-start; flex:1; }
  .confirmq__row { grid-template-columns:1fr; }
}
.paycard__credit { margin-top:10px; white-space:normal; }

/* ── Module 3d · the Numbers roll-up ──────────────────────────────────────── */
.numcard { padding:18px 22px; }
.numcard__tiles { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:14px 0 10px; }
.numcard__tile { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:var(--r-md); background:var(--surface-2); min-width:0; }
.numcard__big { font-family:'Instrument Serif', Georgia, serif; font-size:32px; line-height:1.05; color:var(--ink-1); font-variant-numeric:tabular-nums; }
.numcard__tile.is-neg .numcard__big { color:#a8402f; }
.numcard__tile.is-down .listrow__meta { color:#8a5a12; font-weight:600; }
:root[data-theme="dark"] .numcard__tile.is-neg .numcard__big { color:#f6c9bd; }
:root[data-theme="dark"] .numcard__tile.is-down .listrow__meta { color:#f1d79a; }
.numcard__warn { margin:4px 0 8px; white-space:normal; }
.numtbl { margin-top:10px; border-top:1px solid var(--hair); }
.numtbl__row { display:grid; grid-template-columns:minmax(0, 2.4fr) 44px repeat(5, minmax(0, 1fr)); gap:8px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--hair); font-size:13.5px; }
.numtbl__row--head { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:650; color:var(--ink-muted); padding:8px 0; }
.numtbl__row--head span:nth-child(n+2) { text-align:right; }
.numtbl__name { display:flex; flex-direction:column; gap:2px; min-width:0; }
.numtbl__item { font-weight:650; color:var(--ink-1); }
.numtbl__c.is-num { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-1); font-weight:600; }
.numtbl__c.is-muted { color:var(--ink-2); font-weight:500; }
.numtbl__c.is-neg { color:#a8402f; }
:root[data-theme="dark"] .numtbl__c.is-neg { color:#f6c9bd; }
.numtbl__delta { display:block; font-size:11.5px; font-weight:600; }
.numtbl__delta.is-up { color:#8a5a12; }
.numtbl__delta.is-dn { color:#1d6a48; }
:root[data-theme="dark"] .numtbl__delta.is-up { color:#f1d79a; }
:root[data-theme="dark"] .numtbl__delta.is-dn { color:#bfe6cf; }
.numtbl__row--cancelled .numtbl__item { text-decoration:line-through; color:var(--ink-2); }
.numtbl__row--foot { background:transparent; }
.numtbl__row--foot .numtbl__name { font-weight:650; color:var(--ink-2); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; }
.numtbl__row--total .numtbl__c.is-num { font-size:15px; font-weight:750; }
.numtbl__row--total .numtbl__name { color:var(--ink-1); }
.numbk { margin-top:16px; }
.numbk__row { display:grid; grid-template-columns:150px minmax(0, 1fr) 100px 52px; gap:10px; align-items:center; padding:5px 0; font-size:13px; }
.numbk__name { color:var(--ink-1); font-weight:600; }
.numbk__track { height:8px; border-radius:4px; background:var(--surface-3); overflow:hidden; }
.numbk__fill { display:block; height:100%; border-radius:4px; background:#1f7dab; }
.numbk__val { text-align:right; font-variant-numeric:tabular-nums; font-weight:650; color:var(--ink-1); }
.numbk__pct { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); }
.enqrow__figval.is-neg { color:#a8402f; }
:root[data-theme="dark"] .enqrow__figval.is-neg { color:#f6c9bd; }
.ordrow .ordrow__margin { min-width:70px; }

@media (max-width: 760px) {
  .numcard__tiles { grid-template-columns:1fr; }
  .numtbl__row--head { display:none; }
  .numtbl__row { grid-template-columns:1fr; gap:3px; }
  .numtbl__c.is-num { white-space:nowrap; }
  .numtbl__c.is-num::before { white-space:normal; }
  .numtbl__name { grid-column:1 / -1; }
  .numtbl__c.is-num { display:flex; justify-content:space-between; gap:8px; text-align:left; }
  .numtbl__c.is-num::before { content:attr(data-label); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); font-weight:650; }
  .numtbl__delta { display:inline; }
  .numtbl__pad { display:none; }
  .numbk__row { grid-template-columns:100px minmax(0, 1fr) 84px; }
  .numbk__pct { display:none; }
}

/* ── Module 3e · deliveries and invoices ──────────────────────────────────── */
.delcard { padding:18px 22px; }
.delbatch { margin-top:14px; border:1px solid var(--hair); border-radius:var(--r-md); padding:12px 14px; background:var(--surface-1); }
.delbatch--done { background:var(--surface-2); }
.delbatch__head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.delbatch__head .chip svg { width:12px; height:12px; vertical-align:-1px; }
.delbatch__title { display:flex; flex-direction:column; gap:2px; min-width:0; }
.delbatch__label { font-weight:700; color:var(--ink-1); font-size:14.5px; }
.delbatch__pieces { margin-top:8px; }
.delbatch__piece { display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--hair); flex-wrap:wrap; }
.delbatch__piece .qline__itemname { flex:1; min-width:140px; }
.delbatch__inv { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; padding-top:10px; border-top:1px dashed var(--axis); }
.delbatch__invline { display:flex; flex-direction:column; gap:2px; }
.delbatch__invno { font-weight:750; color:var(--ink-1); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.delbatch__invno.is-void { text-decoration:line-through; color:var(--ink-muted); }
.delbatch__void { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:6px; }
.deltray { margin-top:14px; }
.delcard__left { margin-top:12px; white-space:normal; }
.delcard__err { margin-top:10px; }
.chip--inv { font-variant-numeric:tabular-nums; }
.issueq__lines { margin:6px 0 10px; border-top:1px solid var(--hair); }
.issueq__line { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; padding:7px 0; border-bottom:1px solid var(--hair); font-size:13.5px; align-items:baseline; }
.issueq__amt { font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-1); }
.issueq .checkfield { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:14px; color:var(--ink-1); }
.issueq__totals { margin-top:10px; }
@media (max-width: 640px) {
  .issueq__line { grid-template-columns:1fr auto; }
  .issueq__line .listrow__meta { grid-column:1 / -1; }
}

/* ── Module 6a · payroll, advances & loans, attendance ──────────────────── */
.paysec__title { font-size:15px; font-weight:750; color:var(--ink-1); margin:0; }
.payatt-gm { margin-top:18px; }
.payatt-gm > .paysec__title { margin:0 0 10px; }
.payflash { margin:0 0 12px; }
.payerr { margin:0 0 12px; }
.paycard-reg, .payatt, .paylist { padding:18px 22px; margin-bottom:16px; }
.paycard-reg__head, .paylist__head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.paycard-reg__foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.paycard-reg__foot .listrow__meta { flex:1; min-width:220px; }

/* the register: one grid shared by the header, every row and the total */
.paytbl { border-top:1px solid var(--hair); }
.paytbl__row { display:grid; grid-template-columns:minmax(150px, 1.7fr) repeat(10, minmax(0, 1fr)) 30px; gap:8px; align-items:center;
  padding:9px 4px; border-bottom:1px solid var(--hair); font-size:13px; }
.paytbl--att .paytbl__row { grid-template-columns:minmax(150px, 1.6fr) 90px repeat(4, minmax(0, 1fr)); }
.paytbl__row:not(.paytbl__row--head):not(.paytbl__row--total) { cursor:pointer; border-radius:8px; }
.paytbl--att .paytbl__row:not(.paytbl__row--head) { cursor:default; }
.paytbl:not(.paytbl--att) .paytbl__row:not(.paytbl__row--head):not(.paytbl__row--total):hover { background:var(--surface-2); }
.paytbl__row--head { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:650; color:var(--ink-muted); padding:8px 4px; }
.paytbl__row--head span:nth-child(n+2) { text-align:right; }
.paytbl__name { display:flex; flex-direction:column; gap:2px; min-width:0; align-items:flex-start; }
.paytbl__person { font-weight:650; color:var(--ink-1); }
.paytbl__hint { margin-top:3px; font-size:11px; padding:1px 7px; white-space:nowrap; }
.paytbl__hint svg { width:12px; height:12px; }
.paytbl__c.is-num { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-1); font-weight:600; white-space:nowrap; }
.paytbl__c.is-muted { color:var(--ink-muted); font-weight:500; }
.paytbl__c.is-ded { color:#8a4a2a; }
:root[data-theme="dark"] .paytbl__c.is-ded { color:#f2c4ab; }
.paytbl__c.is-strong { font-weight:750; }
.paytbl__c.is-neg { color:#a8402f; }
:root[data-theme="dark"] .paytbl__c.is-neg { color:#f6c9bd; }
.paytbl__wide { grid-column:span 4; text-align:left !important; }
.paytbl__delta { display:block; font-size:11px; font-weight:600; color:var(--ink-2); white-space:normal; }
.paytbl__row--total { font-weight:700; border-bottom:0; }
.paytbl__row--total .paytbl__name { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); }
.paytbl__row--total .paytbl__c.is-num { font-weight:750; }
.paytbl__edit { justify-self:end; }

/* one person's month (drawer) */
.payrow { display:flex; flex-direction:column; gap:4px; }
.payrow__state { align-self:stretch; text-align:right; min-height:16px; }
.payrow__group { border-top:1px solid var(--hair); padding:12px 0 6px; }
.payrow__group:first-of-type { border-top:0; padding-top:0; }
.payrow__gtitle { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:8px; }
.payrow__rate { margin:2px 0 0; font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.payrow__inline { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.payrow__inline .field { max-width:130px; }
.payrow__lamt { padding-bottom:12px; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.payrow__att { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px; }
.payrow__list { margin-bottom:10px; }
.payrow__lhead { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.payrow__ltitle { flex:1; font-size:13px; font-weight:650; color:var(--ink-1); }
.payrow__line { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed var(--hair); font-size:13px; color:var(--ink-2); }
.payrow__amt { font-weight:650; color:var(--ink-1); font-variant-numeric:tabular-nums; white-space:nowrap; }
.payrow__loanin { width:120px; text-align:right; padding:7px 12px; }
.payrow__remove { align-self:flex-start; margin-top:10px; }
.paysum { margin-top:12px; padding:12px 14px; border-radius:var(--r-md); background:var(--surface-2); }
.paysum__title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:6px; }
.paysum__row { display:flex; justify-content:space-between; gap:10px; padding:3px 0; font-size:13px; color:var(--ink-2); }
.paysum__val { font-variant-numeric:tabular-nums; color:var(--ink-1); font-weight:600; }
.paysum__row--total { border-top:1px solid var(--axis); margin-top:4px; padding-top:7px; font-weight:750; color:var(--ink-1); }
.paysum__row--total .paysum__val { font-size:16px; font-weight:750; }
.payhist { margin-top:14px; }
.payhist__row { display:flex; flex-direction:column; gap:1px; padding:7px 0; border-bottom:1px solid var(--hair); }
.payhist__when { font-size:11.5px; color:var(--ink-muted); }
.payhist__what { font-size:13px; color:var(--ink-1); }

/* advances & loans */
.paylist__head .listrow__meta { flex:1; }
.paylist__empty { margin:6px 0 0; }
.paylist__row { display:grid; grid-template-columns:minmax(0, 1fr) 140px 120px 32px; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--hair); }
.paylist__row--adv { grid-template-columns:minmax(0, 1fr) auto 32px; }
#att-uploads .paylist__row--adv { grid-template-columns:minmax(0, 1fr) 32px; align-items:center; }
.paylist__main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.paylist__top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.paylist__name { font-weight:650; color:var(--ink-1); font-size:14px; }
.paylist__monthly { display:flex; flex-direction:column; gap:3px; align-items:flex-end; }
.paylist__bal { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.paylist__balval { font-weight:750; color:var(--ink-1); font-variant-numeric:tabular-nums; white-space:nowrap; }
.paylist__month { display:flex; justify-content:space-between; padding:12px 0 4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); }
.paylist__monthtot { font-variant-numeric:tabular-nums; }

/* attendance */
.payatt__off { margin:4px 0 12px; white-space:normal; line-height:1.4; }
.payatt__foot { margin-top:12px; }
.attprev { display:flex; flex-direction:column; gap:10px; }
.attprev__list { border-top:1px solid var(--hair); }
.attprev__row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr) 92px; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--hair); }
.attprev__dev { display:flex; flex-direction:column; gap:1px; min-width:0; }
.attprev__id { font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--ink-muted); text-transform:uppercase; }
.attprev__name { font-weight:650; color:var(--ink-1); }
.attprev__sel { width:100%; }
.attprev__tag { font-size:11.5px; color:var(--ink-muted); }
.attprev__tag.is-guess { color:#8a5a12; font-weight:650; }
:root[data-theme="dark"] .attprev__tag.is-guess { color:#f1d79a; }
.attprev__tag.is-linked { color:#1d6a48; font-weight:650; }
:root[data-theme="dark"] .attprev__tag.is-linked { color:#bfe6cf; }

@media (max-width: 1100px) {
  .paytbl__row { grid-template-columns:minmax(130px, 1.5fr) repeat(10, minmax(0, 1fr)) 28px; gap:6px; font-size:12.5px; }
}
@media (max-width: 900px) {
  .paytbl__row--head { display:none; }
  .paytbl__row, .paytbl--att .paytbl__row { grid-template-columns:1fr 1fr; gap:4px 14px; padding:12px 4px; }
  .paytbl__name { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
  .paytbl__c.is-num { display:flex; justify-content:space-between; gap:8px; text-align:left; }
  .paytbl__c.is-num::before { content:attr(data-label); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); font-weight:650; }
  .paytbl__delta { display:inline; margin-left:6px; }
  .paytbl__pad { display:none; }
  .paytbl__edit { position:absolute; right:6px; top:8px; }
  .paytbl__row { position:relative; }
  .paytbl__wide { grid-column:1 / -1; }
  .paylist__row { grid-template-columns:minmax(0, 1fr) auto 32px; }
  .paylist__monthly { grid-column:1 / 2; flex-direction:row; align-items:center; gap:8px; }
}
@media (max-width: 520px) {
  .paytbl__row, .paytbl--att .paytbl__row { grid-template-columns:1fr; }
  .attprev__row { grid-template-columns:1fr; gap:6px; }
}
#pay-month, #att-month { width:auto; min-width:210px; }
@media (max-width: 900px) {
  /* on a phone a person's card lists only what applies to them */
  .paytbl__c.is-zero { display:none; }
  .paytbl__v { text-align:right; }
}
/* M6a addendum · the working day (D99) */
.worksettings { margin-bottom:6px; }
.worksettings__row { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
.worksettings__row .field { min-width:130px; }
@media (min-width: 901px) {
  .paytbl--att .paytbl__row { grid-template-columns:minmax(150px, 1.5fr) 80px repeat(5, minmax(0, 1fr)) minmax(0, 1.5fr); }
  .paytbl--att .paytbl__wide { grid-column:span 6; }
}
.payrow__hours { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; width:100%; padding:8px 12px; border-radius:var(--r-md); background:var(--surface-2); }
.payrow__hoursfig { font-size:20px; font-weight:750; color:var(--ink-1); font-variant-numeric:tabular-nums; }
.payrow__hours .chip svg { width:12px; height:12px; }
.worksettings__time { width:auto; min-width:160px; }   /* room for AM/PM where the Mac shows 12-hour time */
.worksettings__row .qsettings__inline { min-height:44px; }

/* ── M6a second addendum · categories, pay & increments, day by day (D100–D102) ── */
/* Category colours (D108): slots 1–4 of the validated categorical palette, in
   the fixed stage order. Identity is never colour alone — every band carries
   its category's name — and text stays in ink tokens, never the hue. */
[data-team="carpentry"] { --team:#1f7dab; }
[data-team="polish"]    { --team:#cf6b3f; }
[data-team="poshish"]   { --team:#22916d; }
[data-team="admin"]     { --team:#b8891a; }
.paytbl__group, .paylist__month[data-team] {
  display:flex; align-items:center; gap:12px; margin-top:16px; padding:9px 12px 9px 14px;
  border-radius:var(--r-sm); border:0; box-shadow:inset 4px 0 0 var(--team, var(--axis));
  background:color-mix(in srgb, var(--team, var(--axis)) 13%, var(--surface-1));
}
.paytbl__gname { font-size:12.5px; font-weight:780; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-1); display:inline-flex; align-items:center; gap:8px; }
.paytbl__gname::before, .paylist__month[data-team] > span:first-child::before {
  content:''; width:10px; height:10px; border-radius:50%; background:var(--team, var(--axis)); flex:none; }
.paylist__month[data-team] > span:first-child { display:inline-flex; align-items:center; gap:8px; color:var(--ink-1); font-weight:780; }
.paytbl__row[data-team], .paylist__row[data-team] { box-shadow:inset 3px 0 0 color-mix(in srgb, var(--team) 55%, transparent); padding-left:14px; }
:root[data-theme="dark"] .paytbl__group, :root[data-theme="dark"] .paylist__month[data-team] {
  background:color-mix(in srgb, var(--team, var(--axis)) 20%, var(--surface-1)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .paytbl__group,
  :root:not([data-theme="light"]) .paylist__month[data-team] { background:color-mix(in srgb, var(--team, var(--axis)) 20%, var(--surface-1)); } }
.paytbl__gmeta { font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.paytbl__row--click { cursor:pointer; border-radius:8px; }
.paytbl--att .paytbl__row--click:hover { background:var(--surface-2); }
.paytbl--att .paytbl__row--click:focus-visible { outline:2px solid var(--today); outline-offset:-2px; }
.paylist__head .btn { margin-left:auto; }
.paylist__row--pay { grid-template-columns:minmax(0, 1fr) auto; align-items:start; }
.paylist__row--emp { grid-template-columns:minmax(0, 1fr) 32px; }
.paylist__name.is-left { color:var(--ink-muted); }
.paypay__hist { margin-top:6px; }
.paypay__line { display:grid; grid-template-columns:72px minmax(0, 1fr); gap:10px; padding:3px 0; font-size:12.5px; }
.paypay__when { color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.paypay__what { color:var(--ink-2); }
.attdays { display:flex; flex-direction:column; gap:10px; }
.attdays__top { display:flex; flex-wrap:wrap; gap:8px; }
.attdays__fig { display:flex; flex-direction:column; align-items:center; min-width:72px; padding:8px 10px; border-radius:var(--r-md); background:var(--surface-2); }
.attdays__n { font-size:18px; font-weight:750; color:var(--ink-1); font-variant-numeric:tabular-nums; }
.attdays__l { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); font-weight:650; }
.attdays__top .payrow__hours { flex-basis:100%; }
.attdays__list { border-top:1px solid var(--hair); }
.attday { display:grid; grid-template-columns:54px 86px 86px 52px minmax(0, 1fr) 30px; gap:8px; align-items:center; padding:7px 2px; border-bottom:1px solid var(--hair); font-size:13px; }
.attday--head { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:650; color:var(--ink-muted); }
.attday--rest { background:var(--surface-2); }
.attday--uncovered { opacity:.6; }
.attday__date { display:flex; align-items:baseline; gap:5px; }
.attday__dow { font-size:11px; color:var(--ink-muted); width:26px; }
.attday__dom { font-weight:700; color:var(--ink-1); font-variant-numeric:tabular-nums; }
.attday__t { display:flex; flex-direction:column; font-variant-numeric:tabular-nums; color:var(--ink-1); font-weight:600; }
.attday__t.is-empty { color:var(--ink-muted); font-weight:500; }
.attday__t.is-corrected { color:#1d5f8a; }
:root[data-theme="dark"] .attday__t.is-corrected { color:#9fd0e6; }
.attday__was { font-size:10.5px; font-weight:500; color:var(--ink-muted); text-decoration:line-through; }
.attday__h { font-variant-numeric:tabular-nums; color:var(--ink-2); }
.attday__flags { display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-width:0; }
.attday__flags .chip { font-size:11px; padding:1px 7px; }
.attday__note { font-size:11.5px; color:var(--ink-2); }
.attday__edit { padding:12px; margin:4px 0 8px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--axis); display:flex; flex-direction:column; gap:8px; }
.attday__editrow { display:flex; gap:12px; flex-wrap:wrap; }
.attday__editrow .field { min-width:150px; }
.attday__editbar { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width: 640px) {
  .attday { grid-template-columns:44px 64px 64px minmax(0, 1fr) 28px; }
  .attday > .attday__h { display:none; }
  .attday--head > span:nth-child(4) { display:none; }
  .attday__flags { grid-column:2 / 5; }
  .attday > .iconbtn { grid-row:1; grid-column:5; }
}
.paystart__month { width:auto; min-width:170px; }
#pay-subnav { max-width:100%; overflow-x:auto; scrollbar-width:none; }
#pay-subnav::-webkit-scrollbar { display:none; }
/* Oct 27: the month's work, then a clear gap, then the standing set-up */
.paynav { display:flex; flex-wrap:nowrap; align-items:center; gap:28px; }
.paynav__group { flex:none; }
.paynav__group--setup { position:relative; }
.paynav__group--setup::before { content:''; position:absolute; left:-15px; top:8px; bottom:8px; width:1px; background:var(--axis); }
@media (max-width:640px) {
  #pay-subnav.paynav { flex-wrap:wrap; overflow-x:visible; gap:10px; }
  .paynav__group--setup::before { display:none; }
}
.paysettings__head { display:flex; flex-direction:column; gap:4px; margin:4px 2px 12px; }
.paysettings__head .paysec__title { margin:0; }
/* M6a third addendum · who is missing from a month, and why (D104) */
.paymiss { margin:4px 0 12px; padding:10px 14px; border-radius:var(--r-md); background:var(--cream); color:#6b4a12; display:flex; flex-direction:column; gap:8px; font-size:13px; }
:root[data-theme="dark"] .paymiss { background:#3d3220; color:#f1d79a; }
.paymiss__line { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.paymiss__line > span:first-child { flex:1; min-width:220px; }
.paypay__line { grid-template-columns:72px minmax(0, 1fr) 28px; align-items:center; }
/* D105 · lates and early lefts as leave */
@media (min-width: 901px) {
  .paytbl--att .paytbl__row { grid-template-columns:minmax(140px, 1.4fr) 70px repeat(5, minmax(0, 1fr)) minmax(0, 1.4fr) minmax(0, 1.2fr); }
  .paytbl--att .paytbl__wide { grid-column:span 7; }
}
.worksettings__row + .worksettings__row { margin-top:10px; }
.payrow__why { flex-basis:100%; }

/* ==========================================================================
   M1b · the Schedule (D109–D116) — ported from ensoplanner.html, the
   reference implementation DESIGN-SYSTEM.md names. Grid rules kept: label
   cells qualified by table.sg, sticky tops measured from the DOM, the grid
   owns its vertical scroll.
   ========================================================================== */
.main:has(#panel-schedule.is-on) { max-width:1900px; }
.input--sm { padding:6px 12px; font-size:13px; }
.input--xs { padding:3px 8px; font-size:12px; border-radius:999px; }
.seg__n { font-size:11px; color:var(--ink-muted); margin-left:6px; font-variant-numeric:tabular-nums; }
.card__title { margin:0; font-size:15px; font-weight:750; letter-spacing:-.01em; }

.schbar { gap:12px; }
.schmonth { display:inline-flex; align-items:center; gap:4px; }
.schmonth .btn { padding:5px 12px; font-size:15px; line-height:1; }
.schmonth__sel { width:auto; }
.schstatus { font-size:12.5px; color:var(--ink-muted); min-height:1em; }
.schstatus--good { color:var(--ink-2); }
.schstatus--bad { color:var(--critical); font-weight:600; }
:root[data-theme="dark"] .schstatus--bad { color:#f6a99c; }
.schlive { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:6px; }
.schlive::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--good); }
.schissbtn { display:inline-flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--hair);
  color:var(--ink-1); padding:6px 13px 6px 9px; border-radius:999px; cursor:pointer; font:inherit; font-size:13px; font-weight:650;
  box-shadow:var(--shadow-raise); }
.schissbtn:hover { background:var(--surface-3); }
.schissbtn__glyph { width:20px; height:20px; border-radius:7px; display:grid; place-items:center; font-size:12px; font-weight:800;
  background:var(--brand-soft); color:var(--ink-1); }
.schissbtn.has .schissbtn__glyph { background:var(--critical); color:#fff; }
.schissbtn__n { font-variant-numeric:tabular-nums; }
.schcheck { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2); cursor:pointer; }
.schcheck input, .sg input[type=checkbox], .schpieces input, .schpop input { accent-color:var(--brand); width:15px; height:15px; }

/* the grid */
.sgbox { overflow:auto; background:var(--surface-1); border:1px solid var(--hair); border-radius:var(--r-md);
  min-height:200px; box-shadow:var(--shadow-card); }
table.sg { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font-size:13px; }
table.sg th, table.sg td { border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:0; vertical-align:top; }
table.sg thead th { position:sticky; top:0; z-index:30; background:var(--surface-1); }
table.sg th.sg__corner, table.sg td.sg__pname { position:sticky; left:0; z-index:20; background:var(--surface-1);
  min-width:264px; max-width:264px; padding:9px 14px 9px 14px; text-align:left; border-right:1px solid var(--axis); }
table.sg th.sg__corner { z-index:41; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted);
  font-weight:700; vertical-align:bottom; border-bottom:1px solid var(--axis); }
table.sg th.sg__day { border-bottom:1px solid var(--axis); padding:6px 0; width:58px; min-width:58px; text-align:center; }
table.sg th.sg__day.is-off { background:var(--surface-3); }
.sg__dnum { font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; }
.sg__dwk { font-size:9px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.09em; font-weight:600; }
table.sg th.sg__day.is-hol .sg__dnum { color:var(--serious); }
.sg__todaytag { display:block; font-size:8px; font-weight:800; letter-spacing:.1em; color:#fff; background:#1f7dab;
  border-radius:999px; margin:0 6px 2px; padding:1px 0; line-height:1.5; }
table.sg th.sg__day.is-today { background:color-mix(in srgb, var(--today) 12%, var(--surface-1)); }
table.sg th.sg__day.is-today .sg__dnum { color:var(--today); }
table.sg td.sg__cell.is-today { background:color-mix(in srgb, var(--today) 6%, transparent); }
.sg__pn { font-size:13px; font-weight:650; display:flex; align-items:center; gap:8px; }
.sg__pnm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sg__qty { color:var(--ink-2); font-weight:600; }
.sg__pc { font-size:11.5px; color:var(--ink-muted); margin-top:2px; padding-left:40px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sg__stg { font-size:9.5px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.07em; background:var(--surface-3);
  padding:1px 7px; border-radius:999px; font-weight:700; }
.sg__drag { cursor:grab; display:inline-flex; color:var(--ink-muted); }
.sggrip { opacity:.5; } .sggrip circle { fill:currentColor; }
table.sg tr.is-dragging td { opacity:.42; }
table.sg tr.dz-b td { box-shadow:inset 0 3px 0 var(--today); }
table.sg tr.dz-a td { box-shadow:inset 0 -3px 0 var(--today); }
table.sg tr.is-done td.sg__pname { opacity:.55; }
table.sg tr.is-done .sg__pnm { text-decoration:line-through; }
table.sg td.sg__empty { white-space:normal; }
table.sg td.sg__cell { cursor:pointer; padding:4px; width:58px; min-width:58px; max-width:58px; }
table.sg td.sg__cell:hover, table.sg td.sg__cell:focus-visible { background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--brand-soft); outline:none; }
table.sg td.sg__cell.is-off { background:var(--surface-3); cursor:default; }
table.sg td.sg__cell.is-off:hover { box-shadow:none; }
table.sg td.sg__cell.is-blank { background:transparent; }
table.sg td.sg__cell.is-conflict { box-shadow:inset 0 0 0 2px var(--critical); }
.sgchip { display:block; font-size:10.5px; font-weight:700; border-radius:7px; padding:2px 4px; margin-bottom:3px;
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:2px solid var(--surface-1);
  box-shadow:var(--shadow-raise); line-height:1.35; }
.sgchip b { font-weight:800; margin-right:2px; }
.sgchip.is-bad { outline:2px solid var(--critical); outline-offset:-2px; }

/* who is free */
table.sg th.sg__striphdr { position:sticky; left:0; z-index:39; background:var(--surface-1); min-width:264px; max-width:264px;
  text-align:left; padding:8px 14px 6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted);
  font-weight:700; border-right:1px solid var(--axis); }
table.sg th.sg__avlab { position:sticky; left:0; z-index:38; background:var(--surface-1); min-width:264px; max-width:264px;
  text-align:left; padding:2px 14px; height:32px; border-right:1px solid var(--axis); vertical-align:middle; }
.sg__avname { display:flex; align-items:center; gap:9px; width:100%; max-width:200px; height:26px; padding:0 12px; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--hair); font:inherit; font-size:12.5px; font-weight:650; color:var(--ink-1);
  cursor:pointer; box-shadow:var(--shadow-raise); }
.sg__avname { border:2px solid transparent; justify-content:space-between; }
.sg__avname:hover { filter:brightness(1.06); }
/* picked up (the brush): a ring in the ink colour, the tile keeps its colour */
.sg__avname[aria-pressed="true"] { box-shadow:0 0 0 2px var(--surface-1), 0 0 0 4px var(--ink-1); }
.sg__avname[aria-pressed="true"]::after { content:'✓'; font-weight:800; margin-left:4px; }
.sg__nk { font-size:10.5px; font-weight:800; letter-spacing:.04em; opacity:.85; }
.sg__nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sg__dot { width:9px; height:9px; border-radius:50%; flex:0 0 9px; display:inline-block; box-shadow:0 0 0 2px var(--surface-2); }
table.sg th.sg__av { height:32px; width:58px; min-width:58px; cursor:pointer; font-size:11px; font-weight:750; z-index:28;
  text-align:center; vertical-align:middle; border-right:3px solid var(--surface-1); border-bottom:3px solid var(--surface-1); }
table.sg th.sg__av--gap { height:6px; cursor:default; border:0; }
table.sg th.sg__av--booked { background:var(--booked); color:var(--booked-ink); font-size:12px; }
table.sg th.sg__av--part { background:color-mix(in srgb, var(--booked) 55%, var(--free)); }
table.sg th.sg__av--free { background:var(--free); color:var(--free-ink); }
table.sg th.sg__av--rest { background:var(--restday); cursor:default; }
table.sg th.sg__av--leave { background:var(--restday); color:var(--serious); }
:root[data-theme="dark"] table.sg th.sg__av--leave { color:#f0a27e; }
table.sg th.sg__av--absent { background:var(--restday); color:var(--ink-2); text-decoration:underline dotted; }
table.sg th.sg__av.is-over { outline:2px solid var(--critical); outline-offset:-3px; }
table.sg th.sg__av:focus-visible { outline:2px solid var(--today); outline-offset:-3px; }
table.sg th.sg__av.is-today { box-shadow:inset 0 -3px 0 #1f7dab; }
table.sg tr.sg__days th { border-top:1px solid var(--axis); }

.schlegend { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-top:12px; padding:0 4px; }
.schlegend i { display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:7px; vertical-align:-2px; }
.schlegend strong { color:var(--ink-1); }
.schlegend__free { background:var(--free); } .schlegend__booked { background:var(--booked); }
.schlegend__rest { background:var(--restday); } .schlegend__absent { background:var(--restday); border:1px dotted var(--ink-2); }
.schlegend__today { background:var(--today); }
.schhint { margin:8px 4px 0; }

/* popover */
.schpop { position:absolute; z-index:200; background:var(--surface-1); border:1px solid var(--hair); border-radius:var(--r-md);
  padding:10px; min-width:250px; max-width:calc(100vw - 16px); box-shadow:0 14px 44px rgba(88,80,72,.22); }
:root[data-theme="dark"] .schpop { box-shadow:0 14px 44px rgba(0,0,0,.55); }
.schpop__title { margin:0 0 8px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); font-weight:700; }
.schpop__row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 10px; padding:4px 6px; border-radius:var(--r-sm); }
.schpop__row:hover { background:var(--surface-2); }
.schpop__who { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; cursor:pointer; min-height:30px; }
.schpop__frac:disabled { opacity:.45; }
.schpop__note { grid-column:1 / -1; font-size:11.5px; color:var(--ink-muted); padding-left:24px; }
.schpop__msg { font-size:12px; color:var(--critical); margin:6px 6px 0; }
:root[data-theme="dark"] .schpop__msg { color:#f6a99c; }

/* issues */
.schiss__row { display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--hair); align-items:flex-start; }
.schiss__row:last-child { border-bottom:0; }
.schiss__ico { flex:0 0 22px; height:22px; border-radius:8px; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; }
.schiss__ico svg { width:14px; height:14px; }
.schiss__ico--critical { background:var(--critical); }
.schiss__ico--warning { background:var(--warning); color:#3A2A00; }
.schiss__ico--serious { background:var(--serious); color:#3A1A00; }
.schiss__ico--good { background:var(--good); }
.schiss__t { font-size:13.5px; font-weight:700; }
.schiss__m { font-size:13px; color:var(--ink-2); margin-top:2px; line-height:1.5; }

/* leave & holidays */
.schleave__head { display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.schatt__wrap { overflow:auto; }
table.schatt { border-collapse:separate; border-spacing:0; width:max-content; font-size:12px; }
table.schatt th, table.schatt td { border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); text-align:center;
  min-width:32px; padding:5px 0; font-variant-numeric:tabular-nums; }
table.schatt th { position:sticky; top:0; background:var(--surface-1); z-index:2; font-weight:700; border-bottom:1px solid var(--axis); }
table.schatt th.is-off { color:var(--ink-muted); }
table.schatt th.is-today { color:var(--today); }
table.schatt .schatt__who { text-align:left; padding:6px 12px; min-width:180px; position:sticky; left:0; background:var(--surface-1);
  border-right:1px solid var(--axis); font-size:13px; font-weight:600; z-index:3; white-space:nowrap; }
table.schatt .schatt__who .sg__dot { margin-right:8px; vertical-align:0; }
table.schatt tr.schatt__group td { background:color-mix(in srgb, var(--team, var(--axis)) 12%, var(--surface-1)); }
table.schatt tr.schatt__group .schatt__who { font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; font-weight:750;
  box-shadow:inset 3px 0 0 var(--team); background:color-mix(in srgb, var(--team, var(--axis)) 12%, var(--surface-1)); }
table.schatt td.schatt__w { cursor:pointer; }
table.schatt td.schatt__w:hover, table.schatt td[data-leave]:focus-visible { background:var(--surface-2); outline:none; box-shadow:inset 0 0 0 2px var(--brand-soft); }
table.schatt td.schatt__l { background:var(--free); color:var(--free-ink); font-weight:750; cursor:pointer; }
table.schatt td.schatt__l.is-half { background:color-mix(in srgb, var(--free) 45%, var(--surface-1)); }
table.schatt td.schatt__a { color:var(--ink-2); cursor:pointer; text-decoration:underline dotted; }
table.schatt td.schatt__fixed { background:var(--restday); }
table.schatt .schatt__tot { min-width:52px; font-weight:700; }
.schhol { margin-top:16px; }
.schhol__row { display:flex; align-items:center; gap:12px; padding:7px 0; border-bottom:1px solid var(--hair); font-size:13.5px; }
.schhol__d { font-variant-numeric:tabular-nums; font-weight:700; background:var(--surface-2); border-radius:8px; padding:3px 10px; min-width:118px; text-align:center; }
.schhol__row.is-month .schhol__d { background:var(--blush); color:var(--free-ink); }
:root[data-theme="dark"] .schhol__row.is-month .schhol__d { background:var(--free); }
.schhol__n { font-weight:600; }
.schhol__add { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.schhol__add input[type=text] { flex:1 1 220px; }

/* pieces */
.schpieces__order, .schsum__order { margin-top:14px; }
.schpieces__ohead, .schsum__ohead { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--axis); }
.schpieces__oname { font-weight:750; font-size:14px; }
.schpieces__row { display:grid; grid-template-columns:minmax(0,1fr) repeat(3, 84px); align-items:center; gap:8px; padding:8px 0;
  border-bottom:1px solid var(--hair); font-size:13.5px; }
.schpieces__row--head { font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted); font-weight:700; }
.schpieces__st { text-align:center; display:flex; justify-content:center; }
.schpieces__name { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:600; }
.schpieces__row.is-waiting { grid-template-columns:minmax(0,1fr) minmax(0,2fr); color:var(--ink-2); }
.schpieces__wait { text-align:right; }

/* order summary */
.schsum__grid { display:block; }
.schsum__row { display:grid; grid-template-columns:minmax(150px,1.3fr) repeat(4, minmax(120px,1fr)); gap:10px; align-items:start;
  padding:9px 0; border-bottom:1px solid var(--hair); }
.schsum__row--head { font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-muted); font-weight:700; padding:7px 0; }
.schsum__piece { display:flex; flex-direction:column; }
.schsum__name { font-weight:650; font-size:13.5px; }
.schstate { display:flex; flex-direction:column; gap:2px; align-items:flex-start; }
.schstate__chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:750; border-radius:7px; padding:2px 9px;
  background:var(--surface-3); color:var(--ink-2); }
.schstate__chip svg { width:12px; height:12px; }
.schstate__note { font-size:11.5px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.schstate--none .schstate__chip { background:transparent; color:var(--ink-muted); padding-left:0; }
.schstate--unsched .schstate__chip { background:color-mix(in srgb, var(--warning) 22%, var(--surface-1)); color:#5c4300; }
.schstate--planned .schstate__chip { background:color-mix(in srgb, var(--sky) 45%, var(--surface-1)); color:#164a5c; }
.schstate--progress .schstate__chip { background:var(--booked); color:var(--booked-ink); }
.schstate--done .schstate__chip { background:color-mix(in srgb, var(--good) 18%, var(--surface-1)); color:#145c14; }
:root[data-theme="dark"] .schstate--unsched .schstate__chip { background:#3d3220; color:#f1d79a; }
:root[data-theme="dark"] .schstate--planned .schstate__chip { background:#1e3a44; color:#bfe3ee; }
:root[data-theme="dark"] .schstate--done .schstate__chip { background:#1f3a2c; color:#bfe6cf; }
.prodcard__head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.prodcard__head .card__title { flex:1; }
.prodcard .schsum__row { grid-template-columns:minmax(120px,1.2fr) repeat(4, minmax(96px,1fr)); }

/* employees: short name and colour (D110) */
.empdot { width:10px; height:10px; border-radius:50%; flex:0 0 10px; display:inline-block; margin-right:2px; }
.chip--short { font-size:11px; padding:1px 8px; background:var(--surface-3); color:var(--ink-2); border-radius:7px; font-weight:700; }
@media (max-width: 760px) {
  table.sg th.sg__corner, table.sg td.sg__pname, table.sg th.sg__striphdr, table.sg th.sg__avlab { min-width:150px; max-width:150px; padding-left:10px; padding-right:8px; }
  .sg__pc { padding-left:0; }
  .sg__pn { gap:6px; }
  .sg__drag { display:none; }
  table.sg th.sg__day, table.sg th.sg__av, table.sg td.sg__cell { width:48px; min-width:48px; max-width:48px; }
  .sgchip { font-size:10px; }
  .schviews, .schteams { overflow-x:auto; max-width:100%; scrollbar-width:none; }
  .schviews button, .schteams button { padding:7px 12px; }
  .schbar .toolbar__spacer { display:none; }
  .schpieces__row { grid-template-columns:minmax(0,1fr) repeat(3, 58px); font-size:13px; }
  .schpieces__row--head { font-size:9.5px; letter-spacing:.04em; }
  .schpieces__row.is-waiting { grid-template-columns:1fr; }
  .schpieces__wait { text-align:left; }
  .schsum__row, .prodcard .schsum__row { grid-template-columns:1fr 1fr; }
  .schsum__row--head { display:none; }
  .schsum__piece { grid-column:1 / -1; }
  .schsum__row .schstate::before { content:attr(data-label); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); font-weight:700; }
}

.schleave, .schhol, .schpieces, .schsumcard, .prodcard { padding:16px 20px; }
.schhol__add input[type=date] { flex:0 0 170px; }
.sg__pc .sg__stg { margin-right:4px; }
@media (max-width: 760px) { .schleave, .schhol, .schpieces, .schsumcard, .prodcard { padding:14px; } }
.schpieces__ohead .chip, .schsum__ohead .chip { white-space:nowrap; flex-shrink:0; }

/* employee colour: any colour, by hand (Oct 27) */
.colourpick { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:38px; }
.colourpick__input { width:44px; height:34px; padding:2px; border:1px solid var(--axis); border-radius:10px; background:var(--surface-1); cursor:pointer; }
.colourpick__input::-webkit-color-swatch-wrapper { padding:2px; }
.colourpick__input::-webkit-color-swatch { border:0; border-radius:7px; }
.colourpick__chip { font-size:11.5px; font-weight:750; border-radius:7px; padding:3px 10px; border:2px solid var(--surface-1); box-shadow:var(--shadow-raise); white-space:nowrap; }
.colourpick__reset { padding:5px 12px; font-size:12px; }

.chip--short.is-unset { font-style:italic; font-weight:600; }
.input--nick { text-transform:uppercase; letter-spacing:.08em; font-weight:700; max-width:110px; }

/* Orders list on a phone (debug pass, Oct 27): the "short of the advance" chip takes its own
   line and the four figures sit two to a row, so a long total never runs off the screen */
@media (max-width: 640px) {
  .ordrow .ordrow__short { flex-basis:100%; white-space:normal; justify-content:flex-start; }
  .ordrow .ordrow__status { margin-right:100%; }
  .ordrow .enqrow__fig, .ordrow .ordrow__margin { flex:1 1 40%; min-width:0; }
  .ordrow .enqrow__figval { overflow-wrap:anywhere; }
}

/* ==========================================================================
   Schedule, Oct 28 — narrow days (two letters), the Piece column as wide as
   you drag it, one row of controls, no heading or hint text.
   ========================================================================== */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
#panel-schedule { padding-top:2px; }
.schbar { gap:10px; row-gap:8px; }
/* the month: a compact arrow of our own, right beside the month */
.schmonth__wrap { position:relative; display:inline-flex; }
.schmonth__wrap::after { content:''; position:absolute; right:12px; top:50%; width:6px; height:6px; margin-top:-5px;
  border-right:1.6px solid var(--ink-2); border-bottom:1.6px solid var(--ink-2); transform:rotate(45deg); pointer-events:none; }
select.schmonth__sel { -webkit-appearance:none; appearance:none; width:auto; padding:6px 28px 6px 14px; font-weight:650; cursor:pointer; }
/* the days: just wide enough for two letters (and ¼ ½ ¾ in front) */
table.sg th.sg__day, table.sg th.sg__av, table.sg td.sg__cell { width:32px; min-width:32px; max-width:32px; }
table.sg td.sg__cell { padding:3px 2px; }
table.sg th.sg__day { padding:5px 0; }
.sg__dnum { font-size:12px; }
.sg__dwk { font-size:8px; letter-spacing:.04em; }
.sg__todaytag { font-size:0; height:4px; margin:0 8px 2px; padding:0; }
.sgchip { font-size:10px; padding:2px 1px; border-radius:6px; letter-spacing:.02em; margin-bottom:2px; }
.sgchip b { font-weight:800; margin-right:0; font-size:9px; }
table.sg th.sg__av { font-size:10px; border-right-width:2px; border-bottom-width:2px; }
table.sg th.sg__av--booked { font-size:10px; }
/* the Piece column: its width is --sg-first, dragged by the handle on its edge */
table.sg th.sg__corner, table.sg td.sg__pname, table.sg th.sg__striphdr, table.sg th.sg__avlab {
  width:var(--sg-first, 200px); min-width:var(--sg-first, 200px); max-width:var(--sg-first, 200px); }
table.sg th.sg__corner, table.sg th.sg__striphdr { position:sticky; }
.sg__avname { max-width:none; }
.sg__resize { position:absolute; top:0; right:-4px; bottom:0; width:9px; cursor:col-resize; z-index:5; touch-action:none; }
.sg__resize::after { content:''; position:absolute; top:6px; bottom:6px; left:3px; width:3px; border-radius:2px; background:transparent; transition:background .15s; }
.sg__resize:hover::after, .sg__resize:focus-visible::after, body.is-resizing .sg__resize::after { background:var(--brand); }
.sg__resize:focus-visible { outline:none; }
body.is-resizing, body.is-resizing * { cursor:col-resize !important; user-select:none; }
@media (max-width: 760px) {
  table.sg th.sg__day, table.sg th.sg__av, table.sg td.sg__cell { width:32px; min-width:32px; max-width:32px; }
  table.sg th.sg__corner, table.sg td.sg__pname, table.sg th.sg__striphdr, table.sg th.sg__avlab {
    width:var(--sg-first, 140px); min-width:var(--sg-first, 140px); max-width:var(--sg-first, 140px); }
  .sg__resize { width:16px; right:-8px; }
}
/* one row of controls at a desktop width: tighter segments, and the save status floats so it never moves anything */
.schbar { position:relative; flex-wrap:wrap; }
.schbar .seg button { padding:6px 11px; font-size:12.5px; }
.schbar .seg__n { margin-left:4px; }
.schbar .schcheck { font-size:12.5px; white-space:nowrap; }
.schbar .schissbtn { padding:5px 11px 5px 7px; font-size:12.5px; }
.schbar .schstatus { position:absolute; right:0; top:calc(100% + 2px); white-space:nowrap; font-size:12px; pointer-events:none; z-index:3; }
@media (max-width: 760px) { .schbar .schstatus { position:static; flex-basis:100%; } }
.schbar { gap:8px; }
.schmonth { gap:2px; }
.schmonth .btn { padding:5px 9px; }
select.schmonth__sel { padding:6px 26px 6px 12px; }
.schmonth__wrap::after { right:11px; }

/* ---- Clients (D120) ------------------------------------------------------ */
.clirow .enqrow__fig { min-width:110px; }
.clihead { padding:18px 22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:16px; }
.clihead__text { flex:1; min-width:200px; }
.clihead__name { margin:0 0 4px; font-size:20px; font-weight:650; color:var(--ink-1); overflow-wrap:anywhere; }
.clihead__figs { display:flex; gap:18px; flex-wrap:wrap; }
.cli { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:16px; align-items:start; }
.cli__side { display:flex; flex-direction:column; gap:16px; min-width:0; }
.clidet { padding:16px 20px; display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.clidet__head, .clidet__wide, .clidet__dupe { grid-column:1 / -1; }
.clidet__head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.clidet__wide.listrow__meta { margin:0; }
.clidet textarea { resize:vertical; min-height:64px; font:inherit; }
.clidet__dupe { font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:-4px; }
.clisec { padding:16px 20px; }
.clisec .clienthist__row { margin-top:8px; }
.clidet__dupe[hidden] { display:none; }
.clientlink { margin-top:14px; }
@media (max-width:900px) {
  .cli { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .clihead { padding:16px; }
  .clihead__figs { width:100%; }
  .clihead__figs .enqrow__fig { flex:1 1 30%; min-width:0; align-items:flex-start; }
  .clihead > .btn { width:100%; }
  .clidet { grid-template-columns:1fr; padding:14px 16px; }
  .clirow .enqrow__fig { flex:1 1 0; min-width:0; align-items:flex-start; }
  .clisec .clienthist__row { flex-wrap:wrap; }
  .clisec .clienthist__left { flex-basis:100%; }
  .clisec .clienthist__total { margin-left:auto; }
  .clirow .enqrow__figval { overflow-wrap:anywhere; }
  .clirow > .btn { margin-left:auto; align-self:flex-end; }
  #clients-search { min-width:0; flex:1 1 100%; }
  .clirow .enqrow__name { flex-basis:100%; }
  .clirow .listrow__spacer { display:none; }
}

/* ---- Clients first (D122) ---------------------------------------------- */
.clientpick { display:flex; flex-direction:column; gap:8px; }
.clientpick__info { margin:0; }
.enqnew__add { align-self:flex-start; margin:-4px 0 14px; }
.enqnew__none { font-size:13px; color:var(--ink-2); }
.enqnew__none strong { color:var(--ink-1); }
.enqdet__client { font-weight:650; color:var(--ink-1); padding:4px 0; }
.newclient__hint { margin:-6px 0 14px; }
.drawer .clientlink { margin:-4px 0 14px; }