/* Calgary Silkscreen: bento design (Stage 7). Fonts are self-hosted (SIL OFL, see fonts/). */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/static/fonts/bricolage-grotesque.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/figtree.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/static/fonts/jetbrains-mono.woff2") format("woff2"); }

:root {
  /* ground, tiles, ink */
  --bg: #f1f2f4;
  --panel: #ffffff;
  --sunk: #f1f2f4;
  --ink: #17181c;
  --ink-2: #33353c;
  --muted: #5d616b;
  --line: #e3e5e9;
  --line-strong: #d5d8de;
  /* brand + semantic */
  --accent: #b3261e;
  --accent-ink: #ffffff;
  --accent-deep: #7d1a15;
  --ok: #1b5e2c;
  --warn: #5c4600;
  --err: #8f1d17;
  /* stage colours: bg / ink */
  --art-bg: #fdf0b8;    --art-ink: #5c4600;
  --blanks-bg: #dce9fb; --blanks-ink: #1d4a8a;
  --press-bg: #0f7f7a;  --press-ink: #ffffff;
  --qc-bg: #e9e1fb;     --qc-ink: #3f2a7a;
  --done-bg: #d5f0d8;   --done-ink: #1b5e2c;
  --idle-bg: #e6e8ec;   --idle-ink: #3c4049;
  --alert-bg: #fbe3e1;  --alert-ink: #8f1d17;
  /* method tones */
  --sp-bg: #dce9fb;     --sp-ink: #1d4a8a;
  --emb-bg: #eadffb;    --emb-ink: #4b2a8a;
  --dtf-bg: #fde3d3;    --dtf-ink: #7a3514;
  --patch-bg: #fbe8c4;  --patch-ink: #6b4400;
  /* shape */
  --radius: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(20,22,28,.06), 0 6px 18px rgba(20,22,28,.05);
  --shadow-lift: 0 18px 40px rgba(20,22,28,.22), 0 2px 6px rgba(20,22,28,.12);
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
}

/* Building blocks (see templates/_ui.html) */
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.icon-fill { fill: currentColor; stroke-width: 1.6; }
.glyph { width: 2em; height: 2em; flex: none; vertical-align: middle; }
.glyph-lg { width: 3.4em; height: 3.4em; }
.glyph-xl { width: 6.5em; height: 6.5em; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 800; line-height: 1.2; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pill .icon { width: 1em; height: 1em; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: var(--radius-md); }
.chip .glyph { width: 2.1em; height: 2.1em; }
.chip-text { display: flex; flex-direction: column; line-height: 1.25; }
.chip-text small { font-size: .82rem; }
.swatch { display: inline-flex; width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.swatch svg { width: 100%; height: 100%; }
.stage-art { background: var(--art-bg); color: var(--art-ink); }
.stage-blanks { background: var(--blanks-bg); color: var(--blanks-ink); }
.stage-press { background: var(--press-bg); color: var(--press-ink); }
.stage-qc { background: var(--qc-bg); color: var(--qc-ink); }
.stage-done { background: var(--done-bg); color: var(--done-ink); }
.stage-idle { background: var(--idle-bg); color: var(--idle-ink); }
.stage-alert { background: var(--alert-bg); color: var(--alert-ink); }
.tone-sp { background: var(--sp-bg); color: var(--sp-ink); }
.tone-emb { background: var(--emb-bg); color: var(--emb-ink); }
.tone-dtf { background: var(--dtf-bg); color: var(--dtf-ink); }
.tone-patch { background: var(--patch-bg); color: var(--patch-ink); }
.tone-idle { background: var(--idle-bg); color: var(--idle-ink); }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.45; font-size: 15px; }
main { max-width: 1440px; margin: 0 auto; padding: 24px 32px 48px; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
h1, h2, h3 { text-wrap: balance; }
h1 { font-family: var(--display); font-weight: 800; font-size: 2.1rem; letter-spacing: -0.02em; line-height: 1.05; margin: 4px 0 18px; }
h2 { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; margin: 24px 0 10px; }
h3 { font-size: 1rem; margin: 0 0 8px; }
.muted { color: var(--muted); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Shell: charcoal bar with pill navigation */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  padding: 12px 32px; background: var(--ink); color: #fff;
}
.topbar a { color: #fff; text-decoration: none; }
.brand { font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; }
.mainnav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.mainnav a { color: #c9ccd3; font-size: .9rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; }
.mainnav a:hover { color: #fff; background: rgba(255,255,255,.1); }
.mainnav a[aria-current="page"] { color: var(--ink); background: #fff; }
/* Department menus (8.2): a pill per department, its pages in a drop-down card */
.navmenu { position: relative; }
.navmenu > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: #c9ccd3; font-size: .9rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; user-select: none; }
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary:hover, .navmenu[open] > summary { color: #fff; background: rgba(255,255,255,.1); }
.navmenu.current > summary { color: var(--ink); background: #fff; }
.navmenu > summary .dept-icon { width: 1.2em; height: 1.2em; }
.navmenu > summary .glyph.dept-icon path { stroke-width: 2; }
.navmenu-caret { width: .9em; height: .9em; opacity: .7; transition: transform .12s ease; }
.navmenu[open] .navmenu-caret { transform: rotate(180deg); }
.navmenu-list { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 210px; display: grid; gap: 2px; padding: 8px; background: var(--panel); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); }
.navmenu-list a { display: block; color: var(--ink-2); padding: 9px 12px; border-radius: var(--radius-sm); font-weight: 600; white-space: nowrap; }
.navmenu-list a:hover { background: var(--sunk); color: var(--ink); }
.navmenu-list a[aria-current="page"] { background: var(--ink); color: #fff; }
/* department tones: art yellow, press teal and blanks blue carry their stage meaning */
.dept-sales { --dept-bg: var(--patch-bg); --dept-ink: var(--patch-ink); }
.dept-artwork { --dept-bg: var(--art-bg); --dept-ink: var(--art-ink); }
.dept-production { --dept-bg: var(--press-bg); --dept-ink: var(--press-ink); }
.dept-purchasing { --dept-bg: var(--blanks-bg); --dept-ink: var(--blanks-ink); }
.dept-accounting { --dept-bg: var(--done-bg); --dept-ink: var(--done-ink); }
.dept-admin { --dept-bg: var(--idle-bg); --dept-ink: var(--idle-ink); }
.dept-tile { display: flex; flex-direction: column; gap: 14px; }
.dept-tile .dept-badge { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--dept-bg); color: var(--dept-ink); }
.dept-tile .dept-badge .dept-icon { width: 30px; height: 30px; }
.dept-tile .dept-head { display: flex; align-items: center; gap: 14px; }
.dept-tile .dept-head h2 { margin: 0; font-family: var(--display); font-size: 1.4rem; }
.dept-tile .dept-head p { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.dept-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.dept-links a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--sunk); color: var(--ink); font-weight: 600; text-decoration: none; }
.dept-links a:hover { background: var(--dept-bg); color: var(--dept-ink); }
.dept-stat { font-size: .92rem; color: var(--muted); margin: 0; }
.dept-stat b { font-family: var(--mono); color: var(--ink); font-size: 1.15rem; margin-right: 4px; }
.who { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: .9rem; color: #c9ccd3; }
.who a { color: #c9ccd3; }
.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; font: inherit; }

.flash { padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 16px; background: var(--done-bg); color: var(--done-ink); font-weight: 600; }
.flash-error { background: var(--alert-bg); color: var(--alert-ink); }
.flash-warn { background: var(--art-bg); color: var(--art-ink); }
.system-alerts { display: grid; gap: 8px; margin-bottom: 16px; }
.system-alerts .alert { margin: 0; padding: 10px 16px; border-radius: var(--radius-md); background: var(--art-bg); color: var(--art-ink); }
.system-alerts .alert-error { background: var(--alert-bg); color: var(--alert-ink); }
.system-alerts .alert b { margin-right: 6px; }
.system-alerts .alert a { color: inherit; font-weight: 600; margin-left: 6px; }
/* Warning-level alerts: small pills in the top bar; the message opens under the bar (no JS) */
.topbar { position: relative; }
.alert-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.alert-pill > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 800; line-height: 1.2; padding: 4px 10px; border-radius: 999px; background: var(--art-bg); color: var(--art-ink); white-space: nowrap; }
.alert-pill > summary::-webkit-details-marker { display: none; }
.alert-pill > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.alert-pill[open] > summary { box-shadow: 0 0 0 2px var(--art-ink); }
.alert-pill-count { font-family: var(--mono); }
.alert-pill-body { position: absolute; z-index: 20; top: 100%; right: 32px; width: min(26rem, calc(100vw - 32px)); padding: 12px 16px; border-radius: var(--radius-md); background: var(--art-bg); color: var(--art-ink); box-shadow: var(--shadow); font-size: .9rem; }
.alert-pill-body p { margin: 0 0 8px; }
.alert-pill-body p:last-child { margin-bottom: 0; }
.alert-pill-body a { color: inherit; font-weight: 700; text-decoration: underline; }
@media (max-width: 700px) { .alert-pill-body { left: 16px; right: 16px; width: auto; } }

/* Tiles: every panel is a bento tile */
.panel, .tile, .dash-tile {
  background: var(--panel); border: 0; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 16px; min-width: 0;
}
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.tiles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.tiles .tile { margin: 0; }
a.tile { display: block; text-decoration: none; color: var(--ink); font-weight: 700; transition: transform .12s ease, box-shadow .12s ease; }
a.tile:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,22,28,.08), 0 12px 26px rgba(20,22,28,.08); color: var(--ink); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-bottom: 16px; }
.bento > * { margin: 0; min-width: 0; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; } .span-12 { grid-column: span 12; }
.rows-2 { grid-row: span 2; }
@media (max-width: 1100px) { .span-3, .span-4, .span-5 { grid-column: span 6; } .span-7, .span-8, .span-9 { grid-column: span 12; } }
@media (max-width: 700px) { .bento > * { grid-column: span 12; } .rows-2 { grid-row: auto; } }
.tile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
/* UI convention: a tile's Edit control sits at the top-right of its header row */
.tile-head > .tile-edit { margin-left: auto; }
.tile-head .grow, .grow { flex: 1; }
.big { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; }
.big-num { font-family: var(--mono); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.02em; line-height: 1.1; }
.stage-tile { color: inherit; }
.stage-press .muted, .stage-press a { color: #e8fbf9; }

/* Tables live inside tiles, or become tiles of their own */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border-radius: var(--radius-md); overflow: hidden; }
.table-wrap { position: relative; overflow-x: auto; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; }
.panel .table-wrap, .dash-tile .table-wrap { box-shadow: none; border-radius: var(--radius-sm); margin-bottom: 0; }
/* The mapping screen's sample shows real supplier cells; a 2 KB multi-line description must not
   turn the page into a 10,000 px column. One line each, cut with an ellipsis. */
.map-form .table-wrap td { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: var(--panel); }
tbody tr:hover td { background: #fafbfc; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
th.num { font-family: var(--font); }

/* Forms */
form.stack { display: grid; gap: 14px; max-width: 640px; }
form.stack label, .field { display: grid; gap: 6px; font-weight: 700; font-size: .85rem; color: var(--ink-2); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.grid-2.align-start { align-items: start; }
input, select, textarea { font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font-weight: 500; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(179,38,30,.25); border-color: var(--accent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--ok); padding: 0; }
.check { display: flex !important; align-items: center; gap: 10px; font-weight: 600 !important; }
.btn, button[type="submit"], .btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 10px 18px; border-radius: 14px; border: 0;
  background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 0 var(--accent-deep); transition: transform .08s ease;
}
.btn:hover, button[type="submit"]:hover, .btn-primary:hover { color: var(--accent-ink); filter: brightness(1.05); }
.btn:active, button[type="submit"]:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--accent-deep); }
.btn-secondary, button.btn-secondary[type] { background: #fff; color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; font-weight: 600; }
.btn-secondary:hover, button.btn-secondary[type]:hover { color: var(--ink); background: var(--sunk); filter: none; }
.btn-go, button.btn-go[type] { background: #1e8a3c; color: #fff; box-shadow: 0 2px 0 #145c28; }
.btn-dark, button.btn-dark[type] { background: var(--ink); color: #fff; box-shadow: 0 2px 0 #000; }
.error { color: var(--err); font-weight: 600; }
.errors { background: var(--alert-bg); color: var(--alert-ink); padding: 12px 16px; border-radius: var(--radius-md); font-weight: 600; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 16px; }
.toolbar h1 { margin-bottom: 0; margin-right: auto; }
.toolbar form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }

/* Badges are pills; ok/warn map to the stage colours */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 800; line-height: 1.2; padding: 4px 10px; border-radius: 999px; background: var(--idle-bg); color: var(--idle-ink); vertical-align: middle; white-space: nowrap; }
.badge-ok { background: var(--done-bg); color: var(--done-ink); }
.badge-warn { background: var(--art-bg); color: var(--art-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
dl.facts dt { color: var(--muted); font-weight: 600; }
dl.facts dd { margin: 0; }
pre.diff { white-space: pre-wrap; font-size: .8rem; margin: 0; max-width: 480px; font-family: var(--mono); }
pre.email-body { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: .9rem; margin: 16px 0 0; padding: 14px; border: 1px solid var(--line, #ddd); border-radius: 8px; }
.login-box { max-width: 420px; margin: 56px auto; padding: 28px; }
.empty { color: var(--muted); padding: 18px; text-align: center; border: 2px dashed var(--line-strong); border-radius: var(--radius-md); }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding: 5px; background: var(--panel); border-radius: 999px; box-shadow: var(--shadow); width: fit-content; max-width: 100%; }
.tabs a { padding: 7px 14px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .9rem; border-radius: 999px; }
.tabs a[aria-current="page"] { color: #fff; background: var(--ink); }

/* Tablet surface: big targets, high contrast (SPEC: large touch targets) */
.surface-floor { font-size: 17px; }
.surface-floor main { padding: 18px 20px 28px; }
.surface-floor .topbar { padding: 10px 20px; }
.btn-lg { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; min-height: 48px; font-size: 1.05rem; border-radius: 14px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn-xl {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 96px; padding: 16px;
  font-size: 1.35rem; font-weight: 800; border-radius: 20px; border: 0; background: var(--ink); color: #fff;
  text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 #000;
}
.btn-xl:hover { color: #fff; }
.btn-xl.btn-secondary { background: #fff; color: var(--ink); box-shadow: 0 3px 0 #c9ccd3; border: 0; }
.btn-xl.btn-go { background: #1e8a3c; box-shadow: 0 3px 0 #145c28; }
.floor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* Portal surface: the same bento, customer-facing */
.surface-portal main { max-width: 960px; }

/* Quote builder */
.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.quote-totals { position: sticky; top: 12px; }
@media (max-width: 900px) { .quote-layout { grid-template-columns: 1fr; } .quote-totals { position: static; } }
.stack-wide { display: grid; gap: 12px; }
.size-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.size-cell { width: 64px; text-align: center; }
.size-cell input { width: 100%; text-align: center; }
.deco-table { margin: 8px 0; }
.deco-table td, .deco-table th { padding: 6px; }
.line-total { text-align: right; margin: 8px 0 0; }
table.totals { border: 0; }
table.totals th { color: var(--ink); font-weight: 400; font-size: .95rem; }
table.totals tr.subtotal th, table.totals tr.subtotal td { border-top: 2px solid var(--line); }
table.totals tr.grand th, table.totals tr.grand td { font-weight: 700; font-size: 1.1rem; }
.margin-box { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--done-bg); color: var(--done-ink); }
.margin-box p { margin: 2px 0; }
.sticky-actions { position: sticky; bottom: 0; padding: 10px 0; background: var(--bg); }
details summary { cursor: pointer; margin: 8px 0; }
.quote-side { position: sticky; top: 12px; display: grid; gap: 12px; }
.quote-side .quote-totals { position: static; }
@media (max-width: 900px) { .quote-side { position: static; } }
button[disabled] { opacity: .5; cursor: not-allowed; }
.quote-main { min-width: 0; }
.quote-main .grid-2 > * { min-width: 0; }
select, input { max-width: 100%; }
.deco-table { display: block; overflow-x: auto; }
.deco-table input:not([type="hidden"]), .deco-table select { width: 100%; min-width: 70px; }
.quote-side { min-width: 0; }
.quote-side select, .quote-side textarea { width: 100%; }
img.mockup { max-width: 100%; max-height: 420px; border-radius: var(--radius-md); background: #e7e9ec; }
ol.steps { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 16px 0; counter-reset: step; }
ol.steps li { flex: 1 1 120px; padding: 10px; background: var(--idle-bg); border-radius: var(--radius-sm); text-align: center; color: var(--muted); font-weight: 600; font-size: .9rem; }
ol.steps li.done { background: var(--done-bg); color: var(--done-ink); }
ol.steps li.current { background: var(--press-bg); color: var(--press-ink); font-weight: 800; }
.fields { display: grid; gap: 12px; max-width: 640px; margin-top: 12px; }
.pre-line { white-space: pre-line; }
.receive input.count { width: 5em; font-size: 1.3rem; padding: 8px; }
.receive td, .receive th { padding: 10px 8px; }
.floor-list { display: grid; gap: 12px; }
.job-tile { text-align: left; }
.job-tile.running { outline: 3px solid #1b7f3b; }
.count-inputs { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 12px; margin-bottom: 16px; }
.count-inputs input { font-size: 1.4rem; padding: 10px; }
.big-counts { font-size: 1.3rem; }
.check.big { font-size: 1.15rem; padding: 6px 0; }
.capacity td.full { background: #fde2e1; }
.capacity td.part { background: #e8f3ea; }
tr.late td { color: #b3261e; }
[hidden] { display: none !important; }  /* elements styled with display must still hide */
.signature { border: 2px dashed var(--line-strong); border-radius: var(--radius-md); background: #fff; touch-action: none; max-width: 100%; }

/* Management dashboard */
.dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.dash-tile h2 { margin-top: 0; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dash-tile .big { font-size: 1.6rem; }
.dash-tile table { width: 100%; }
.bars { list-style: none; padding: 0; margin: 0; }
.bars li { display: grid; grid-template-columns: 1fr 90px 2.5em; gap: 8px; align-items: center; padding: 3px 0; }
.bars meter { width: 100%; }
.bars b { text-align: right; }

/* Page head: crumbs, title with job name, actions */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 18px; }
.page-head h1 { margin: 0; }
.crumbs { margin: 0 0 4px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.h1-sub { font-weight: 500; color: var(--muted); }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.tile .eyebrow { margin: 0 0 8px; }
.tile-title { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 4px; }
.tile-title a { color: inherit; text-decoration: none; }
.tile-title a:hover { text-decoration: underline; }
.tile p { margin: 0 0 6px; }
.small { font-size: .82rem; }
.row { display: flex; align-items: center; gap: 8px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

/* Customer + delivery */
.tile-split { display: flex; gap: 20px; flex-wrap: wrap; }
.tile-split > .grow { min-width: 220px; }
.delivery { width: 260px; max-width: 100%; }
.delivery-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 18px; background: var(--sunk); margin-bottom: 6px; }
.delivery-option { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; color: var(--muted); font-size: .82rem; font-weight: 600; text-align: center; }
.delivery-option .icon, .delivery-option .glyph { width: 28px; height: 28px; }
.delivery-done { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; font-weight: 700; }
.delivery-done .icon, .delivery-done .glyph { width: 26px; height: 26px; }

/* Stage tile: the order's colour */
.stage-tile { display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); }
.stage-tile.stage-press { box-shadow: 0 8px 22px rgba(15,127,122,.25); }
.stage-tile .eyebrow { color: inherit; opacity: .85; margin: 0; }
.stage-tile .tile-head { margin-bottom: 4px; }
.stage-tile .big { font-size: 1.8rem; }
.stage-tile .pill.stage-alert { background: #fff; }
.stage-foot { margin-top: auto; display: grid; gap: 6px; font-size: .85rem; font-weight: 600; }
meter.progress { width: 100%; height: 10px; border-radius: 999px; }
meter.progress::-webkit-meter-bar { background: rgba(0,0,0,.08); border: 0; border-radius: 999px; height: 10px; }
meter.progress::-webkit-meter-optimum-value, meter.progress::-webkit-meter-suboptimum-value { background: currentColor; border-radius: 999px; }
meter.progress::-moz-meter-bar { background: currentColor; border-radius: 999px; }
.stage-press meter.progress::-webkit-meter-bar { background: rgba(255,255,255,.25); }

/* Artwork: the largest tile */
.art-tile { display: flex; flex-direction: column; }
.art-grid { flex: 1; display: grid; gap: 12px; }
.art-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.art-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.art-frame { position: relative; margin: 0; border-radius: 18px; background: #e7e9ec; display: flex; align-items: center; justify-content: center; min-height: 280px; overflow: hidden; }
.art-frame img { max-width: 100%; max-height: 460px; object-fit: contain; }
.art-tags { position: absolute; left: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.pill-dark { background: var(--ink); color: #fff; }
.pill-light { background: #fff; color: var(--ink); }
.art-empty { flex: 1; min-height: 240px; border-radius: 18px; border: 2px dashed var(--line-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); text-align: center; padding: 16px; }
.art-empty .icon { width: 36px; height: 36px; }

/* Garment tile */
.garment { display: flex; gap: 16px; align-items: flex-start; }
.garment + .garment { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.garment-glyph { width: 116px; height: 116px; flex: none; border-radius: 18px; background: var(--sunk); display: flex; align-items: center; justify-content: center; }
.garment-glyph .glyph-xl { width: 88px; height: 88px; }
dl.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; margin: 10px 0 0; }
dl.sizes > div { border-radius: 12px; background: var(--sunk); padding: 6px 0; text-align: center; }
dl.sizes dt { font-size: .72rem; font-weight: 700; color: var(--muted); }
dl.sizes dd { margin: 0; font-family: var(--mono); font-weight: 700; font-size: 1.05rem; }
dl.sizes .sizes-total { background: var(--ink); }
dl.sizes .sizes-total dt { color: #c9ccd3; }
dl.sizes .sizes-total dd { color: #fff; }

/* Press colours: in press order */
.colour-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
ol.ink-order { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: ink; }
ol.ink-order li { counter-increment: ink; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--sunk); font-weight: 700; font-size: .88rem; }
ol.ink-order li::before { content: counter(ink); font-family: var(--mono); font-size: .75rem; width: 20px; height: 20px; border-radius: 999px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; }

/* Journey */
ol.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
ol.journey li { font-size: .72rem; font-weight: 600; color: var(--muted); padding-top: 16px; position: relative; line-height: 1.2; }
ol.journey li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 999px; background: var(--line); }
ol.journey li.step-done::before { background: var(--ink); }
ol.journey li.step-current { color: var(--press-bg); font-weight: 800; }
ol.journey li.step-current::before { background: var(--press-bg); }
dl.facts-tight { gap: 6px 14px; font-size: .92rem; }

/* Line editing and shipping choice */
.line-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.line-edit fieldset { border: 0; border-radius: var(--radius-md); background: var(--sunk); padding: 12px 14px; display: grid; gap: 10px; margin: 0; }
.line-edit legend { font-weight: 800; padding: 0; float: left; margin-bottom: 4px; }
.ship-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ship-choice form { display: block; }
.choice-btn, button.choice-btn[type] {
  width: 100%; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: 18px; border: 0; background: var(--sunk); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; box-shadow: none;
}
.choice-btn:hover, button.choice-btn[type]:hover { background: var(--blanks-bg); color: var(--blanks-ink); filter: none; }
.choice-btn.choice-pickup:hover { background: var(--done-bg); color: var(--done-ink); }
.choice-btn .icon, .choice-btn .glyph { width: 32px; height: 32px; }
@media (max-width: 700px) { main { padding: 16px 16px 40px; } .topbar { padding: 10px 16px; } h1 { font-size: 1.7rem; } .delivery { width: 100%; } .art-grid-2, .art-grid-3 { grid-template-columns: 1fr; } }

/* Stage colours win over the plain tile background */
.tile.stage-art { background: var(--art-bg); color: var(--art-ink); }
.tile.stage-blanks { background: var(--blanks-bg); color: var(--blanks-ink); }
.tile.stage-press { background: var(--press-bg); color: var(--press-ink); }
.tile.stage-qc { background: var(--qc-bg); color: var(--qc-ink); }
.tile.stage-done { background: var(--done-bg); color: var(--done-ink); }
.tile.stage-idle { background: var(--idle-bg); color: var(--idle-ink); }
.tile.stage-alert { background: var(--alert-bg); color: var(--alert-ink); }
.tile.stage-press a { color: #fff; }

/* A bento whose tiles flow and fill the row (for the working tiles under the summary) */
.bento-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-flow: row dense; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.bento-flow > * { margin: 0; min-width: 0; }
.bento-flow > .wide { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .mainnav { order: 3; flex: 1 1 100%; flex-wrap: wrap; gap: 4px; }  /* every department stays reachable: the pills wrap instead of scrolling off the edge */
  .mainnav a { white-space: nowrap; }
  .topbar { position: relative; }
  .navmenu { position: static; }
  .navmenu-list { left: 16px; right: 16px; top: auto; margin-top: 8px; }
  .art-frame { min-height: 200px; }
}
.h1-badge { font-family: var(--font); font-size: .8rem; vertical-align: middle; }

/* Production board */
.method-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; background: var(--panel); box-shadow: var(--shadow); }
.method-tab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; font-weight: 700; font-size: .9rem; text-decoration: none; }
.method-tab .glyph { width: 22px; height: 22px; }
.method-tab .count { font-family: var(--mono); font-size: .75rem; padding: 2px 7px; border-radius: 999px; background: #fff; color: var(--ink); }
.btn-sm, button.btn-sm[type] { min-height: 34px; padding: 6px 12px; font-size: .85rem; border-radius: 10px; }
.btn-light, button.btn-light[type] { background: #fff; color: var(--press-bg); box-shadow: none; min-height: 38px; padding: 8px 14px; font-weight: 800; }
.watch-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.16); margin: 0 0 8px; }
.stage-alert .watch-row, .stage-done .watch-row { background: rgba(255,255,255,.6); }
.method-board { margin: 8px 0 28px; scroll-margin-top: 16px; }
.method-head { margin: 0 0 12px; }
.method-head .chip { font-size: 1rem; }
.lanes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.lane { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.lane-pile { background: var(--art-bg); color: var(--art-ink); }
.lane.drop { outline: 3px dashed var(--press-bg); outline-offset: -3px; background: #e2f5f3; }
.lane-head { display: flex; align-items: flex-start; gap: 8px; }
.lane-head h3 { font-family: var(--display); font-weight: 800; font-size: 1.1rem; margin: 0; }
.lane .empty { padding: 14px; }
.lane-pile .empty { border-color: rgba(92,70,0,.3); color: inherit; }
ol.week-load { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
ol.week-load li { display: grid; gap: 3px; text-align: center; font-size: .7rem; font-weight: 700; color: var(--muted); }
ol.week-load meter { width: 100%; height: 8px; }
ol.week-load meter::-webkit-meter-bar { background: var(--line); border: 0; border-radius: 999px; height: 8px; }
ol.week-load meter::-webkit-meter-optimum-value { background: #8fb4e8; border-radius: 999px; }
ol.week-load li.full meter::-webkit-meter-optimum-value { background: var(--accent); }
ol.week-load meter::-moz-meter-bar { background: #8fb4e8; }
ol.week-load li.full meter::-moz-meter-bar { background: var(--accent); }
ol.week-load li.full { color: var(--accent); }
.job-card { background: #fff; color: var(--ink); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(20,22,28,.08), 0 4px 10px rgba(20,22,28,.05); }
.job-card[draggable="true"] { cursor: grab; }
.job-card[draggable="true"]:active { cursor: grabbing; }
.job-card.card-running { background: var(--press-bg); color: var(--press-ink); }
.job-card.card-running a { color: #fff; }
.job-card.card-paused { background: #fff7d6; }
.job-card.card-scheduled { background: #f7f8f9; }
.card-top { display: flex; align-items: center; gap: 10px; }
.card-glyph { width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--sunk); display: flex; align-items: center; justify-content: center; }
.card-running .card-glyph { background: rgba(255,255,255,.9); }
.card-glyph .glyph { width: 34px; height: 34px; }
.card-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.card-who span { font-size: .82rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.card-chips .due { font-family: var(--mono); }
.card-where { margin: 0; font-size: .82rem; opacity: .85; }
.card-running meter.progress::-webkit-meter-bar { background: rgba(255,255,255,.25); }
.job-card details.move summary { cursor: pointer; font-size: .85rem; font-weight: 700; }
.job-card .toolbar { margin: 8px 0 0; }
.tile[class*="stage-"] .eyebrow, .lane-pile .muted { color: inherit; opacity: .85; }

/* Quote builder */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.quote-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
.quote-main > form > .tile, .quote-main > form > .bento { margin-bottom: 16px; }
.toggle-rush { align-self: end; }
.toggle-rush input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-rush span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border-radius: 14px; border: 1px dashed var(--accent); color: var(--alert-ink); font-weight: 700; cursor: pointer; }
.toggle-rush input:checked + span { background: var(--alert-bg); border-style: solid; }
.toggle-rush input:checked + span .icon { fill: var(--accent); }
.toggle-rush input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.line-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.line-head h2 { margin: 0; }
.garment-glyph-md { width: 72px; height: 72px; }
.garment-glyph-md .glyph { width: 54px; height: 54px; }
.line-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; margin-bottom: 14px; }
@media (max-width: 900px) { .line-body { grid-template-columns: 1fr; } .quote-layout { grid-template-columns: 1fr; } }
fieldset.swatches { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
fieldset.swatches legend { font-weight: 700; font-size: .85rem; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.swatch-pick { position: relative; cursor: pointer; }
.swatch-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch-pick .swatch { width: 32px; height: 32px; border-radius: 999px; padding: 3px; }
.swatch-pick input:checked + .swatch { box-shadow: 0 0 0 3px var(--accent); }
.swatch-pick input:focus-visible + .swatch { outline: 3px solid var(--accent); outline-offset: 2px; }
.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; margin: 0; }
.size-cell { width: auto; border-radius: 14px; background: var(--sunk); padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .75rem; font-weight: 700; color: var(--muted); }
.size-cell input { width: 100%; text-align: center; font-family: var(--mono); font-weight: 700; font-size: 1.05rem; padding: 6px 2px; }
.size-total { background: var(--ink); color: #c9ccd3; justify-content: center; }
.size-total strong { color: #fff; font-family: var(--mono); font-size: 1.3rem; }
.deco-list { display: grid; gap: 8px; margin-bottom: 10px; }
.deco-row { display: grid; grid-template-columns: 44px minmax(150px, 1.2fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(90px, auto) auto auto; gap: 10px; align-items: end; padding: 10px 12px; border-radius: 18px; }
.deco-row .field { color: inherit; }
.deco-row > * { min-width: 0; }
.deco-row .field, .deco-row .field label { grid-template-columns: minmax(0, 1fr); }
.deco-row select { width: 100%; min-width: 0; }
.location-field details summary { font-size: .8rem; margin: 4px 0 0; }
.location-field details[open] { display: grid; gap: 6px; }
.deco-glyph { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; align-self: center; }
.deco-glyph .glyph { width: 30px; height: 30px; }
.deco-price { display: flex; flex-direction: column; align-self: center; font-size: .75rem; }
.deco-price b { font-size: 1.05rem; }
.deco-override { align-self: center; }
.deco-override summary { font-size: .85rem; font-weight: 700; margin: 0; }
.deco-override[open] { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.deco-override[open] summary { grid-column: 1 / -1; }
.deco-row .link { align-self: center; }
/* The logo or artwork on a decoration (14.9): a full-width strip at the foot of the row. */
.deco-art { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.deco-art-item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.deco-art-thumb { max-width: 96px; max-height: 64px; width: auto; height: auto; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid rgba(0,0,0,.12); }
.deco-art-file { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(0,0,0,.06); }
.deco-art-file svg { width: 22px; height: 22px; }
.deco-art-name { overflow-wrap: anywhere; font-size: .85rem; }
@media (max-width: 1100px) { .deco-row { grid-template-columns: 44px repeat(2, minmax(0, 1fr)); } .deco-row .deco-glyph { grid-row: span 2; } .deco-row .deco-price, .deco-row .deco-override:not([open]) { grid-column: auto; } .deco-row .deco-override:not([open]) { grid-column: 2; } .deco-row .link { grid-column: 3; } }
/* Tablet/phone: the 4th child used to land in the 44px icon column (a squeezed Colours box), so the icon spans two rows and the rest start in column 2; on a phone the icon goes so the selects have room. */
@media (max-width: 560px) { .deco-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .deco-row .deco-glyph { display: none; } .deco-row .deco-override:not([open]) { grid-column: 1; } .deco-row .link { grid-column: 2; } .deco-override[open] { grid-column: 1 / -1; } }
.line-total { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); text-align: right; }
.blank-picker { display: grid; gap: 12px; margin-bottom: 14px; }
.blank-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.blank-pick { position: relative; cursor: pointer; }
.blank-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.blank-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 16px; background: var(--sunk); border: 2px solid transparent; min-height: 100%; }
.blank-card .glyph { width: 34px; height: 34px; margin-bottom: 4px; }
.blank-card small { font-size: .78rem; color: var(--muted); line-height: 1.25; }
.blank-pick input:checked + .blank-card { border-color: var(--ink); background: #fff; box-shadow: var(--shadow); }
.blank-pick input:focus-visible + .blank-card { outline: 3px solid var(--accent); outline-offset: 2px; }
.fee-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 10px; }
.price-tile { background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(20,22,28,.25); }
.price-tile .eyebrow { color: #9aa0aa; margin: 0 0 6px; }
.price-tile .big-num { font-size: 2.4rem; margin: 0; }
.price-sub { color: #c9ccd3; font-size: .88rem; margin: 2px 0 14px; }
.price-label { color: #9aa0aa; font-size: .8rem; margin: 0 0 2px; }
.price-head-tax { list-style: none; margin: 6px 0 4px; padding: 0; font-size: .92rem; color: #c9ccd3; }
.price-head-tax li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.price-head-tax .price-head-total { border-top: 1px solid #33353c; margin-top: 4px; padding-top: 6px; color: #fff; font-size: 1.25rem; font-weight: 800; }
.price-tile table.totals { background: transparent; }
.price-tile table.totals th, .price-tile table.totals td { background: transparent; color: #c9ccd3; border-color: #33353c; text-transform: none; letter-spacing: 0; font-size: .9rem; padding: 7px 0; }
.price-tile table.totals td { color: #fff; }
.price-tile table.totals tbody tr:hover td { background: transparent; }
.price-tile table.totals tr.grand th, .price-tile table.totals tr.grand td { color: #fff; font-weight: 800; font-size: 1rem; }
.price-tile .margin-box { background: var(--done-bg); color: var(--done-ink); }
.sticky-actions { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(to top, var(--bg) 70%, transparent); z-index: 2; }
.quote-side { top: 16px; }
button.link[type], button.link[type]:hover { background: none; border: 0; box-shadow: none; min-height: 0; padding: 0; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; filter: none; }
.fee-row { display: flex; flex-wrap: wrap; align-items: end; }
.fee-row .field { flex: 1 1 160px; }

/* Stage colours win over the plain badge */
.badge.stage-art { background: var(--art-bg); color: var(--art-ink); }
.badge.stage-blanks { background: var(--blanks-bg); color: var(--blanks-ink); }
.badge.stage-press { background: var(--press-bg); color: var(--press-ink); }
.badge.stage-qc { background: var(--qc-bg); color: var(--qc-ink); }
.badge.stage-done { background: var(--done-bg); color: var(--done-ink); }
.badge.stage-idle { background: var(--idle-bg); color: var(--idle-ink); }
.badge.stage-alert { background: var(--alert-bg); color: var(--alert-ink); }
.badge.tone-sp, .pill.tone-sp { background: var(--sp-bg); color: var(--sp-ink); }
.badge.tone-emb, .pill.tone-emb { background: var(--emb-bg); color: var(--emb-ink); }
.badge.tone-dtf, .pill.tone-dtf { background: var(--dtf-bg); color: var(--dtf-ink); }
.badge.tone-patch, .pill.tone-patch { background: var(--patch-bg); color: var(--patch-ink); }
.badge.tone-idle, .pill.tone-idle { background: var(--idle-bg); color: var(--idle-ink); }

/* Tablet: tiles and the job screen */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 1.05rem; text-decoration: none; padding: 10px 14px 10px 8px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); color: var(--ink); min-height: 48px; }
.floor-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.btn-xl.floor-tile { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; min-height: 150px; padding: 18px; text-align: left; box-shadow: var(--shadow); font-size: 1.2rem; }
.btn-xl.floor-tile small { font-size: .9rem; font-weight: 600; opacity: .85; }
.btn-xl.floor-tile.tone-idle { background: var(--panel); color: var(--ink); }
.btn-xl.floor-tile.stage-press { box-shadow: 0 8px 22px rgba(15,127,122,.3); }
.floor-tile-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.7); display: inline-flex; align-items: center; justify-content: center; }
.stage-press .floor-tile-icon { background: rgba(255,255,255,.18); }
.floor-tile-icon .glyph, .floor-tile-icon .icon { width: 32px; height: 32px; }
.btn-xl.floor-job-tile { justify-content: flex-start; gap: 14px; text-align: left; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); font-size: 1.15rem; font-weight: 600; padding: 14px 18px; }
.btn-xl.floor-job-tile small { font-weight: 500; font-size: .9rem; opacity: .85; }
.btn-xl.floor-job-tile.stage-press { background: var(--press-bg); color: var(--press-ink); }
.btn-xl.floor-job-tile.stage-art { background: var(--art-bg); color: var(--art-ink); }
.btn-xl.floor-job-tile.stage-qc { background: var(--qc-bg); color: var(--qc-ink); }
.btn-xl.floor-job-tile.stage-done { background: var(--done-bg); color: var(--done-ink); }
.btn-xl.floor-job-tile.stage-alert { background: var(--alert-bg); color: var(--alert-ink); }
.btn-xl.floor-job-tile .icon { width: 28px; height: 28px; }
.floor-job-num { width: 40px; height: 40px; flex: none; border-radius: 999px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 1rem; }
.stage-press .floor-job-num { background: #fff; color: var(--press-bg); }
.job-tile.running { outline: 0; }
.floor-job .job-title { font-size: 1.7rem; margin: 2px 0 8px; }
.floor-job .job-title .badge { font-size: .8rem; }
.surface-floor .garment-glyph { width: 110px; height: 110px; }
ol.ink-order-big { flex-direction: column; margin-bottom: 10px; }
ol.ink-order-big li { font-size: 1.1rem; padding: 8px 14px 8px 8px; }
ol.ink-order-big li::before { width: 28px; height: 28px; font-size: .9rem; }
ol.ink-order-big .swatch { width: 26px; height: 26px; }
.counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* The form's default button (Enter / "Go" on the keypad submits through it): present, not seen */
.default-submit, button.default-submit[type] { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; box-shadow: none; }
.count-box { border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px 6px; font-weight: 700; }
.count-box b { font-family: var(--mono); font-size: 2.4rem; line-height: 1; }
.count-box small { font-size: .8rem; }
.floor-actions { margin-top: 4px; }
.count-inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.count-inputs input { font-size: 1.6rem; padding: 12px; font-family: var(--mono); text-align: center; min-height: 64px; }
.floor-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.floor-buttons .icon { width: 30px; height: 30px; }
.qc-art .art-frame { min-height: 220px; }
#offline-banner { display: flex; align-items: center; gap: 10px; }
@media (max-width: 900px) { .floor-job > .span-7, .floor-job > .span-5 { grid-column: span 12; } }
.count-inputs .field { min-width: 0; }
.count-inputs input { width: 100%; min-width: 0; }
@media (min-width: 901px) { .floor-job > .span-7 { grid-column: span 7; } .floor-job > .span-5 { grid-column: span 5; } }

/* Tablet tiles take their stage or method colour */
.btn-xl.floor-tile.stage-art { background: var(--art-bg); color: var(--art-ink); }
.btn-xl.floor-tile.stage-blanks { background: var(--blanks-bg); color: var(--blanks-ink); }
.btn-xl.floor-tile.stage-press { background: var(--press-bg); color: var(--press-ink); }
.btn-xl.floor-tile.stage-qc { background: var(--qc-bg); color: var(--qc-ink); }
.btn-xl.floor-tile.stage-done { background: var(--done-bg); color: var(--done-ink); }
.btn-xl.floor-tile.stage-idle { background: var(--idle-bg); color: var(--idle-ink); }
.btn-xl.floor-tile.stage-alert { background: var(--alert-bg); color: var(--alert-ink); }
.btn-xl.floor-tile.tone-sp { background: var(--sp-bg); color: var(--sp-ink); }
.btn-xl.floor-tile.tone-emb { background: var(--emb-bg); color: var(--emb-ink); }
.btn-xl.floor-tile.tone-dtf { background: var(--dtf-bg); color: var(--dtf-ink); }
.btn-xl.floor-tile.tone-patch { background: var(--patch-bg); color: var(--patch-ink); }
.btn-xl.floor-tile:hover { filter: brightness(.97); }

/* Panels take stage colours too */
.panel.stage-art { background: var(--art-bg); color: var(--art-ink); }
.panel.stage-blanks { background: var(--blanks-bg); color: var(--blanks-ink); }
.panel.stage-press { background: var(--press-bg); color: var(--press-ink); }
.panel.stage-qc { background: var(--qc-bg); color: var(--qc-ink); }
.panel.stage-done { background: var(--done-bg); color: var(--done-ink); }
.panel.stage-idle { background: var(--idle-bg); color: var(--idle-ink); }
.panel.stage-alert { background: var(--alert-bg); color: var(--alert-ink); }

/* Customer portal */
.surface-portal main { max-width: 760px; }
.portal-kicker { margin: 0; font-weight: 600; }
.portal-bento { gap: 14px; }
.btn-block, button.btn-block[type] { width: 100%; min-height: 52px; font-size: 1.05rem; }
.action-tile { display: flex; flex-direction: column; gap: 12px; }
.action-row { display: flex; align-items: center; gap: 14px; }
.action-row p { margin: 0; }
.action-tile .garment-glyph { background: #fff; }
.garment-glyph .icon { width: 36px; height: 36px; }
.portal-orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.portal-order { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 18px; text-decoration: none; transition: transform .12s ease; }
.portal-order:hover { transform: translateY(-2px); }
.portal-order b { font-size: 1.05rem; }
.portal-order span:not(.badge) { font-size: .9rem; }
.portal-order .badge { background: rgba(255,255,255,.7); color: inherit; }
.portal-order.stage-press .badge { background: rgba(255,255,255,.2); }
.portal-order small { font-size: .8rem; margin-top: auto; }
.portal-order.stage-press, .portal-order.stage-press:hover { color: #fff; }
ul.quote-rows li a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--sunk); color: var(--ink); text-decoration: none; }
ul.quote-rows li a:hover { background: var(--line); }
.colour-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border-radius: 999px; background: var(--sunk); font-weight: 700; font-size: .9rem; margin: 0 4px 4px 0; }
.surface-portal .art-frame img { max-height: 520px; }
.surface-portal .price-tile .big-num { font-size: 2.2rem; }
.tile > h2:first-child, .tile > h3:first-child, .tile-head h2, .lane-head h3 { margin-top: 0; }
.check.big input[type="checkbox"] { width: 26px; height: 26px; flex: none; }
.art-frame + dl.facts { margin-top: 14px; }

/* Production overview (live page) */
.overview-tile .big { font-size: 2.6rem; }
.overview-tile .eyebrow { margin: 0; }
.overview-tile .small { margin: 2px 0 0; opacity: .85; }
.order-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.6); color: inherit; text-decoration: none; }
.stage-press .order-chip { background: rgba(255,255,255,.16); }
.order-chip .glyph { width: 30px; height: 30px; }
.order-chip small { opacity: .85; }
.order-chip:hover { background: rgba(255,255,255,.85); color: inherit; }
.stage-press .order-chip:hover { background: rgba(255,255,255,.25); color: #fff; }
.rush-bolt { color: var(--accent); }
.machine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.machine-card { border-radius: 18px; padding: 14px; display: grid; gap: 8px; }
.machine-card p { margin: 0; }
.machine-card.tone-idle { background: var(--sunk); color: var(--ink); }
.machine-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.stage-press .machine-icon { background: rgba(255,255,255,.18); color: #fff; }
.machine-icon .glyph { width: 26px; height: 26px; }

/* Dashboard tiles coloured by data-stage (keeps their markup stable) */
.dash-tile[data-stage="art"] { background: var(--art-bg); color: var(--art-ink); }
.dash-tile[data-stage="blanks"] { background: var(--blanks-bg); color: var(--blanks-ink); }
.dash-tile[data-stage="press"] { background: var(--press-bg); color: var(--press-ink); }
.dash-tile[data-stage="qc"] { background: var(--qc-bg); color: var(--qc-ink); }
.dash-tile[data-stage="done"] { background: var(--done-bg); color: var(--done-ink); }
.dash-tile[data-stage="idle"] { background: var(--idle-bg); color: var(--idle-ink); }
.dash-tile[data-stage="alert"] { background: var(--alert-bg); color: var(--alert-ink); }
.dash-tile[data-stage] .muted, .dash-tile[data-stage] a { color: inherit; }
.dash-tile[data-stage] table, .dash-tile[data-stage] th, .dash-tile[data-stage] td { background: transparent; color: inherit; border-color: rgba(0,0,0,.08); }
.dash-tile[data-stage="press"] table th, .dash-tile[data-stage="press"] td { border-color: rgba(255,255,255,.18); }
.dash-tile[data-stage] tbody tr:hover td { background: transparent; }
.dash { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.dash-tile { margin: 0; }
.dash-tile h2 { font-family: var(--display); }
.bars li { grid-template-columns: 1fr 100px 2.5em; }
.bars meter { height: 10px; }
.bars meter::-webkit-meter-bar { background: var(--line); border: 0; border-radius: 999px; height: 10px; }
.bars meter::-webkit-meter-optimum-value { border-radius: 999px; background: var(--muted); }
.bars .bar-art meter::-webkit-meter-optimum-value { background: #e0b400; }
.bars .bar-blanks meter::-webkit-meter-optimum-value { background: #5b8fd6; }
.bars .bar-press meter::-webkit-meter-optimum-value { background: var(--press-bg); }
.bars .bar-qc meter::-webkit-meter-optimum-value { background: #7a5cc4; }
.bars .bar-art meter::-moz-meter-bar { background: #e0b400; }
.bars .bar-blanks meter::-moz-meter-bar { background: #5b8fd6; }
.bars .bar-press meter::-moz-meter-bar { background: var(--press-bg); }
.bars .bar-qc meter::-moz-meter-bar { background: #7a5cc4; }
.glyph.glyph-row { width: 26px; height: 26px; margin-right: 4px; }
.nowrap { white-space: nowrap; }
.swatch-row { display: inline-flex; gap: 2px; vertical-align: middle; }
.swatch-row .swatch { width: 16px; height: 16px; }
@media (max-width: 700px) {
  .field, form.stack label { min-width: 0; max-width: 100%; }
  .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; min-width: 0; }
  .toolbar > .field, .toolbar form > .field { flex: 1 1 100%; }
}

/* Stage 8 */
.segmented { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel); box-shadow: var(--shadow); }
.segmented a { padding: 7px 16px; border-radius: 999px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.segmented a[aria-current="true"] { background: var(--ink); color: #fff; }
.panel.narrow { max-width: 560px; }
.panel.centred { margin-left: auto; margin-right: auto; }
td.row-action { text-align: right; white-space: nowrap; }
/* 8.5 quote header, avatars, mockups */
.quote-h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.quote-customer { font-family: var(--font); font-weight: 600; font-size: 1.15rem; color: var(--ink-2); }
.quote-job { margin: 2px 0 0; color: var(--muted); font-size: .95rem; }
.rep-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--panel); box-shadow: var(--shadow); font-family: var(--mono); }
.rep-chip-bare { padding: 4px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar-initials { display: inline-grid; place-items: center; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .02em; }
.avatar-sm { width: 26px; height: 26px; font-size: .68rem; }
.avatar-xl { width: 96px; height: 96px; font-size: 1.8rem; }
.who-me { display: inline-flex; align-items: center; gap: 8px; }
.who .avatar-initials { background: #fff; color: var(--ink); }
.account-head { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
.account-head h1 { margin: 0; }
.mockup { display: flex; gap: 10px; flex: none; }
.mockup-view { margin: 0; text-align: center; background: var(--sunk); border-radius: var(--radius-md); padding: 10px 10px 6px; }
.mockup-view figcaption { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mockup-svg { display: block; width: 150px; height: 150px; }
.mockup-svg .zone rect { stroke-width: .35; stroke-dasharray: .8 .5; fill-opacity: .92; }
.mockup-svg .zone text { font-family: var(--font); font-weight: 800; font-size: 1.5px; text-anchor: middle; }
.zone.tone-sp rect { fill: var(--sp-bg); stroke: var(--sp-ink); } .zone.tone-sp text { fill: var(--sp-ink); }
.zone.tone-emb rect { fill: var(--emb-bg); stroke: var(--emb-ink); } .zone.tone-emb text { fill: var(--emb-ink); }
.zone.tone-dtf rect { fill: var(--dtf-bg); stroke: var(--dtf-ink); } .zone.tone-dtf text { fill: var(--dtf-ink); }
.zone.tone-patch rect { fill: var(--patch-bg); stroke: var(--patch-ink); } .zone.tone-patch text { fill: var(--patch-ink); }
.zone.tone-idle rect { fill: var(--idle-bg); stroke: var(--idle-ink); } .zone.tone-idle text { fill: var(--idle-ink); }
.deco-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.deco-list li { display: flex; align-items: center; gap: 10px; }
.deco-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; font-size: .8rem; flex: none; }
.deco-n.tone-sp { background: var(--sp-bg); color: var(--sp-ink); } .deco-n.tone-emb { background: var(--emb-bg); color: var(--emb-ink); }
.deco-n.tone-dtf { background: var(--dtf-bg); color: var(--dtf-ink); } .deco-n.tone-patch { background: var(--patch-bg); color: var(--patch-ink); }
.deco-n.tone-idle { background: var(--idle-bg); color: var(--idle-ink); }
@media (max-width: 640px) { .mockup-svg { width: 112px; height: 112px; } .quote-line .garment { flex-wrap: wrap; } }
/* 8.6 builder: ASAP outlook, rush note, supplier picker */
.due-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.timing-toggles { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toggle-asap { position: relative; }
.toggle-asap input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-asap span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border-radius: 14px; border: 1px dashed var(--press-bg); color: var(--press-bg); font-weight: 700; cursor: pointer; }
.toggle-asap input:checked + span { background: var(--press-bg); color: var(--press-ink); border-style: solid; }
.toggle-asap input:focus-visible + span { outline: 3px solid var(--press-bg); outline-offset: 2px; }
.toggle-rush { position: relative; }
[data-tile="job"] .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: end; }
.due-row .timing-toggles { flex-wrap: nowrap; gap: 6px; }
.due-row .toggle-asap span, .due-row .toggle-rush span { min-height: 30px; padding: 3px 9px; gap: 5px; border-radius: 10px; font-size: .8rem; white-space: nowrap; }
.due-row .icon { width: 14px; height: 14px; }
.rush-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--sunk); color: var(--ink-2); }
.outlook { display: none; }
.outlook.is-open, #quote-form:has(input[name="asap"]:checked) .outlook { display: block; }
.outlook-ready { font-size: 1.15rem; margin: 0 0 4px; }
.outlook-ready b { font-family: var(--display); font-size: 1.6rem; }
.supplier-picker { display: grid; gap: 12px; margin-bottom: 16px; }
.supplier-icons { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.supplier-icons > * { min-width: 0; }
.supplier-icon b, .supplier-icon small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .supplier-icons { grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; } }
.supplier-icon { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; min-width: 0; padding: 10px 10px 10px 8px; border-radius: var(--radius-md); background: var(--sunk); border: 2px solid transparent; color: var(--ink); cursor: pointer; font: inherit; }
.supplier-icon .monogram { grid-row: span 2; }
.supplier-icon b { font-weight: 700; }
.supplier-icon small { color: var(--muted); font-size: .8rem; }
.supplier-icon[aria-pressed="true"] { border-color: var(--ink); background: var(--panel); box-shadow: var(--shadow); }
/* the icons are submit buttons of the GET search form (they work without JavaScript), so
   button.supplier-icon[type] outranks the primary button[type="submit"] style */
button.supplier-icon[type] { display: grid; justify-content: stretch; min-height: 0; min-width: 0; padding: 10px 10px 10px 8px; border-radius: var(--radius-md); background: var(--sunk); color: var(--ink); border: 2px solid transparent; box-shadow: none; font-weight: 400; }
button.supplier-icon[type]:hover, button.supplier-icon[type]:focus-visible { filter: none; color: var(--ink); border-color: var(--line-strong); }
button.supplier-icon[type][aria-pressed="true"] { border-color: var(--ink); background: var(--panel); box-shadow: var(--shadow); }
.picker-hint { margin: 4px 0 0; }
.blank-tile.is-locked, button.blank-tile[type].is-locked { opacity: .55; pointer-events: none; }
/* Edit: the five supplier spots (shop-wide) */
.spot-editor > summary { list-style: none; display: inline-flex; width: fit-content; cursor: pointer; }
.spot-editor > summary::-webkit-details-marker { display: none; }
.spot-editor { position: relative; }
.spot-editor-body { position: absolute; right: 0; top: 100%; margin-top: 6px; z-index: 5; width: min(36rem, calc(100vw - 48px)); box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 12px; border-radius: var(--radius-md); background: var(--sunk); display: grid; gap: 10px; }
.spot-editor-body p { margin: 0; }
.spot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.monogram { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-family: var(--display); font-weight: 800; font-size: 1rem; }
.monogram.tone-sp { background: var(--sp-bg); color: var(--sp-ink); } .monogram.tone-emb { background: var(--emb-bg); color: var(--emb-ink); }
.monogram.tone-dtf { background: var(--dtf-bg); color: var(--dtf-ink); } .monogram.tone-patch { background: var(--patch-bg); color: var(--patch-ink); }
.monogram.tone-art { background: var(--art-bg); color: var(--art-ink); } .monogram.tone-qc { background: var(--qc-bg); color: var(--qc-ink); }
.monogram.tone-idle { background: var(--idle-bg); color: var(--idle-ink); }
.picker-search { max-width: 420px; }
.picker-panel:empty { display: none; }
.picker-crumbs { margin: 0 0 10px; color: var(--muted); }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.picker-brand { display: grid; justify-items: center; gap: 4px; padding: 14px 10px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--panel); cursor: pointer; font: inherit; color: var(--ink); }
.picker-brand:hover { border-color: var(--ink); }
.picker-brand small { color: var(--muted); }
.picker-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
/* 8.7 / 8.8 method pills and tile-heading icons */
.method-pill { gap: 5px; padding: 3px 9px 3px 4px; }
.glyph-pill { width: 1.35em; height: 1.35em; }
.glyph-head { width: 1.35em; height: 1.35em; vertical-align: -0.3em; }
.tile-icon { width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-right: 2px; }
h2 .tile-icon, h2 .glyph-head { margin-right: 6px; }
.eyebrow .tile-icon, .eyebrow .glyph-head { opacity: .85; }
.order-glyphs { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.order-glyphs .glyph { width: 1.9em; height: 1.9em; }
.method-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.method-pills .method-pill { padding: 2px; }
.method-pills .glyph-pill { width: 1.5em; height: 1.5em; }
/* 8.9 pickup */
.pickup-location { font-family: var(--display); font-weight: 800; font-size: 1.8rem; margin: 0; }
.pickup-big { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin: 0; }
.signoff > summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.signoff > summary::-webkit-details-marker { display: none; }
.signoff[open] > summary { margin-bottom: 16px; }
.signoff .glyph { width: 1.6em; height: 1.6em; }
/* 8.10 art queue: the actions in their own evenly sized columns */
.art-queue th.col-action, .art-queue td.col-action { width: 110px; text-align: center; white-space: nowrap; }
.art-queue td.col-action .check { justify-content: center; }
.art-queue select { width: 100%; min-width: 180px; }
/* 8.11 proof: Front and Back side by side, history */
.proof-side .tile-head .tile-icon { width: 1.3em; height: 1.3em; }
.proof-garment { display: grid; gap: 12px; }
.proof-garment + .proof-garment { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.proof-nodeco { margin: 0; font-weight: 700; }
.proof-hero { position: relative; margin: 0 auto; width: 100%; max-width: 380px; aspect-ratio: 1; background: var(--sunk); border-radius: var(--radius-md); }
.proof-hero .mockup-svg, .proof-hero .deco-overlay, .proof-hero .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.proof-hero .hero-photo { display: none; object-fit: contain; border-radius: var(--radius-md); background: #fff; }
.proof-hero.has-photo .hero-photo { display: block; }
.proof-hero.has-photo .mockup-svg { visibility: hidden; }
.proof-hero figcaption { position: absolute; left: 10px; bottom: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.deco-overlay .deco { outline: none; }
.deco-overlay .deco text { font-size: 1.5px; font-weight: 700; fill: #111; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: .25px; }
.deco-overlay .deco.is-editable { cursor: grab; touch-action: none; }
.deco-overlay .deco.is-dragging { cursor: grabbing; }
.deco-overlay .deco:focus rect, .deco-overlay .deco.is-active rect { stroke: var(--accent, #c8102e); stroke-width: .35; }
.proof-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.proof-tiles .proof-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px; font-size: .9rem; }
.proof-tiles .proof-item + .proof-item { padding-top: 10px; border-top: 1px solid var(--line); }
.proof-item h3 { font-size: .95rem; }
.deco-num { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--ink, #222); color: var(--panel, #fff); font-size: .8rem; }
.deco-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.deco-hint { grid-column: 1 / -1; margin: 0; }
.proof-item img.mockup { max-height: 110px; }
.proof-item h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; font-size: 1.05rem; }
.proof-item + .proof-item { padding-top: 10px; border-top: 1px dashed var(--line); }
.proof-item img.mockup { max-width: 100%; border-radius: var(--radius-sm); }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); align-items: baseline; }
.timeline li:first-child { border-top: 0; }
.timeline time { font-family: var(--mono); font-size: .85rem; color: var(--muted); }
@media (max-width: 640px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }
/* 9.3 sales dashboard */
.sales-big { font-family: var(--display); font-weight: 800; font-size: 2.2rem; line-height: 1.1; margin: 4px 0 6px; }
.sales-big small { font-family: var(--font); font-weight: 600; font-size: .95rem; color: var(--muted); }
.stage-done .sales-big small { color: inherit; }
.plain-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
table.compact td, table.compact th { padding: 6px 8px; }
tr.current td { background: var(--sunk); }
/* 9.4 time clock in the top bar; 9.5 / 9.6 timers and live clocks */
.punch { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.punch-state { color: #c9ccd3; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.punch-work .punch-state { color: #8fe3b0; }
.punch-break .punch-state { color: #fde68a; }
.btn-punch, button.btn-punch[type] { display: inline-flex; box-shadow: none; align-items: center; gap: 6px; min-height: 32px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.btn-punch:hover, button.btn-punch[type]:hover { background: rgba(255,255,255,.12); }
.btn-punch-in, button.btn-punch-in[type] { background: #197a33; border-color: #197a33; }
.btn-punch-in:hover, button.btn-punch-in[type]:hover { background: #14632a; }
.punch-state { max-width: 11em; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1560px) { .punch .punch-label, .who-me .who-name { display: none; } .btn-punch, button.btn-punch[type] { padding: 5px 9px; } }
.timer-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--press-bg); color: #fff; font-size: .85rem; font-weight: 700; }
.timer-chip .link { color: #fff; }
.clock { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.clock.is-running::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .35em; border-radius: 50%; background: currentColor; vertical-align: .1em; animation: clock-pulse 1.6s ease-in-out infinite; }
@keyframes clock-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .clock.is-running::before { animation: none; } }
.btn-timer, button.btn-timer[type] { display: inline-flex; box-shadow: none; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.btn-timer.is-running, button.btn-timer.is-running[type] { background: var(--press-bg); border-color: var(--press-bg); color: var(--press-ink); }
.step-timer { margin: 4px 0; }
.time-grid td.ot { color: var(--alert-ink); font-weight: 700; }
.timer-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.art-queue th.col-timer, .art-queue td.col-timer { white-space: nowrap; }
.card-clock { display: flex; align-items: center; gap: 6px; }
/* 9.1 movable tiles */
.layout-bar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: -4px 0 8px; }
.is-arranging > [data-tile] { outline: 2px dashed var(--line-strong); outline-offset: 3px; cursor: grab; }
.is-arranging > [data-tile]:focus-visible { outline: 3px solid var(--accent); }
.is-arranging > [data-tile].is-dragging { opacity: .45; }
@media (prefers-reduced-motion: no-preference) { .is-arranging > [data-tile] { transition: transform .12s ease; } }
.layout-bar .error { font-size: .85rem; }

/* R.6 front-end review */
/* Skip link: the first thing the keyboard reaches; seen only while focused */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 12px; background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: var(--shadow-lift); }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }
/* Tablet top bar: everything tappable is at least 48 px tall */
.surface-floor .btn-punch, .surface-floor button.btn-punch[type], .surface-floor .punch-state, .surface-floor .who > a { display: inline-flex; align-items: center; min-height: 48px; }
.surface-floor .who > a { padding: 0 6px; }
.surface-floor .punch-state { max-width: 14em; }
/* "51 m 30 s" on the press counter fits on one line */
.count-box .clock { font-size: 1.6rem; white-space: nowrap; }
/* A card whose move is with the server */
.job-card.moving { opacity: .55; pointer-events: none; }
/* Live view that stopped updating */
#live-at.live-stale { color: var(--err); font-weight: 700; }
#live-at.live-stale a { color: inherit; }
/* Company logo (Admin > Settings) above quotes and portal pages: capped, never stretched */
.company-header { margin: 0 0 12px; }
.company-logo { display: block; width: auto; height: auto; max-width: 240px; max-height: 72px; object-fit: contain; }
.company-logo-preview { max-width: 320px; max-height: 120px; padding: 8px; background: #fff; border: 1px solid var(--line, #ccc); border-radius: var(--radius-sm); }
/* Paper: the page's content, none of the chrome */
@media print {
  body { background: #fff; color: #000; }
  main { padding: 0; }
  .skip-link, .topbar, .mainnav, nav, .layout-bar, .system-alerts, .alert-pills, .flash, form, button, .btn, .btn-secondary, .btn-xl, .btn-lg, .errors:empty, #offline-banner, #queue-problem, #storage-problem { display: none !important; }
  .tile, .panel, .lane, .job-card, .table-wrap, table, .count-box, .stage-tile, .art-frame { box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; }
  .tile, .panel, .lane, .table-wrap { border: 1px solid #ccc; }
  .bento { display: block; }
  .bento > * { margin-bottom: 12px; }
  a { color: inherit; text-decoration: none; }
}


/* 13.13 direct uploads (static/upload.js): the progress line under a file form */
.upload-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.upload-status progress { flex: 1 1 200px; height: 10px; accent-color: var(--accent, currentColor); }


/* Quote builder: live counts and pricing, blank search tiles (Lars, 2026-10-22) */
.sticky-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.live-state { color: var(--muted); font-size: .9rem; min-height: 1.2em; }
.live-state.is-busy { color: var(--ink-2); }
.live-state.is-unsaved { color: var(--warn); font-weight: 600; }
.live-state.is-error { color: var(--err); }
.pieces-total { font-size: .95rem; color: var(--ink-2); }
.pieces-total b { font-family: var(--mono); font-size: 1.1rem; }
[data-preview-target].is-stale { opacity: .55; transition: opacity .2s; }
.price-break { margin: 4px 0 0; text-align: right; }
.line-errors { margin: 8px 0 0; background: var(--alert-bg); color: var(--alert-ink); padding: 8px 12px; border-radius: var(--radius-md); font-weight: 600; }
.line-errors p { margin: 0; }
.size-cell input[aria-invalid="true"] { border-color: var(--err); outline: 2px solid rgba(143,29,23,.35); }
.swatches.needs-colour { border-radius: 8px; outline: 2px dashed var(--accent); outline-offset: 4px; }
.needs-colour-label { color: var(--accent); }
.line-description { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.line-description > span:first-child { font-weight: 600; font-size: .85rem; color: var(--muted); }
.another-colour { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.picker-search-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.picker-search-row .picker-search { flex: 1 1 240px; }
.blank-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0; }
/* button.blank-tile[type]: outranks the primary button[type="submit"] style (tiles are submit buttons) */
.blank-tile, button.blank-tile[type] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px; min-height: 0; background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: none; font-weight: 400; }
.blank-tile:hover, .blank-tile:focus-visible, button.blank-tile[type]:hover, button.blank-tile[type]:focus-visible { filter: none; border-color: var(--accent); background: var(--panel); color: var(--ink); }
.blank-tile b { font-family: var(--mono); }
.blank-tile-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 84px; background: var(--sunk); border-radius: 6px; margin-bottom: 6px; overflow: hidden; }
.blank-tile-img img { max-width: 100%; max-height: 84px; object-fit: contain; }
.blank-tile-brand { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
.blank-tile-name { font-size: .88rem; color: var(--ink-2); }
.tiles-more { text-align: center; }
.quote-line:target, .quote-line.is-new { animation: line-flash 2.4s ease-out; }
@keyframes line-flash { from { box-shadow: 0 0 0 4px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .quote-line:target, .quote-line.is-new { animation: none; outline: 3px solid var(--accent); } }
.size-total-inline { align-self: center; }

/* Address type-ahead (static/address.js) and the order / billing contacts */
.address-suggestions { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.08); max-width: 40rem; }
.address-suggestions li { padding: 8px 10px; border-radius: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.address-suggestions li small { color: var(--muted); }
.address-suggestions li[aria-selected="true"], .address-suggestions li:hover { background: var(--done-bg); }
.address-confirmed { color: var(--ok); font-weight: 600; margin: 0; }
.contact-add { margin-top: 8px; }
.field-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 10px; }
.field-head > .contact-add { margin: 0 0 0 auto; }
.field-head > .contact-add[open] { flex: 1 0 100%; }
.ship-address { white-space: pre-line; margin: -2px 0 0; }
.contact-add > summary { cursor: pointer; font-weight: 600; color: var(--accent); }

/* Quote builder layout round (Lars, 2026-10-22): swatches and sizes in the line header row,
   "+ Add another colour", the same-decorations toggle and shared set, Location "+", Shipping. */
.line-head { gap: 10px 16px; }
.line-head .line-title { flex: 1 1 200px; min-width: 0; }
.line-head .line-title .line-description { margin: 2px 0 0; }
.line-head .line-colour { flex: 0 1 auto; max-width: 100%; }
.line-head fieldset.swatches { margin: 0; gap: 4px; }
.line-head .swatch-pick .swatch { width: 28px; height: 28px; }
.line-head fieldset.swatches legend { margin-bottom: 4px; }
.line-head .size-grid { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 1 auto; max-width: 100%; }
.line-head .garment-glyph-md { width: 56px; height: 56px; }
.line-head .garment-glyph-md .glyph { width: 42px; height: 42px; }
.line-head .tile-title { font-size: 1.1rem; }
.line-head .size-cell { width: 48px; padding: 4px 3px; border-radius: 12px; gap: 2px; font-size: .7rem; }
.line-head .size-cell input { padding: 4px 2px; font-size: .95rem; }
.line-head .size-total { width: auto; min-width: 60px; padding: 4px 8px; }
.line-head .size-total strong { font-size: 1.05rem; }
.quote-line > .line-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-top: 10px; }
.line-head .line-description { margin-bottom: 0; }
.lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } /* one column that never outgrows the page (the size grid scrolls inside its tile) */
.lines-foot { display: grid; gap: 14px; margin: 14px 0; }
.lines-foot-bar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin: 0; }
.toggle-same-decos { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; min-height: 44px; }
.toggle-same-decos input { width: 20px; height: 20px; }
.shared-decos .eyebrow { margin-top: 0; }
.location-field .field-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.location-field .field-head label { font-weight: inherit; }
.location-field details[data-add-location] { position: relative; }
.location-field details[data-add-location] > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--accent); font-weight: 800; line-height: 1; }
.location-field details[data-add-location] > summary::-webkit-details-marker { display: none; }
.location-field details[data-add-location][open] > summary { background: var(--accent); color: #fff; border-color: var(--accent); }
.location-field details[data-add-location] .add-location-box { position: absolute; right: 0; top: 28px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; min-width: 230px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.location-field details[data-add-location] .add-location-box input { flex: 1 1 120px; min-width: 0; }
.location-field details[data-add-location] .error { flex-basis: 100%; }
.ship-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 24px; }
.ship-row .field { max-width: 180px; }
.ship-total { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline; margin: 0 0 8px; }
.ship-total .ship-grand { color: var(--ink); font-size: 1.05rem; }

/* New quote: customer search and the 4 x 4 grid of frequent customers (2 columns on a tablet,
   1 on a phone). The whole tile is the "Start quote" button (its ::after covers the tile). */
.panel.cust-pick { max-width: 1100px; margin-left: auto; margin-right: auto; }
.cust-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.cust-search .field { flex: 1 1 320px; }
.cust-search input[type="search"] { width: 100%; }
.cust-heading { font-size: 1.1rem; margin: 20px 0 10px; }
.cust-grid { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cust-tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-md); transition: box-shadow .12s ease; }
.cust-tile:hover, .cust-tile:focus-within { box-shadow: var(--shadow); }
.cust-tile form { margin: 0; }
/* button.cust-start[type]: outranks the primary button[type="submit"] style (the tile is a submit button) */
.cust-tile button.cust-start[type] { all: unset; display: flex; flex-direction: column; gap: 2px; cursor: pointer; width: 100%; box-sizing: border-box; }
.cust-tile button.cust-start[type]:hover { filter: none; }
.cust-tile .cust-start::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.cust-tile .cust-start:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 2px; }
.cust-name { font-weight: 700; overflow-wrap: anywhere; }
.cust-contact, .cust-phone { color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.cust-phone:empty::before { content: "No phone"; }
.cust-figures { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: .92rem; }
.cust-figures div { display: flex; justify-content: space-between; gap: 8px; }
.cust-figures dt { color: var(--muted); }
.cust-figures dd { margin: 0; text-align: right; }
@media (max-width: 1000px) { .cust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cust-grid { grid-template-columns: 1fr; } }


/* Supplier catalogue import: progress while a big file is applied in batches (catalogue-import.js) */
.import-progress { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.import-progress progress { flex: 1 1 240px; max-width: 480px; height: 12px; accent-color: var(--accent, currentColor); }

/* Supplier file import, mapping step (catalogue-map.js) */
.map-form { display: grid; gap: 14px; max-width: 960px; }
.map-table { width: 100%; border-collapse: collapse; }
.map-table th, .map-table td { text-align: left; vertical-align: top; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.map-table th[scope=row] { width: 38%; font-weight: 700; }
.map-table select { max-width: 100%; }
@media (max-width: 520px) { .map-table { table-layout: fixed; } .map-table select { width: 100%; } }
.map-supplier { display: block; margin-top: 6px; font-weight: 400; }
.map-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 8px 0; }
.map-row label { display: grid; gap: 4px; font-size: .85rem; font-weight: 700; color: var(--ink-2); }
.map-row input[type=number] { width: 6.5rem; }
.map-row input[type=text] { width: 6.5rem; }
.map-saved { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.map-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.map-form button:disabled { opacity: .55; cursor: not-allowed; }

/* Size grid in the quote builder: rows MSRP (information only), Cost (click to override), quantity boxes and
   Total. One label per row in the first column; the size columns line up under each other. */
.line-head .size-grid { display: grid; grid-template-columns: 2.4rem repeat(var(--sizes, 7), 48px) auto; gap: 2px 6px; align-items: center; justify-items: center; max-width: 100%; overflow-x: auto; }
.size-rowlabel { justify-self: start; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.size-msrp { font-size: .72rem; line-height: 18px; color: var(--muted); text-align: center; font-weight: 600; font-family: var(--mono); }
.map-table th[scope=row] .small { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Admin > Lists > Tax codes: each field's label sits above its box, boxes in one wrapping row
   (the labels used to run on inline, so "GST %" looked like it belonged to the next box). */
.tax-cells { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; min-width: 0; }
.tax-cells > label.small:not(.check) { display: grid; gap: 4px; font-weight: 600; }
.tax-cells input[name$="_rate"] { width: 5rem; }
.tax-cells input[name="region"] { width: 5.5rem; }
.tax-cells input[name="note"] { width: 100%; min-width: 14rem; }
.tax-cells label.small:has(input[name="note"]) { flex: 1 1 14rem; }
.tax-cells .check { flex: 1 1 100%; }

/* Job Board: zone tiles, a zone's queue and equipment, a machine's jobs */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.crumbs .crumb-sep { margin: 0 6px; opacity: .6; }
.crumbs [aria-current="page"] { color: var(--ink); }
.zone-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.zone-tile { display: flex; flex-direction: column; gap: 8px; min-height: 230px; padding: 26px; border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.zone-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,22,28,.08), 0 12px 26px rgba(20,22,28,.1); }
.zone-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.zone-glyph { width: 72px; height: 72px; border-radius: 20px; background: rgba(255,255,255,.72); display: inline-flex; align-items: center; justify-content: center; }
.zone-glyph .glyph { width: 46px; height: 46px; }
.zone-name { font-family: var(--display); font-weight: 800; font-size: 1.8rem; line-height: 1.1; margin-top: 4px; }
.zone-blurb { opacity: .85; font-weight: 600; }
.zone-stats { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.zone-ready { font-weight: 800; font-size: 1.1rem; padding: 6px 16px; border-radius: 999px; background: #fff; color: var(--ink); }
.zone-ready.has-jobs { background: var(--ink); color: #fff; }
.zone-meta { font-size: .9rem; font-weight: 600; opacity: .9; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 4px; }
.section-head h2 { margin: 0; }
.queue-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin: 12px 0 16px; align-items: start; }
.queue-list .empty { grid-column: 1 / -1; }
.queue-card[draggable="true"] { cursor: grab; }
.queue-card.dragging { opacity: .5; }
.queue-card .put-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.queue-card .put-form select { flex: 1 1 150px; min-width: 0; }
.queue-card .badge { max-width: 100%; }
.waiting { margin-top: 8px; }
.waiting h3 { margin: 0 0 4px; }
.waiting .watch-row { background: var(--sunk); }
.zone-equipment { margin-top: 28px; }
.equip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; align-items: start; }
.equip-card { background: var(--panel); box-shadow: var(--shadow); border-radius: var(--radius); padding: 16px; gap: 10px; }
.equip-card.drop { outline: 3px dashed var(--press-bg); outline-offset: -3px; background: #e2f5f3; }
.equip-head { display: flex; align-items: flex-start; gap: 10px; }
.equip-head h3 { margin: 0; font-family: var(--display); font-size: 1.1rem; overflow-wrap: anywhere; }
.equip-head h3 a { color: inherit; }
.equip-load { display: grid; gap: 4px; }
.equip-load meter { width: 100%; height: 10px; }
.equip-load meter::-webkit-meter-bar { background: var(--line); border: 0; border-radius: 999px; height: 10px; }
.equip-load meter::-webkit-meter-optimum-value { background: #8fb4e8; border-radius: 999px; }
.lanes-one { grid-auto-columns: minmax(min(290px, 100%), 560px); }
@media (max-width: 700px) {
  .zone-tiles { grid-template-columns: minmax(0, 1fr); }
  .zone-tile { min-height: 150px; padding: 18px; }
  .zone-glyph { width: 56px; height: 56px; }
  .zone-glyph .glyph { width: 36px; height: 36px; }
  .zone-name { font-size: 1.45rem; }
}
.zone-tile:hover, .zone-tile:focus-visible { text-decoration: none; }
.zone-tile.tone-sp:hover { color: var(--sp-ink); } .zone-tile.tone-emb:hover { color: var(--emb-ink); }
.zone-tile.tone-dtf:hover { color: var(--dtf-ink); } .zone-tile.tone-patch:hover { color: var(--patch-ink); }
.zone-tile.tone-idle:hover { color: var(--idle-ink); }
.equip-head { flex-wrap: wrap; }
.equip-head .grow { flex: 1 1 150px; min-width: 0; }
.equip-head h3 a { text-decoration: none; }
.equip-head h3 a:hover { text-decoration: underline; }
.lanes-one .lane-head h3 { display: none; }

/* Job Board stage columns (Trello style): one column per stage, cards inside, scroll sideways with
   snap inside the board (never the page). */
.stage-board { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 4px 2px 14px; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
.stage-board:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.stage-col { flex: 0 0 clamp(250px, 23vw, 300px); scroll-snap-align: start; background: #e7e9ed; border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 240px); min-height: 150px; }
.stage-col.drop { outline: 3px dashed var(--press-bg); outline-offset: -3px; background: #e2f5f3; }
.stage-col.stage-off { opacity: .75; }
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stage-head h3 { margin: 0; font-family: var(--display); font-size: .95rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.stage-cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 40px; padding: 2px; }
.stage-cards .empty { margin: 0; padding: 10px; }
.stage-card { background: #fff; color: var(--ink); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 1px 2px rgba(20,22,28,.1), 0 3px 8px rgba(20,22,28,.05); border-left: 5px solid transparent; min-width: 0; }
.stage-card[draggable="true"] { cursor: grab; }
.stage-card[draggable="true"]:active { cursor: grabbing; }
.stage-card.dragging { opacity: .5; }
.stage-card.moving { opacity: .55; pointer-events: none; }
.stage-card.rush { border-left-color: var(--alert-ink); }
.stage-card.card-running { border-left-color: var(--press-bg); }
.stage-card.card-paused { border-left-color: #e0b100; }
.stage-card .card-tags, .stage-card .card-chips, .stage-card .card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.stage-card .card-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stage-card .card-who b { font-size: .92rem; overflow-wrap: anywhere; }
.stage-card .card-who span { font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; white-space: normal; overflow: visible; text-overflow: clip; opacity: 1; }
.stage-card .badge { max-width: 100%; white-space: normal; }
.stage-card .card-who a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.stage-card .badge.due { white-space: nowrap; }
.stage-card .due.stage-alert { font-weight: 800; }
.stage-hint { margin: 0 0 6px; }
.stage-table input[name="label"] { min-width: 16rem; width: 100%; }
.stage-card .checklist { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: .75rem; font-weight: 700; }
.stage-card .check-item.yes { color: var(--done-ink); }
.stage-card .check-item.no { color: var(--alert-ink); }
.stage-card .check-count { font-size: .75rem; padding: 1px 7px; border-radius: 999px; background: var(--idle-bg); color: var(--idle-ink); }
.stage-card .machine-chip { background: var(--blanks-bg); color: var(--blanks-ink); }
.initials { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 800; }
.stage-card details.move summary { cursor: pointer; font-size: .82rem; font-weight: 700; padding: 4px 0; }
.stage-card .toolbar { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.stage-card .toolbar select { flex: 1 1 140px; min-width: 0; }
.queue-card.waiting-card { border-left: 5px solid var(--blanks-ink); }
@media (max-width: 700px) {
  .stage-col { flex-basis: 84vw; max-height: none; }
  .stage-card .due-note { display: none; }
}

/* Accounting mapping: a required picker left empty on a failed save. */
.field.field-error select { border-color: var(--err); outline: 2px solid rgba(143,29,23,.35); }

/* Quote builder tile (Lars, 2026-10-27): lines grouped by supplier, size prices above the boxes,
   inline garment-price override, warnings inside the line or decoration they refer to. */
.supplier-group { border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin-bottom: 16px; }
.supplier-group-head { margin: 0 0 10px; }
.supplier-group > .quote-line { margin-bottom: 12px; }
.supplier-group > .quote-line:last-child { margin-bottom: 0; }
.size-price { display: block; height: 18px; line-height: 16px; box-sizing: border-box; }
.size-price { border: 0; background: none; padding: 0 2px; font: inherit; font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 1px dotted currentColor; }
.size-price:hover { color: var(--accent); }
.size-price.is-overridden { color: var(--art-ink); background: var(--art-bg); border-radius: 6px; border-bottom: 0; }
.garment-override { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin: 8px 0; }
.garment-override[hidden], .garment-override [hidden] { display: none; }
.deco-warn-box { flex-basis: 100%; }
.deco-warn-box:empty { display: none; }

[data-tile="job"] { container-type: inline-size; }
.due-row .tl { font-weight: 700; }
@container (max-width: 380px) { .due-row .tl { display: none; } }
#quote-event-date { max-width: 11rem; }
.due-row .toggle-asap span, .due-row .toggle-rush span { font-size: .72rem; padding: 2px 7px; min-height: 28px; }
[data-tile="job"] .grid-2 > * { min-width: 0; }

@container (max-width: 560px) { .due-head .tl { display: none; } }

/* Line tile: small remove (x) at the top right next to Item list; the Total pill is a column of its
   own with a spacer as tall as the price row, so it sits level with the size boxes (boxes and pill
   share one height). */
button.line-remove[type] { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-height: 0; margin-left: 4px; padding: 0; border: 0; border-radius: 6px; background: none; box-shadow: none; filter: none; color: var(--muted); cursor: pointer; }
button.line-remove[type]:hover, button.line-remove[type]:focus-visible { color: var(--err); background: var(--sunk); filter: none; }
button.line-remove .icon { width: 14px; height: 14px; }
.deco-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.line-warn { padding: 4px 10px; margin: 4px 0; font-size: .8rem; font-weight: 600; border-radius: var(--radius-sm); }
/* Colour rows after the first of the same blank: the same tile, no garment header, fused to the row above. */
.quote-line.is-sub { margin-top: -12px; border-top: 1px dashed var(--line); border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 6px; padding-bottom: 8px; }
.quote-line:has(+ .quote-line.is-sub) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.quote-line.is-sub .tile-head { margin-bottom: 0; }
.quote-line.is-sub .line-head { margin-bottom: 4px; }
.quote-line.is-sub .deco-row { padding-top: 4px; padding-bottom: 4px; }
.quote-line.is-sub .line-warn { padding: 2px 8px; margin: 2px 0; font-size: .75rem; }
.line-head .size-grid .size-cell { box-sizing: border-box; height: 56px; justify-content: center; }
.due-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: 12px; }
.due-row .field { margin: 0; }

/* the quote builder's logo/artwork pop-up */
.art-dialog { width: min(34rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); }
.art-dialog::backdrop { background: rgba(0,0,0,.45); }
.art-dialog h2 { margin-top: 0; }
.art-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.art-dialog-actions button { min-height: 44px; }
.due-row { flex-wrap: nowrap; }
.due-row .timing-toggles { gap: 8px; }
.due-row .toggle-asap span, .due-row .toggle-rush span { box-sizing: border-box; height: 46px; min-height: 46px; padding: 0 14px; border-radius: var(--radius-sm); font-size: .9rem; }
.due-row input[type="date"] { box-sizing: border-box; height: 46px; }

/* Quote builder colour rows (Lars, 2026-10-27): every colour row is [swatches | MSRP/Cost/size grid] on one row, the same
   widths on every row so XS sits under XS; the garment header is its own full-width line above the first row. The
   swatch block wraps above the grid on a narrow screen and the grid scrolls sideways inside the tile. */
.line-head .line-garment { flex: 1 0 100%; display: flex; align-items: center; gap: 14px; min-width: 0; }
.line-head .line-colour { flex: 0 0 236px; width: 236px; max-width: 100%; }
.line-head .size-grid { grid-template-columns: 2.4rem repeat(var(--sizes, 7), 48px) 72px; flex: 0 1 auto; min-width: 0; }
.line-head .size-grid .size-total { width: 72px; box-sizing: border-box; }
.line-head .size-grid .size-price, .line-head .size-grid .size-msrp { width: 48px; text-align: center; }
.line-head .line-colour { margin-left: auto; }

/* Total pill: one size on every colour row; the count never wraps (35 pcs, 1,200 pcs) (Lars, 2026-10-27). */
.line-head .size-grid { grid-template-columns: 2.4rem repeat(var(--sizes, 7), 48px) 92px; }
.line-head .size-grid .size-total { width: 92px; height: 60px; min-height: 60px; box-sizing: border-box; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; }
.line-head .size-grid .size-total strong { white-space: nowrap; font-size: .95rem; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* ===== Staff left rail (collapsible side navigation). Self-contained block; floor and portal keep the top bar. ===== */
:root { --rail-w: 248px; }
html.rail-collapsed { --rail-w: 72px; }
.mobilebar, .nav-backdrop, .rail-toggle, .brand-mono { display: none; }
.surface-staff { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); align-items: start; min-height: 100vh; transition: grid-template-columns .2s ease; }
.surface-staff .topbar { grid-column: 1; grid-row: 1; position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; padding: 14px 12px; min-width: 0; }
.surface-staff main { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; box-sizing: border-box; }
.surface-staff .brand { display: flex; align-items: center; min-height: 44px; padding: 0 10px; white-space: nowrap; overflow: hidden; }
.surface-staff .topbar .brand-mono { display: none; }
.surface-staff .mainnav { order: 0; display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px; margin: 0 -2px; }
.surface-staff .navmenu { display: block; position: relative; margin-bottom: 2px; }
.surface-staff .navmenu > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; box-sizing: border-box; padding: 0 12px; border-radius: 12px; font-size: .95rem; }
.surface-staff .navmenu > summary .nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.surface-staff .navmenu > summary .dept-icon { width: 1.4em; height: 1.4em; flex: none; }
.surface-staff .navmenu-caret { margin-left: auto; }
.surface-staff .navmenu-list { position: static; min-width: 0; padding: 2px 0 6px 20px; background: none; box-shadow: none; border-radius: 0; }
.surface-staff .navmenu-list a, .surface-staff .mainnav .navmenu-list a { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 12px; color: #c9ccd3; border-radius: 10px; font-size: .9rem; white-space: nowrap; }
.surface-staff .navmenu-list a:hover { background: rgba(255,255,255,.1); color: #fff; }
.surface-staff .navmenu-list a[aria-current="page"] { background: #fff; color: var(--ink); }
.surface-staff .mainnav a:focus-visible, .surface-staff .navmenu > summary:focus-visible, .surface-staff .rail-toggle:focus-visible, .nav-menu-btn:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.surface-staff .alert-pills { flex: none; padding: 0 2px; }
.surface-staff .alert-pill-body { left: calc(100% + 8px); right: auto; top: auto; bottom: 16px; width: min(26rem, calc(100vw - var(--rail-w) - 24px)); }
.surface-staff .who { flex: none; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); }
.surface-staff .who .punch { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.surface-staff .who .punch form { display: flex; flex-wrap: wrap; gap: 6px; }
.surface-staff .who .punch .punch-label, .surface-staff .who-me .who-name { display: inline; }
.surface-staff .who .btn-punch, .surface-staff .who button.btn-punch[type] { min-height: 44px; flex: 1; justify-content: center; }
.surface-staff .who-me { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: 12px; overflow: hidden; white-space: nowrap; }
.surface-staff .who-me:hover { background: rgba(255,255,255,.1); }
.surface-staff .who form.inline { display: block; }
.surface-staff .who button.link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 12px; color: #c9ccd3; text-decoration: none; }
.surface-staff .who button.link:hover { background: rgba(255,255,255,.1); color: #fff; }
.surface-staff .rail-toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; width: 100%; box-sizing: border-box; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: #c9ccd3; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; order: 99; }
.surface-staff .rail-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
.surface-staff .rail-toggle .icon { width: 1.3em; height: 1.3em; }

@media (min-width: 701px) {
  html.rail-collapsed .surface-staff .topbar { padding-left: 8px; padding-right: 8px; align-items: center; }
  html.rail-collapsed .surface-staff .topbar > * { width: 100%; }
  html.rail-collapsed .surface-staff .brand { justify-content: center; padding: 0; }
  html.rail-collapsed .surface-staff .topbar .brand-mono { display: inline; font-size: 1.15rem; }
  html.rail-collapsed .surface-staff .brand-text, html.rail-collapsed .nav-label, html.rail-collapsed .navmenu-caret,
  html.rail-collapsed .surface-staff .who-me .who-name, html.rail-collapsed .who-label, html.rail-collapsed .who .punch-label,
  html.rail-collapsed .who .punch-state, html.rail-collapsed .who .timer-chip { display: none; }
  html.rail-collapsed .surface-staff .navmenu > summary, html.rail-collapsed .surface-staff .rail-toggle, html.rail-collapsed .surface-staff .who button.link, html.rail-collapsed .surface-staff .who-me { justify-content: center; padding: 0; }
  html.rail-collapsed .surface-staff .rail-toggle .icon { transform: scaleX(-1); }
  html.rail-collapsed .surface-staff .who .punch form { flex-direction: column; }
  html.rail-collapsed .surface-staff .who .btn-punch, html.rail-collapsed .surface-staff .who button.btn-punch[type] { min-width: 0; padding: 0; flex: none; }
  html.rail-collapsed .surface-staff .alert-pills { display: flex; flex-direction: column; align-items: center; }
  html.rail-collapsed .surface-staff .alert-pill > summary { max-width: 56px; overflow: hidden; text-overflow: ellipsis; }
  /* collapsed: a department's pages open as a flyout beside its icon */
  html.rail-collapsed .surface-staff .navmenu-list { position: fixed; left: calc(var(--rail-w) + 6px); z-index: 40; min-width: 210px; padding: 8px; background: var(--panel); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); }
  html.rail-collapsed .surface-staff .navmenu[open] > .navmenu-list a { color: var(--ink-2); }
  html.rail-collapsed .surface-staff .navmenu-list a:hover { background: var(--sunk); color: var(--ink); }
  html.rail-collapsed .surface-staff .navmenu-list a[aria-current="page"] { background: var(--ink); color: #fff; }
  html.rail-collapsed .surface-staff .navmenu[open] > summary { background: rgba(255,255,255,.1); color: #fff; }
}

@media (max-width: 700px) {
  .surface-staff { display: block; }
  .mobilebar { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 50; height: 52px; padding: 0 8px; background: var(--ink); color: #fff; }
  .mobilebar .brand { color: #fff; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
  .nav-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #fff; cursor: pointer; }
  .nav-menu-btn .icon { width: 1.5em; height: 1.5em; }
  .surface-staff .topbar { position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; width: min(280px, 86vw); height: auto; transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; overflow-y: auto; }
  .surface-staff.nav-open .topbar { transform: none; visibility: visible; transition: transform .2s ease; }
  .nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.45); }
  .surface-staff .rail-toggle { display: none; }
  .surface-staff .alert-pill-body { position: static; width: auto; margin-top: 6px; }
  .surface-staff main { padding: 16px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) { .surface-staff, .surface-staff .topbar { transition: none !important; } }
@media print { .surface-staff { display: block; } .mobilebar, .nav-backdrop { display: none !important; } }
/* === Decoration mockup (Lars, 2026-10-27): controls left, garment picture with the logo right.
   Display only; appended as its own block. === */
.deco-item { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 10px; align-items: start; }
@media (max-width: 760px) { .deco-item { grid-template-columns: minmax(0, 1fr); } .deco-mock { justify-self: center; } }

/* Min price qty chip (Lars, 2026-10-27): by the Total pill, once per distinct minimum. */
.min-qty { display: inline-flex; align-self: center; }
.min-qty:empty { display: none; }

/* Staff rail: account and log out are glyphs only (Lars, 2026-10-27). */
html body.surface-staff .who { flex-direction: row; justify-content: center; align-items: center; }
html body.surface-staff .who .who-me .who-name, html body.surface-staff .who .who-label { display: none; }
html body.surface-staff .who .who-me, html body.surface-staff .who button.link { width: 44px; padding: 0; justify-content: center; }
html.rail-collapsed body.surface-staff .who { flex-direction: column; }

/* Logo mockup you can drag and size (Lars, 2026-10-27): one SVG per decoration row, the logo inside it so it
   can never leave the garment drawing. Pointer coordinates are converted with the SVG's own matrix. */
.deco-mock { width: 180px; margin: 0 0 6px; }
.deco-mock .mockup-svg { display: block; width: 100%; height: auto; overflow: hidden; background: var(--sunk); border-radius: var(--radius-md); }
.deco-mock .logo { cursor: grab; touch-action: none; outline: none; }
.deco-mock .logo.is-dragging { cursor: grabbing; }
.deco-mock .logo-ph { fill: rgba(255,255,255,.35); stroke: #2b2d33; stroke-width: .15; stroke-dasharray: .5 .4; }
.deco-mock .logo-frame { fill: none; stroke: none; }
.deco-mock .logo-handle { fill: #fff; stroke: #2b2d33; stroke-width: .2; display: none; }
.deco-mock .logo-hit { fill: transparent; stroke: none; display: none; cursor: nwse-resize; touch-action: none; }
.deco-mock .logo.is-selected .logo-frame { stroke: #2563eb; stroke-width: .2; stroke-dasharray: .6 .4; }
.deco-mock .logo.is-selected .logo-handle, .deco-mock .logo.is-selected .logo-hit { display: inline; }
.deco-mock-cap { margin: 4px 0 0; text-align: center; font-size: .7rem; color: var(--muted, #666); }
.deco-mock-cap [data-mock-reset][hidden] { display: none; }
.deco-mock-hint { margin: 2px 0 0; text-align: center; font-size: .65rem; color: var(--muted, #666); }

/* Quote builder totals: breakout folded by default, margin box (green, 6.5:1) beneath it. */
.price-breakout { margin-top: 10px; }
.price-breakout summary { cursor: pointer; color: #c9ccd3; font-size: .85rem; padding: 4px 0; }
.price-breakout[open] summary { margin-bottom: 4px; }
.price-tile .margin-box { margin-top: 10px; }

/* Under-minimum marker (Lars, 2026-10-27): a small "*" with a hover/focus tooltip replaces the chip and the banner. */
.min-star { position: relative; display: inline-block; align-self: center; padding: 0 5px; font-weight: 700; font-size: 1rem; line-height: 1; color: #8a6400; cursor: help; border-radius: var(--radius-sm); }
.min-star:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.min-star::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); right: 0; width: max-content; max-width: 240px; padding: 6px 8px; border-radius: var(--radius-sm); background: #26282e; color: #fff; font-size: .75rem; font-weight: 400; line-height: 1.3; white-space: normal; text-align: left; box-shadow: 0 2px 8px rgba(0,0,0,.3); opacity: 0; visibility: hidden; pointer-events: none; z-index: 20; }
.min-star:hover::after, .min-star:focus::after { opacity: 1; visibility: visible; }

/* ===== Apple-design foundation (Day 1) =====
   CSS-only, appended block. Remove this whole block to revert. Sources: apple-design skill.
   Tokens: motion, radius, shadow, accent-on-dark. Press feedback, dialog enter/exit, a11y media queries,
   translucent staff bars, 48px floor targets, tighter display tracking. Print is untouched. */
:root {
  /* motion: spring-like easing via linear() where supported, a cubic-bezier fallback elsewhere */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --dur-press: 100ms; --dur-fast: 150ms; --dur-med: 220ms; --dur-slow: 320ms;
  /* radius scale (aliases of the existing tokens plus pill) */
  --r-control: var(--radius-sm); --r-pop: var(--radius-md); --r-card: var(--radius); --r-pill: 999px;
  /* layered soft shadows: contact + ambient + diffuse */
  --shadow: 0 1px 1px rgba(20,22,28,.04), 0 2px 4px rgba(20,22,28,.04), 0 8px 20px rgba(20,22,28,.05);
  --shadow-2: 0 1px 2px rgba(20,22,28,.06), 0 4px 8px rgba(20,22,28,.06), 0 14px 30px rgba(20,22,28,.09);
  --shadow-3: 0 2px 4px rgba(20,22,28,.08), 0 10px 20px rgba(20,22,28,.12), 0 28px 56px rgba(20,22,28,.18);
  /* red accent for text on dark surfaces (7.8:1 on --ink; --accent itself is 2.71:1 there) */
  --accent-on-dark: #ff8a80;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, .18 4%, .52 10%, .78 17%, .93 25%, 1.012 33%, 1.02 40%, 1.008 50%, 1); }
}

/* 1. Press feedback (instant, on pointer-down) + no 300ms tap delay. Not on inputs/selects or draggables. */
a, button, summary, label, [role="button"] { touch-action: manipulation; }
[draggable="true"], [data-tile] { touch-action: auto; }
@media screen {
  button[type]:not(.link):not(.line-remove):not([draggable="true"]),
  .btn, .btn-primary, .btn-secondary, .btn-sm, .btn-lg, .btn-xl, .btn-go, .btn-dark,
  .pill, .tabs a, .dept-links a, .alert-pill > summary {
    transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
  }
  button[type]:not(.link):not(.line-remove):not([disabled]):active,
  .btn:active, .btn-primary:active, .btn-secondary:active, .btn-xl:active, a.btn-sm:active, a.btn-lg:active { transform: scale(.97); }
  a.tile:not([data-tile]):active, .btn-xl.floor-tile:active, .dept-links a:active, .tabs a:active, .alert-pill > summary:active,
  .mainnav a:active, .navmenu > summary:active, .navmenu-list a:active, .surface-staff .rail-toggle:active, .nav-menu-btn:active { transform: scale(.98); }
  .mainnav a, .navmenu > summary, .navmenu-list a, .surface-staff .rail-toggle { transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
  .navmenu-caret { transition: transform var(--dur-med) var(--ease-spring); }
  a.tile { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
  a.tile:hover { box-shadow: var(--shadow-2); }
  /* rail collapse and mobile drawer on the shared tokens (visibility delay kept so the drawer stays focus-safe) */
  .surface-staff { transition: grid-template-columns var(--dur-med) var(--ease-out); }
}
@media screen and (max-width: 700px) {
  .surface-staff .topbar { transition: transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med); }
  .surface-staff.nav-open .topbar { transition: transform var(--dur-med) var(--ease-out); }
}

/* 3. Depth: popovers and menus use the layered shadow, one radius */
.navmenu-list, html.rail-collapsed .surface-staff .navmenu-list { box-shadow: var(--shadow-3); }
.alert-pill-body { box-shadow: var(--shadow-2); }

/* 5. Dialogs: fade + scale from .96 in and out (opacity/transform only). Browsers without @starting-style / allow-discrete just show it. */
dialog.art-dialog { box-shadow: var(--shadow-3); border-radius: var(--r-pop); transform-origin: 50% 45%; }
@supports (transition-behavior: allow-discrete) {
  dialog { opacity: 0; transform: scale(.96); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-spring), overlay var(--dur-med) allow-discrete, display var(--dur-med) allow-discrete; }
  dialog[open] { opacity: 1; transform: none; }
  dialog::backdrop { background-color: transparent; transition: background-color var(--dur-med) var(--ease-out), overlay var(--dur-med) allow-discrete, display var(--dur-med) allow-discrete; }
  dialog[open]::backdrop { background-color: rgba(0,0,0,.45); }
  @starting-style {
    dialog[open] { opacity: 0; transform: scale(.96); }
    dialog[open]::backdrop { background-color: transparent; }
  }
}

/* 6. Accessibility: contrast and focus */
.btn-go, button.btn-go[type], .btn-xl.btn-go { background: #1a7f37; } /* white text 5.08:1 (was 4.42:1) */
.price-tile a:not(.btn):not(.btn-xl), .price-tile button.link[type], .price-tile button.link[type]:hover, .price-tile .error { color: var(--accent-on-dark); }
.price-tile a:not(.btn):not(.btn-xl):hover { color: #ffb4ad; }
.topbar :focus-visible, .mobilebar :focus-visible, .price-tile :focus-visible { outline-color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.topbar a:focus-visible, .topbar button:focus-visible, .topbar summary:focus-visible, .mobilebar button:focus-visible, .price-tile :is(a, button, summary):focus-visible { outline-color: #fff; }

/* 7. Translucent sticky bars (staff only, never floor or print; never on top of another translucent layer) */
@media screen {
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .surface-staff .sticky-actions { background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
    .mobilebar { background: rgba(23,24,28,.82); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
  }
}
@media (prefers-reduced-transparency: reduce) {
  .surface-staff .sticky-actions { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mobilebar { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-backdrop:not([hidden]), .art-dialog::backdrop { background: rgba(0,0,0,.7); }
  .mainnav a:hover, .navmenu > summary:hover, .navmenu[open] > summary, .surface-staff .navmenu-list a:hover, .surface-staff .rail-toggle:hover, .surface-staff .who button.link:hover { background: #3a3d45; }
}
@media (prefers-contrast: more) {
  :root { --line: #8a8f99; --line-strong: #5d616b; --muted: #3c4049; }
  .panel, .tile, .dash-tile, .tabs, .art-dialog, .navmenu-list { border: 1px solid var(--line-strong); }
  .btn-secondary, button.btn-secondary[type] { border-color: var(--ink); }
  .surface-staff .sticky-actions, .mobilebar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mobilebar { background: var(--ink); }
  :focus-visible { outline-width: 4px; }
}

/* Reduced motion: transforms become short opacity fades (press, hover lift, dialogs, drawer, caret) */
@media (prefers-reduced-motion: reduce) {
  button[type]:not(.link):not(.line-remove):not([disabled]):active, .btn:active, .btn-primary:active, .btn-secondary:active, .btn-xl:active,
  a.btn-sm:active, a.btn-lg:active, a.tile:not([data-tile]):active, .btn-xl.floor-tile:active, .dept-links a:active, .tabs a:active,
  .alert-pill > summary:active, .mainnav a:active, .navmenu > summary:active, .navmenu-list a:active, .surface-staff .rail-toggle:active, .nav-menu-btn:active { transform: none; opacity: .75; }
  a.tile:hover { transform: none; }
  .navmenu[open] .navmenu-caret { transform: none; }
  dialog { transform: none !important; transition: opacity var(--dur-fast) linear, overlay var(--dur-fast) allow-discrete, display var(--dur-fast) allow-discrete; }
}

/* 8. Shop-floor tap targets: 48px minimum */
.surface-floor button[type]:not(.link):not(.line-remove), .surface-floor .btn, .surface-floor .btn-sm, .surface-floor .btn-timer, .surface-floor .btn-light,
.surface-floor button.btn-sm[type], .surface-floor button.btn-timer[type], .surface-floor button.btn-light[type] { min-height: 48px; }

/* 9. Type: tighter tracking on large display text; body untouched */
h2 { letter-spacing: -0.015em; }
.tile-title, .dept-tile .dept-head h2 { letter-spacing: -0.015em; }
.price-tile .big-num { letter-spacing: -0.02em; line-height: 1.05; }
.size-msrp { display: block; border: 0; background: none; padding: 0 2px; cursor: pointer; border-bottom: 1px dotted currentColor; }
.size-msrp:hover { color: var(--accent); }
.size-msrp.is-overridden { color: var(--art-ink); background: var(--art-bg); border-radius: 6px; border-bottom: 0; }

/* Quote builder tiles: selects and inputs never push past their card, even with the rail open (Lars, 2026-10-28). */
.bento > .tile { min-width: 0; }
.bento .tile select, .bento .tile .field input:not([type="checkbox"]):not([type="radio"]) { max-width: 100%; min-width: 0; box-sizing: border-box; }
.bento .tile .field select { width: 100%; text-overflow: ellipsis; }

/* Staff rail: sticky makes it its own stacking layer, so lift the whole rail or its collapsed flyouts slide under the page's cards */
@media (min-width: 701px) { .surface-staff .topbar { z-index: 45; } }
/* Collapsed rail flyout: the open-menu link colour must not override the current page's white text */
html.rail-collapsed .surface-staff .navmenu[open] > .navmenu-list a[aria-current="page"] { color: #fff; }

/* "Edit list" beside a dropdown's label when its options come from Admin > Lists (_field.html edit_list). */
.label-row { display: inline; }
.edit-list { font-weight: 400; font-size: .8rem; color: var(--muted); white-space: nowrap; }
/* Decoration location header: "Location · Edit list" on the left (wrapping inside a narrow field), the admin "+" on the
   right of the first line. */
.location-field .field-head { flex-wrap: nowrap; align-items: flex-start; }
.location-field .field-head > .label-row { flex: 1 1 auto; min-width: 0; }