/* Operations Hub · Nebula PC
   Same design system as Attendance Hub: neutral near-black / soft white surfaces, hairline borders, one type family (Geist),
   pill buttons, 1.125rem cards, 0.75rem fields. Colour is reserved for status, and URGENT keeps its bright red. */

/* ───────────── Tokens ───────────── */
:root {
  /* Dark (default) */
  --bg: #0c0c0d;            /* page */
  --bg-2: #0f0f10;          /* side panel */
  --panel: #141415;         /* cards */
  --panel-2: #19191b;       /* raised / hover */
  --field: #111112;         /* inputs */
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --line-3: rgba(255, 255, 255, .2);
  --tint: rgba(255, 255, 255, .025);
  --tint-2: rgba(255, 255, 255, .05);
  --text: #f2f2f0;
  --muted: #a3a3a0;
  --faint: #7d7d7a;
  --ink: #0c0c0d;           /* text on the primary (light) button */
  --primary: #f2f2f0;
  --primary-hover: #ffffff;
  --ok: #4cc38a;  --ok-bg: rgba(76, 195, 138, .1);  --ok-line: rgba(76, 195, 138, .28);
  --warn: #e9b44c; --warn-bg: rgba(233, 180, 76, .1); --warn-line: rgba(233, 180, 76, .28);
  --bad: #f0786c;  --bad-bg: rgba(240, 120, 108, .1); --bad-line: rgba(240, 120, 108, .3);
  --orange: #f2924f; --orange-bg: rgba(242, 146, 79, .1); --orange-line: rgba(242, 146, 79, .32);
  --info: #5ddcea; --info-bg: rgba(93, 220, 234, .09); --info-line: rgba(93, 220, 234, .26);   /* Nebula PC cyan */
  /* Nebula PC brand (logo gradient): only where the hub already had an accent colour, e.g. order page section cards */
  --brand-line: linear-gradient(90deg, #4fd8e8 0%, #8b5cf6 50%, #d64bfe 100%);
  --brand-fg: #b9a4ff; --brand-tint: rgba(139, 92, 246, .14);
  --urgent: #ee5253; --urgent-solid: #ee5253; --urgent-text: #ee5253;   /* URGENT: Amour red */
  --urgent-ink: #0c0c0d;     /* URGENT pill text: the dark page colour, in both themes */
  --chart: #a98bff;
  --ring: rgba(242, 242, 240, .55);
  --bar: rgba(12, 12, 13, .78);
  --toast: #1d1d1f;
  --backdrop: rgba(0, 0, 0, .62);
  --skeleton: rgba(255, 255, 255, .06);
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, .03) inset;
  --shadow-md: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 0.75rem 2rem -0.75rem rgba(0, 0, 0, .6);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 1.5rem 4rem -1rem rgba(0, 0, 0, .75);

  /* Older names still used by page scripts */
  --purple: var(--text); --blue: var(--chart); --pink: var(--warn); --cyan: var(--text); --net: var(--text);

  --radius: 1.125rem; --radius-md: 0.875rem; --radius-sm: 0.75rem; --radius-xs: 0.5rem; --pill: 62.4375rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --pad: clamp(1rem, 3.4vw, 1.5rem);
  --gap: clamp(0.75rem, 2vw, 1rem);
  --section: clamp(1.25rem, 3vw, 1.75rem);

  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-body: .9375rem; --fs-h: 1.0625rem;
  --fs-title: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
  --fs-kpi: clamp(1.75rem, 1.35rem + 1.4vw, 2.375rem);
  --fs-stat: clamp(1.125rem, 1rem + .5vw, 1.375rem);

  --control-h: 2.5rem; --control-sm: 2rem;
  --side-w: 14.5rem; --top-h: 3.75rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --z-bar: 20; --z-side: 30; --z-pop: 50; --z-toast: 100;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f5f5f3; --bg-2: #efefec; --panel: #ffffff; --panel-2: #fafaf8; --field: #ffffff;
  --line: rgba(20, 20, 18, .08); --line-2: rgba(20, 20, 18, .14); --line-3: rgba(20, 20, 18, .24);
  --tint: rgba(20, 20, 18, .025); --tint-2: rgba(20, 20, 18, .045);
  --text: #161615; --muted: #5f5f5b; --faint: #73736e;
  --ink: #fafaf8; --primary: #161615; --primary-hover: #000000;
  --ok: #17784a;  --ok-bg: rgba(23, 120, 74, .08);  --ok-line: rgba(23, 120, 74, .26);
  --warn: #b25e00; --warn-bg: rgba(255, 170, 30, .16); --warn-line: rgba(230, 140, 0, .42);
  --bad: #b8382d;  --bad-bg: rgba(184, 56, 45, .07);  --bad-line: rgba(184, 56, 45, .28);
  --orange: #c05a12; --orange-bg: rgba(192, 90, 18, .08); --orange-line: rgba(192, 90, 18, .3);
  --info: #0a7889; --info-bg: rgba(10, 120, 137, .07); --info-line: rgba(10, 120, 137, .24);
  --brand-line: linear-gradient(90deg, #16b6c9 0%, #7c3aed 50%, #c13ae6 100%);
  --brand-fg: #6d3fe0; --brand-tint: rgba(124, 58, 237, .08);
  --urgent: #ee5253; --urgent-solid: #ee5253; --urgent-text: #d9393a;
  --chart: #8b78d6;
  --ring: rgba(22, 22, 21, .5);
  --bar: rgba(245, 245, 243, .82);
  --toast: #161615;
  --backdrop: rgba(22, 22, 21, .32);
  --skeleton: rgba(20, 20, 18, .06);
  --shadow-sm: 0 1px 0.125rem rgba(20, 20, 18, .04);
  --shadow-md: 0 1px 0.125rem rgba(20, 20, 18, .04), 0 0.5rem 1.5rem -0.625rem rgba(20, 20, 18, .1);
  --shadow-lg: 0 0.125rem 0.375rem rgba(20, 20, 18, .05), 0 1.5rem 3.75rem -1.125rem rgba(20, 20, 18, .22);
  color-scheme: light;
}

/* ───────────── Base ───────────── */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 90%; -webkit-tap-highlight-color: transparent; }   /* everything is in rem: 90% makes the whole hub 10% smaller */
@media (min-width: 641px) { html { font-size: 81%; } }   /* tablets and computers another 10% smaller (Lawrence, 2026-10-15); phones stay at 90% so text stays readable */
a, button, label, summary, [role=button], tr.click { touch-action: manipulation; }   /* no double-tap zoom delay on taps */
/* Desktop (mouse, 1024px+): sized in rem, so the root size scales every page evenly — 100% at 1024px up to 125% at 1536px+, then x .81 (two 10% zoom-outs) */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { html { font-size: clamp(12.96px, calc((16px + (100vw - 1024px) / 128) * .81), 16.2px); } }
body {
  font-family: var(--font); color: var(--text); background: var(--bg); font-size: var(--fs-body); line-height: 1.5;
  min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
:root.theme-anim body, :root.theme-anim body * { transition: background-color .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease) !important; }
a { color: inherit; text-underline-offset: 0.1875rem; text-decoration-color: var(--line-3); }
a:hover { text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
code { font-family: var(--mono); font-size: .9em; }
.mono, .time { font-family: var(--font); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.num, td.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.ic { display: block; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: color-mix(in srgb, var(--text) 22%, transparent); }
:focus-visible { outline: 0.125rem solid var(--ring); outline-offset: 0.125rem; }
:is(input, select, textarea):focus-visible { outline: none; border-color: var(--line-3); box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--text) 12%, transparent); }

/* ───────────── Brand ───────────── */
.brand { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: var(--fs-body); letter-spacing: -.01em; text-decoration: none; color: var(--text); min-width: 0; white-space: nowrap; }
.brand .logo { display: block; flex: none; height: 1.125rem; width: auto; }
.brand .logo.mark-only { display: none; height: 1.625rem; }
.brand .on-light { display: none; }
:root[data-theme="light"] .brand .on-light { display: block; }
:root[data-theme="light"] .brand .on-dark { display: none; }
/* Light mode: logo mark in the wordmark's ink (image hidden, its shape used as a mask) */
:root[data-theme="light"] .brand .logo.on-light,
:root[data-theme="light"] .brand .logo.mark-only,
:root[data-theme="light"] .login .lead-mark {
  object-position: -100vw 0; background: #17152b;
  -webkit-mask: var(--logo-src) center / 100% 100% no-repeat; mask: var(--logo-src) center / 100% 100% no-repeat;
}
:root[data-theme="light"] .brand .logo.on-light { --logo-src: url(/img/logo-dark.png); }
:root[data-theme="light"] .brand .logo.mark-only,
:root[data-theme="light"] .login .lead-mark { --logo-src: url(/img/logo-mark.png); }
.brand .app-name { padding-left: 0.75rem; border-left: 1px solid var(--line-2); line-height: 1.2; }
.brand .app-name small { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
@media (max-width: 520px) {
  .brand .logo.full { display: none !important; }
  .brand .logo.mark-only { display: block; }
  .brand .app-name { padding-left: 0; border-left: 0; }
}
@media (max-width: 420px) { .top-brand .brand .app-name { display: none; } }

/* ───────────── Shell: sidebar on desktop, top bar + drawer below 64rem ───────────── */
.shell { min-height: 100dvh; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr);
  background: linear-gradient(to right, var(--bg-2) calc(var(--side-w) - 1px), var(--line) calc(var(--side-w) - 1px) var(--side-w), transparent var(--side-w)); }
.main { min-width: 0; display: flex; flex-direction: column; }
.side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; z-index: var(--z-side);
  background: var(--bg-2); border-right: 1px solid var(--line); padding: 1.125rem 0.75rem 0.875rem; }
.side-brand { padding: 0.25rem 0.5rem 1.125rem; }
.side-brand .brand { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.side-brand .brand .logo.full { width: calc(var(--side-w) * .75); height: auto; }
.side-brand .brand .logo.mark-only { display: none !important; }
.side-brand .brand .logo.full.on-dark { display: block !important; }
:root[data-theme="light"] .side-brand .brand .logo.full.on-dark { display: none !important; }
:root[data-theme="light"] .side-brand .brand .logo.full.on-light { display: block !important; }
.side-brand .brand .app-name { padding-left: 0; border-left: 0; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-grp { padding: 0.875rem 0.75rem 0.3125rem; font-size: var(--fs-xs); color: var(--faint); font-weight: 500; }
.nav-grp:first-child { padding-top: 0; }
.nav a { display: flex; align-items: center; gap: 0.75rem; height: 2.125rem; padding: 0 0.75rem; border-radius: 0.625rem; color: var(--muted); text-decoration: none;
  font-weight: 500; font-size: var(--fs-sm); white-space: nowrap; transition: color .2s var(--ease), background-color .2s var(--ease); }
.nav a .ic { opacity: .8; }
.nav a[target="_blank"] > .ic:last-child { margin-left: auto; opacity: .4; }
.nav a:hover { color: var(--text); background: var(--tint-2); }
.nav a[aria-current="page"] { color: var(--text); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
.nav a[aria-current="page"] .ic { opacity: 1; }
.nav.arrange a { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.nav a.nav-dragging { background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-2); color: transparent; }
.nav a.nav-dragging > * { opacity: 0 !important; }
.nav-ghost { position: fixed; z-index: var(--z-pop); display: flex; align-items: center; gap: 0.75rem; padding: 0 0.75rem; border-radius: 0.625rem; pointer-events: none;
  color: var(--text); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-lg); font-weight: 500; font-size: var(--fs-sm); white-space: nowrap; text-decoration: none; }
.nav-ghost > .ic:last-child:not(:first-child) { margin-left: auto; opacity: .4; }
body.nav-arranging, body.nav-arranging * { cursor: grabbing !important; }
.nav .nav-reset { align-self: flex-start; margin: 0.75rem 0.75rem 0; color: var(--faint); }
.side-foot { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--line); display: grid; gap: 0.375rem; }
.side-user { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.125rem 0 0.375rem; min-width: 0; }
.side-user > div { min-width: 0; flex: 1; }
.side-user b { display: block; font-size: var(--fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user > div > span { display: block; font-size: var(--fs-xs); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-note { font-size: var(--fs-xs); color: var(--faint); padding: 0 0.5rem; }

.topbar { position: sticky; top: 0; z-index: var(--z-bar); display: flex; align-items: center; gap: 0.75rem; min-height: var(--top-h);
  padding: 0.625rem var(--gutter); padding-top: max(0.625rem, env(safe-area-inset-top));
  background: var(--bar); backdrop-filter: saturate(1.4) blur(1rem); -webkit-backdrop-filter: saturate(1.4) blur(1rem); border-bottom: 1px solid var(--line); }
.spacer { flex: 1; }
.top-actions { display: flex; align-items: center; gap: 0.25rem; flex: none; margin-left: auto; }
.topbar .menu-btn, .top-brand, .shell .top-actions { display: none; }
.search-trigger { flex: 1 1 auto; max-width: 30rem; display: flex; align-items: center; gap: 0.625rem; height: 2.25rem; padding: 0 0.5rem 0 0.875rem; min-width: 0;
  border: 0; border-radius: var(--pill); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--faint); font-size: var(--fs-sm); cursor: text;
  transition: box-shadow .2s var(--ease), color .2s var(--ease); }
.search-trigger:hover { box-shadow: inset 0 0 0 1px var(--line-3); color: var(--muted); }
.search-trigger span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd { font-family: var(--mono); font-size: 0.6875rem; border-radius: 0.375rem; padding: 0.0625rem 0.375rem; color: var(--muted); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.view { min-width: 0; width: 100%; padding: clamp(1.5rem, 2.6vw, 2.5rem) clamp(1rem, 2.4vw, 3rem) 3rem; }
.scrim { display: none; }

@media (max-width: 1023px) {
  .shell { grid-template-columns: minmax(0, 1fr); background: none; }
  /* hidden (not just moved off screen) while closed, so Tab doesn't walk into the menu */
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: min(17rem, 84vw); height: auto; transform: translateX(-102%); visibility: hidden; transition: transform .32s var(--ease), visibility 0s .32s; box-shadow: var(--shadow-lg); overscroll-behavior: contain; }
  body.nav-open .side { transform: none; visibility: visible; transition: transform .32s var(--ease); }
  .scrim { display: block; position: fixed; inset: 0; z-index: calc(var(--z-side) - 1); background: var(--backdrop); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
  body.nav-open .scrim { opacity: 1; pointer-events: auto; }
  .topbar .menu-btn, .top-brand, .shell .top-actions { display: flex; }
  .topbar .menu-btn { display: grid; }
  .top-brand { flex: none; }
  .search-trigger { max-width: none; }
  .view { padding: 1.25rem var(--gutter) 2.5rem; }
}
@media (max-width: 640px) {
  .search-trigger kbd { display: none; }
  .search-trigger span { font-size: var(--fs-sm); }
}
@media (max-width: 359px) { .search-trigger span { display: none; } .search-trigger { flex: 0 0 auto; width: 2.25rem; padding: 0; justify-content: center; margin-left: auto; } }

/* ───────────── Page head ───────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.25rem; flex-wrap: wrap; margin: 0.25rem 0 var(--section); }
.page-head > div:first-child { flex: 1 1 26rem; min-width: 0; }
.page-head h1 { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.page-head p { margin: 0.375rem 0 0; color: var(--muted); font-size: var(--fs-body); max-width: 68ch; }
.page-head .row { gap: 0.5rem; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; margin: var(--section) 0 0.75rem; flex-wrap: wrap; }
.section-title h2 { margin: 0; font-size: var(--fs-h); font-weight: 600; letter-spacing: -.015em; }
div.wrap { max-width: 92.5rem; margin: 0 auto; padding: var(--gutter); }
.narrow { max-width: 35rem; margin: 0 auto; }

/* ───────────── Cards & layout ───────────── */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); min-width: 0; box-shadow: var(--shadow-sm); }
.card + .card, .stack > * + * { margin-top: var(--gap); }
:is(.grid2, .grid3, .grid-2, .grid-halves, .kpis, .settings-grid) > .card { margin-top: 0; }
.card h2, .card h3 { margin: 0 0 0.875rem; font-size: var(--fs-h); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.card h4 { margin: 0 0 0.5rem; font-size: var(--fs-sm); font-weight: 600; }
.row > h2, .row > h3 { margin: 0; }
.card > .row.between:first-child:has(> h2, > h3) { margin-bottom: 0.875rem; }
.card p:last-child, .d-body p:last-child, .card > :last-child, .d-body > :last-child { margin-bottom: 0; }
[id$=Msg]:empty, .cmsg:empty { display: none; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: var(--fs-sm); }
p.small.muted, p.small.faint { line-height: 1.55; }
.row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.grid2 > *, .grid3 > *, .filters > * { min-width: 0; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap); align-items: start; }
.grid-2 > div > .card:first-child { margin-top: 0; }
/* Expedited Orders: day summary left, compact calendar right, 50/50; stacked summary-first on smaller screens */
.grid-cal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid-cal .cal { gap: 0.25rem; }
.grid-cal .cal-head { margin-bottom: 0.625rem; }
.grid-cal .cal-cell { min-height: 4.75rem; padding: 0.375rem 0.5rem; gap: 0.25rem; }
.grid-cal .cal-cell .top b { font-size: 1.25em; }
.grid-cal .cal-cell .n { font-size: 0.9375rem; }
/* No cut-off notes: non-working names (Weekend, holidays) show on hover */
.grid-cal .cal-cell.lvl-nonworking .note { display: none; }
.grid-halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
input, select, textarea { min-width: 0; max-width: 100%; }
.mt0 { margin-top: 0 !important; }
.mt { margin-top: var(--gap) !important; }
.mt-sm { margin-top: 0.5rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.hint { font-size: var(--fs-xs); color: var(--faint); margin-top: 0.375rem; line-height: 1.45; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13.75rem, 100%), 1fr)); gap: 0 var(--gap); }
.inline-form { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form label.f { margin: 0; }
.checklist { display: grid; gap: 0.625rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }

/* ───────────── Buttons (pill) ───────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: var(--control-h); padding: 0 1.125rem;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--text); border-radius: var(--pill);
  font-weight: 500; font-size: var(--fs-sm); letter-spacing: -.005em; cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .16s var(--ease); }
.btn:hover:not(:disabled) { border-color: var(--line-3); background: var(--panel-2); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--primary); color: var(--ink); border-color: transparent; font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: transparent; }
.btn.danger { color: var(--bad); border-color: var(--bad-line); background: transparent; }
.btn.danger:hover:not(:disabled) { background: var(--bad-bg); border-color: var(--bad-line); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { background: var(--tint-2); border-color: transparent; color: var(--text); }
.btn.sm { height: var(--control-sm); padding: 0 0.875rem; gap: 0.375rem; }
.btn.sm.sq { width: var(--control-sm); padding: 0; flex: none; }
.btn.block { width: 100%; height: 2.875rem; font-size: var(--fs-body); }
.btn .ic { margin-inline: -0.125rem; }
a.btn { line-height: 1; }
.linkbtn { background: none; border: 0; color: var(--text); cursor: pointer; padding: 0; font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 0.1875rem; }
.linkbtn:hover { text-decoration-color: currentColor; }
.icon-btn { display: inline-grid; place-items: center; vertical-align: middle; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 0.5rem; background: none; color: var(--faint); cursor: pointer; flex: none; text-decoration: none;
  transition: color .2s var(--ease), background-color .2s var(--ease); }
.icon-btn:hover:not(:disabled) { color: var(--text); background: var(--tint-2); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.icon-btn { width: var(--control-sm); height: var(--control-sm); border-radius: 0.5rem; padding: 0; }
.danger-text { color: var(--bad) !important; }
.theme-btn .i-sun { display: none; }
:root[data-theme="light"] .theme-btn .i-sun { display: block; }
:root[data-theme="light"] .theme-btn .i-moon { display: none; }

/* Segmented tabs (one track) */
.seg-tabs { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 0; padding: 0.1875rem; border-radius: var(--pill); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line); }
.seg-tabs button { height: 1.875rem; padding: 0 0.9375rem; border: 0; border-radius: var(--pill); background: none; color: var(--muted); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.seg-tabs button:hover { color: var(--text); }
.seg-tabs button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 0.125rem rgba(0,0,0,.18), inset 0 0 0 1px var(--line-2); }
.seg { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.seg label { cursor: pointer; }
.seg label input { position: absolute; opacity: 0; pointer-events: none; }
.seg label span { display: inline-flex; align-items: center; height: 2rem; padding: 0 0.875rem; border-radius: var(--pill); font-weight: 500; font-size: var(--fs-sm);
  color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .2s var(--ease), color .2s var(--ease); }
.seg label input:checked + span { background: var(--primary); color: var(--ink); box-shadow: none; }
.seg label input:focus-visible + span { outline: 0.125rem solid var(--ring); outline-offset: 0.125rem; }

/* ───────────── Status badges ───────────── */
.pill { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.375rem; padding: 0 0.5625rem; border-radius: var(--pill); font-size: var(--fs-xs); font-weight: 500; line-height: 1;
  color: var(--muted); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; vertical-align: middle; border: 0; }
.pill .dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; flex: none; }
.pill.ok, .pill.tone-ok, .pill.in { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.pill.warn, .pill.tone-warn, .pill.sev-medium { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.pill.bad, .pill.tone-bad, .pill.sev-high { color: var(--bad); background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); }
.pill.tone-orange { color: var(--orange); background: var(--orange-bg); box-shadow: inset 0 0 0 1px var(--orange-line); }
.kpi.orange .v { color: var(--orange); }
.ag-chips { margin-bottom: 0.75rem; }
.ag-chips .seg-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ag-chips .seg-tabs::-webkit-scrollbar { display: none; }
.ag-feed { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--faint); }
.ag-feed .btn { gap: 0.375rem; }
.ag-shop { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; margin-top: 0.75rem; font-size: var(--fs-sm); color: var(--muted); }
.ag-shop b { color: var(--text); font-weight: 500; }
.ag-ai { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.ag-ai > svg { flex: none; margin-top: 0.125rem; color: var(--muted); }
.ag-ai span { font-size: var(--fs-sm); color: var(--muted); }
.ag-ai p { margin: 0.125rem 0 0; }
.pill.tone-info, .pill.dlv-shipping { color: var(--info); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-line); }
.pill.tone-neutral, .pill.sev-low, .pill.out { color: var(--muted); }
.pill.tag, .pill.dlv-pickup { color: var(--text); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.pill.dlv-local { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.pill.ok.solid { font-weight: 600; }
.pill.demo { height: 1.125rem; padding: 0 0.375rem; font-size: 0.625rem; font-weight: 600; letter-spacing: .06em; color: var(--faint); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
/* Colours picked per status in Settings → Order Statuses */
.pill.status-c { background: var(--pc); color: var(--pt, #fff); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); font-weight: 600; }
:root[data-theme="light"] .pill.status-c { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
@keyframes pulse { 50% { opacity: .35; } }

/* URGENT: must dispatch on the scheduled date — the one loud colour in the hub */
.pill.urgent { background: var(--urgent-solid); color: var(--urgent-ink); box-shadow: none; font-weight: 700; letter-spacing: .05em; }
.pill.urgent-alert { background: transparent; color: var(--urgent-text); box-shadow: inset 0 0 0 1.5px var(--urgent); font-weight: 700; letter-spacing: .04em; }
.urgent-text { color: var(--urgent-text); }
tr.row-urgent > td:first-child { box-shadow: inset 0.1875rem 0 0 var(--urgent); }
tr.row-urgent-due > td { background: color-mix(in srgb, var(--urgent) 9%, transparent); }
.urgent-box { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.875rem; margin: -0.125rem 0 1rem; border-radius: var(--radius-md); cursor: pointer;
  background: color-mix(in srgb, var(--urgent) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--urgent) 45%, transparent); }
.urgent-box input[type=checkbox] { margin-top: 0.1875rem; accent-color: var(--urgent); width: 1.125rem; height: 1.125rem; flex: none; }
.urgent-box b { display: block; color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
.urgent-box small { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: 0.125rem; }

/* ───────────── Alerts & toasts ───────────── */
.alert { position: relative; border-radius: var(--radius-md); padding: 0.75rem 0.875rem 0.75rem 1rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--text);
  background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-2); }
.alert b { display: block; margin-bottom: 0.125rem; font-weight: 600; }
.alert.error { background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); }
.alert.error b { color: var(--bad); }
.alert.warn { background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.alert.warn b { color: var(--warn); }
.alert.ok { background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.alert.ok b { color: var(--ok); }
.alert.info { background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-line); }
.toast-host { position: fixed; right: 1.5rem; bottom: calc(1.5rem + env(safe-area-inset-bottom)); z-index: var(--z-toast); display: grid; gap: 0.5rem; width: min(calc(100vw - 2rem), 26.25rem); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); background: var(--toast); color: #f2f2f0;
  font-size: var(--fs-sm); line-height: 1.45; box-shadow: var(--shadow-lg); animation: toast-in .32s var(--ease); pointer-events: auto; }
:root[data-theme="light"] .toast { color: #fafaf8; }
.toast .ic { margin-top: 0.0625rem; }
.toast.ok .ic { color: #6bd6a1; }
.toast.error .ic { color: #ff8f84; }
.toast.leaving { animation: toast-out .22s var(--ease) forwards; }
@keyframes toast-in { from { transform: translateY(0.625rem) scale(.98); opacity: 0; } }
@keyframes toast-out { to { transform: translateY(0.375rem); opacity: 0; } }
@media (max-width: 640px) { .toast-host { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom)); } }

/* ───────────── Tables ───────────── */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 0.75rem 0; border-top: 1px solid var(--line); }
.list > li:first-child { border-top: 0; padding-top: 0.125rem; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { padding: 0.6875rem 0.875rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { height: 2.5rem; padding-block: 0; font-size: var(--fs-xs); color: var(--faint); font-weight: 500; background: var(--tint); white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tbody tr { transition: background-color .15s var(--ease); }
tr:last-child td { border-bottom: 0; }
.data td { white-space: nowrap; }
.data td.wrap { white-space: normal; min-width: 11rem; max-width: 26rem; }
.data td.note-col { min-width: 15rem; }
.data td.ai-sum-col { min-width: 15rem; max-width: 22rem; }
.ai-sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.data tbody tr:hover td { background: var(--tint); }
.data tbody tr.click, .click-row { cursor: pointer; }
.data tr.muted-row td { opacity: .5; }
table.data th.c, table.data td.c { text-align: center; width: 1%; white-space: nowrap; padding-inline: 0.625rem; }
.order-no { font-family: var(--mono); font-weight: 500; font-size: .95em; letter-spacing: -.01em; }
a.order-no { color: var(--text); text-decoration: none; }
a.order-no:hover { text-decoration: underline; text-decoration-color: var(--line-3); }
.cell-sub { display: block; font-size: var(--fs-xs); color: var(--faint); margin-top: 0.125rem; }
.cell-sub.pc-name { max-width: 21rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.toolbar-row { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: end; justify-content: space-between; margin-bottom: 0.75rem; }
.toolbar-row .filters { flex: 1 1 32rem; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 0.625rem; margin-top: 0.75rem; font-size: var(--fs-sm); color: var(--muted); }

/* ───────────── Forms ───────────── */
label.f { display: block; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 0.875rem; min-width: 0; }
label.f > span { display: block; margin-bottom: 0.375rem; font-weight: 500; }
label.f > span.combo, label.f > span.dmy-field { margin-bottom: 0; font-weight: 400; }
div.f { margin-bottom: 0.875rem; }
div.f > span { display: block; margin-bottom: 0.375rem; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
input:not([type]), input[type=text], input[type=email], input[type=number], input[type=password], input[type=search], input[type=date], input[type=datetime-local], input[type=time], select, textarea {
  display: block; width: 100%; min-width: 0; background: var(--field); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 0 0.875rem; height: var(--control-h); line-height: normal; color: var(--text); font-size: var(--fs-body);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
:is(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--line-3); }
::placeholder { color: var(--faint); opacity: 1; }
textarea { height: auto; min-height: 5.25rem; padding: 0.6875rem 0.875rem; line-height: 1.5; resize: vertical; }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; background: transparent; }
input[type=date], input[type=datetime-local], input[type=time] { -webkit-appearance: none; appearance: none; text-align: left; line-height: 1.25; padding-block: calc((var(--control-h) - 1.25em - 0.125rem) / 2); }
select { -webkit-appearance: none; appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8a86' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.875rem center; }
.code-input { font-family: var(--mono); font-size: clamp(1.4rem, 1rem + 2.4vw, 1.75rem) !important; letter-spacing: .4em; text-align: center; height: 3.625rem !important; padding-left: calc(0.875rem + .4em) !important; }
.check { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--text); font-size: var(--fs-sm); cursor: pointer; }
input[type=checkbox], input[type=radio] { flex: none; width: 1rem; height: 1rem; margin: 0; accent-color: var(--text); cursor: pointer; }
fieldset.plain, fieldset.bare { border: 0; padding: 0; margin: 0 0 0.875rem; min-width: 0; }
fieldset.bare { margin: 0; }
fieldset.plain legend { padding: 0; margin-bottom: 0.375rem; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
fieldset.bare:disabled input, fieldset.bare:disabled select { opacity: .7; }
@media (max-width: 640px), (pointer: coarse) {
  :root { --control-h: 2.75rem; --control-sm: 2.375rem; }
  input:not([type]), input[type=text], input[type=email], input[type=number], input[type=password], input[type=search], input[type=date], input[type=datetime-local], input[type=time], select, textarea { font-size: 16px; }   /* 16px stops iOS zooming in */
  input[type=checkbox] { width: 1.25rem; height: 1.25rem; }
}

/* DD/MM/YYYY date & time fields (see common.js): text box + picker button, browser input kept hidden underneath */
.dmy-field { position: relative; display: block; min-width: 0; }
.f > .dmy-field, .filters label.f > .dmy-field { margin-bottom: 0; }
.dmy-field > input[type=text] { display: block; width: 100%; padding-right: 2.5rem; font-variant-numeric: tabular-nums; }
.dmy-field > input[type=date], .dmy-field > input[type=time] { position: absolute; right: 0; bottom: 0; width: 2.5rem; height: 100%; opacity: 0; pointer-events: none; padding: 0; border: 0; }
.dmy-pick { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; display: grid; place-items: center;
  background: none; border: 0; color: var(--faint); cursor: pointer; border-radius: 0.5rem; z-index: 1; }
.dmy-pick:hover { color: var(--text); background: var(--tint-2); }
.dmy-pick:disabled { opacity: .4; cursor: not-allowed; }

/* Floating panels: type-to-search lists and the time picker */
.float-panel { position: fixed; z-index: 1000; overscroll-behavior: contain; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); color: var(--text); animation: pop-in .18s var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-0.25rem) scale(.98); } }
.combo { position: relative; display: block; min-width: 0; }
.combo > input[type=text] { padding-right: 2.25rem; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8a86' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.875rem center; }
.combo > select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.combo-list { max-height: 17.5rem; overflow-y: auto; padding: 0.375rem; }
.combo-opt { padding: 0.5625rem 0.75rem; border-radius: 0.625rem; cursor: pointer; font-size: var(--fs-body); white-space: nowrap; }
.combo-opt.blank { color: var(--muted); }
.combo-opt.is-sel { font-weight: 600; }
.combo-opt.is-hi, .combo-opt:hover { background: var(--tint-2); }
.combo-group { padding: 0.625rem 0.75rem 0.25rem; font-size: var(--fs-xs); color: var(--faint); font-weight: 500; }
.combo-none { padding: 0.5625rem 0.75rem; color: var(--faint); font-size: var(--fs-sm); }
.time-panel { padding: 0.5rem; }
.cal-panel { padding: 0.75rem; width: 18.5rem; max-width: calc(100vw - 1rem); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.5rem; }
.cal-head b { font-weight: 600; letter-spacing: -.01em; }
.cal-nav { width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.cal-nav .ic { transform: rotate(90deg); }
.cal-nav.next .ic { transform: rotate(-90deg); }
.cal-nav:hover:not(:disabled) { background: var(--tint-2); color: var(--text); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.125rem; }
.cal-dow { text-align: center; font-size: var(--fs-xs); color: var(--faint); font-weight: 500; padding: 0.25rem 0 0.375rem; }
.cal-day { aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-day.out { color: var(--faint); }
.cal-day:hover:not(:disabled) { background: var(--tint-2); }
.cal-day:focus-visible { outline: 0.125rem solid var(--ring); outline-offset: -0.125rem; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--line-3); font-weight: 600; }
.cal-day.sel { background: var(--primary); color: var(--ink); font-weight: 600; box-shadow: none; }
.cal-day:disabled { opacity: .28; cursor: default; }
.cal-foot { display: flex; justify-content: space-between; margin-top: 0.5rem; padding: 0.375rem 0.25rem 0; border-top: 1px solid var(--line); }
.cal-foot [data-today] { margin-left: auto; }
.tp-cols { display: flex; gap: 0.25rem; }
.tp-col { display: flex; flex-direction: column; gap: 0.125rem; height: 14.25rem; overflow-y: auto; scrollbar-width: thin; padding-right: 0.125rem; min-width: 3.25rem; }
.tp-cell { background: none; border: 0; color: var(--text); font: inherit; font-variant-numeric: tabular-nums; padding: 0.4375rem 0.625rem; border-radius: 0.5rem; cursor: pointer; text-align: center; }
.tp-cell:hover { background: var(--tint-2); }
.tp-cell.is-sel { background: var(--primary); color: var(--ink); font-weight: 600; }
.tp-foot { display: flex; justify-content: flex-end; gap: 0.375rem; border-top: 1px solid var(--line); margin-top: 0.5rem; padding-top: 0.5rem; }

/* ───────────── Dialogs ───────────── */
dialog { border: 1px solid var(--line-2); border-radius: 1.375rem; background: var(--panel); color: var(--text); padding: 0; box-shadow: var(--shadow-lg);
  width: min(35rem, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 3rem); }
dialog.wide { width: min(53.75rem, calc(100vw - 2 * var(--gutter))); }
dialog[open] { display: flex; flex-direction: column; animation: dlg-in .32s var(--ease); }
dialog[open]::backdrop { animation: fade-in .25s var(--ease); }
dialog:focus { outline: none; }
dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(0.25rem); -webkit-backdrop-filter: blur(0.25rem); }
dialog .d-head { padding: 1.125rem 1.125rem 0.875rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
dialog .d-head h3 { margin: 0; font-size: var(--fs-h); font-weight: 600; letter-spacing: -.015em; }
dialog.sub-detail .d-head h3 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }   /* Subs & Upgrades: the order number stands out */
dialog .d-body { padding: 0.25rem 1.5rem 1.375rem; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
dialog .d-foot { padding: 0.875rem 1.25rem max(0.875rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; background: var(--tint); }
.d-body form > label.f:last-of-type { margin-bottom: 0; }
.d-body [id$=Msg]:not(:empty) { margin-top: 0.875rem; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(0.625rem) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }
@media (max-width: 560px) {
  dialog, dialog.wide { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 1.375rem 1.375rem 0 0; border-bottom: 0; max-height: 92dvh; }
  dialog[open] { animation: sheet-in .38s var(--ease); }
  dialog .d-head { padding-top: 1.375rem; position: relative; }
  dialog .d-head::before { content: ''; position: absolute; top: 0.5rem; left: 50%; width: 2.25rem; height: 0.25rem; margin-left: -1.125rem; border-radius: 0.25rem; background: var(--line-2); }
  dialog .d-foot > .btn { flex: 1 1 auto; }
}
@keyframes sheet-in { from { transform: translateY(100%); } }

/* ───────────── States ───────────── */
.empty { display: grid; justify-items: center; gap: 0.375rem; text-align: center; padding: 2.25rem 1rem; color: var(--muted); font-size: var(--fs-sm); }
.empty .big { color: var(--text); font-weight: 500; font-size: var(--fs-body); }
.empty.small { padding: 1.25rem 0.75rem; }
.err-card { border-color: var(--bad-line); }
.skeleton { background: var(--skeleton); border-radius: 0.5rem; height: 0.875rem; position: relative; overflow: hidden; }
.skeleton.tall { height: 2rem; width: 45%; margin-top: 0.875rem; }
.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--tint-2), transparent); animation: shimmer 1.4s var(--ease) infinite; }
.skeleton + .skeleton { margin-top: 0.75rem; }
.skel-page { display: grid; gap: var(--gap); }
.skel-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--gap); }
@keyframes shimmer { to { transform: translateX(100%); } }
.spinner { width: 0.875rem; height: 0.875rem; border: 0.125rem solid currentColor; border-top-color: transparent; opacity: .8; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Page entrance */
.enter > * { animation: rise .42s var(--ease) both; }
.enter > *:nth-child(2) { animation-delay: 40ms; }
.enter > *:nth-child(3) { animation-delay: 80ms; }
.enter > *:nth-child(n+4) { animation-delay: 110ms; }
@keyframes rise { from { opacity: 0; transform: translateY(0.375rem); } }
details > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.5rem; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ''; width: 0.375rem; height: 0.375rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .25s var(--ease); margin-right: 0.125rem; }
details[open] > summary::before { transform: rotate(45deg); }
details.more { min-width: 0; max-width: 100%; }
details.more > summary, details.parts > summary { color: var(--muted); font-weight: 500; font-size: var(--fs-sm); padding: 0.125rem 0; }
details > summary:hover { color: var(--text); }
pre.json { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: .78rem; background: var(--field); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.5rem; margin: 0.375rem 0 0; max-height: 13.75rem; overflow: auto; }

/* ───────────── Sign in ───────────── */
.login-bar .top-actions { display: flex; }
.login { min-height: calc(100dvh - 3.8125rem); display: grid; justify-items: center; align-content: start; padding: clamp(2.5rem, 12vh, 7.5rem) var(--gutter) 2rem; }
.login .card { width: 100%; max-width: 25rem; padding: clamp(1.5rem, 6vw, 2.25rem); box-shadow: var(--shadow-md); }
.login h1 { font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); font-weight: 600; letter-spacing: -.035em; margin: 0 0 0.375rem; line-height: 1.15; }
.login .lead-mark { width: 2.5rem; height: 2.5rem; margin-bottom: 1.375rem; display: block; }
.login .stack > * + * { margin-top: 0.75rem; }
.login-foot { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.demo-banner { background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--warn-line); padding: 0.375rem var(--gutter); font-size: var(--fs-sm); text-align: center; }

/* ───────────── KPIs (one strip, hairline dividers) ───────────── */
.kpis { display: flex; flex-wrap: wrap; gap: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.kpis > * { flex: 1 1 10.5rem; }
.kpis.two > * { flex-basis: 40%; }
.kpis > .card, .kpis > .kpi { margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }
.kpi { position: relative; padding: var(--pad); display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; color: inherit; min-width: 0; transition: background-color .2s var(--ease); }
a.kpi:hover { background: var(--tint); }
.kpi .k { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .v { font-size: var(--fs-kpi); font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: .45em; color: var(--faint); font-weight: 500; letter-spacing: 0; margin-left: 0.25rem; }
.kpi .v.sm { font-size: var(--fs-stat); line-height: 1.25; letter-spacing: -.02em; }
.kpi .s { font-size: var(--fs-xs); color: var(--faint); }
.kpi.ok .v { color: var(--ok); } .kpi.warn .v { color: var(--warn); } .kpi.bad .v { color: var(--bad); }
.stat { padding: 0.75rem 0.875rem; border-radius: var(--radius-md); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.stat .k { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v { font-size: var(--fs-stat); font-weight: 600; letter-spacing: -.02em; margin-top: 0.125rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ───────────── Capacity ───────────── */
.bar { height: 0.375rem; border-radius: var(--pill); background: var(--tint-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--pill); background: var(--ok); transition: width .5s var(--ease); }
.lvl-warn .bar > i { background: var(--warn); }
.lvl-full .bar > i, .lvl-over .bar > i, .lvl-closed .bar > i { background: var(--bad); }
.cap-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.625rem; }
.cap-day { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel);
  text-decoration: none; color: inherit; cursor: pointer; min-width: 0; font: inherit; text-align: left; box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease); }
.cap-day:hover { border-color: var(--line-3); }
.cap-day:active { transform: scale(.985); }
.cap-day .d { display: flex; flex-direction: column; gap: 0.0625rem; font-size: var(--fs-sm); color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cap-day .d b { color: var(--text); font-weight: 600; }
.cap-day .n { font-size: 1.5rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.cap-day .n small { font-size: .55em; color: var(--faint); font-weight: 500; letter-spacing: 0; }
.cap-day .r { font-size: var(--fs-xs); color: var(--faint); display: flex; justify-content: space-between; gap: 0.375rem; }
.cap-day.today { border-color: var(--line-3); background: var(--panel-2); }
.lvl-text { font-weight: 500; }
.lvl-ok .lvl-text { color: var(--ok); } .lvl-warn .lvl-text { color: var(--warn); } .lvl-full .lvl-text, .lvl-over .lvl-text, .lvl-closed .lvl-text { color: var(--bad); }
.lvl-nonworking { opacity: .5; }

/* Month calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; margin-bottom: 0.875rem; flex-wrap: wrap; }
.cal-head h2 { margin: 0; font-size: var(--fs-h); font-weight: 600; letter-spacing: -.015em; min-width: 9em; }
.cal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.375rem; }
.cal .dow { font-size: var(--fs-xs); font-weight: 500; color: var(--faint); padding: 0 0.375rem 0.125rem; }
.cal-cell { min-height: 6.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--tint); padding: 0.5rem 0.625rem; display: flex; flex-direction: column; gap: 0.375rem;
  cursor: pointer; text-align: left; font: inherit; color: inherit; min-width: 0; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.cal-cell:hover { border-color: var(--line-3); background: var(--tint-2); }
.cal-cell.other { opacity: .45; }
.cal-cell.past { opacity: .75; }
.cal-cell.is-sel { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: var(--panel-2); }
.cal-cell .top { display: flex; justify-content: space-between; align-items: center; gap: 0.25rem; font-size: var(--fs-body); }
.cal-cell .top b { font-weight: 700; color: var(--text); font-size: 1.4em; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }   /* date stands out from the booked counter */
.cal-cell .top .today-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--text); }
.cal-cell .n { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.cal-cell .n small { color: var(--faint); font-weight: 500; font-size: .8em; }
.cal-cell .note { font-size: var(--fs-xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-cell.lvl-nonworking { cursor: default; }
.legend-row { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font-size: var(--fs-xs); color: var(--faint); margin-top: 0.75rem; }
.legend-row span { display: inline-flex; align-items: center; gap: 0.375rem; }
.legend-row i { width: 0.5rem; height: 0.5rem; border-radius: 50%; display: inline-block; }

/* ───────────── Attention, activity, feeds ───────────── */
.attn { list-style: none; margin: 0; padding: 0; }
.attn li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.attn li:first-child { border-top: 0; padding-top: 0.125rem; }
.attn .ico { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.attn .ico.bad { background: var(--bad-bg); color: var(--bad); }
.attn .ico.warn { background: var(--warn-bg); color: var(--warn); }
.attn a { color: var(--text); text-decoration: none; }
.attn a:hover { text-decoration: underline; text-decoration-color: var(--line-3); }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: 0.625rem; padding: 0.625rem 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.feed li:first-child { border-top: 0; padding-top: 0.125rem; }
.feed time { color: var(--faint); font-size: var(--fs-xs); padding-top: 0.125rem; font-variant-numeric: tabular-nums; }
.feed a { color: var(--text); text-decoration: none; }
.feed .act { color: var(--faint); font-size: var(--fs-xs); }
.shop-feed { list-style: none; padding: 0; margin: 0; }
.shop-feed li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.625rem; align-items: center; padding: 0.625rem 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.shop-feed li:first-child { border-top: 0; padding-top: 0.125rem; }
.shop-feed .sub { color: var(--faint); font-size: var(--fs-xs); }
.shop-feed .pills { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: flex-end; }

/* Builder progress */
.prog { display: grid; grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr) 4.5rem; gap: 0.75rem; align-items: center; padding: 0.4375rem 0; font-size: var(--fs-sm); }
.prog .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.prog .num { text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; }
.prog .num b { color: var(--text); font-weight: 600; }
.prog .bar { height: 0.5rem; position: relative; overflow: visible; }
.prog .bar > i { background: var(--chart); }
.prog.met .bar > i { background: var(--ok); }

/* Charts */
.chart-box { position: relative; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .ax text { fill: var(--faint); font: 11px var(--font); font-variant-numeric: tabular-nums; }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .base { stroke: var(--line-2); }
.chart .tgt { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.chart .hit { fill: transparent; cursor: default; }
.chart-tip { position: absolute; pointer-events: none; z-index: 5; background: var(--toast); color: #f2f2f0; border-radius: 0.625rem;
  padding: 0.4375rem 0.625rem; font-size: var(--fs-xs); box-shadow: var(--shadow-lg); white-space: nowrap; transform: translate(-50%, calc(-100% - 0.625rem)); }
:root[data-theme="light"] .chart-tip { color: #fafaf8; }
.chart-tip b { font-size: .9rem; font-variant-numeric: tabular-nums; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 0.875rem; font-size: var(--fs-xs); color: var(--faint); margin-top: 0.5rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.chart-legend i { width: 0.75rem; height: 0.1875rem; border-radius: 0.125rem; display: inline-block; }
.chart-legend i.dash { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 7px) !important; }

/* ───────────── Search palette ───────────── */
dialog.palette { width: min(42.5rem, calc(100vw - 1.5rem)); margin: 12vh auto auto; max-height: 76vh; border-radius: var(--radius); }
.palette .pal-in { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); color: var(--faint); }
.palette .pal-in input { border: 0 !important; background: transparent !important; height: 2.5rem !important; padding: 0 !important; font-size: 1.0625rem !important; outline: none !important; box-shadow: none !important; }
.palette .pal-res { overflow-y: auto; padding: 0.375rem; min-height: 3.75rem; overscroll-behavior: contain; }
.pal-group { font-size: var(--fs-xs); color: var(--faint); font-weight: 500; padding: 0.625rem 0.625rem 0.25rem; }
.pal-item { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.5625rem 0.625rem; border-radius: 0.625rem; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; font-size: var(--fs-sm); }
.pal-item[aria-selected="true"], .pal-item:hover { background: var(--tint-2); }
.pal-item .sub { color: var(--faint); font-size: var(--fs-xs); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.pal-item .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pal-item .pal-order { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.pal-item .pal-order .order-no { font-weight: 700; font-size: var(--fs-body); }
.pal-item .pal-meta { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-foot { display: flex; gap: 0.875rem; padding: 0.5rem 1rem; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--faint); background: var(--tint); }
@media (max-width: 560px) { dialog.palette { margin: 0 auto auto; border-radius: 0 0 var(--radius) var(--radius); width: 100vw; max-width: 100vw; } dialog.palette[open] { animation: fade-in .2s var(--ease); } .pal-foot { display: none; } }

/* ───────────── Order view ───────────── */
/* Order view: section cards with the Nebula PC brand accent (gradient top bar + violet icon chip); per-section --acc is ignored */
.ogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--gap); }
.ogrid + .card { margin-top: var(--gap); }
.ogrid > .card { margin-top: 0; }
.card.osec { position: relative; overflow: hidden; }
.card.osec::before { content: ''; position: absolute; inset: 0 0 auto; height: 0.125rem; background: var(--brand-line); opacity: .9; }
.osec h3 { display: flex; align-items: center; gap: 0.5rem; }
.osec-ic { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: var(--radius-xs); color: var(--brand-fg); background: var(--brand-tint); }
.ocust { display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--fs-sm); min-width: 0; }
.ocust b { font-size: var(--fs-body); font-weight: 600; }
.ocust a { color: var(--info); text-decoration: none; overflow-wrap: anywhere; }
.ocust a:hover { text-decoration: underline; }
.oov { display: flex; gap: 0.375rem; align-items: flex-start; margin: 0.75rem 0 0; color: var(--warn); }
.oov .ic { flex: none; margin-top: 0.125rem; }
.onote { white-space: pre-wrap; overflow-wrap: anywhere; }
.oaddr { font-style: normal; font-size: var(--fs-sm); line-height: 1.6; overflow-wrap: anywhere; }
.order-hero { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.order-hero .order-no { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 600; letter-spacing: -.03em; }
.cctv { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 0.625rem; }
.cctv .stat .v { font-size: 1.0625rem; white-space: normal; overflow-wrap: anywhere; }
.cctv .stat.net .v { font-size: 1.25rem; }
.lk-h { margin: 1rem 0 0.5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.lk-h:first-child { margin-top: 0; }
#cctvOut > .card + .card { margin-top: 0.625rem; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1rem; font-size: var(--fs-sm); margin: 0; }
.kv dt { color: var(--faint); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 0.875rem 1.25rem; font-size: var(--fs-sm); }
.timeline li::before { content: ''; position: absolute; left: 0.1875rem; top: 0.4375rem; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px var(--panel); }
.timeline li::after { content: ''; position: absolute; left: 0.40625rem; top: 1.125rem; bottom: 0.125rem; width: 1px; background: var(--line-2); }
.timeline li:last-child::after { display: none; }
.timeline time { display: block; color: var(--faint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.shopify-btn { display: inline-flex; align-items: center; gap: 0.375rem; }
.items { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.875rem; container-type: inline-size; }
.items > .item + .item { padding-top: 0.875rem; border-top: 1px solid var(--line); }
.items .it { display: flex; align-items: flex-start; gap: 0.625rem; font-size: var(--fs-sm); }
.items .q { flex: none; min-width: 1.75rem; height: 1.375rem; padding: 0 0.375rem; display: inline-grid; place-items: center; border-radius: var(--radius-xs);
  background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.items .it-main { min-width: 0; display: grid; gap: 0.125rem; padding-top: 0.0625rem; }
.items .it-main b { font-weight: 600; overflow-wrap: anywhere; }
.items .it-sub { display: flex; flex-wrap: wrap; gap: 0 0.75rem; color: var(--faint); font-size: var(--fs-xs); }
.items .it-sub .mono { font-family: var(--mono); font-size: 0.6875rem; }
.items details.parts { margin: 0.5rem 0 0 2.375rem; }
.pt-list { list-style: none; margin: 0.5rem 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--tint); overflow: hidden; }
.pt { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; padding: 0.5625rem 0.875rem; }
.pt + .pt { border-top: 1px solid var(--line); }
.pt-list.no-cat .pt { grid-template-columns: minmax(0, 1fr); }
.pt-list.no-cat .pt-cat { display: none; }
.pt-cat { color: var(--faint); font-size: var(--fs-xs); font-weight: 500; }
.pt-main { min-width: 0; display: grid; gap: 0.125rem; }
.pt-name { font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere; }
.pt-q { color: var(--muted); font-variant-numeric: tabular-nums; }
.pt-sku { font-family: var(--mono); font-size: 0.6875rem; color: var(--faint); overflow-wrap: anywhere; }
@container (max-width: 26rem) {
  .items details.parts { margin-left: 0; }
  .pt { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; padding: 0.5rem 0.75rem; }
  .pt-cat:empty { display: none; }
}
.swatch { display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 0.25rem; box-shadow: inset 0 0 0 1px var(--line-2); vertical-align: -0.125rem; }
.grid-preview { font-size: .78rem; }
.grid-preview td { padding: 0.25rem 0.5rem; white-space: nowrap; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
.state-new { color: var(--ok); } .state-warning { color: var(--warn); } .state-invalid, .state-conflict, .state-unmatched { color: var(--bad); } .state-duplicate, .state-skipped { color: var(--faint); }

/* ───────────── Settings ───────────── */
.settings-grid { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.subnav { display: grid; gap: 1px; position: sticky; top: calc(var(--top-h) + 1.5rem); }
.subnav a { display: flex; align-items: center; height: 2.125rem; padding: 0 0.75rem; border-radius: 0.625rem; color: var(--muted); text-decoration: none; font-weight: 500; font-size: var(--fs-sm); white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease); }
.subnav a:hover { color: var(--text); background: var(--tint-2); }
.subnav a[aria-current="page"] { color: var(--text); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
/* Order status colour picker (Flat UI Colors palettes). Swatches always show their true colour, in both themes */
.cp { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.cp-trigger { display: inline-flex; align-items: center; gap: 0.625rem; height: var(--control-h); padding: 0 0.875rem 0 0.375rem; border: 1px solid var(--line-2); border-radius: var(--pill);
  background: var(--field); color: var(--text); cursor: pointer; font-size: var(--fs-sm); transition: border-color .18s var(--ease); }
.cp-trigger:hover, .cp-trigger[aria-expanded="true"] { border-color: var(--line-3); }
.cp-chip { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); flex: none; }
.cp-meta { display: grid; line-height: 1.2; text-align: left; }
.cp-meta b { font-weight: 500; }
.cp-meta span { font-size: var(--fs-xs); color: var(--faint); font-family: var(--mono); text-transform: uppercase; }
.cp-pop { position: fixed; z-index: var(--z-pop); width: min(23rem, calc(100vw - 1.5rem)); padding: 0.875rem; background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: pop-in .2s var(--ease);
  max-height: min(27rem, calc(100vh - 1.5rem)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cp-pop h5 { margin: 0 0 0.5rem; font-size: var(--fs-xs); font-weight: 500; color: var(--faint); }
.cp-pop h5:not(:first-child) { margin-top: 0.875rem; }
.cp-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.375rem; }
.cp-sw { position: relative; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 0.5rem; background: var(--sw); color: var(--ink-on, #fff); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: transform .16s var(--ease), box-shadow .16s var(--ease); display: grid; place-items: center; }
.cp-sw:hover { transform: scale(1.12); z-index: 1; }
.cp-sw:focus-visible { outline: 0.125rem solid var(--ring); outline-offset: 0.125rem; }
.cp-sw.is-sel { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text); }
.cp-sw .ic { opacity: 0; transform: scale(.6); transition: opacity .16s var(--ease), transform .16s var(--ease); }
.cp-sw.is-sel .ic { opacity: 1; transform: none; }
/* Name + HEX tooltip */
.cp-sw::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 0.5rem); transform: translate(-50%, 0.25rem); white-space: nowrap; pointer-events: none;
  padding: 0.3125rem 0.5rem; border-radius: 0.5rem; background: var(--toast); color: #f2f2f0; font-size: 0.6875rem; font-weight: 500; opacity: 0; box-shadow: var(--shadow-md);
  transition: opacity .15s var(--ease), transform .15s var(--ease); z-index: 2; }
:root[data-theme="light"] .cp-sw::after { color: #fafaf8; }
.cp-sw:hover::after, .cp-sw:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.cp-grid .cp-sw:nth-child(10n+1)::after { left: 0; transform: translate(0, 0.25rem); }
.cp-grid .cp-sw:nth-child(10n+1):hover::after { transform: none; }
.cp-grid .cp-sw:nth-child(10n)::after { left: auto; right: 0; transform: translate(0, 0.25rem); }
.cp-grid .cp-sw:nth-child(10n):hover::after { transform: none; }
.cp-preview { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--faint); }

/* Permissions & Roles */
.perm-summary { border-radius: var(--radius-md); padding: 0.875rem 1rem; margin: 0.25rem 0 0.875rem; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-sm); }
.perm-group-h { margin: 1.375rem 0 0.5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.perm-group:first-child .perm-group-h { margin-top: 1rem; }
.perm-matrix input[type=checkbox], .perm-extras input[type=checkbox] { width: 1.0625rem; height: 1.0625rem; vertical-align: middle; }
.perm-matrix input:disabled { cursor: not-allowed; opacity: .3; }
.perm-matrix td:first-child { white-space: normal; min-width: 8rem; }
.perm-matrix tr.is-off > td:first-child b { color: var(--faint); }
.perm-matrix td b { font-weight: 500; }
.perm-matrix tr:has(+ tr.perm-extra) > td { border-bottom: 0; }
.perm-matrix tr.perm-extra > td { padding-top: 0; }
.perm-extras { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; padding: 0.125rem 0 0.25rem 0.875rem; border-left: 1px solid var(--line-2); white-space: normal; }
.perm-extras .check { margin: 0; color: var(--muted); }
.perm-extra.is-off .perm-extras { opacity: .55; }
.perm-tools { flex-wrap: wrap; gap: 0.5rem; }
.perm-actions { position: sticky; bottom: 0; margin: var(--gap) calc(-1 * var(--pad)) calc(-1 * var(--pad)); padding: 0.75rem var(--pad); background: var(--bar);
  backdrop-filter: saturate(1.4) blur(1rem); -webkit-backdrop-filter: saturate(1.4) blur(1rem); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); z-index: 2; }
.perm-ov tr.perm-mod th { text-align: left; background: var(--tint); font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.perm-ov select { min-width: 12rem; height: 2.125rem; }
.perm-ov tr.is-override td:first-child { box-shadow: inset 0.1875rem 0 0 var(--text); }
.perm-ov .yes { color: var(--ok); font-weight: 700; }

/* ───────────── Responsive ───────────── */
.show-sm { display: none !important; }
@media (max-width: 1180px) {
  .cap-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2, .grid-cal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .subnav { position: static; display: flex; gap: 0.125rem; overflow-x: auto; scrollbar-width: none; padding: 0.1875rem; border-radius: var(--pill); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { flex: none; height: 1.875rem; border-radius: var(--pill); }
  .subnav a[aria-current="page"] { background: var(--panel); }
}
@media (max-width: 760px) {
  .cap-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-halves, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .cal { gap: 0.1875rem; }
  .cal-cell { min-height: 4rem; padding: 0.3125rem 0.375rem; border-radius: 0.5rem; }
  .cal-cell .note, .cal-cell .bar { display: none; }
  .cal-cell .n { font-size: .8125rem; }
  .cal-cell .top b { font-size: 1.15em; }
  .feed li { grid-template-columns: 1fr; gap: 0.125rem; }
  .page-head > .row, .page-head > div:last-child:not(:first-child) { width: 100%; }
}
@media (max-width: 560px) {
  .filters .quick { display: flex; }
}
@media (max-width: 640px) { .show-sm { display: inline-flex !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ───────────── Filters ───────────── */
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: 0.75rem; align-items: end; }
.filters label.f { margin: 0; }
.filters label.f > span { font-size: var(--fs-xs); color: var(--faint); margin-bottom: 0.375rem; }
.filters .quick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filters .check { height: var(--control-h); }
.perf-head { flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
.perf-range { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.perf-range label.f { margin: 0; width: 10.5rem; }
.perf-dash { color: var(--faint); }
@media (max-width: 640px) { .perf-range label.f { flex: 1 1 8rem; width: auto; } .perf-range .seg-tabs { width: 100%; } }
.log-list { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.log-item + .log-item { border-top: 1px solid var(--line); }
.log-item > summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.6875rem 1rem; cursor: pointer; list-style: none; min-width: 0; }
.log-item > summary::-webkit-details-marker { display: none; }
.log-item > summary:hover { background: var(--tint); }
.log-item[open] > summary { background: var(--tint); }
.log-ic { flex: none; width: 1.875rem; height: 1.875rem; border-radius: 50%; display: grid; place-items: center; background: var(--tint-2); color: var(--muted); }
.log-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.log-item[open] .log-text { white-space: normal; overflow: visible; display: block; -webkit-line-clamp: unset; }
.log-item > summary::before, .log-item > summary::after { display: none !important; }
.log-meta { flex: none; display: flex; gap: 0.625rem; align-items: baseline; font-size: var(--fs-xs); color: var(--faint); white-space: nowrap; }
.log-caret { flex: none; color: var(--faint); display: grid; transition: transform .2s var(--ease); }
.log-item[open] .log-caret { transform: rotate(180deg); }
.log-meta b { font-weight: 500; color: var(--muted); }
.log-body { padding: 0.125rem 1rem 1rem 3.625rem; font-size: var(--fs-sm); background: var(--tint); }
.log-body p { margin: 0.375rem 0 0; overflow-wrap: anywhere; }
.log-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; color: var(--faint); font-size: var(--fs-xs); }
.log-reason { color: var(--muted); }
.log-diff { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.25rem 1rem; margin: 0.625rem 0 0; padding: 0.625rem 0.75rem; border-radius: 0.625rem; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.log-diff dt { color: var(--faint); }
.log-diff dd { margin: 0; overflow-wrap: anywhere; }
.log-diff s { color: var(--faint); }
@media (max-width: 640px) {
  .log-item > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'ic text caret' '. meta .'; gap: 0.25rem 0.625rem; padding: 0.75rem 0.875rem; align-items: start; }
  .log-ic { grid-area: ic; }
  .log-text { grid-area: text; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-top: 0.3rem; }
  .log-caret { grid-area: caret; padding-top: 0.45rem; }
  .log-meta { grid-area: meta; }
  .log-body { padding: 0.25rem 0.875rem 0.875rem; }
}
.dash-builder { margin: 0 0 0 auto !important; width: min(16rem, 100%); }
@media (max-width: 640px) { .dash-builder { margin: 0 !important; width: 100%; } }
@media (max-width: 560px) { .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 340px) { .filters { grid-template-columns: 1fr; } }

/* Avatars */
.avatar { flex: none; width: 1.875rem; height: 1.875rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 600; letter-spacing: .02em;
  color: var(--muted); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-2); }

/* Bookings for the selected date: status pills wrap instead of squeezing the other columns */
#dayList .data td { white-space: normal; }
#dayList .data td:first-child, #dayList .data td:last-child { white-space: nowrap; }
#dayList .data td .pill { margin: 0.125rem 0; }

/* "View as role" preview */
.view-as { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.25rem 0 0.5rem; font-size: var(--fs-xs); color: var(--faint); }
.va-btn { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; max-width: 9.5rem; height: 1.75rem; padding: 0 0.5rem 0 0.75rem; border: 0; border-radius: var(--pill);
  background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: var(--fs-xs); font-weight: 500; cursor: pointer; transition: box-shadow .2s var(--ease); }
.va-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-btn .ic { color: var(--faint); transition: transform .2s var(--ease); }
.va-btn:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.va-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.va-menu { position: fixed; z-index: var(--z-pop); padding: 0.375rem; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: pop-in .18s var(--ease); }
.va-menu button { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.5rem 0.625rem; border: 0; border-radius: 0.625rem; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.va-menu button:hover, .va-menu button:focus-visible { background: var(--tint-2); outline: none; }
.va-menu b { display: block; font-size: var(--fs-sm); font-weight: 500; }
.va-menu small { display: block; font-size: var(--fs-xs); color: var(--faint); }
.va-menu button[aria-checked="true"] .ic { color: var(--text); }
.preview-banner { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.5rem var(--gutter); background: var(--info-bg); color: var(--text); border-bottom: 1px solid var(--info-line); font-size: var(--fs-sm); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); }
.preview-banner .ic { color: var(--info); }
.preview-banner .btn { height: 1.75rem; }

/* On/off switch */
.switch { display: inline-flex; align-items: center; cursor: pointer; vertical-align: middle; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { position: relative; width: 2.25rem; height: 1.3125rem; border-radius: var(--pill); background: var(--line-2); transition: background-color .25s var(--ease); flex: none; }
.switch .thumb { position: absolute; top: 0.15625rem; left: 0.15625rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, .3); transition: transform .3s var(--ease); }
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track .thumb { transform: translateX(0.9375rem); }
.switch input:focus-visible + .track { outline: 0.125rem solid var(--ring); outline-offset: 0.125rem; }
.switch input:disabled + .track { opacity: .45; cursor: not-allowed; }

/* <select data-menu>: themed pop-up menu for short lists */
.menu-field { position: relative; display: block; min-width: 0; }
.menu-field > select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.menu-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; height: var(--control-h); padding: 0 0.75rem 0 0.875rem;
  background: var(--field); border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-body); text-align: left; cursor: pointer;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.menu-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-trigger .ic { color: var(--faint); transition: transform .2s var(--ease); }
.menu-trigger:hover:not(:disabled), .menu-trigger[aria-expanded="true"] { border-color: var(--line-3); }
.menu-trigger[aria-expanded="true"] .ic { transform: rotate(180deg); color: var(--text); }
.menu-trigger:disabled { opacity: .55; cursor: not-allowed; }
.menu-list { padding: 0.375rem; border-radius: var(--radius-md) !important; max-height: min(22rem, 60vh); overflow-y: auto; }
.menu-opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 0.5625rem 0.75rem; border: 0; border-radius: 0.625rem; background: none;
  color: var(--text); font: inherit; font-size: var(--fs-body); text-align: left; cursor: pointer; }
.menu-opt:hover, .menu-opt:focus-visible { background: var(--tint-2); outline: none; }
.menu-opt[aria-selected="true"] { font-weight: 500; }
label.f > span.menu-field { margin-bottom: 0; font-weight: 400; }

/* Calendar: days with URGENT orders */
.cal-cell .top-r { display: inline-flex; align-items: center; gap: 0.3125rem; }
.cal-urgent { display: inline-grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: var(--pill); background: var(--urgent-solid); color: #fff;
  font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.cal-urgent.done { background: transparent; color: var(--urgent-text); box-shadow: inset 0 0 0 1.5px var(--urgent); }
.cal-urgent.sm { min-width: 0.875rem; height: 0.875rem; font-size: 0.5625rem; padding: 0 0.25rem; }
@media (max-width: 760px) {
  .cal-cell { overflow: hidden; }
  .cal-cell .top { flex-wrap: wrap; }
  .cal-cell .top-r { gap: 0.125rem; }
  .cal-urgent { min-width: 0.875rem; height: 0.875rem; font-size: 0.5625rem; padding: 0 0.1875rem; }
}

/* ───────── Subs & Upgrades (phone-first: QC uses it on their phones) ───────── */
.subs-fab { display: none; }
.nav-preview { margin-left: auto; flex: none; display: inline-flex; color: var(--faint); }
.nav-preview .ic { opacity: 1 !important; }
.nav a:has(.nav-preview) > span:not(.nav-preview) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subs-preview { display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--gap); }
.subs-new .ic { margin: 0; }
.subs-new { gap: 0.375rem; }
.subs-bar { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; justify-content: space-between; margin-bottom: 0.875rem; }
.subs-steps { flex: 1 1 100%; display: flex; border-radius: var(--radius-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; scrollbar-width: none; }
.subs-steps::-webkit-scrollbar { display: none; }
.subs-steps button { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 0; background: none; font: inherit; text-align: left; color: var(--faint); cursor: pointer; transition: color .15s var(--ease); }
.subs-steps button + button { box-shadow: inset 1px 0 0 var(--line); }
.subs-steps button::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0; height: 0.1875rem; border-radius: 0.1875rem 0.1875rem 0 0; background: transparent; }
.subs-steps button:hover { color: var(--muted); }
.subs-steps button.on { color: var(--text); }
.subs-steps button.on .rs-sn { background: var(--primary); color: var(--ink); box-shadow: none; }
.subs-steps button.on .rs-st small { color: var(--muted); }
.subs-steps button.on::after { background: var(--primary); }
.subs-steps .tab-n { margin-left: auto; flex: none; }
.subs-steps button.due .tab-n { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
@media (max-width: 1400px) { .subs-steps button { padding-inline: 0.625rem; gap: 0.5rem; } .subs-steps .rs-sn { width: 1.75rem; height: 1.75rem; } .subs-steps .rs-st b { letter-spacing: 0.05em; } }
@media (min-width: 641px) and (max-width: 1500px) { .subs-steps .rs-st small { display: none; } .subs-steps .rs-st b { letter-spacing: 0.03em; white-space: normal; overflow: visible; line-height: 1.3; } .subs-steps button { min-height: 3.5rem; } }
.subs-bar .subs-find { margin-left: auto; }
.tab-n { min-width: 1.25rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: var(--pill); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 0.6875rem; font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; color: var(--text); }
.tab-n.due { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.subs-q { position: relative; display: flex; align-items: center; flex: 0 1 11rem; }
.subs-q .ic { position: absolute; left: 0.625rem; color: var(--faint); pointer-events: none; }
.subs-q input { width: 100%; height: 2rem; padding-left: 1.875rem; border-radius: var(--pill); font-family: var(--mono); font-size: var(--fs-sm); }
.subs-q input::placeholder { font-family: var(--font); }
.subs-find { display: flex; align-items: center; gap: 0.5rem; flex: 0 1 auto; }
/* Order search + History sit under New Request (Lawrence, 2026-10-15) */
.subs-head { align-items: flex-start; }
.subs-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; }
.subs-find .btn { height: 2rem; gap: 0.375rem; }
.subs-due-note { display: flex; align-items: center; gap: 0.375rem; color: var(--warn); margin: -0.25rem 0 0.75rem; }
/* Subs & Upgrades table + packing handover */
.sub-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.875rem; }
.sub-stat { border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 2.75rem; padding: 0.5rem 1rem; line-height: 1; border-radius: var(--radius-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; transition: box-shadow .15s var(--ease); }
.sub-stat:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.sub-stat b { font-size: 1.125rem; line-height: 1; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.sub-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem; margin-bottom: 0.875rem; }
.sub-pack-f { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--muted); }
.sub-pack-f .menu-field { width: auto; }
.sub-pack-f .menu-trigger { width: auto; min-width: 6.5rem; height: var(--control-sm); padding: 0 0.625rem 0 0.75rem; font-size: var(--fs-sm); }
.sub-hide input[type=checkbox] { width: 0.875rem; height: 0.875rem; }
.sub-hide { font-size: var(--fs-sm); margin: 0; }
.sub-print { margin-left: auto; gap: 0.375rem; }
.sub-hist-tab { margin-left: 0.5rem; }
.sub-hist-note { margin: -0.25rem 0 0.875rem; }
.sub-bulk { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; padding: 0.5rem 0.625rem 0.5rem 0.875rem; margin-bottom: 0.75rem; border-radius: var(--radius-md); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--fs-sm); }
.sub-bulk[hidden] { display: none; }
.sub-table-wrap { background: var(--panel); }
.sub-bulk #bulkMove, .sub-bulk #bulkPick { margin-left: auto; gap: 0.375rem; }
.sub-bulk #bulkPick:not([hidden]) + #bulkMove { margin-left: 0; }
.sub-table th button.sub-sort { all: unset; display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; color: inherit; font: inherit; }
.sub-table th button.sub-sort:focus-visible { outline: 0.125rem solid var(--ring); outline-offset: 0.125rem; border-radius: 0.25rem; }
.sub-table th button.sub-sort.is-on { color: var(--text); }
.sub-caret { display: inline-flex; }
.sub-caret.is-up { transform: rotate(180deg); }
.sub-table th.num .sub-sort { justify-content: flex-end; }
.sub-table td { vertical-align: middle; padding-block: 0.75rem; }
.sub-table td.sub-sel { vertical-align: middle; }
.sub-table input[type=checkbox] { width: 1.125rem; height: 1.125rem; max-width: none; margin: 0; vertical-align: middle; }
.sub-table input[type=checkbox]:disabled { opacity: .35; }
.sub-table tbody tr:focus-visible { outline: 0.125rem solid var(--ring); outline-offset: -0.125rem; }
.sub-table tbody tr.is-picked td { background: color-mix(in srgb, var(--info) 9%, transparent); }
.sub-table .sub-ord .order-no { font-size: inherit; font-weight: 600; }
.sub-table .sub-ord { white-space: nowrap; }
.sub-table .sub-appr .pill + .pill { margin-left: 0.25rem; }
.sub-table .sub-appr { white-space: normal; }
.sub-table .sub-upd { color: var(--muted); }
.sub-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.sub-cases b { font-weight: 600; }
.sub-case-pc { display: inline-block; min-width: 2.75rem; margin-right: 0.375rem; font-size: var(--fs-xs); color: var(--faint); font-weight: 500; }
.sub-arch { margin: 0 0 0.25rem; }
.sub-detail-cases { margin-top: 0.5rem; font-size: var(--fs-sm); }
.sub-scope { display: grid; gap: 0.625rem; }
.sub-foot-tick { display: grid; gap: 0.75rem; padding-top: 0.875rem; border-top: 1px solid var(--line); }
.sub-foot-tick .check { margin: 0; }
.sub-scope .check { margin: 0; }
.sub-fail { margin: 0; padding-left: 1.125rem; display: grid; gap: 0.375rem; font-size: var(--fs-sm); }
@media (max-width: 640px) {
  .sub-print { margin-left: 0; }
  .sub-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sub-stat { flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.625rem; font-size: var(--fs-xs); line-height: 1.25; }
  /* Rows become compact blocks: tick + order number on top, case, then both statuses */
  .sub-table-wrap { box-shadow: none; overflow: visible; }
  .sub-table, .sub-table tbody, .sub-table thead { display: block; }
  .sub-table thead tr { display: flex; align-items: center; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; border-radius: var(--radius-md); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 0.5rem; }
  .sub-table thead th { display: flex; align-items: center; height: 2.5rem; background: none; border: 0; padding: 0 0.5rem; }
  .sub-table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 0.75rem; row-gap: 0.375rem; padding: 0.75rem 0.875rem; margin-bottom: 0.5rem; border-radius: var(--radius-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
  .sub-table tbody td { display: block; padding: 0; border: 0; background: none !important; white-space: normal; min-width: 0; max-width: none; }
  .sub-table tbody tr.is-picked { box-shadow: inset 0 0 0 1.5px var(--info); }
  .sub-table td.sub-sel { grid-row: 1; grid-column: 1; width: auto; padding: 0.125rem 0 0; }
  .sub-table td.sub-sel input:disabled { visibility: hidden; }
  .sub-table thead th.sub-sel { width: auto; padding: 0 0.25rem 0 0.375rem; }
  .sub-table td.sub-pack:has(> .faint:only-child) { display: none; }
  .sub-table td.sub-ord { grid-row: 1; grid-column: 2; }
  .sub-table td.sub-upd { grid-row: 1; grid-column: 3; text-align: right; font-size: var(--fs-xs); }
  .sub-table td.sub-case { grid-column: 2 / -1; }
  .sub-table td.sub-appr, .sub-table td.sub-pack { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; }
  .sub-table td.sub-pack .cell-sub { margin: 0; }
  .sub-table:not(:has(td.sub-sel)) td { grid-column: 1 / -1 !important; }
  .sub-table:not(:has(td.sub-sel)) td.sub-upd { grid-row: 1; grid-column: 3 !important; }
  .sub-table:not(:has(td.sub-sel)) td.sub-ord { grid-column: 1 / 3 !important; }
  .sub-table:not(:has(td.sub-sel)) thead { display: none; }
  .sub-table td.sub-moved-by::before { content: 'Moved by '; color: var(--muted); }
  .sub-moved-table thead { display: none; }
  .sub-table td.sub-moved-by { grid-column: 2 / -1; font-size: var(--fs-sm); }
}
.subs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(23rem, 100%), 1fr)); gap: var(--gap); align-items: start; }
.subs-list > .card { margin: 0; }
.subs-list.is-packed { grid-auto-rows: 0.25rem; row-gap: 0; }
.subs-list > .card:only-child:not(.sub-card) { grid-column: 1 / -1; }
.sub-card { display: grid; gap: 0.75rem; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 1rem 1.125rem; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.sub-card:hover { border-color: var(--line-3); }
.sub-card:active { transform: scale(.995); }
.sub-card:focus-visible { outline: 0.125rem solid var(--ring); outline-offset: 0.125rem; }
.sub-pick-wrap { position: relative; min-width: 0; }
.sub-pick { position: absolute; top: 1.3rem; left: 1.125rem; z-index: 1; display: flex; cursor: pointer; }
.sub-pick input[type=checkbox] { width: 1rem; height: 1rem; }
.sub-card.has-pick { padding-left: 2.75rem; }
.sub-pick-wrap.is-picked .sub-card { border-color: var(--info); box-shadow: inset 0 0 0 1px var(--info); }
.sub-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sub-top .order-no { font-size: 1.0625rem; font-weight: 600; }
.sub-pills { margin-left: auto; display: inline-flex; gap: 0.375rem; flex-wrap: wrap; justify-content: flex-end; }
.sub-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.sub-changes li { display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-sm, 0.75rem); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.sub-changes .kind { font-size: 0.6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--warn); }
.sub-changes .kind.upgrade { color: var(--ok); }
.sub-changes .from { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.sub-changes .to { display: flex; align-items: baseline; gap: 0.375rem; overflow-wrap: anywhere; }
.sub-changes .to .ic { flex: none; color: var(--faint); align-self: center; }
.sub-changes .to b { font-weight: 600; }
.sub-changes .silent { font-size: 0.75rem; color: var(--muted); }
.sub-changes .sub-pc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; margin-bottom: 0.125rem; font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.sub-changes .sub-pc-why { font-weight: 400; color: var(--muted); }
.sub-pc-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; margin-bottom: 0.875rem; }
.sub-item .sub-pc-row label.f { margin-bottom: 0; }
.sub-pc-row .menu-trigger { max-width: 100%; }
.sub-pc-row .menu-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-stock { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.sub-stock li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: start; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-sm, 0.75rem); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
.sub-stock-t { display: grid; gap: 0.125rem; min-width: 0; overflow-wrap: anywhere; }
.sub-stock-t b { font-weight: 600; font-size: var(--fs-sm); }
.sub-stock-d { min-width: 2.25rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); align-self: center; }
.sub-stock-d.up { color: var(--ok); }
.sub-stock-d.down { color: var(--warn); }
.sub-stock li > .pill { grid-column: 3; }
.sub-stock-open { grid-column: 4; grid-row: 1; align-self: center; margin: -0.375rem -0.25rem; }
.stock-done { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: rgba(0, 0, 0, .35); animation: fade-in .2s ease; cursor: pointer; }
.stock-done.is-out { opacity: 0; transition: opacity .25s ease; }
.stock-done-card { display: grid; justify-items: center; gap: 0.375rem; min-width: min(16rem, 100%); max-width: 22rem; padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--radius-lg, 1.25rem); background: var(--panel); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); text-align: center; animation: stock-pop .35s cubic-bezier(.2, 1.3, .4, 1); }
.stock-done-card b { font-size: 1.125rem; font-weight: 600; margin-top: 0.375rem; }
.stock-done-mark { width: 4rem; height: 4rem; fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.stock-done-mark circle { fill: var(--ok-bg); stroke-dasharray: 151; stroke-dashoffset: 151; animation: stock-draw .45s ease-out .1s forwards; }
.stock-done-mark path { stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: stock-draw .3s ease-out .45s forwards; }
.stock-done.is-warn .stock-done-mark { stroke: var(--warn); }
.stock-done.is-warn .stock-done-mark circle { fill: var(--warn-bg); }
@keyframes stock-pop { from { opacity: 0; transform: scale(.85); } }
@keyframes stock-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .stock-done-mark circle, .stock-done-mark path { stroke-dashoffset: 0; } }
.sub-stock-note { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.875rem 0 0; }
.sub-stock-note .ic { flex: none; margin-top: 0.125rem; }
@media (max-width: 420px) { .sub-stock li { grid-template-columns: auto minmax(0, 1fr) auto; } .sub-stock li > .pill { grid-column: 2; justify-self: start; } .sub-stock-open { grid-column: 3; } }
.sub-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: var(--fs-xs); color: var(--faint); }
.sub-people { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.875rem; font-size: var(--fs-sm); padding-top: 0.625rem; border-top: 1px solid var(--line); }
.sub-people b { font-weight: 600; }
.sub-handler { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
/* Compact, with its box starting where the Raised by name above does */
.sub-handler .menu-field { width: 12rem; max-width: 100%; margin: -0.375rem 0; }
.sub-sec .kv.sub-people-kv { row-gap: 1rem; }
.sub-handler .menu-trigger { height: 2rem; padding: 0 0.5rem 0 0.5rem; font-size: var(--fs-sm); border-radius: 0.5rem; }
.sub-note { font-size: var(--fs-sm); color: var(--muted); border-left: 2px solid var(--line-2); padding-left: 0.625rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sub-mini { display: grid; gap: 0.5rem; color: inherit; text-decoration: none; padding: 0.75rem 0; }
.sub-mini + .sub-mini { border-top: 1px solid var(--line); }
.sub-mini .sub-changes { gap: 0.375rem; }

.sub-dialog .d-body h4 { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.sub-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.sub-hero-links { margin-left: auto; display: inline-flex; align-items: center; gap: 0.75rem; }
.sub-sec { padding: 1rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.625rem; }
.sub-sec:first-of-type { border-top: 0; }
.sub-sec .kv { margin: 0; }
/* Expedited booking dialog: each group gets its own band */
.bk-sec { padding: 1.25rem 0; }
.bk-sec:first-of-type { padding-top: 0.5rem; }
.bk-sec + .bk-sec { border-top: 1px solid var(--line-2); }
.bk-sec > .kv { row-gap: 0.75rem; }
@media (min-width: 641px) { .bk-sec > .kv { grid-template-columns: 8rem minmax(0, 1fr); } }
.bk-sec > .urgent-box { margin: 0; }
.bk-sec > label.f { margin-bottom: 0; }
.sub-addnote { display: flex; gap: 0.5rem; align-items: flex-end; }
.sub-addnote textarea { flex: 1; min-height: 2.75rem; }
.tl-note { margin-top: 0.125rem; white-space: pre-wrap; }
.sub-item { border: 0; margin: 0 0 0.625rem; padding: 0.875rem; border-radius: var(--radius-md); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
.sub-item .f:last-child { margin-bottom: 0; }
.sub-item-h { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.sub-item-h .icon-btn[hidden] { display: none; }
.sub-silent { margin-top: 0.125rem; }
.sub-notbuilt { display: flex; width: fit-content; margin: 0 0 0.75rem; padding-left: 0.875rem; }
.sub-sec .sub-notbuilt { margin: 0.75rem 0 0; padding-left: 0; }
.sub-group + .sub-group { margin-top: 2rem; }
.sub-group-h { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.875rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.sub-group-n { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4375rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; color: var(--text); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.sub-group-none { margin: 0; }
.sub-rewrite { min-height: 3.25rem; padding: 0.6875rem 0.875rem; border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
  background: var(--panel-2); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sub-rewrite.is-empty { color: var(--faint); display: flex; align-items: center; gap: 0.5rem; }
.sub-rewrite.is-error { color: var(--bad); }
.mono-in { font-family: var(--mono); text-transform: uppercase; }
.sub-parts-note { display: flex; align-items: center; gap: 0.375rem; margin: -0.5rem 0 0.875rem; color: var(--ok); }
.sub-parts-note.muted { color: var(--muted); }
.sub-parts-note.warn { color: var(--warn); }
.sub-parts-note .ic { flex: none; }
.orig-slot .menu-field, .orig-slot select, .orig-slot input { width: 100%; }
.sub-item, .sub-dialog .f { min-width: 0; min-inline-size: 0; }
.orig-slot .menu-trigger { max-width: 100%; }
.orig-slot .menu-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-wrap { position: relative; }
.rep-wrap input { width: 100%; }
.sub-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 0.375rem); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 15rem; }
.sub-suggest .combo-opt { white-space: normal; line-height: 1.35; }
@media (max-width: 640px) { .sub-suggest .combo-opt { padding: 0.75rem; } }
.mono-in::placeholder { text-transform: none; }
.sub-outcomes { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.sub-outcome { position: relative; cursor: pointer; }
.sub-outcome input { position: absolute; opacity: 0; pointer-events: none; }
.sub-outcome span { display: grid; gap: 0.125rem; padding: 0.875rem 1rem; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--tint); transition: box-shadow .15s var(--ease), background .15s var(--ease); }
.sub-outcome small { color: var(--muted); font-size: var(--fs-sm); }
.sub-outcome input:focus-visible + span { outline: 0.125rem solid var(--ring); outline-offset: 0.125rem; }
.sub-outcome.o-approved input:checked + span, .sub-outcome.o-approved_changes input:checked + span { background: var(--ok-bg); box-shadow: inset 0 0 0 1.5px var(--ok-line); }
.sub-outcome.o-declined input:checked + span { background: var(--bad-bg); box-shadow: inset 0 0 0 1.5px var(--bad-line); }
.sub-outcome input:checked + span b { color: var(--text); }
.sub-outcome.o-stage input:checked + span { box-shadow: inset 0 0 0 1.5px var(--text); }
.sub-outcome input:disabled + span { opacity: .5; cursor: default; }
@media (min-width: 40rem) { .sub-stages { grid-template-columns: 1fr 1fr; } }
.sub-wants { margin-bottom: 1rem; }
.sub-fb-wrap { margin-bottom: 1rem; }
.sub-fb { display: grid; gap: 0.375rem; }
.sub-fb-row { display: flex; align-items: center; gap: 0.75rem; min-height: 2.25rem; }
.sub-fb-row .check { margin: 0; flex: 1 1 auto; }
.sub-fb-qty input { width: 4rem; height: 2rem; text-align: center; }
.sub-fb-line { display: flex; align-items: flex-start; gap: 0.375rem; font-size: var(--fs-sm); color: var(--text); }
.sub-fb-line .ic { flex: none; margin-top: 0.125rem; color: var(--warn); }
.sub-table .sub-fb-line { margin-top: 0.375rem; }
.sub-fb-set { display: grid; gap: 0.5rem; margin-bottom: 0.625rem; }
.sub-fb-set-row, .sub-fb-set-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) 2.25rem; align-items: center; gap: 0.5rem; max-width: 46rem; }
.sub-fb-set-row input { min-width: 0; }
@media (max-width: 640px) {
  .sub-fb-set-head { display: none; }
  .sub-fb-set-row { grid-template-columns: minmax(0, 1fr) 2.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
  .sub-fb-set-row [data-fbp] { grid-column: 1; grid-row: 2; }
}
#fbf > .btn.primary { margin-top: 0.75rem; }
.sub-wants .seg { justify-self: start; }
.sub-wants small:empty { display: none; }
.sub-warn { display: flex; gap: 0.625rem; align-items: flex-start; margin-bottom: 1rem; }
.sub-warn .ic { flex: none; color: var(--warn); margin-top: 0.0625rem; }
.sub-check-order { display: grid; gap: 0.25rem; padding: 0.875rem 1rem; border-radius: var(--radius-md); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-2); }
.sub-check-order .order-no { font-size: 1.75rem; font-weight: 600; letter-spacing: .02em; line-height: 1.15; }
.warn-text { color: var(--warn); }
.sub-ack { display: flex; margin-top: 1.125rem; padding: 0.875rem 1rem; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1.5px var(--warn-line); background: var(--warn-bg); font-weight: 500; align-items: flex-start; }
.sub-ack input { width: 1.25rem; height: 1.25rem; flex: none; }
.sub-flag { display: grid; gap: 0.5rem; margin-top: 0.625rem; padding: 0.875rem 1rem; border-radius: var(--radius-md); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-2); min-width: 0; }
.sub-flag.is-high { box-shadow: inset 0 0 0 1.5px var(--bad-line); }
.sub-flag-parts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.875rem; margin: 0; font-size: var(--fs-sm); }
.sub-flag-parts dt { color: var(--muted); }
.sub-flag-parts dd { margin: 0; overflow-wrap: anywhere; }
.sub-flag-parts dd b { font-weight: 600; }
.sub-flag-label { margin-top: 0.25rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.sub-flag-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--fs-sm); }
.sub-flag-issues li { display: flex; gap: 0.625rem; align-items: baseline; line-height: 1.45; }
.sub-flag-issues .pill { flex: none; }
.sub-flag-src { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.sub-flag-note { display: flex; gap: 0.375rem; align-items: flex-start; margin: 0.875rem 0 0; }
.sub-flag-note .ic { flex: none; margin-top: 0.125rem; }
.sub-flag-ask { margin: 1rem 0 0; font-weight: 600; }
@media (max-width: 640px) {
  .sub-flag-parts { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
  .sub-flag-parts dd + dt { margin-top: 0.375rem; }
  .sub-flag-issues li { flex-direction: column; gap: 0.25rem; }
}
.mail-frame { width: 100%; height: 26rem; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: #f4f4f5; display: block; }

@media (max-width: 640px) {
  .subs-bar { flex-direction: column; align-items: stretch; }
  .subs-q { flex-basis: auto; align-self: flex-start; width: 12rem; }
  .subs-q input { height: 2.25rem; font-size: 1rem; }
  .subs-find { align-self: flex-start; }
  .subs-head-side { align-items: flex-start; }
  .subs-find .btn { height: 2.25rem; }
  .subs-steps button { flex: 0 0 auto; padding: 0.5rem 0.625rem; gap: 0.5rem; }
  .subs-steps .rs-st b { letter-spacing: 0.04em; }
  .subs-steps .rs-sn { width: 1.75rem; height: 1.75rem; }
  .subs-bar .subs-find { margin-left: 0; }
  /* QC on a phone: the main action is always in reach */
  .page-head .subs-new { display: none; }
  .subs-fab { display: inline-flex; position: fixed; z-index: 30; left: var(--gutter); right: var(--gutter); bottom: max(1rem, env(safe-area-inset-bottom)); height: 3.25rem; justify-content: center; gap: 0.375rem; font-size: 1rem; box-shadow: var(--shadow-lg); }
  .subs-fab .ic { margin: 0; }
  body:has(.subs-fab) .subs-list { padding-bottom: 5rem; }
  body:has(.subs-fab) .sub-group:not(:last-child) .subs-list { padding-bottom: 0; }
  body:has(dialog[open]) .subs-fab, body.nav-open .subs-fab { display: none; }
  .sub-dialog .mail-frame { height: 22rem; }
  .sub-dialog .d-foot .btn { flex: 1 1 auto; }
  .sub-dialog .d-foot > span[style] { display: none; }
  .sub-hero-links { margin-left: 0; width: 100%; }
}

/* ───────────── Stock Restoration ───────────── */
.rs-banner, .rs-card .alert { display: flex; align-items: flex-start; gap: 0.5rem; }
.rs-banner { margin-bottom: 0.75rem; }
.rs-banner .ic, .rs-card .alert .ic { flex: none; margin-top: 0.125rem; }
.rs-banner b, .rs-card .alert b { display: inline; margin: 0; }
#rsBody, #bcBody { display: grid; gap: var(--gap); margin-top: var(--gap); }
.rs-steps { list-style: none; margin: 0; padding: 0; display: flex; border-radius: var(--radius-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.rs-steps li { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; color: var(--faint); }
.rs-steps li + li { box-shadow: inset 1px 0 0 var(--line); }
.rs-steps li::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0; height: 0.1875rem; border-radius: 0.1875rem 0.1875rem 0 0; background: transparent; }
.rs-sn { flex: none; width: 2rem; height: 2rem; border-radius: var(--radius-xs); display: grid; place-items: center; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-2); }
.rs-sn .ic { margin: 0; }
.rs-st { display: grid; min-width: 0; }
.rs-st b { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-st small { font-size: var(--fs-xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-steps li.on { color: var(--text); }
.rs-steps li.on .rs-sn { background: var(--primary); color: var(--ink); box-shadow: none; }
.rs-steps li.on .rs-st small { color: var(--muted); }
.rs-steps li.on::after { background: var(--primary); }
.rs-steps li.done { color: var(--muted); }
.rs-steps li.done .rs-sn { background: var(--primary); color: var(--ink); box-shadow: none; }
@media (max-width: 860px) {
  .rs-st small { display: none; }
}
@media (max-width: 640px) {
  .rs-steps li { flex: 0 0 auto; padding: 0.5rem; gap: 0.5rem; }
  .rs-st b { letter-spacing: 0.04em; }
  .rs-steps li.on { flex: 1 1 auto; }
  .rs-steps li:not(.on) .rs-st { display: none; }
  .rs-sn { width: 1.75rem; height: 1.75rem; }
}
.rs-card { display: grid; gap: 1rem; }
.rs-card-h { display: flex; align-items: flex-start; gap: 0.875rem; }
.rs-card-h > div { flex: 1; min-width: 0; }
.rs-card-h h2 { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.rs-card-h p { margin: 0.25rem 0 0; color: var(--muted); font-size: var(--fs-sm); max-width: 70ch; }
.rs-n { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 600; background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.rs-lookup { display: flex; align-items: flex-end; gap: 0.625rem; flex-wrap: wrap; }
.rs-lookup label.f { flex: 1 1 14rem; max-width: 22rem; margin: 0; }
.rs-lookup input { font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.rs-lookup .btn { gap: 0.375rem; }
.rs-order { display: grid; gap: 0.875rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.rs-order-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.rs-ono { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; margin-right: 0.25rem; }
.rs-shop { margin-left: auto; gap: 0.375rem; }
.rs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 0.75rem 1.25rem; margin: 0; }
.rs-facts dt { font-size: var(--fs-xs); color: var(--faint); margin-bottom: 0.25rem; }
.rs-facts dd { margin: 0; font-size: var(--fs-body); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.rs-pcs { display: grid; gap: 0.5rem; }
.rs-pc { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; padding: 0.625rem 0.75rem; border-radius: var(--radius-sm); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-sm); }
.rs-pc > span:nth-child(2) { flex: 1 1 12rem; min-width: 0; }
.rs-pc .ic { color: var(--muted); flex: none; }
.rs-x { color: var(--muted); font-weight: 500; }
.rs-drop { display: grid; justify-items: center; gap: 0.375rem; text-align: center; padding: 2rem 1rem; border-radius: var(--radius-md); border: 1.5px dashed var(--line-3); color: var(--muted); font-size: var(--fs-sm); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.rs-drop b { color: var(--text); font-size: var(--fs-body); }
.rs-drop .ic { color: var(--faint); }
.rs-drop .btn { margin-top: 0.375rem; }
.rs-drop:hover, .rs-drop:focus-visible, .rs-drop.over { border-color: var(--text); background: var(--tint); outline: none; }
.rs-skip { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.rs-slip-done { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 0.875rem; border-radius: var(--radius-sm); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
.rs-slip-done > div { flex: 1 1 12rem; min-width: 0; }
.rs-slip-done > .ic { color: var(--muted); }
.rs-text summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); }
.rs-text pre { margin: 0.5rem 0 0; max-height: 16rem; overflow: auto; padding: 0.75rem; border-radius: var(--radius-sm); background: var(--tint); font-family: var(--mono); font-size: var(--fs-xs); white-space: pre-wrap; color: var(--muted); }

/* Review list: a grid table on desktop, cards on phones */
.rs-list { display: grid; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.rs-row { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.3fr) 5rem 7.5rem 4.5rem 8.5rem 4.25rem; gap: 0.75rem; align-items: center; padding: 0.75rem 0.875rem; border-top: 1px solid var(--line); transition: opacity .2s var(--ease); }
.rs-row:first-child { border-top: 0; }
.rs-hrow { font-size: var(--fs-xs); color: var(--faint); font-weight: 500; background: var(--tint); padding-block: 0.5rem; }
.rs-row.is-off > :not(.rs-c-x):not(.rs-c-qty) { opacity: .45; }
.rs-row.is-locked .rs-c-qty { color: var(--faint); }
.rs-title { display: block; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 500; text-align: left; cursor: pointer; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.1875rem; transition: text-decoration-color .15s; }
.rs-title:hover, .rs-title:focus-visible { text-decoration-color: currentColor; outline: none; }
.rs-orig { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3125rem; font-size: var(--fs-xs); color: var(--info); }
.rs-orig.faint { color: var(--faint); }
.rs-orig .ic { margin: 0; flex: none; }
.rs-row.needs-review { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.rs-c-ver { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.rs-c-x { gap: 0.125rem; }
.rs-fp-cur { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.625rem 0.75rem; margin-bottom: 0.75rem; border-radius: var(--radius-sm); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-2); }
.rs-fp-cur > div { flex: 1 1 12rem; min-width: 0; }
.rs-fp-row.is-cur { box-shadow: inset 0 0 0 1.5px var(--text); }
.rs-mini { margin: 0; padding-left: 1.125rem; font-size: var(--fs-sm); display: grid; gap: 0.25rem; }
.rs-sumfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr)); gap: 0.5rem 1rem; margin: 0 0 0.875rem; }
.rs-sumfacts dt { font-size: var(--fs-xs); color: var(--faint); }
.rs-sumfacts dd { margin: 0.125rem 0 0; font-weight: 600; }
.rs-block { margin-top: 0.25rem; }
.rs-sub { display: flex; flex-wrap: wrap; gap: 0.25rem 0.625rem; margin-top: 0.25rem; font-size: var(--fs-xs); color: var(--faint); }
.rs-cat { color: var(--muted); font-weight: 500; }
.rs-match::before { content: '· '; }
.rs-flags { margin: 0.375rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; font-size: var(--fs-xs); color: var(--warn); }
.rs-flags li { padding-left: 0.75rem; position: relative; }
.rs-flags li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: currentColor; }
.rs-c-sku .mono { font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.rs-c-num { text-align: right; font-variant-numeric: tabular-nums; }
.rs-c-qty { display: flex; align-items: center; gap: 0.375rem; }
.rs-q { width: 4rem !important; text-align: center; font-variant-numeric: tabular-nums; }
.rs-c-x { display: flex; justify-content: flex-end; }
.rs-ack { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; font-size: var(--fs-sm); cursor: pointer; }
.rs-ack input { margin-top: 0.1875rem; accent-color: var(--text); }
.rs-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 0.75rem; font-size: var(--fs-sm); color: var(--muted); }
.rs-total b { font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.rs-sec { display: grid; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.rs-sec h3 { display: flex; align-items: center; gap: 0.375rem; margin: 0; font-size: var(--fs-body); font-weight: 600; }
.rs-sec > p { margin: 0; }
.rs-um, .rs-parent, .rs-acc { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.625rem 0.75rem; border-radius: var(--radius-sm); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-sm); }
.rs-um { box-shadow: inset 0 0 0 1px var(--warn-line); }
.rs-um > div:first-child, .rs-parent > div { flex: 1 1 14rem; min-width: 0; }
.rs-um-act { display: flex; gap: 0.375rem; }
.rs-um-act .btn, .rs-sugs .btn { gap: 0.375rem; }
.rs-sugs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.rs-parent .rs-ack { margin: 0; }
.rs-confirm { justify-items: start; }
.rs-confirm label.f { width: 100%; max-width: 40rem; margin: 0; }
.rs-go { height: 3.25rem; padding: 0 1.75rem; font-size: 1rem; gap: 0.625rem; }
.rs-go .ic { margin: 0; }
.rs-fp { display: grid; gap: 0.375rem; max-height: 24rem; overflow: auto; margin-top: 0.75rem; }
.rs-fp-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; text-align: left; width: 100%; padding: 0.625rem 0.75rem; border: 0; border-radius: var(--radius-sm); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.rs-fp-row > span:first-child { display: grid; gap: 0.125rem; min-width: 0; }
.rs-fp-row:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--line-3); background: var(--tint-2); }
.rs-fp-row:disabled { opacity: .5; cursor: not-allowed; }
.rs-sum td, .rs-items td { vertical-align: top; }
.rs-d { font-weight: 600; font-variant-numeric: tabular-nums; }
.rs-d.up { color: var(--ok); }
.rs-d.down { color: var(--bad); }
.rs-sum-total { margin: 0.75rem 0; font-size: var(--fs-sm); color: var(--muted); }
.rs-err { margin-top: 0.25rem; font-size: var(--fs-xs); color: var(--bad); }
.rs-res-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.rs-res-h h2 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.25rem 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.rs-res-n { display: grid; justify-items: end; }
.rs-res-n b { font-size: 2.25rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.rs-res-n span { font-size: var(--fs-xs); color: var(--muted); }
.rs-res-act { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.rs-res-act .btn { gap: 0.375rem; }
.rs-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-items: end; }
.rs-filters label.f { margin: 0; }
.rs-filters label.f > span { font-size: var(--fs-xs); color: var(--faint); }
.rs-hist { padding: 0.375rem; display: grid; }
.rs-h { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; width: 100%; padding: 0.75rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rs-h + .rs-h { border-top: 1px solid var(--line); border-radius: 0; }
.rs-h:hover { background: var(--tint); }
.rs-h-mid { display: grid; gap: 0.125rem; min-width: 0; }
.rs-h-mid > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-h-pills { display: flex; gap: 0.375rem; justify-content: flex-end; flex-wrap: wrap; }
dialog.rs-detail .rs-res-h { margin-bottom: 0.75rem; }
.rs-file { display: inline-flex; align-items: center; gap: 0.375rem; }

@media (max-width: 900px) {
  .rs-hrow { display: none; }
  .rs-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'name name x' 'sku sku ver' 'stock qty after'; gap: 0.5rem 0.75rem; }
  .rs-c-name { grid-area: name; } .rs-c-sku { grid-area: sku; } .rs-c-ver { grid-area: ver; justify-self: end; }
  .rs-c-x { grid-area: x; align-self: start; }
  .rs-row > .rs-c-num:not(.rs-after) { grid-area: stock; text-align: left; }
  .rs-c-qty { grid-area: qty; } .rs-after { grid-area: after; }
  .rs-row [data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--faint); margin-bottom: 0.125rem; text-align: left; }
  .rs-c-qty[data-label]::before { display: none; }
  .rs-filters { grid-template-columns: 1fr 1fr; }
  .rs-fq, .rs-filters label.f:nth-child(2) { grid-column: 1 / -1; }
  .rs-h { grid-template-columns: minmax(0, 1fr) auto; }
  .rs-h-mid { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 480px) { .rs-go { width: 100%; justify-content: center; } .rs-res-h { flex-direction: column; } .rs-res-n { justify-items: start; } }

/* ───────────── Same-day expedited additions (distinct from URGENT red) ───────────── */
:root { --sameday: #a29bfe; --sameday-ink: #17142e; }
:root[data-theme="light"] { --sameday: #5f4fd8; --sameday-ink: #fff; }
.pill.sameday { white-space: nowrap; color: var(--sameday); background: color-mix(in srgb, var(--sameday) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sameday) 45%, transparent); font-weight: 700; letter-spacing: .04em; }
.pill.sameday-new { background: var(--sameday); color: var(--sameday-ink); box-shadow: none; font-weight: 700; letter-spacing: .05em; }
/* Expedited day table: Shipping / Pickup sections */
.data th.arch-col, .data td.arch-col { width: 1%; padding-inline: 0.375rem 0.625rem; text-align: center; }
.arch-btn { color: var(--faint); }
.sc-head { margin: 1.5rem 0 0.625rem; padding-top: 1.25rem; border-top: 1px solid var(--line-2); }
.sc-head h4 { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.sc-head p { margin: 0.25rem 0 0; }
.hist-table .cell-sub.pc-name { max-width: 11rem; }
.day-groups th, .day-groups td { padding-inline: 0.625rem; }
/* Same column positions on every day and in both tables (Expedited Orders, Special Circumstances) */
.day-groups { table-layout: fixed; min-width: 26rem; }
.day-groups .dg-c-order { width: 35%; }
.day-groups .dg-c-status { width: 39%; }
.day-groups .dg-c-shop { width: 26%; }
.day-groups .dg-c-arch { width: 2.75rem; }
.day-groups td:not(:first-child) .pill { white-space: normal; height: auto; min-height: 1.375rem; line-height: 1.2; padding-block: 0.1875rem; }   /* a long badge wraps instead of spilling into the next column */
.day-groups td { white-space: normal; }
.day-groups td:first-child { min-width: 0; }
.day-groups th:first-child, .day-groups td:first-child { padding-left: 0.875rem; padding-right: 0.375rem; }   /* same start as the Shipping / Pickup headings */
.day-groups .cell-sub.pc-name { white-space: normal; max-width: none; }
.day-groups th:not(:first-child) { white-space: normal; line-height: 1.2; }
.arch-btn:hover:not(:disabled), .arch-btn:focus-visible { color: var(--ok); }
.day-groups tr.dg-head > th { height: auto; padding: 0.875rem 0.875rem 0.5rem; background: transparent; color: var(--text); font-size: var(--fs-sm); font-weight: 600; }
.day-groups tbody + tbody tr.dg-head > th { border-top: 1px solid var(--line-2); }
.day-groups .dg-n { color: var(--faint); font-weight: 500; }
.day-groups tbody tr.dg-head:hover > th { background: transparent; }
.day-groups tr.dg-empty > td { color: var(--faint); font-size: var(--fs-xs); }
.day-groups tbody tr.dg-empty:hover > td { background: transparent; }
tr.row-sameday > td { background: color-mix(in srgb, var(--sameday) 7%, transparent); }
tr.row-sameday:not(.row-urgent) > td:first-child { box-shadow: inset 0.1875rem 0 0 var(--sameday); }
.sameday-strip { margin: 0 0 var(--gap); padding: 0.875rem 1rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--sameday) 8%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sameday) 35%, transparent); display: grid; gap: 0.625rem; }
.sameday-strip.has-new { box-shadow: inset 0 0 0 1.5px var(--sameday); }
.sd-h { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: var(--sameday); }
.sd-h b { color: var(--text); }
.sd-list { display: grid; gap: 0.375rem; }
.sd-item { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; padding: 0.5rem 0.625rem; border-radius: var(--radius-sm); background: var(--tint); color: var(--text); text-decoration: none; }
.sd-item:hover { background: var(--tint-2); }
.sd-item .sd-ack { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; color: var(--sameday); font-weight: 600; }
.sd-item.seen .sd-ack { color: var(--muted); font-weight: 400; }
.sd-item .sd-ack .ic { margin: 0; }
.sameday-box { margin: 0 0 12px; padding: 0.75rem 0.875rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--sameday) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sameday) 35%, transparent); display: grid; gap: 0.5rem; }
.sdb-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.sdb-top > div { display: grid; gap: 0.25rem; }
.sdb-alerts .timeline li .btn { margin-top: 0.375rem; }
.bad-text { color: var(--bad); }
.sd-cell { margin-top: 0.375rem; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.sda-on { margin: 0.25rem 0 1rem; }
.rs-items .rs-open { width: 2.5rem; text-align: right; padding-left: 0; }
.rs-items .rs-open-m { display: none; color: var(--muted); vertical-align: -0.125rem; }
@media (max-width: 640px) { .rs-items .rs-open-m { display: inline-flex; } }

/* ── Build Changes & Upgrades (Stock Restoration section) ── */
.rs-sections { margin-bottom: 0.875rem; flex-wrap: nowrap; }
.rs-sections .rs-short { display: none; }
@media (max-width: 480px) {
  .rs-sections .rs-long { display: none; }
  .rs-sections .rs-short { display: inline; }
  .bc-lookup label.f { flex-basis: 100%; max-width: none; }
  .bc-lookup input::placeholder { font-size: 0.875rem; }
}
.bc-lookup label.f { max-width: 26rem; }
.bc-lookup input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--font); }
.bc-lookup input::placeholder { font-family: var(--font); letter-spacing: 0; }
.bc-pcs { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.375rem; }
.bc-pcs li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bc-pcs li .ic { color: var(--faint); margin: 0; }
.bc-detected { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-md); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-sm); }
.bc-detected .ic { margin: 0.125rem 0 0; flex: none; }
.bc-owing { color: var(--warn); font-weight: 600; }
.bc-builds { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; align-items: stretch; }
.bc-build { display: grid; gap: 0.5rem; align-content: start; padding: 0.875rem 1rem; border-radius: var(--radius-md); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
.bc-build-l { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bc-build-pc { display: grid; gap: 0.25rem; }
.bc-build-pc > span:last-child { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.bc-build .btn { justify-self: start; }
.bc-arrow { display: grid; place-items: center; color: var(--faint); }
.bc-warn { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.bc-warn li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--fs-sm); padding: 0.5rem 0.75rem; border-radius: var(--radius-md); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.bc-warn li.bad { background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); }
.bc-warn .ic { flex: none; margin: 0.125rem 0 0; color: var(--warn); }
.bc-warn li.bad .ic { color: var(--bad); }

.bc-grid { display: grid; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.bc-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; padding: 0.625rem 0.875rem; align-items: center; border-top: 1px solid var(--line); }
.bc-row:first-child { border-top: 0; }
.bc-hrow { background: var(--tint); font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.bc-hrow > div { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.bc-tag { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.1875rem 0.625rem; border-radius: var(--pill); white-space: nowrap; }
.bc-tag.orig { color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.bc-tag.new { background: var(--primary); color: var(--ink); }
.has-accent .bc-tag.new { background: var(--accent); color: var(--accent-ink); }
.bc-pc { color: var(--text); font-weight: 600; }
.bc-build.bc-to { box-shadow: inset 0 0 0 1px var(--line-2); }
.bc-cat { display: grid; gap: 0.25rem; font-weight: 500; }
.bc-state { font-size: var(--fs-xs); font-weight: 400; color: var(--faint); }
.bc-diff { justify-self: start; font-size: var(--fs-xs); font-weight: 600; color: var(--text); padding: 0.0625rem 0.5rem; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--tint); white-space: nowrap; }
.bc-info { display: flex; gap: 0.625rem; align-items: flex-start; font-size: var(--fs-sm); padding: 0.625rem 0.875rem; border-radius: var(--radius-md); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
.bc-info > .ic { flex: none; margin-top: 0.125rem; color: var(--muted); }
.bc-info > div { min-width: 0; display: grid; gap: 0.25rem; }
.bc-info p { margin: 0; color: var(--muted); }
.bc-info ul { margin: 0.375rem 0 0; padding-left: 1.125rem; display: grid; gap: 0.375rem; color: var(--muted); overflow-wrap: anywhere; }
.bc-part { display: flex; gap: 0.625rem; align-items: center; justify-content: space-between; padding: 0.5rem 0.625rem; border-radius: var(--radius-md); min-height: 3.25rem;
  background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
.bc-part.is-missing { background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); }
.bc-part.bc-empty { background: none; box-shadow: inset 0 0 0 1px var(--line); border-style: dashed; justify-content: center; }
.bc-part-main { min-width: 0; display: grid; gap: 0.125rem; }
.bc-name { all: unset; cursor: pointer; font-weight: 500; overflow-wrap: anywhere; }
button.bc-name:hover { text-decoration: underline; text-underline-offset: 0.1875rem; }
button.bc-name:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 0.25rem; }
.bc-part-side { display: flex; align-items: center; gap: 0.25rem; flex: none; }
.bc-qty { display: inline-flex; align-items: center; gap: 0.125rem; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--line-2); }
.bc-qty span { min-width: 1.25rem; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.bc-qty .icon-btn { width: 1.75rem; height: 1.75rem; }
.bc-tools { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.bc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
.bc-cards-sm { grid-template-columns: repeat(2, minmax(5.5rem, auto)); }
.bc-stat { display: grid; gap: 0.125rem; padding: 0.75rem 0.875rem; border-radius: var(--radius-md); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
.bc-stat b { font-size: 1.625rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.bc-stat span { font-size: var(--fs-xs); color: var(--muted); }
.bc-stat.is-restore b { color: var(--ok); }
.bc-stat.is-deduct b { color: var(--warn); }
.bc-h { margin: 0.25rem 0 -0.375rem; font-size: var(--fs-sm); font-weight: 600; }
.bc-h.is-restore { color: var(--ok); }
.bc-h.is-deduct { color: var(--warn); }
.bc-net td:first-child { white-space: normal; min-width: 13rem; }
.bc-net th, .bc-net td { padding-inline: 0.625rem; }
.bc-net .num { white-space: nowrap; }
.bc-adj { all: unset; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0.125rem 0.5rem; border-radius: var(--pill); }
button.bc-adj { cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); }
button.bc-adj:hover { box-shadow: inset 0 0 0 1px var(--text); }
.bc-adj.is-restore { color: var(--ok); }
.bc-adj.is-deduct { color: var(--warn); }
.bc-net .rs-open { width: 2.5rem; text-align: right; }
.bc-list { margin: 0.5rem 0 0.75rem; padding-left: 1.125rem; display: grid; gap: 0.25rem; font-size: var(--fs-sm); }
.bc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; font-size: var(--fs-sm); }
.bc-checks li { display: flex; gap: 0.5rem; align-items: flex-start; }
.bc-checks li .ic { flex: none; margin: 0.125rem 0 0; }
.bc-checks li.ok .ic { color: var(--ok); }
.bc-checks li.warn .ic { color: var(--warn); }
.bc-ack { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.375rem; font-weight: 500; cursor: pointer; }
@media (max-width: 760px) {
  .bc-builds { grid-template-columns: minmax(0, 1fr); }
  .bc-arrow { transform: rotate(90deg); }
  .bc-row { grid-template-columns: minmax(0, 1fr); gap: 0.375rem; }
  .bc-hrow { display: none; }
  .bc-cat { display: flex; gap: 0.5rem; align-items: baseline; }
  .bc-row > [data-col]::before { content: attr(data-col); display: block; font-size: var(--fs-xs); color: var(--faint); margin-bottom: 0.25rem; }
  .bc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bc-net thead { display: none; }
  .bc-net, .bc-net tbody, .bc-net tr, .bc-net td { display: block; width: auto; }
  .bc-net tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem 0.75rem; padding: 0.75rem 0.875rem; border-top: 1px solid var(--line); }
  .bc-net tr:first-child { border-top: 0; }
  .bc-net td { padding: 0 !important; border: 0 !important; text-align: left !important; min-width: 0 !important; }
  .bc-net td:first-child { grid-column: 1 / -1; }
  .bc-net td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--faint); font-weight: 400; }
  .bc-net td.rs-open { position: absolute; right: 0.5rem; top: 0.5rem; width: auto; }
  .bc-net tr { position: relative; }
  .bc-net td:first-child { padding-right: 2.25rem !important; }
}

/* ── Page accent colours (Settings → Page Accent Colours) ──
   setAccent() puts --accent / --accent-ink on <html> and adds .has-accent. Only accent details use it: primary buttons,
   the selected tab, the current nav item, step numbers, focus rings and a thin heading underline. Status colours
   (green/amber/red, order statuses, aging) never change. Without .has-accent every page keeps its original look. */
:root { --accent-fg: color-mix(in oklab, var(--accent) 78%, #fff); --accent-hover: color-mix(in oklab, var(--accent) 86%, #fff); }
:root[data-theme="light"] { --accent-fg: color-mix(in oklab, var(--accent) 72%, #000); --accent-hover: color-mix(in oklab, var(--accent) 86%, #000); }
.has-accent { --ring: color-mix(in oklab, var(--accent) 60%, transparent); accent-color: var(--accent); }
.has-accent .btn.primary { background: var(--accent); color: var(--accent-ink); }
.has-accent .btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
.has-accent .seg-tabs button[aria-pressed="true"] { color: var(--accent-fg); box-shadow: 0 1px 0.125rem rgba(0,0,0,.18), inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent); }
.has-accent .seg label input:checked + span, .has-accent .subs-tabs button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.has-accent .rs-steps li.on .rs-sn, .has-accent .rs-steps li.done .rs-sn, .has-accent .rs-steps li.on::after, .has-accent .cal-day.sel, .has-accent .tp-cell.is-sel { background: var(--accent); color: var(--accent-ink); }
.has-accent .rs-n { color: var(--accent-fg); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.has-accent input:focus, .has-accent select:focus, .has-accent textarea:focus { border-color: color-mix(in oklab, var(--accent) 70%, transparent); }

/* Colour picker: "Default" choice (Shopify Status colours) */
.cp-chip.is-default { background: repeating-linear-gradient(135deg, var(--tint-2) 0 0.25rem, transparent 0.25rem 0.5rem); box-shadow: inset 0 0 0 1px var(--line-2); }
.cp-default { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.375rem 0.5rem; margin-bottom: 0.75rem; border: 0; border-radius: var(--radius-sm); background: var(--tint); color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.cp-default .cp-chip { width: 1.375rem; height: 1.375rem; }
.cp-default.is-sel { box-shadow: inset 0 0 0 1.5px var(--text); }

/* ───────── Bulk Order Restoration ───────── */
#rsBody.bk-body > .card, #bkPanel > .card { margin-top: 0; }
.bk-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.bk-sec-h h2 { margin: 0; }
.bk-batches .rs-hist { padding: 0; }
.bk-h { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
.bk-ref b { font-variant-numeric: tabular-nums; }
.bk-map { display: grid; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.bk-map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 0.75rem; }
.bk-map-grid label.f { margin: 0; }
.bk-map-act { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bk-top { margin-bottom: calc(var(--gap) * -0.5); }
.bk-top .btn { padding-inline: 0.625rem; }
.bk-back { transform: rotate(180deg); }
.bk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; }
.bk-head-main { display: grid; gap: 0.375rem; min-width: 0; flex: 1 1 22rem; }
.bk-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bk-title h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; overflow-wrap: anywhere; }
.bk-file { font-weight: 500; color: var(--muted); }
.bk-head-act { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.bk-head-act .btn { gap: 0.375rem; }
.bk-del:hover:not(:disabled) { color: var(--bad); }
.bk-progress { display: grid; gap: 0.75rem; }
.bk-progress-h { display: flex; align-items: center; gap: 0.25rem 0.625rem; flex-wrap: wrap; }
.bk-progress-h .faint { flex-basis: 100%; }
.bk-progress .bar > i { background: var(--text); }
.has-accent .bk-progress .bar > i { background: var(--accent); }
.bk-report summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; }
.bk-report summary::-webkit-details-marker { display: none; }
.bk-report .rs-mini { margin-top: 0.5rem; }
.bk-kpis .kpi .v { font-size: var(--fs-stat); }
.bk-kpis > * { flex: 1 1 8rem; }
.bk-kpis .kpi .k { white-space: normal; }
.rs-steps.many li { padding-inline: 0.75rem; gap: 0.625rem; }
@media (max-width: 1400px) { .rs-steps.many .rs-st small { display: none; } }
.bk-views { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.bk-tools { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; margin-bottom: 0.875rem; }
.bk-tools label.f { margin: 0; }
.bk-q { flex: 1 1 16rem; max-width: 24rem; }
.bk-filter { flex: 0 1 15rem; }
.bk-tools .btn { gap: 0.375rem; }
.bk-tools > .btn:last-child { margin-left: auto; }
.bk-stockat { flex: 1 1 12rem; }
.bk-selbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-md); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--fs-sm); }
.bk-selbar b { margin-right: 0.25rem; }
.bk-list, .bk-cons { display: grid; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.bk-row { display: grid; grid-template-columns: 1.75rem minmax(0, 1.5fr) 7.5rem 8.5rem minmax(0, 1.7fr) 8rem 2rem; gap: 0.75rem; align-items: center; padding: 0.625rem 0.875rem; border-top: 1px solid var(--line); cursor: pointer; transition: background-color .15s var(--ease); }
.bk-row:first-child { border-top: 0; }
.bk-row:not(.bk-hrow):hover { background: var(--tint); }
.bk-row.is-open { background: var(--tint); }
.bk-row.is-off > :not(.bk-c-x):not(.bk-c-dec):not(.bk-sel) { opacity: .5; }
.bk-hrow { cursor: default; font-size: var(--fs-xs); color: var(--faint); font-weight: 500; background: var(--tint); padding-block: 0.5rem; }
.bk-sel input, .bk-hrow input { width: 1rem; height: 1rem; accent-color: var(--text); cursor: pointer; }
.has-accent .bk-sel input, .has-accent .bk-hrow input, .has-accent .rs-ack input { accent-color: var(--accent); }
.bk-c-order { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.125rem 0.375rem; min-width: 0; }
.bk-c-order .order-no { font-weight: 600; }
.bk-sub { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-flag { color: var(--warn); display: inline-flex; }
.bk-flag .ic { margin: 0; }
.bk-c-comp { display: grid; gap: 0.0625rem; font-size: var(--fs-sm); }
.bk-c-comp b { font-weight: 500; }
.bk-c-state { display: grid; justify-items: start; gap: 0.25rem; min-width: 0; }
.bk-issue { font-size: var(--fs-xs); color: var(--warn); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bk-issue.critical { color: var(--bad); }
.bk-c-x { display: flex; justify-content: flex-end; }
.bk-c-x .ic { transition: transform .2s var(--ease); }
.bk-row.is-open .bk-c-x .ic { transform: rotate(180deg); }
.bk-detail { display: grid; gap: 0.875rem; padding: 1rem 0.875rem 1.125rem 3.375rem; border-top: 1px solid var(--line); background: var(--tint); }
.bk-issues li.info { background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-line); }
.bk-issues li.info .ic { color: var(--info); }
.bk-facts { grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
.bk-facts dd { font-size: var(--fs-sm); }
.bk-lines { display: grid; border-radius: var(--radius-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.bk-line { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 8.5rem 6rem 5.5rem; gap: 0.75rem; align-items: center; padding: 0.625rem 0.875rem; border-top: 1px solid var(--line); }
.bk-line:first-child { border-top: 0; }
.bk-lhead { font-size: var(--fs-xs); color: var(--faint); font-weight: 500; background: var(--tint); padding-block: 0.5rem; }
.bk-line.is-off > :not(.bk-l-x):not(.bk-l-qty) { opacity: .45; }
.bk-line.needs-review { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.bk-l-name { min-width: 0; overflow-wrap: anywhere; }
.bk-l-name > b { font-weight: 500; }
.bk-l-name .rs-sub a { color: var(--faint); display: inline-flex; }
.bk-l-qty { display: flex; align-items: center; gap: 0.375rem; }
.bk-l-x { display: flex; justify-content: flex-end; align-items: center; gap: 0.125rem; }
.bk-removed { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; }
.bk-edit-act, .bk-decide > div { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.bk-edit-act .btn, .bk-decide .btn { gap: 0.375rem; }
.bk-meta { display: grid; gap: 0.625rem; }
.bk-meta label.f { margin: 0; max-width: 44rem; }
.bk-flagrow { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.bk-flagrow .rs-ack { margin: 0; }
.bk-flagrow input[data-flagnote] { flex: 1 1 14rem; max-width: 26rem; }
.bk-decide { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.875rem; border-top: 1px solid var(--line); }
.bk-changes summary { font-size: var(--fs-sm); }
.bk-more { display: flex; justify-content: center; margin-top: 0.75rem; }
.bk-sumline { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-bottom: 0.75rem; font-size: var(--fs-sm); color: var(--muted); }
.bk-sumline b { color: var(--text); font-weight: 600; }
.bk-crow { display: grid; grid-template-columns: minmax(0, 1fr) 7rem 7rem 7rem 11rem 2rem; gap: 0.75rem; align-items: start; padding: 0.625rem 0.875rem; border-top: 1px solid var(--line); }
.bk-crow.multi { grid-template-columns: minmax(0, 1fr) 9rem 6.5rem 6.5rem 6.5rem 11rem 2rem; }
.bk-crow > .bk-c-x { align-self: start; }
.bk-crow .icon-btn:hover:not(:disabled) { color: var(--bad); }
.bk-removed-c { margin-top: 1rem; }
.bk-crow:first-child { border-top: 0; }
.bk-crow.bk-hrow { align-items: center; }
.bk-crow > .rs-c-num { padding-top: 0.0625rem; }
.bk-ctotal { background: var(--tint); }
.bk-cons.pick .bk-crow { grid-template-columns: 1.25rem minmax(0, 1fr) 7rem 7rem 7rem 11rem 2rem; }
.bk-cons.pick .bk-crow.multi { grid-template-columns: 1.25rem minmax(0, 1fr) 9rem 6.5rem 6.5rem 6.5rem 11rem 2rem; }
.bk-crow > .bk-sel { padding-top: 0.125rem; }
.bk-droplist { margin: 0 0 0.75rem; padding-left: 1.125rem; max-height: 12rem; overflow: auto; }
.bk-c-orders summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); }
.bk-trace { list-style: none; margin: 0.375rem 0 0; padding: 0; display: grid; gap: 0.25rem; font-size: var(--fs-xs); }
.bk-jump { padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-family: var(--mono); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 0.1875rem; }
.bk-jump:hover { text-decoration-color: currentColor; }
.bk-events { list-style: none; margin: 0; padding: 0; display: grid; }
.bk-events li { display: grid; grid-template-columns: 9rem auto minmax(0, 1fr); gap: 0.75rem; align-items: baseline; padding: 0.625rem 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.bk-events li:first-child { border-top: 0; }
.bk-events .pill { justify-self: start; }
.bk-bar { position: sticky; bottom: 0.75rem; z-index: 5; margin-top: var(--gap); }
.bk-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; padding: 0.75rem 0.875rem 0.75rem 1.125rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow-md); }
.bk-bar-txt { display: grid; gap: 0.125rem; min-width: 0; }
.bk-bar-act { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bk-bar-act .btn { gap: 0.5rem; }

@media (max-width: 900px) {
  .bk-hrow { display: none; }
  .bk-row { grid-template-columns: 1.5rem minmax(0, 1fr) auto; grid-template-areas: 'sel order x' 'sel shop dec' 'sel comp comp' 'sel state state'; gap: 0.375rem 0.625rem; align-items: start; }
  .bk-sel { grid-area: sel; padding-top: 0.125rem; } .bk-c-order { grid-area: order; } .bk-c-x { grid-area: x; }
  .bk-c-shop { grid-area: shop; } .bk-c-dec { grid-area: dec; justify-self: end; } .bk-c-comp { grid-area: comp; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: baseline; } .bk-c-state { grid-area: state; }
  .bk-detail { padding: 0.875rem; }
  .bk-lhead { display: none; }
  .bk-line { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'name name x' 'stock qty after'; gap: 0.5rem 0.75rem; }
  .bk-l-name { grid-area: name; } .bk-l-x { grid-area: x; align-self: start; }
  .bk-line > .rs-c-num:nth-child(2) { grid-area: stock; text-align: left; } .bk-l-qty { grid-area: qty; } .bk-line > .rs-c-num:nth-child(4) { grid-area: after; }
  .bk-line [data-label]::before, .bk-crow [data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--faint); margin-bottom: 0.125rem; text-align: left; font-weight: 400; }
  .bk-l-qty[data-label]::before { display: none; }
  .bk-crow, .bk-crow.multi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 0.75rem; }
  .bk-crow > .bk-l-name, .bk-crow > .bk-c-orders, .bk-crow > [data-label="Location"] { grid-column: 1 / -1; }
  .bk-crow { position: relative; } .bk-crow > .bk-l-name { padding-right: 2.25rem; }
  .bk-crow > .bk-c-x { position: absolute; top: 0.5rem; right: 0.5rem; }
  .bk-crow > .rs-c-num { text-align: left; }
  .bk-cons.pick .bk-crow, .bk-cons.pick .bk-crow.multi { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 2.5rem; }
  .bk-crow > .bk-sel { position: absolute; top: 0.625rem; left: 0.875rem; grid-area: auto; }
  .bk-ctotal > div:empty { display: none; }
  .bk-events li { grid-template-columns: auto minmax(0, 1fr); }
  .bk-events li > span:last-child { grid-column: 1 / -1; }
  .bk-tools > .btn:last-child { margin-left: 0; }
  .bk-q, .bk-filter { flex: 1 1 100%; max-width: none; }
  .bk-h { grid-template-columns: minmax(0, 1fr) auto; }
  .bk-bar { bottom: 0.5rem; }
  .bk-bar-act { width: 100%; }
  .bk-bar-act .btn { flex: 1 1 auto; }
}

/* ───────────── Marketplace Orders ───────────── */
.mo-slip { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 0.75rem; min-width: 0; }
.mo-slip-ic { flex: none; display: inline-grid; color: var(--muted); }
.mo-slip-t { flex: 1; min-width: 0; display: grid; gap: 0.125rem; }
.mo-slip-t b { overflow-wrap: anywhere; font-weight: 500; }
.mo-slip-up { cursor: pointer; }
.mo-slip-up.is-busy { opacity: .6; pointer-events: none; }
#moS5 h2 .faint { font-weight: 400; font-size: var(--fs-sm); }
.mo-tabbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.mo-tabbar > .mo-tabs { min-width: 0; }
.mo-mlist { list-style: none; margin: 0 0 1rem; padding: 0; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); }
.mo-mlist li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 0.875rem; min-height: 3rem; }
.mo-mlist li + li { border-top: 1px solid var(--line); }
.mo-mname { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.mo-mren { flex: 1; min-width: 0; }
.mo-madd { display: flex; align-items: flex-end; gap: 0.5rem; }
.mo-madd label.f { flex: 1; margin: 0; }
.mo-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mo-tabs::-webkit-scrollbar { display: none; }
.mo-tabs a { display: inline-flex; align-items: center; height: 1.875rem; padding: 0 0.9375rem; border-radius: var(--pill); color: var(--muted); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.mo-tabs a:hover { color: var(--text); }
.mo-tabs a[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 0.125rem rgba(0,0,0,.18), inset 0 0 0 1px var(--line-2); }
.has-accent .mo-tabs a[aria-pressed="true"] { color: var(--accent-fg); box-shadow: 0 1px 0.125rem rgba(0,0,0,.18), inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent); }
.mo-kpis > * { flex-basis: 9.5rem; }
.mo-kpis .kpi .k { white-space: normal; }
.mo-filters { grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); }
.mo-fq { grid-column: span 2; }
.mo-table tr.click { cursor: pointer; }
.mo-table td.wrap { min-width: 7rem; max-width: 16rem; }
.mo-table tr.click:hover td { background: var(--tint); }
.mo-table td .pill + .pill { margin-left: 0.25rem; }
.mo-gap { margin-top: 0.75rem; }
#moBody .rs-card { grid-template-columns: minmax(0, 1fr); }
#moBody .rs-card > * { min-width: 0; }
.mo-form .field-row label.f { margin-bottom: 0.75rem; }
.mo-notes textarea, .mo-form textarea { width: 100%; resize: vertical; }
.mo-search { position: relative; margin-top: 0.75rem; }
.mo-search label.f { margin: 0; }
.mo-search input { width: 100%; }
.mo-found { margin-top: 0.375rem; max-height: 22rem; overflow-y: auto; border-radius: var(--radius-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-sm); }
.mo-found:not([hidden]) { display: grid; gap: 0.25rem; padding: 0.375rem; }
.mo-found .rs-fp-row { width: 100%; }
.mo-found-msg { padding: 0.75rem 0.875rem; display: flex; align-items: center; gap: 0.5rem; }
#moLines { margin-top: 0.75rem; display: grid; gap: 0.75rem; }
.mo-line { border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); padding: 0.75rem 0.875rem; min-width: 0; }
.mo-line-ro { padding: 0.625rem 0.75rem; margin-top: 0.625rem; }
.mo-line-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.mo-line-t { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; min-width: 0; flex: 1 1 14rem; }
.mo-line-t b { overflow-wrap: anywhere; }
.mo-line-q { display: flex; align-items: center; gap: 0.5rem; }
.mo-lw { margin-top: 0.625rem; display: flex; gap: 0.5rem; align-items: flex-start; }
.mo-lw .ic { flex: none; margin-top: 0.125rem; }
.mo-comps { margin-top: 0.625rem; }
.mo-comps td.c { width: 2.5rem; }
.mo-need { display: inline-flex; gap: 0.375rem; align-items: center; color: var(--warn); font-size: var(--fs-sm); }
.mo-standalone { display: flex; gap: 0.375rem; align-items: center; margin: 0.5rem 0 0; }
.mo-line-tools { margin-top: 0.625rem; gap: 0.5rem; flex-wrap: wrap; }
.mo-preset select { height: 2rem; font-size: var(--fs-sm); }
.mo-loc { margin: 0.75rem 0 0.5rem; }
.mo-actions { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem; position: sticky; bottom: 0.75rem; z-index: 5; box-shadow: var(--shadow-md); }
.mo-actions > .row { margin-left: auto; gap: 0.5rem; flex-wrap: wrap; }
.mo-msg:empty { display: none; }
.mo-msg { flex: 1 1 100%; }
.mo-confirm-list { margin: 0.75rem 0; padding: 0; list-style: none; display: grid; gap: 0.375rem; }
.mo-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: var(--gap); }
.mo-head-main { min-width: 0; flex: 1 1 22rem; }
.mo-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.mo-ref .mono { font-size: var(--fs-h); font-weight: 600; letter-spacing: -.01em; margin-right: 0.25rem; }
.mo-sub { margin-top: 0.375rem; color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.mo-sub b { color: var(--text); }
.mo-head-actions { gap: 0.5rem; flex-wrap: wrap; }
.mo-copy { width: 1.625rem; height: 1.625rem; vertical-align: middle; }
.mo-facts dd.mo-cp { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.mo-facts dd.mo-cp > span { min-width: 0; }
.mo-facts dd.mo-cp .mo-copy { flex: none; margin-top: -0.125rem; }
.mo-grid h3 { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.mo-grid > div > .card + .card { margin-top: var(--gap); }
@media (min-width: 1181px) { .mo-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.mo-facts { margin-top: 0.625rem; }
.mo-facts dd { overflow-wrap: anywhere; }
.mo-note { margin: 0.75rem 0 0; padding: 0.625rem 0.75rem; border-radius: var(--radius-md); background: var(--tint); white-space: pre-wrap; }
.mo-note b { display: block; font-weight: 600; margin-bottom: 0.125rem; }
.mo-parts { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; font-size: var(--fs-sm); }
.mo-parts li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.375rem; }
.mo-parts .rs-orig { display: flex; align-items: center; gap: 0.25rem; }
.mo-pq { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.mo-run + .mo-run { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--line); }
.mo-run:first-of-type { margin-top: 0.625rem; }
.mo-run-h { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-bottom: 0.5rem; }
.mo-run-r { margin: 0 0 0.5rem; color: var(--muted); }
.mo-events { list-style: none; margin: 0.625rem 0 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--fs-sm); }
.mo-events li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0 0.75rem; }
.mo-events li > .faint { grid-column: 2; }
.mo-events time { color: var(--faint); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .mo-fq { grid-column: 1 / -1; }
  .mo-actions { position: static; }
  .mo-actions > .row { width: 100%; margin-left: 0; }
  .mo-actions > .row .btn { flex: 1 1 auto; justify-content: center; }
  .mo-head-actions { width: 100%; }
  .mo-events li { grid-template-columns: minmax(0, 1fr); }
  .mo-events li > .faint { grid-column: 1; }
  .mo-line { padding: 0.625rem; }
}

/* Expedited booking dialog: Shopify delivery and payment pills on separate rows */
.shop-lines { display: flex; flex-direction: column; gap: 0.375rem; }
.shop-lines > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }

/* ───────────── Invoice Request ───────────── */
.inv-kpis .kpi .k { white-space: normal; }
.inv-filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); max-width: 40rem; }
@media (max-width: 340px) { .inv-filters { grid-template-columns: 1fr; } }
.data td.inv-notes-col { min-width: 10.5rem; width: 40%; }
/* Status dropdown drawn as the status badge (colour from Settings → Order Status) */
.inv-st { display: inline-block; }
.inv-st .menu-field { display: inline-block; }
.inv-st .menu-trigger { width: auto; height: 1.75rem; padding: 0 0.5rem 0 0.75rem; gap: 0.375rem; border: 0; border-radius: var(--pill); background: var(--pc); color: var(--pt);
  font-size: var(--fs-xs); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
:root[data-theme="light"] .inv-st .menu-trigger { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.inv-st .menu-trigger .ic { color: currentColor; opacity: .8; }
.inv-st .menu-trigger:hover:not(:disabled), .inv-st .menu-trigger[aria-expanded="true"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 0.1875rem color-mix(in srgb, var(--pc) 30%, transparent); }
.inv-st .menu-trigger[aria-expanded="true"] .ic { color: currentColor; }
.inv-st .menu-trigger:disabled { opacity: 1; cursor: default; padding-right: 0.75rem; }
.inv-st .menu-trigger:disabled .ic { display: none; }
/* Notes: readable preview (3 lines), click to expand, pencil edits in place */
.inv-note-wrap { display: flex; align-items: flex-start; gap: 0.25rem; }
.inv-note { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-sm); line-height: 1.45; max-height: 4.35em; overflow: hidden; }
.inv-note.long { cursor: pointer; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.inv-note.long.open { max-height: none; -webkit-mask-image: none; mask-image: none; }
.inv-note-pen { width: 1.75rem; height: 1.75rem; margin-top: -0.25rem; }
.inv-note-edit { display: grid; gap: 0.5rem; }
.inv-note-edit textarea { width: 100%; min-height: 5rem; resize: vertical; }
.inv-note-full { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-sm); line-height: 1.5; padding: 0.75rem 0.875rem; border-radius: var(--radius-md); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line); }
.inv-lookup { margin: -0.25rem 0 0.75rem; min-height: 1.25rem; }
.inv-table .btn[data-parts], .inv-table .btn[data-qc] { padding-inline: 0.5rem; margin-left: calc(-0.5rem - 1px); }   /* icon lines up with the column heading */
.inv-lookup .alert { margin-top: 0.5rem; }
.inv-import .inv-note { max-height: 2.9em; }
.inv-table .icon-btn + .icon-btn { margin-left: 0.125rem; }
@media (hover: hover) { .inv-note-pen { opacity: 0; } tr:hover .inv-note-pen, .inv-note-pen:focus-visible { opacity: 1; } }
.inv-import td.inv-notes-col { min-width: 10rem; width: auto; }
.day-nav { flex-wrap: nowrap; gap: 1rem; }
.day-nav > .btn { flex: none; }
.inv-qb + .inv-qb { margin-top: 0.875rem; }
.inv-qb .row b { min-width: 0; flex: 1; }
.inv-qb-text { margin: 0.5rem 0 0; padding: 0.75rem 0.875rem; border-radius: var(--radius-md); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line);
  font-family: inherit; font-size: var(--fs-sm); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.day-step { width: 2.25rem; height: 2.25rem; padding: 0; justify-content: center; color: var(--text); }
.day-step .ic { width: 1.125rem; height: 1.125rem; }
.day-step.prev .ic { transform: rotate(90deg); }
.day-step.next .ic { transform: rotate(-90deg); }

/* QC Sheet Archive: scanned QC sheets on the order page / search, and the PDF viewer */
.qc-docs { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.qc-docs li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.625rem 0; }
.qc-docs li + li { border-top: 1px solid var(--line); }
.qc-doc-main { display: flex; gap: 0.625rem; align-items: flex-start; min-width: 0; flex: 1 1 14rem; }
.qc-doc-main > .ic { flex: none; margin-top: 0.125rem; color: var(--muted); }
.qc-doc-name { overflow-wrap: anywhere; font-weight: 500; }
.qc-doc-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.qc-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.qc-view-page { background: var(--tint); border-radius: 0.75rem; padding: 0.5rem; text-align: center; overflow: auto; }
.qc-zoom { gap: 0.375rem; flex-wrap: nowrap; }
.qc-zoom [data-z] { min-width: 2.75rem; text-align: center; font-variant-numeric: tabular-nums; }
dialog.qc-viewer:not(.full) .qc-zoom { display: none; }
.qc-view-page canvas { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: 0.375rem; box-shadow: var(--shadow-md); }
/* Manual Document Matching: the sheet beside the form, so details can be typed in while reading it */
dialog.qc-split-dlg { width: min(72rem, calc(100vw - 2 * var(--gutter))); height: calc(100dvh - 3rem); }
dialog.qc-split-dlg .d-body { flex: 1; display: flex; overflow: hidden; padding-bottom: 1rem; }
.qc-split { flex: 1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(17rem, 2fr); gap: 1.25rem; min-height: 0; }
.qc-split-pdf { display: flex; flex-direction: column; min-height: 0; }
.qc-split-pdf .qc-view-page { flex: 1; min-height: 0; }
.qc-split-side { overflow-y: auto; min-height: 0; padding: 0.125rem; }
@media (max-width: 760px) {
  dialog.qc-split-dlg { height: auto; }
  dialog.qc-split-dlg .d-body { display: block; overflow-y: auto; }
  .qc-split { display: block; }
  .qc-split-pdf { position: sticky; top: -0.25rem; z-index: 5; background: var(--panel); padding: 0.25rem 0 0.75rem; }
  .qc-split-pdf .qc-view-page { height: 38dvh; flex: none; }
  .qc-split-pdf .skeleton { height: 34dvh !important; }
}
.pal-item.static { cursor: default; color: var(--muted); }
.pal-item.static:hover { background: transparent; }
.qc-progress { display: grid; gap: 0.375rem; margin-top: 0.75rem; }
.qc-progress .bar > i { background: var(--accent, var(--ok)); }
.qc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.qc-stats .stat .k { white-space: normal; }

/* Popups with Enlarge (order popup, QC sheet viewer): Enlarge fills the window */
dialog.order-pop { width: min(72rem, calc(100vw - 2 * var(--gutter))); height: calc(100dvh - 3rem); }
dialog.order-pop .d-head h3 { font-family: var(--mono); }
dialog.order-pop .order-hero .order-no { display: none; }
dialog.order-pop .page-head { margin-bottom: 1rem; }
.pop-tools { gap: 0.25rem; flex-wrap: nowrap; }
dialog.order-pop.full, dialog.qc-viewer.full { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
@media (max-width: 560px) { dialog.order-pop { width: 100vw; max-width: 100vw; height: 92dvh; } dialog.order-pop.full { height: 100dvh; } }
dialog.qc-viewer-order .d-head h3 { font-family: var(--mono); }

/* ───────── Manual Fulfilment Notifications ───────── */
.mf-scan-form { display: flex; gap: 0.75rem; align-items: flex-end; }
.mf-scan-form label.f { flex: 1; margin: 0; }
.mf-scan-form input { height: 3.25rem; font-size: 1.25rem; letter-spacing: .02em; }
.mf-scan-form input::placeholder { opacity: .55; }
.mf-scan-form .btn { height: 3.25rem; }
.mf-loading { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--gap); color: var(--muted); font-size: var(--fs-sm); }
.mf-order { margin-top: var(--gap); padding-top: var(--gap); border-top: 1px solid var(--line); }
.mf-sentbox { display: grid; gap: 0.5rem; }
.mf-sent { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); }
.mf-sent > span:first-child { min-width: 9.5rem; font-weight: 600; }
.mf-actions { display: grid; gap: 0.5rem; justify-items: start; }
.mf-actions #sendPickup { width: 100%; height: 3rem; font-size: var(--fs-body); }
.mf-actions .mf-ship { color: var(--muted); }
.mf-filters { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.mf-filters .mf-q { grid-column: span 2; }
.mf-table .mf-to { overflow-wrap: anywhere; min-width: 10rem; }
.mf-dialog .d-body > .alert { margin-bottom: 0.75rem; }
.mf-tpl { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.75rem 1rem 1rem; margin: var(--gap) 0 0; min-width: 0; }
.mf-tpl legend { padding: 0 0.375rem; font-weight: 600; font-size: var(--fs-sm); }
.mf-tpl textarea { font-family: inherit; }
@media (max-width: 640px) { .mf-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mf-filters .mf-q { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .mf-scan-form { flex-direction: column; align-items: stretch; }
  .mf-sent > span:first-child { min-width: 0; width: 100%; }
  .mf-dialog .mail-frame { height: 22rem; }
  .mf-dialog .d-foot .btn { flex: 1 1 auto; }
  .mf-dialog .d-foot > span[style] { display: none; }
}

/* ───────── Inventory Adjustment (Workshop) ───────── */
.ia-loc label.f { margin: 0; min-width: 12rem; }
.ia-loc .ic { vertical-align: -0.125rem; }
.ia-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; position: relative; z-index: 2; }
/* The page's entrance animation makes each section its own layer: keep the search lists above the sections below */
.ia-cols .card + .card { margin-top: 0; }
.ia-col { padding: 0; overflow: visible; }
.ia-col-h { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; padding: calc(1rem + 3px) var(--pad) 1rem;   /* 3px = the coloured top line */ border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.ia-col-h h2 { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
/* Trim the title to its capital letters so it centres on the +/− circle instead of sitting high */
.ia-col-h .ia-ht { display: block; line-height: 1.3; text-box: trim-both cap alphabetic; }
.ia-restore .ia-col-h { background: var(--ok-bg); box-shadow: inset 0 3px 0 var(--ok-line); }
.ia-deduct .ia-col-h { background: var(--bad-bg); box-shadow: inset 0 3px 0 var(--bad-line); }
.ia-sign, .ia-badge { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; font-weight: 700; font-size: 0.9375rem; line-height: 1; flex: none; }
.ia-restore .ia-sign, .ia-restore .ia-badge { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.ia-deduct .ia-sign, .ia-deduct .ia-badge { color: var(--bad); background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); }
.ia-tot { color: var(--muted); font-variant-numeric: tabular-nums; }
.ia-rows { display: grid; }
.ia-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem; padding: 0.5rem calc(var(--pad) - 0.375rem) 0.5rem var(--pad); border-bottom: 1px solid var(--line); }
.ia-badge { width: 1.125rem; height: 1.125rem; font-size: 0.8125rem; }
.ia-prod { min-width: 0; }
.ia-search { position: relative; }
.ia-search input { height: var(--control-sm); }
.ia-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 0.375rem); min-width: min(26rem, 80vw); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 18rem; }
.ia-deduct .ia-list { left: auto; }
.ia-opt { display: grid; gap: 0.125rem; white-space: normal; line-height: 1.35; }
.ia-opt .ia-om { font-size: var(--fs-xs); color: var(--muted); }
.ia-opt.is-off { opacity: .5; cursor: not-allowed; }
.ia-opt.is-off:hover { background: none; }
.combo-none .spinner { vertical-align: -0.125rem; margin-right: 0.25rem; }
.ia-picked { display: grid; gap: 0.0625rem; width: 100%; min-width: 0; padding: 0.25rem 0.375rem; margin-left: -0.375rem; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ia-picked:hover { background: var(--tint-2); }
.ia-t { font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.ia-m { font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.ia-qty { display: flex; align-items: center; gap: 0.125rem; }
.ia-qty .icon-btn { width: 1.75rem; height: 1.75rem; }
.ia-qty .ia-n { width: 3.75rem; height: var(--control-sm); padding: 0 0.375rem; text-align: center; font-weight: 600; }
.ia-bad .ia-n { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.ia-rm { width: 1.75rem; height: 1.75rem; }
.ia-qty .ia-link:not(.is-on) { margin-left: 0.125rem; color: var(--faint); }
.ia-qty .ia-link:not(.is-on):hover { color: var(--text); }
.ia-link.is-on { display: inline-flex; align-items: center; gap: 0.1875rem; height: 1.75rem; min-width: 1.75rem; margin-left: 0.125rem; padding: 0 0.4375rem; border: 0; border-radius: 999px;
  background: var(--info-bg); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-line); font: inherit; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.ia-link.is-on:hover { box-shadow: inset 0 0 0 1px var(--info); }
.ia-col > .ia-add.btn { margin: 0.625rem calc(var(--pad) - 0.875rem); }   /* same space above and below (beats .card > :last-child) */
.ia-foot label.f { margin-bottom: 0.75rem; }
.ia-foot textarea { min-height: 3.5rem; }
.ia-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.ia-actions #iaSum { font-variant-numeric: tabular-nums; }
.ia-foot #iaMsg .alert { margin-top: 0.75rem; }
.ia-pos { color: var(--ok); }
.ia-neg { color: var(--bad); }
.ia-err { color: var(--bad); white-space: normal; margin-top: 0.125rem; }
.ia-sumbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.ia-sumbar > div { display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-sm); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
.ia-sumbar b { font-size: 1.375rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ia-sumbar span { font-size: var(--fs-xs); color: var(--muted); }
.ia-sumbar .ia-plus b { color: var(--ok); }
.ia-sumbar .ia-minus b { color: var(--bad); }
.ia-dialog .table-wrap { margin-top: var(--gap); }
.ia-dialog h4 + .table-wrap { margin-top: 0.5rem; }
.ia-rt td.wrap { min-width: 12rem; }
.ia-dact { width: 100%; justify-content: flex-end; }
.ia-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.ia-elist { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; font-size: var(--fs-sm); }
.ia-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-items: end; }
.ia-filters label.f { margin: 0; }
.ia-filters label.f > span { font-size: var(--fs-xs); color: var(--faint); }
.ia-set { gap: 0.75rem; }
@media (max-width: 900px) {
  .ia-cols { grid-template-columns: minmax(0, 1fr); }
  .ia-filters { grid-template-columns: 1fr 1fr; }
  .ia-fq, .ia-filters label.f:nth-child(2) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ia-sumbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ia-entries { grid-template-columns: minmax(0, 1fr); }
  .ia-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'b p x' '. q q'; row-gap: 0.375rem; }
  .ia-badge { grid-area: b; } .ia-prod { grid-area: p; } .ia-rm { grid-area: x; } .ia-qty { grid-area: q; }
  .ia-list { min-width: 0; }
  .ia-dialog .d-foot .btn, .ia-dact .btn { flex: 1 1 auto; }
  .ia-actions .row { width: 100%; } .ia-actions .row .btn { flex: 1 1 auto; }
}
dialog.ia-dialog { width: min(66rem, calc(100vw - 2 * var(--gutter))); }
.ia-loc > span { display: inline-flex; align-items: center; gap: 0.25rem; }
@media (max-width: 640px) {
  .ia-rt thead { display: none; }
  .ia-rt, .ia-rt tbody { display: block; }
  .ia-rt tr { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--line); }
  .ia-rt tr:last-child { border-bottom: 0; }
  .ia-rt td { display: block; padding: 0; border: 0; white-space: normal; text-align: left !important; min-width: 0; max-width: none; background: none !important; }
  .ia-rt td.ia-c-p { flex: 1 1 100%; }
  .ia-rt td.c { width: auto; margin-left: auto; align-self: end; }
  .ia-rt td.c:has(.btn) { flex: 1 1 100%; margin-left: 0; }
  .ia-rt td.c .btn { width: 100%; }
  .ia-rt td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--faint); margin-bottom: 0.0625rem; }
}

/* ───────── AI Knowledge ───────── */
.kb-count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; margin-left: 0.375rem; border-radius: var(--pill); font-size: var(--fs-xs); color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); }
.kb-kpis-sm > .kpi { flex: 1 1 5.5rem; padding: 0.75rem 0.875rem; }
.kb-kpis-sm .kpi .v { font-size: var(--fs-stat); }
.kb-kpis-sm .kpi .k { white-space: normal; }
.kb-ov .card h2 { margin-bottom: 0.625rem; }
.kb-lines { display: grid; }
.kb-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; font-size: var(--fs-sm); }
.kb-line:first-child { border-top: 0; padding-top: 0; }
.kb-line:last-child { padding-bottom: 0; }
.kb-line > span:first-child { color: var(--muted); display: inline-flex; }
.kb-line > span:first-child { flex: none; }
.kb-line > span:nth-child(2) { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
button.kb-line { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; text-align: left; font: inherit; font-size: var(--fs-sm); color: inherit; cursor: pointer; }
.kb-lines > button.kb-line:first-child { border-top: 0; }
:is(a, button).kb-line:hover b { text-decoration: underline; text-decoration-color: var(--line-3); }
.kb-filters { grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); }
.kb-fq { grid-column: span 2; }
.kb-where { display: flex; gap: 0.375rem; align-items: flex-start; }
.kb-where .ic { flex: none; margin-top: 0.0625rem; }
.kb-list { display: grid; border-top: 1px solid var(--line); }
.kb-item { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; width: 100%; padding: 0.75rem 0.25rem; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.kb-item:hover { background: var(--tint); }
.kb-item-main { display: grid; gap: 0.1875rem; min-width: 0; }
.kb-item-t { font-weight: 500; overflow-wrap: anywhere; }
.kb-item-s { font-size: var(--fs-sm); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kb-item-m { font-size: var(--fs-xs); color: var(--faint); }
.kb-item-p { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex: none; }
.kb-cats { display: grid; gap: 0.5rem; }
.kb-cat { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5rem; align-items: center; }
.kb-dpills { gap: 0.5rem; }
.kb-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-family: inherit; }
.kb-answer { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0.75rem 0.875rem; border-radius: var(--radius-sm, 0.5rem); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-sm); line-height: 1.55; max-height: 24rem; overflow-y: auto; }
.kb-answer p { margin: 0 0 0.375rem; white-space: pre-wrap; }
.kb-add { background: var(--ok-bg); box-shadow: inset 0.1875rem 0 0 var(--ok); padding-left: 0.5rem !important; }
.kb-del { color: var(--muted); text-decoration: line-through; background: var(--bad-bg); box-shadow: inset 0.1875rem 0 0 var(--bad); padding-left: 0.5rem !important; }
.kb-ul { margin: 0; padding-left: 1.125rem; display: grid; gap: 0.25rem; }
.kb-versions { display: grid; gap: 0.5rem; }
.kb-ver { border: 1px solid var(--line); border-radius: var(--radius-sm, 0.5rem); padding: 0.5rem 0.75rem; }
.kb-ver > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; }
.kb-ver-note { flex-basis: 100%; }
.kb-ver-b { display: grid; gap: 0.5rem; margin-top: 0.625rem; }
.kb-ctx { margin-top: 0.625rem; font-size: var(--fs-sm); }
.kb-ctx > summary { cursor: pointer; color: var(--muted); }
.kb-ctx pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: var(--fs-xs); color: var(--muted); margin: 0.5rem 0 0; padding: 0.625rem 0.75rem; border-radius: var(--radius-sm, 0.5rem); background: var(--tint); max-height: 16rem; overflow-y: auto; }
.kb-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; font-size: var(--fs-sm); }
.kb-acts { margin-top: 0.875rem; gap: 0.5rem; }
.kb-pick { display: grid; max-height: 18rem; overflow-y: auto; margin-top: 0.5rem; border-top: 1px solid var(--line); }
.kb-pick-row { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); cursor: pointer; }
.kb-pick-row input { margin-top: 0.1875rem; flex: none; }
.kb-pick-row > span { min-width: 0; overflow-wrap: anywhere; }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 0 0.875rem; }
.kb-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.kb-opt { align-items: flex-start; display: flex; padding: 0.5rem 0; }
.kb-opt input { margin-top: 0.1875rem; flex: none; }
.kb-rv + .kb-rv { margin-top: var(--gap); }
.kb-rv-h { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-start; justify-content: space-between; }
.kb-rv-t { font-weight: 600; overflow-wrap: anywhere; }
.kb-answer-rv { max-height: 30rem; }
.kb-where-box { display: flex; gap: 0.625rem; align-items: flex-start; }
.kb-where-box .ic { flex: none; margin-top: 0.125rem; }
.kb-where-box b { display: block; }
.kb-src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); gap: var(--gap); align-items: start; }
.kb-src-grid > .card { margin: 0; }
.kb-src-h { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.25rem; }
.kb-src-h h2 { margin: 0 !important; flex: 1 1 auto; }
.kb-src-h > .ic { color: var(--muted); flex: none; }
.kb-sec { padding: 0.75rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.5rem; }
.kb-sec:first-child { border-top: 0; padding-top: 0; }
.kb-secs { max-height: 28rem; overflow-y: auto; }
.kb-key { display: block; margin-top: 0.5rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-sm, 0.5rem); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); overflow-wrap: anywhere; user-select: all; }
.kb-wa-f { margin-bottom: 0.5rem; }
.kb-wa-list { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.kb-wa { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 0.875rem; }
.kb-wa + .kb-wa { margin-top: 0; }
.kb-wa-q, .kb-wa-a { display: grid; gap: 0.125rem; margin-top: 0.5rem; font-size: var(--fs-sm); }
.kb-wa .kb-rv-h { align-items: center; justify-content: flex-start; gap: 0.375rem 0.5rem; }
.kb-wa .kb-acts { margin-top: 0.625rem; }
@media (max-width: 640px) {
  .kb-fq { grid-column: 1 / -1; }
  .kb-item { flex-direction: column; gap: 0.5rem; }
  .kb-item-p { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .kb-cat { grid-template-columns: minmax(0, 1fr) auto; }
  .kb-cat > span { grid-row: 2; }
  .kb-dlg .d-foot { flex-wrap: wrap; }
  .kb-dlg .d-foot .btn { flex: 1 1 auto; }
}

/* Stock Restoration: "already restored" stop */
dialog.rs-already { border-top: 0.25rem solid var(--bad); }
.rs-already .d-head h3 { color: var(--bad); }
.rs-already-head { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.875rem; border-radius: var(--radius-md); background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--bad-line); }
.rs-already-head > .ic { flex: none; color: var(--bad); }
.rs-already-head b { display: block; }
.rs-already-head p { margin: 0.25rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.rs-already-list { margin: 0.875rem 0; padding-left: 1.125rem; display: grid; gap: 0.375rem; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.rs-already-ack { display: flex; gap: 0.5rem; align-items: center; font-weight: 500; }
.btn.rs-already-go { background: var(--bad); border-color: var(--bad); color: var(--ink); }
.btn.rs-already-go:disabled { opacity: 0.45; }

/* ───────── Digital Key Fulfilment (Workshop) ───────── */
.dk-stock { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--gap); }
.dk-stock .card + .card { margin-top: 0; }
.dk-card { padding: 0.875rem 1rem; display: grid; gap: 0.625rem; align-content: start; }
.dk-card-head { min-height: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.dk-card-head .k { font-size: var(--fs-sm); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-card-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; text-align: center; }
.dk-card-nums b { display: block; font-size: var(--fs-stat); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dk-card-nums span { font-size: var(--fs-xs); color: var(--muted); }
.dk-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gap); align-items: start; }
.dk-scan .mf-scan-form input, .dk-scan .mf-scan-form .btn { height: var(--control-h); }
.dk-scan .mf-scan-form input { font-size: 1rem; }
.dk-drafts { display: grid; gap: var(--gap); min-width: 0; }
.dk-drafts .card + .card { margin-top: 0; }
.dk-empty { padding: 0; }
.dk-plines { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-md); }
.dk-pline { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; padding: 0.625rem 0.875rem; font-size: var(--fs-sm); }
.dk-pline + .dk-pline { border-top: 1px solid var(--line); }
.dk-pline > span:first-child { font-weight: 500; min-width: 0; }
.dk-prev { display: grid; gap: 0.25rem; margin-top: 0.5rem; }
.dk-prev-row { display: grid; gap: 0.125rem; text-align: left; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.dk-prev-row:hover { background: var(--tint); }
.dk-draft-head h2 { margin: 0; }
.dk-sub { margin: 0.25rem 0 0; }
.dk-keys { display: grid; gap: 0.5rem; }
.dk-key { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; padding: 0.75rem 0.875rem; border-radius: var(--radius-md); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-2); }
.dk-key-n { font-size: var(--fs-xs); color: var(--muted); min-width: 2.75rem; }
.dk-key code { flex: 1 1 14rem; min-width: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: .04em; overflow-wrap: anywhere; }
.dk-form { display: grid; }
.dk-edit { margin-bottom: var(--gap); }
.dk-edit textarea, .dk-pform textarea { font-size: var(--fs-xs); line-height: 1.5; }
.dk-meta { margin-top: 0.25rem; }
.dk-meta dd { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.375rem; }
.dk-frame { height: 30rem; }
.dk-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: var(--gap); padding-top: var(--gap); border-top: 1px solid var(--line); }
.dk-actions [data-send], .dk-actions [data-retry] { height: 3rem; padding-inline: 1.25rem; }
.dk-actions .grow, .dk-pactions .grow, dialog .d-foot > .grow { flex: 1 1 auto; }
.dk-hist-tools { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.dk-q { flex: 1 1 16rem; }
label.f.dk-q { margin: 0; }
.dk-mask { font-family: var(--mono); color: var(--muted); white-space: nowrap; }
.dk-full { font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; user-select: all; }
.dk-rec-keys { display: grid; gap: 0.375rem; }
.dk-rec-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.dk-rec-key > .row:last-child { margin-left: auto; }
.dk-trail { margin: 0.5rem 0 0; padding-left: 1.125rem; display: grid; gap: 0.25rem; font-size: var(--fs-sm); }
.dk-kfilters { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }
.dk-kfilters .dk-q { grid-column: span 2; }
.dk-note { max-width: 16rem; white-space: normal; }
.dk-row-act { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }
.dk-imp-sum { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font-size: var(--fs-sm); }
.dk-imp { max-height: 18rem; overflow: auto; }
.dk-products { display: grid; gap: 0.5rem; }
.dk-prod { border: 1px solid var(--line); border-radius: var(--radius-md); }
.dk-prod > summary { display: flex; padding: 0.75rem 0.875rem; }
.dk-prod-t { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.75rem; }
.dk-prod[open] > summary { border-bottom: 1px solid var(--line); }
.dk-pform { padding: 0.875rem; }
.dk-maps { display: grid; gap: 0.375rem; }
.dk-map { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.dk-pactions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: var(--gap); }
.dk-pmsg:not(:empty) { margin-top: 0.75rem; }
.dk-sp { padding: 0.75rem 0; border-top: 1px solid var(--line); }
.dk-spv { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0 0 1rem; font-size: var(--fs-sm); }
.dk-res { margin-top: 0.75rem; }
@media (max-width: 1439px) { .dk-main { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .dk-kfilters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-kfilters .dk-q { grid-column: 1 / -1; }
  .dk-frame { height: 24rem; }
  .dk-actions .btn { flex: 1 1 auto; }
  .dk-actions .grow, dialog .d-foot > .grow { display: none; }
  .dk-rec-key > .row:last-child { margin-left: 0; }
}

/* ───────── ID Verification ───────── */
.idv-head-tools { flex: none; }
.idv-scan { margin-bottom: var(--gap); max-width: 40rem; padding: 1rem; }
.idv-scan .mf-scan-form { gap: 0.625rem; }
.idv-scan .mf-scan-form label.f > span { font-size: var(--fs-xs); margin-bottom: 0.375rem; }
.dk-scan.idv-scan .mf-scan-form input, .dk-scan.idv-scan .mf-scan-form .btn { height: 2.25rem; }
.dk-scan.idv-scan .mf-scan-form input { font-size: 0.9375rem; }
@media (max-width: 640px) { .idv-scan { max-width: none; } .dk-scan.idv-scan .mf-scan-form input, .dk-scan.idv-scan .mf-scan-form .btn { height: var(--control-h); } }
.idv-stats .sub-stat.is-on { box-shadow: inset 0 0 0 1px var(--line-3); color: var(--text); background: var(--tint-2); }
.idv-stats b.idv-info { color: var(--info); }
.idv-stats b.idv-ok { color: var(--ok); }
.idv-stats b.idv-warn { color: var(--warn); }
.idv-tools input[type=date] { height: 2.25rem; }
.idv-tools .sub-pack-f > span { white-space: nowrap; }
.idv-wrap { background: var(--panel); }
.idv-table th button.sub-sort { all: unset; display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; color: inherit; font: inherit; }
.idv-table th button.sub-sort:focus-visible { outline: 0.125rem solid var(--ring); outline-offset: 0.125rem; border-radius: 0.25rem; }
.idv-table th button.sub-sort.is-on { color: var(--text); }
.idv-table th.num .sub-sort { justify-content: flex-end; }
.idv-table tbody tr:focus-visible { outline: 0.125rem solid var(--ring); outline-offset: -0.125rem; }
.idv-table .idv-ord .order-no { font-weight: 600; }
.idv-table .idv-cust { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.idv-table td { vertical-align: middle; }
@media (min-width: 641px) {
  .idv-table th, .idv-table td { padding-inline: 0.625rem; }
  .idv-table th:first-child, .idv-table td:first-child { padding-left: 1rem; }
  .idv-table th:last-child, .idv-table td:last-child { padding-right: 1rem; }
  .idv-table.has-sel th, .idv-table.has-sel td { padding-inline: 0.5rem; }
  .idv-table.has-sel th:first-child, .idv-table.has-sel td:first-child { padding-left: 1rem; padding-right: 0.25rem; }
  .idv-table.has-sel th:last-child, .idv-table.has-sel td:last-child { padding-right: 1rem; }
  .idv-table th.num, .idv-table td.num { text-align: center; }
  .idv-table th.num .sub-sort { justify-content: center; }
}
.idv-day { margin-bottom: 0.875rem; padding: 0.875rem 1rem; border-radius: var(--radius-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.idv-day-h { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 0.625rem; }
.idv-day-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.idv-day-c { display: grid; gap: 0.125rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); background: var(--tint-2); }
.idv-day-c span { font-size: var(--fs-xs); color: var(--muted); }
.idv-day-c b { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.idv-day-c b.idv-ok { color: var(--ok); }
.idv-day-c b.idv-info { color: var(--info); }
.idv-day-n { margin: 0.625rem 0 0; }
.idv-bulk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.625rem; }
.idv-bulk-b { gap: 0.5rem; flex-wrap: wrap; }
.idv-table td.idv-sel { cursor: pointer; }
.idv-table th.c input, .idv-table td.idv-sel input { display: block; width: 1.125rem; height: 1.125rem; max-width: none; margin: 0 auto; cursor: pointer; }
.idv-rel-list { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; max-height: 12rem; overflow: auto; font-size: var(--fs-sm); }
.idv-skip { margin: 0; padding-left: 1.125rem; display: grid; gap: 0.25rem; font-size: var(--fs-sm); }
.pill.idv-tag { white-space: nowrap; }
.idv-tools .idv-remind { margin-left: auto; }
.idv-rem { max-height: 50vh; overflow: auto; margin-bottom: 0.75rem; }
.idv-rem td { vertical-align: middle; }
.idv-new { height: 1.125rem; padding: 0 0.375rem; font-size: 0.625rem; font-weight: 700; letter-spacing: .06em; margin-left: 0.375rem; }
.idv-days { min-width: 1.75rem; justify-content: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.idv-days-n { font-variant-numeric: tabular-nums; color: var(--muted); }
/* Panel */
dialog.idv-dlg { width: min(64rem, calc(100vw - 2 * var(--gutter))); }
dialog.idv-dlg .d-head h3 { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.idv-load { display: flex; align-items: center; gap: 0.5rem; padding: 2rem 0; color: var(--muted); font-size: var(--fs-sm); }
.idv-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.625rem; margin-bottom: 1rem; }
.idv-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.idv-pills .idv-new { margin-left: 0; }
.idv-links { gap: 0.5rem; }
.idv-reason { margin-bottom: 1rem; }
.idv-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
.idv-sec { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1rem 1.125rem; min-width: 0; }
.idv-sec h4 { margin: 0 0 0.75rem; font-size: var(--fs-sm); font-weight: 600; }
.idv-sec h5 { margin: 0 0 0.25rem; font-size: var(--fs-xs); font-weight: 500; color: var(--faint); }
.idv-sec .row.between h4 { margin-bottom: 0.75rem; }
.idv-kv { grid-template-columns: 7.5rem minmax(0, 1fr); }
.idv-addr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; margin-top: 1rem; padding-top: 0.875rem; border-top: 1px solid var(--line); }
.idv-addr p { margin: 0; }
.idv-drop { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 1.5px dashed var(--line-3); border-radius: var(--radius-md); color: var(--muted); font-size: var(--fs-sm); cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.idv-drop b { color: var(--text); font-weight: 500; }
.idv-drop:hover, .idv-drop:focus-visible, .idv-drop.is-over { border-color: var(--info); background: var(--info-bg); outline: none; }
.idv-drop .ic { flex: none; color: var(--faint); }
#upMsg:not(:empty) { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
#upMsg .alert { flex: 1 1 auto; }
.idv-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; margin-top: 0.875rem; }
.idv-doc { margin: 0; min-width: 0; }
.idv-thumb { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--tint-2); overflow: hidden; cursor: zoom-in; }
.idv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idv-thumb:focus-visible { outline: 0.125rem solid var(--ring); outline-offset: 0.125rem; }
.idv-pdf { display: grid; justify-items: center; gap: 0.25rem; color: var(--muted); font-size: var(--fs-xs); }
.idv-used { position: absolute; top: 0.375rem; right: 0.375rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--ok); color: #fff; }
.idv-doc figcaption { display: grid; gap: 0.125rem; margin-top: 0.375rem; font-size: var(--fs-xs); min-width: 0; }
.idv-doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.idv-doc-act { gap: 0.75rem; }
.idv-removed { margin: 0.75rem 0 0; padding: 0.625rem 0 0 1.125rem; border-top: 1px solid var(--line); display: grid; gap: 0.375rem; font-size: var(--fs-sm); }
.idv-removed[hidden] { display: none; }
.idv-h-check { margin-top: 1.25rem !important; padding-top: 1rem; border-top: 1px solid var(--line); }
.idv-top-l { display: grid; gap: 0.625rem; justify-items: start; min-width: 0; }
.idv-fu button[data-fu="required"][aria-pressed="true"] { color: var(--warn); }
.idv-fu button[data-fu="complete"][aria-pressed="true"] { color: var(--ok); }
.idv-fu button:disabled { cursor: progress; }
.idv-col { display: grid; gap: 1rem; min-width: 0; }
.idv-sec .row.end { justify-content: flex-end; }
.idv-fu-form { padding-bottom: 0.875rem; margin-bottom: 0.875rem; border-bottom: 1px solid var(--line); }
.idv-fu-form label.f, .idv-nr label.f { margin-bottom: 0.75rem; }
.idv-fu-form select, .idv-nr select, .idv-fu-form textarea, .idv-nr textarea { width: 100%; }
.idv-fu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; max-height: 18rem; overflow: auto; }
.idv-fu-list li { display: grid; gap: 0.25rem; font-size: var(--fs-sm); }
.idv-fu-list li + li { padding-top: 0.75rem; border-top: 1px solid var(--line); }
.idv-fu-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.125rem 0.75rem; }
.idv-fu-h b { font-weight: 600; }
.idv-fu-list p { margin: 0; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.idv-fu-none { margin: 0; }
.idv-nr-on { margin-bottom: 0.875rem; }
.idv-nr:disabled { opacity: .5; }
.idv-pre { white-space: pre-wrap; }
.idv-hist { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); }
.idv-hist > summary { padding: 0.75rem 1rem; cursor: pointer; font-size: var(--fs-sm); font-weight: 500; }
.idv-hist[open] > summary { border-bottom: 1px solid var(--line); }
.idv-hist .timeline, .idv-hist > p { padding: 0.875rem 1rem 0.25rem; margin: 0; }
.idv-big { display: grid; place-items: center; background: var(--tint-2); border-radius: var(--radius-md); overflow: auto; max-height: 70vh; }
.idv-big img { max-width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .idv-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .idv-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .idv-tabs > button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .seg-tabs.idv-tabs { border-radius: var(--radius-md); }
  .idv-tools .idv-remind { margin-left: 0; width: 100%; justify-content: center; }
  .idv-tools .sub-pack-f { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 0.5rem; width: 100%; }
  .idv-tools .sub-pack-f > input, .idv-tools .sub-pack-f > select { width: 100%; }
  .idv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .idv-stats .sub-stat { flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.625rem; font-size: var(--fs-xs); line-height: 1.25; }
  .idv-wrap { box-shadow: none; overflow: visible; background: none; }
  .idv-table, .idv-table tbody { display: block; }
  .idv-table thead { display: none; }
  .idv-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem 0.75rem; padding: 0.75rem 0.875rem; margin-bottom: 0.5rem; border-radius: var(--radius-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
  .idv-table tbody td { display: block; padding: 0; border: 0; background: none !important; white-space: normal; min-width: 0; max-width: none; text-align: left; }
  .idv-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--faint); margin-bottom: 0.125rem; }
  .idv-table td.idv-ord { grid-column: 1 / -1; }
  .idv-table td.idv-ord::before { display: none; }
  .idv-table td.idv-ord .order-no { font-size: 1rem; }
  .idv-table tbody tr { position: relative; }
  .idv-table tbody td.idv-sel { position: absolute; top: 0.375rem; right: 0.5rem; padding: 0.375rem; width: auto; }
  .idv-table td.idv-sel input { width: 1.25rem; min-width: 1.25rem; height: 1.25rem; }
  .idv-ready td.idv-ord, .idv-table.has-sel td.idv-ord { padding-right: 2.5rem; }
  .idv-day-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head:has(> .idv-head-tools) { position: relative; padding-right: 2.75rem; }
  .page-head > div.idv-head-tools.row:last-child { position: absolute; top: 0; right: 0; width: auto; }
  .idv-top-l { width: 100%; }
  .seg-tabs.idv-fu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .idv-fu button { height: auto; min-height: 1.875rem; padding: 0.25rem 0.375rem; white-space: normal; line-height: 1.2; font-size: var(--fs-xs); }
  .idv-day-g .idv-day-c:first-child { grid-column: 1 / -1; }
  .idv-bulk-b { width: 100%; }
  .idv-bulk-b .btn { flex: 1 1 auto; justify-content: center; }
  .idv-addr { grid-template-columns: minmax(0, 1fr); }
  .idv-kv { grid-template-columns: 6.5rem minmax(0, 1fr); }
  dialog.idv-dlg .d-foot { gap: 0.375rem; padding-inline: 0.75rem; }
  dialog.idv-dlg .d-foot .btn { flex: 1 1 28%; min-width: 0; height: auto; min-height: 2.5rem; padding: 0.375rem 0.5rem; white-space: normal; line-height: 1.2; font-size: var(--fs-xs); justify-content: center; text-align: center; }
  dialog.idv-dlg .d-foot .btn.primary { flex-basis: 100%; font-size: var(--fs-sm); }
  .idv-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ───────── Nebula AI Chat ───────── */
.ai-chat { display: flex; flex-direction: column; gap: 0.75rem; }
.ai-bar { display: flex; gap: 0.5rem; align-items: center; }
.ai-bar select { flex: 1 1 auto; min-width: 0; }
.ai-msgs { display: flex; flex-direction: column; gap: 0.75rem; min-height: 16rem; max-height: calc(100vh - 21rem); overflow-y: auto; padding: 0.25rem 0.125rem; }
.ai-q { display: flex; justify-content: flex-end; }
.ai-q .ai-bubble { background: var(--tint); border-color: var(--line-2); max-width: min(42rem, 85%); }
.ai-a { display: flex; gap: 0.5rem; align-items: flex-start; }
.ai-av { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--brand-tint); color: var(--brand-fg); }
.ai-bubble { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.625rem 0.875rem; max-width: min(48rem, 100%); min-width: 0; overflow-wrap: anywhere; background: var(--panel); }
.ai-bubble p { margin: 0 0 0.5rem; }
.ai-bubble p:last-child { margin-bottom: 0; }
.ai-bubble ul, .ai-bubble ol { margin: 0 0 0.5rem; padding-left: 1.25rem; }
.ai-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.625rem; }
.ai-fail { border-color: var(--warn-line); background: var(--warn-bg); }
.ai-fail .row { margin-top: 0.5rem; }
.ai-wait { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); }
.ai-dots { display: inline-flex; gap: 0.25rem; }
.ai-dots i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; animation: ai-dot 1.2s infinite ease-in-out; }
.ai-dots i:nth-child(2) { animation-delay: 0.15s; }
.ai-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-dots i { animation: none; opacity: 0.6; } }
.ai-from { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.ai-from a { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; max-width: 100%; color: var(--info); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-from a .ic { flex: none; }
.ai-empty { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin: auto; text-align: center; color: var(--muted); padding: 1.5rem 0.5rem; }
.ai-empty p { margin: 0; max-width: 30rem; }
.ai-ex { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.ai-ex .btn { height: auto; min-height: 2rem; white-space: normal; text-align: left; }
.ai-ask { display: flex; gap: 0.5rem; align-items: flex-end; }
.ai-ask textarea { flex: 1 1 auto; min-width: 0; resize: vertical; min-height: 2.75rem; max-height: 12rem; }
@media (max-width: 640px) {
  .ai-msgs { max-height: calc(100vh - 19rem); min-height: 12rem; }
  .ai-q .ai-bubble { max-width: 92%; }
  .ai-ask { flex-direction: column; align-items: stretch; }
}
/* Nebula AI on every page: top-right button, floating Ask bar, side panel (public/js/aidock.js) */
.ai-top { position: relative; flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; height: 2.25rem; padding: 0 0.875rem;
  border: 0; border-radius: var(--pill); background: var(--brand-tint); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.ai-top .ic { color: var(--brand-fg); }
.ai-top:hover, .ai-top[aria-expanded="true"], .ai-top[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--brand-fg); }
.ai-top + .top-actions { margin-left: 0; }
.ai-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--faint); }
.ai-top.on .ai-dot { background: var(--ok); }
.ai-float { display: none; position: sticky; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: var(--z-bar); align-self: center; align-items: center; gap: 0.5rem;
  width: min(30rem, calc(100% - 2 * var(--gutter))); margin: auto 0 1rem; padding: 0.3125rem 0.3125rem 0.3125rem 0.75rem;
  border-radius: var(--pill); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-lg); }
body.ai-float-on .ai-float { display: flex; }
.ai-float-ic { display: inline-grid; color: var(--brand-fg); flex: none; }
.ai-float input { flex: 1 1 auto; min-width: 0; height: 2rem; border: 0; background: none; box-shadow: none; padding: 0; color: var(--text); font-size: var(--fs-sm); outline: none; }
.ai-float:focus-within { box-shadow: inset 0 0 0 1px var(--brand-fg), var(--shadow-lg); }
.ai-float-go { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: var(--text); color: var(--bg); cursor: pointer; }
.ai-float-go .ic { transform: rotate(-90deg); }
.ai-dock { display: none; }
body.ai-open .shell { grid-template-columns: var(--side-w) minmax(0, 1fr) var(--ai-w); }
body.ai-open .ai-dock { display: flex; }
.ai-dock { position: sticky; top: 0; height: 100dvh; flex-direction: column; min-width: 0;
  background: var(--bg-2); border-left: 1px solid var(--line); z-index: var(--z-side); }
:root { --ai-w: clamp(22rem, 28vw, 30rem); }
.ai-dock-h { display: flex; align-items: center; gap: 0.25rem; min-height: var(--top-h); padding: 0.625rem 0.5rem 0.625rem 1rem; border-bottom: 1px solid var(--line); }
.ai-dock-t { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.5rem; }
.ai-dock-t > .ic { color: var(--brand-fg); }
.ai-dock-b { flex: 1 1 auto; min-height: 0; padding: 0.875rem 1rem max(1rem, env(safe-area-inset-bottom)); }
.ai-dock-b .ai-msgs { flex: 1 1 auto; min-height: 0; max-height: none; }
.ai-dock-b .ai-ask { flex-direction: column; align-items: stretch; }
.ai-dock-b .ai-ask textarea { resize: none; }
.ai-dock-b .ai-q .ai-bubble { max-width: 90%; }
@media (max-width: 1023px) {
  body.ai-open .shell { grid-template-columns: minmax(0, 1fr); }
  .ai-dock { position: fixed; top: 0; right: 0; bottom: 0; width: min(26rem, 100vw); height: auto; box-shadow: var(--shadow-lg); z-index: calc(var(--z-side) + 1); }
}
@media (max-width: 640px) {
  .ai-top { width: 2.25rem; padding: 0; justify-content: center; }
  .ai-top span { display: none; }
  .ai-top .ai-dot { position: absolute; top: 0.25rem; right: 0.25rem; }
  .ai-dock { width: 100vw; border-left: 0; }
}
@media (max-width: 359px) { .ai-top { margin-left: 0; } }
.kb-srv-bar { flex-wrap: wrap; gap: 0.5rem 1rem; }
.kb-srv-h { margin: 1.25rem 0 0.625rem; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.kb-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.kb-notes li { display: flex; gap: 0.625rem; align-items: baseline; }
.kb-notes li .pill { flex: 0 0 auto; }
.kb-srv-charts .card h2 { font-size: var(--fs-sm); margin-bottom: 0.5rem; }
.kb-srv-charts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
/* ───────────── Warranty → Item Shipping ───────────── */
.is-hero .grow, .is-rfoot .grow, dialog.is-detail .d-foot > .grow { flex: 1 1 auto; }
.is-filters { --control-h: var(--control-sm); grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); gap: 0.5rem 0.625rem; }
.is-filters label.f > span:first-child:not(.combo):not(.dmy-field) { margin-bottom: 0.25rem; }
.is-filters :is(input, select, .menu-trigger) { font-size: var(--fs-sm); padding-inline: 0.625rem; }
.is-filters select { padding-right: 2rem; }
.is-filters .is-search { grid-column: span 2; }
.is-clear { margin: -0.25rem 0 0.75rem; }
.is-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.125rem; padding: 0 0.3125rem; margin-left: 0.25rem; border-radius: var(--pill); background: var(--tint-2); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.is-overdue { display: block; margin-top: 0.25rem; font-size: var(--fs-xs); color: var(--warn); white-space: nowrap; }
.is-table td { vertical-align: top; padding-block: 0.75rem; }
.is-table .is-ord .order-no { font-weight: 600; }
.is-table th, .is-table td { padding-inline: 0.5rem; }
.is-table th:first-child, .is-table td:first-child { padding-left: 1rem; }
.is-table th:last-child, .is-table td:last-child { padding-right: 0.875rem; }
.is-table td.is-task { min-width: 9rem; max-width: 22rem; }
.is-table td.is-rev { min-width: 9rem; max-width: 18rem; font-size: var(--fs-sm); }
.data td.is-curl { min-width: 8rem; word-break: break-all; }
@media (max-width: 640px) { .is-couriers .is-curl, .is-couriers th:nth-child(2), .is-couriers td:nth-child(2) { display: none; } .is-couriers td:first-child { white-space: normal; } }
@media (max-width: 26rem) { .is-views .seg-tabs { flex-wrap: wrap; border-radius: var(--radius-md); } .is-views .seg-tabs button { flex: 1 1 auto; } }
.is-table .is-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.is-table tr.is-late td:first-child { box-shadow: inset 0.1875rem 0 0 var(--warn-line); }
.is-table .is-date, .is-table .is-who, .is-table .is-cour { color: var(--muted); }
/* Ready to Ship: one card per shipment for the warehouse */
.is-ready { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); gap: var(--gap); }
.is-rcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); min-width: 0; }
.is-rcard.is-late { border-color: var(--warn-line); }
.is-rhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem 0.75rem; padding: 0.875rem 1rem 0.75rem; border-bottom: 1px solid var(--line); }
.is-rhead .order-no { font-size: 1.0625rem; font-weight: 600; }
.is-rhead .is-overdue { margin-top: 0.125rem; }
.is-rbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1rem; padding: 0.875rem 1rem; flex: 1 1 auto; }
.is-rbody .is-wide { grid-column: 1 / -1; }
.is-rbody h4, .is-sec h4 { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.375rem; font-size: var(--fs-xs); font-weight: 500; color: var(--faint); }
.is-rfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--line); background: var(--tint); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.is-addr { white-space: pre-line; font-size: var(--fs-sm); line-height: 1.5; }
.is-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-sm); line-height: 1.5; }
.is-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: var(--fs-sm); }
.is-items li { display: flex; gap: 0.5rem; }
.is-q { flex: none; min-width: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.is-gallery { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.is-gallery:empty { display: none; }
.is-thumb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; width: 5.5rem; height: 5.5rem; overflow: hidden; border-radius: var(--radius-xs); background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); text-decoration: none; font-size: 0.6875rem; text-align: center; padding: 0.25rem; }
.is-thumb img { width: calc(100% + 0.5rem); height: calc(100% + 0.5rem); margin: -0.25rem; object-fit: cover; }
.is-thumb span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-links { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; font-size: var(--fs-sm); }
.is-links li { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.is-links a { color: var(--info); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn.is-copy { width: 1.75rem; height: 1.75rem; vertical-align: middle; color: var(--faint); }
.icon-btn.is-copy:hover { color: var(--text); }
dialog.is-photo img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: var(--radius-xs); cursor: zoom-out; }
/* Task details */
.is-hero { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.875rem; }
.is-hero .is-overdue { margin: 0; }
.is-others { margin-bottom: 0.875rem; }
.is-secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.is-sec { padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); min-width: 0; }
.is-sec.is-wide { grid-column: 1 / -1; }
.is-sec .kv { grid-template-columns: 6.5rem minmax(0, 1fr); }
.is-sec .kv dd .icon-btn.is-copy { margin-top: -0.25rem; }
.is-sec > .row.between { margin-bottom: 0.375rem; }
.is-sec > .row.between h4 { margin: 0; }
.is-sec details.more + details.more { margin-top: 0.5rem; }
.is-conf { margin-top: 0.375rem; }
.is-afields { font-size: var(--fs-sm); line-height: 1.5; }
.is-afield { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.is-afield > span { min-width: 0; overflow-wrap: anywhere; }
.is-sec .kv dd .is-afield .icon-btn.is-copy { margin-top: 0; flex: none; }
.is-afields + .linkbtn { margin-top: 0.125rem; }
.is-add-photo { cursor: pointer; }
.is-file-acts { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; margin-top: 0.5rem; }
.is-notes { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.625rem; }
.is-notes li { padding-left: 0.75rem; border-left: 2px solid var(--line-2); }
.is-note-meta { font-size: var(--fs-xs); color: var(--faint); margin-bottom: 0.125rem; }
.is-note-add { display: flex; gap: 0.5rem; align-items: flex-end; }
.is-note-add textarea { min-height: 2.75rem; }
/* New / Edit task */
.is-form section { padding: 0 0 0.5rem; }
.is-form section + section { padding-top: 1rem; border-top: 1px solid var(--line); }
.is-form h4 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.875rem; font-size: var(--fs-body); font-weight: 600; }
.is-step { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--fs-xs); font-weight: 600; }
.is-form .is-note { margin: -0.375rem 0 0.875rem; }
.is-lookup { display: flex; gap: 0.5rem; align-items: flex-end; }
.is-lookup label.f { flex: 1 1 auto; }
.is-lookup .btn { margin-bottom: 0.875rem; }
#lk:not(:empty) { margin: -0.25rem 0 0.875rem; }
.is-found { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--fs-sm); }
.is-found > .ic { color: var(--ok); margin-top: 0.125rem; }
.is-found b { display: block; }
.is-bought { margin-top: 0.5rem; }
.is-quick { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
.is-dup { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; margin: 0.125rem 0; }
.is-sub { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.is-addr-acts { margin: -0.375rem 0 0.75rem; }
.is-addr-acts:has(> [hidden]:only-child) { display: none; }
.is-confirm { margin-top: 0.25rem; }
.is-edit-items { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.375rem; }
.is-edit-items li { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.375rem 0.375rem 0.75rem; border-radius: var(--radius-sm); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
.is-it-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.is-qty input { width: 4.5rem; height: var(--control-sm); text-align: center; padding: 0 0.375rem; }
.is-none { margin: 0 0 0.5rem; }
.is-psearch { position: relative; display: flex; gap: 0.5rem; align-items: center; }
.is-psearch input { flex: 1 1 auto; }
.is-sugg { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 0.25rem); max-height: 15rem; overflow: auto; padding: 0.25rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel); box-shadow: var(--shadow-md); }
.is-sugg button { display: block; width: 100%; padding: 0.5rem 0.625rem; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.is-sugg button:hover, .is-sugg button:focus-visible { background: var(--tint-2); outline: none; }
.is-sugg-none { padding: 0.5rem 0.625rem; }
.is-warn-text { color: var(--warn); }
.is-import td { vertical-align: top; }
@media (max-width: 760px) {
  .is-secs, .is-rbody { grid-template-columns: minmax(0, 1fr); }
  .is-filters .is-search { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  /* Table rows become compact cards: order + status on top, item, then the details */
  .is-table-wrap { box-shadow: none; overflow: visible; }
  .is-table, .is-table tbody { display: block; }
  .is-table thead { display: none; }
  .is-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; row-gap: 0.25rem; padding: 0.75rem 0.875rem; margin-bottom: 0.5rem; border-radius: var(--radius-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
  .is-table tbody tr.is-late { box-shadow: inset 0 0 0 1px var(--warn-line); }
  .is-table tbody td { display: block; padding: 0; border: 0; background: none !important; white-space: normal; min-width: 0; max-width: none; box-shadow: none !important; }
  .is-table td.is-ord { grid-column: 1; grid-row: 1; }
  .is-table td.is-st { grid-column: 2; grid-row: 1; text-align: right; }
  .is-table td.is-cust, .is-table td.is-task { grid-column: 1 / -1; }
  .is-table td.is-who, .is-table td.is-cour, .is-table td.is-trk, .is-table td.is-date { grid-column: 1 / -1; font-size: var(--fs-xs); }
  .is-table td.is-who:has(> .faint), .is-table td.is-cour:has(> .faint), .is-table td.is-trk:has(> .faint) { display: none; }
  .is-table td.is-who::before { content: 'Assigned to '; color: var(--faint); }
  .is-table td.is-cour::before { content: 'Courier '; color: var(--faint); }
  .is-table td.is-trk::before { content: 'Tracking '; color: var(--faint); }
  .is-table td.is-date::before { content: 'Created '; color: var(--faint); }
  .is-table td.is-rev { grid-column: 1 / -1; max-width: none; font-size: var(--fs-xs); }
  .is-table td.is-rev:has(> .faint) { display: none; }
  .is-table td.is-rev::before { content: 'Review '; color: var(--bad); font-weight: 600; }
  .is-rfoot .grow, dialog.is-detail .d-foot > .grow { display: none; }
  .is-rfoot .btn, dialog.is-detail .d-foot .btn { flex: 1 1 auto; }
  .is-sub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .is-sub > label:first-child { grid-column: 1 / -1; }
  .is-lookup { flex-wrap: wrap; }
  .is-note-add { flex-direction: column; align-items: stretch; }
  .is-sec .kv { grid-template-columns: minmax(0, 1fr); gap: 0.125rem 0; }
  .is-sec .kv dd { margin-bottom: 0.5rem; }
}
.is-link-add { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.is-link-add input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) { .is-link-add { flex-direction: column; align-items: stretch; } }

/* Customer Sentiment (badge everywhere, order page section, details window, dashboard) */
.sent-face { width: 0.875rem; height: 0.875rem; flex: none; }
.pill.sent-pill { gap: 0.3125rem; white-space: nowrap; }
button.pill.sent-pill { border: 0; font: inherit; font-size: var(--fs-xs); font-weight: 500; cursor: pointer; }
button.pill.sent-pill:hover { filter: brightness(1.12); }
:root[data-theme="light"] button.pill.sent-pill:hover { filter: brightness(.94); }
button.pill.sent-pill:focus-visible { outline: 2px solid var(--focus, var(--info)); outline-offset: 2px; }
.pill.sent-pill.sent-none { color: var(--faint); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.pill.sent-pill.solid { font-weight: 600; }
.pill.bad.solid { font-weight: 600; color: #fff; background: var(--bad); box-shadow: none; }
.sent-trend { font-weight: 700; margin-left: -0.0625rem; }
td.sent-col { white-space: nowrap; }
.pill.sent-dot { position: relative; width: 1.25rem; height: 1.25rem; padding: 0; margin: -0.25rem 0 -0.25rem 0.125rem; justify-content: center; vertical-align: middle; border: 0; border-radius: 50%; font: inherit; cursor: pointer; }
.pill.sent-dot .sent-face { width: 0.875rem; height: 0.875rem; }
#dayList .data td .pill.sent-dot { margin: -0.25rem 0 -0.25rem 0.125rem; }
#dayList .data td:first-child:has(.sent-dot) { white-space: normal; }   /* the badge drops under the order number rather than spilling into Status */
.pill.sent-dot.risk-high::after, .pill.sent-dot.risk-critical::after { content: ''; position: absolute; top: -0.0625rem; right: -0.0625rem; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 0.09375rem var(--panel); }
.pill.sent-dot.risk-critical::after { background: var(--bad); }
.pill.sent-dot:focus-visible { outline: 2px solid var(--focus, var(--info)); outline-offset: 2px; }
td.sent-col .pill + .pill { margin-left: 0.25rem; }
.card .osent-h { margin: var(--gap) 0 0.625rem; padding-top: var(--gap); border-top: 1px solid var(--line); }
.osent .kv { margin: 0; }
.osent-cov { margin: 0.625rem 0; }
.sent-cover { display: flex; gap: 0.625rem; align-items: flex-start; }
.sent-cover > .ic { flex: none; margin-top: 0.125rem; color: var(--info); }
.sent-handler { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; margin-top: var(--gap); }
.sent-handler .f { margin: 0; flex: 0 1 18rem; min-width: 0; }
.sent-handler .kv { margin: 0; }
.sent-handler > .small { padding-bottom: 0.625rem; }
.sent-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.sent-box { min-width: 0; padding: 0.875rem 1rem; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); }
.sent-box h4 { margin: 0 0 0.625rem; overflow-wrap: anywhere; }
.sent-box .kv { margin: 0.75rem 0 0; }
.sent-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0.375rem 0; }
.sent-box > .sent-pills { margin-top: 0; }
.sent-sec { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.sent-sec h4 { margin: 0 0 0.5rem; }
.sent-sec h4:not(:first-child) { margin-top: 1rem; }
.sent-sec > .row { margin-bottom: 0.5rem; }
.sent-sec > .row h4 { margin: 0; }
.sent-sec p { margin: 0; font-size: var(--fs-sm); }
.sent-list { margin: 0; padding-left: 1.125rem; font-size: var(--fs-sm); }
.sent-list li + li { margin-top: 0.25rem; }
.sent-quote { margin: 0.5rem 0 0; padding: 0.375rem 0 0.375rem 0.75rem; border-left: 2px solid var(--line-3); color: var(--muted); font-size: var(--fs-sm); font-style: italic; overflow-wrap: anywhere; }
.sent-convs { display: grid; }
.sent-conv { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.sent-convs > .sent-conv:first-child { border-top: 0; padding-top: 0.25rem; }
.sent-conv-main { flex: 1 1 0; min-width: 0; display: grid; gap: 0.25rem; justify-items: start; overflow-wrap: anywhere; }
.sent-conv-main .sent-pills { margin: 0.125rem 0; }
.sent-conv-act { flex: 0 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; max-width: 60%; }
.sent-dlg details.more { margin-top: 1rem; }
.sent-sugg { display: grid; gap: 0.375rem; margin-top: 0.25rem; }
.sent-sugg-o { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.sent-weeks { display: grid; gap: 0.5rem; }
.sent-week { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 2.5rem; align-items: center; gap: 0.75rem; }
.sent-week > .mono { text-align: right; }
.sent-stack { display: flex; height: 0.75rem; border-radius: var(--pill); overflow: hidden; background: var(--tint-2); }
.sent-stack > i { display: block; min-width: 2px; }
.sw-happy { background: var(--ok); } .sw-neutral { background: var(--line-3); } .sw-unhappy { background: var(--orange); } .sw-angry { background: var(--bad); }
.sw-key { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 2px; margin: 0 0.25rem 0 0.5rem; vertical-align: -0.0625rem; }
.sent-weeks > p { margin: 0.5rem 0 0; }
.sent-table td { vertical-align: top; }
.sent-table td.wrap { min-width: 14rem; white-space: normal; }
@media (max-width: 640px) {
  .sent-conv { flex-direction: column; }
  .sent-conv-act { max-width: none; justify-content: flex-start; }
  .sent-week { grid-template-columns: 2.75rem minmax(0, 1fr) 2rem; gap: 0.5rem; }
  .sent-boxes { grid-template-columns: minmax(0, 1fr); }
}

/* ───────── Workshop → Shipping ───────── */
.sp-scan { display: flex; align-items: flex-end; gap: 0.75rem; }
.sp-scan .f { flex: 1; margin: 0; }
.sp-hero { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.875rem; }
.sp-hero .cell-sub { display: block; }
.sp-list { margin: 0.25rem 0 0; padding-left: 1.125rem; font-size: var(--fs-sm); }
.sp-list li + li { margin-top: 0.125rem; }
.sp-form section { padding: 0 0 0.5rem; }
.sp-form section + section { padding-top: 1rem; border-top: 1px solid var(--line); }
.sp-form h4, .sp-set h4 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.875rem; font-size: var(--fs-body); font-weight: 600; }
.sp-box { padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 0.75rem; }
.sp-dims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.sp-dims .f { margin-bottom: 0.25rem; }
.sp-carriers { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 0.75rem; }
.sp-quotes { display: grid; gap: 0.375rem; margin-top: 0.75rem; }
.sp-quotes .check { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-md); margin: 0; }
.sp-quotes .check > b { margin-left: auto; white-space: nowrap; }
.sp-dialog .is-sec h4.mt-sm { margin-top: 0.875rem; }
.sp-dialog .alert + .is-secs { margin-top: 0.75rem; }
.sp-set + .sp-set { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.sp-set h4 .pill { font-weight: 500; }
.sp-items { max-width: 26rem; }
.sp-bar .grow, .sp-hero .grow { flex: 1 1 auto; }
#cons { width: 100%; max-width: 20rem; margin: 0.25rem 0 0 1.5rem; }
.sp-scan .sp-sp { margin: 0 0 0.625rem; white-space: nowrap; }
.sp-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.sp-table th.sp-sel, .sp-table td.sp-sel { width: 2.5rem; cursor: pointer; }
.sp-table th.sp-sel input, .sp-table td.sp-sel input { display: block; width: 1.125rem; height: 1.125rem; max-width: none; margin: 0 auto; cursor: pointer; }
.sp-table td.sp-print { white-space: nowrap; }
.sp-man { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.sp-man-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: space-between; padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: var(--radius-md); }
.sp-man-row .cell-sub { display: block; }
.sp-man > p { margin: 0; }
.sp-more { white-space: nowrap; }
.sp-oitems { margin-bottom: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); }
.sp-oitems h4 { margin: 0; padding: 0.5rem 0.75rem; font-size: var(--fs-sm); border-bottom: 1px solid var(--line); }
.sp-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; }
.sp-item + .sp-item { border-top: 1px solid var(--line); }
.sp-steps { margin: 0.5rem 0 1rem; padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.sp-code { display: block; margin-top: 0.375rem; padding: 0.5rem; border-radius: var(--radius-xs); background: var(--line); font-size: var(--fs-xs); overflow-wrap: anywhere; user-select: all; }
.sp-item img, .sp-noimg { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: var(--radius-sm, 0.375rem); object-fit: cover; background: var(--line); display: grid; place-items: center; color: var(--muted, inherit); }
.sp-item-t { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); }
.sp-item-t b { display: block; overflow-wrap: anywhere; }
.sp-item-n { flex: 0 0 auto; display: grid; justify-items: end; font-size: var(--fs-sm); white-space: nowrap; }
.sp-addr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 0.75rem; }
.sp-addr > .f { grid-column: span 3; }
.sp-addr > .a-suburb, .sp-addr > .a-state, .sp-addr > .a-postcode { grid-column: span 2; }
.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.75rem; }
.sp-grid > .sp-full { grid-column: 1 / -1; }
.sp-set form > .btn, .sp-set form > .row { margin-top: 0.25rem; }
.sp-set .sp-time { max-width: 12rem; margin-top: 0.875rem; }
.sp-set form > .check + .row { margin-top: 0.875rem; }
#qs:not(:empty) { margin-bottom: 0.25rem; }
.sp-form .sp-instr { margin-top: 0.875rem; }
@media (max-width: 640px) {
  .sp-scan { flex-direction: column; align-items: stretch; }
  .sp-scan .sp-sp { margin: 0; }
  .sp-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-man-row .btn { width: 100%; }
  .sp-addr > .f, .sp-grid > .f { grid-column: 1 / -1; }
  .sp-addr > .a-state, .sp-addr > .a-postcode { grid-column: span 3; }
  /* Tables become one card per row, like ID Verification */
  .sp-wrap { box-shadow: none; overflow: visible; background: none; border: 0; }
  .sp-table, .sp-table tbody { display: block; }
  .sp-table thead { display: none; }
  .sp-table tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem 0.75rem; padding: 0.75rem 0.875rem; margin-bottom: 0.5rem; border-radius: var(--radius-md); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
  .sp-table tbody td { display: block; padding: 0; border: 0; background: none !important; white-space: normal; min-width: 0; max-width: none; width: auto; text-align: left; }
  .sp-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--faint); margin-bottom: 0.125rem; }
  .sp-table td.sp-ord, .sp-table td.sp-items, .sp-table td.sp-print { grid-column: 1 / -1; }
  .sp-table td.sp-ord .order-no, .sp-table td.sp-ord .mono { font-size: 1rem; }
  .sp-table td.sp-print:empty { display: none; }
  .sp-table td.sp-print .btn { width: 100%; justify-content: center; }
  .sp-table tbody td.sp-sel { position: absolute; top: 0.375rem; right: 0.5rem; padding: 0.375rem; width: auto; }
  .sp-table td.sp-sel input { width: 1.25rem; height: 1.25rem; }
  .sp-table.has-sel td.sp-ord { padding-right: 2.5rem; }
}

/* ───────── Promise Tracker, AI Morning Brief ───────── */
.pt-quote { margin: 0.75rem 0 0.5rem; padding: 0.625rem 0.875rem; border-left: 0.1875rem solid var(--line-3); background: var(--tint-2); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--fs-sm); line-height: 1.5; }
.pt-pills { gap: 0.375rem; }
.pt-evidence { padding: 0.75rem 0.875rem; border-radius: var(--radius-md); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-line); }
.pt-evidence h4 { margin: 0 0 0.5rem; }
.pt-note { margin-top: 0.5rem; gap: 0.5rem; }
.pt-note input { flex: 1 1 14rem; min-width: 0; }
.pt-bulk { gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.pt-bulk[hidden] { display: none; }
.pt-table td.pt-promise { min-width: 11rem; max-width: 16rem; }
.pt-table :is(th, td):not(:first-child) { padding-inline: 0.625rem; }
.pt-table td.pt-who { white-space: normal; min-width: 5.5rem; max-width: 9rem; }
.pt-kpis > * { flex-basis: 8.5rem; }
.pt-table input.pt-tick { margin: 0 0.5rem 0 0; vertical-align: middle; }
.pt-tag { margin-left: 0.25rem; gap: 0.1875rem; padding-inline: 0.375rem; vertical-align: middle; }
.ops-card .ops-warn { margin-bottom: 0.75rem; display: flex; gap: 0.5rem; align-items: center; }
.ops-mini { list-style: none; margin: 0; padding: 0; }
.ops-mini li { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.5rem 0.25rem; border-top: 1px solid var(--line); border-radius: var(--radius-xs); }
.ops-mini li:first-child { border-top: 0; }
.ops-mini li.click { cursor: pointer; }
.ops-mini li.click:hover, .ops-mini li.click:focus-visible { background: var(--tint-2); outline: none; }
.ops-mini-main { min-width: 0; font-size: var(--fs-sm); }
.ops-mini + .ops-mini { border-top: 1px solid var(--line); margin-top: 0.25rem; padding-top: 0.25rem; }
.ops-closed { margin-top: 0.5rem; font-size: var(--fs-sm); }
.ops-closed summary { cursor: pointer; color: var(--muted); }
.ops-links { gap: 1rem; margin-top: 0.625rem; }
.br-meta { gap: 0.5rem 0.75rem; margin-top: -0.5rem; }
.br-meta .pill { gap: 0.25rem; }
.br-hist select { min-width: 11rem; }
.br-sec h3 { margin: 0 0 0.75rem; }
.br-sec-head { justify-content: space-between; margin-bottom: 0.75rem; }
.br-sec-head h3 { margin: 0; }
.br-summary { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.6; max-width: 62rem; }
.br-ai { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.75rem 0 0; padding: 0.625rem 0.875rem; border-radius: var(--radius-md); background: var(--tint-2); font-size: var(--fs-sm); line-height: 1.5; }
.br-ai .ic { flex: none; margin-top: 0.1875rem; color: var(--muted); }
.br-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem 1.25rem; }
.br-stat .k { font-size: var(--fs-xs); color: var(--muted); }
.br-stat .v { font-size: var(--fs-stat); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.br-stat .v.bad { color: var(--bad); } .br-stat .v.warn { color: var(--warn); }
.br-stat .s { font-size: var(--fs-xs); color: var(--faint); }
.br-ai-h { display: flex; gap: 0.375rem; align-items: center; }
.br-trends { margin: 0; padding-left: 1.125rem; font-size: var(--fs-sm); line-height: 1.55; }
.br-trends li { margin: 0.25rem 0; }
.br-refs { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin-left: 0.25rem; }
.br-att td.wrap { min-width: 10rem; max-width: 20rem; }
.br-when { gap: 1rem; align-items: flex-end; }
.br-when fieldset { border: 0; padding: 0; margin: 0; }
.br-when legend { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 0.375rem; padding: 0; }
/* AI Knowledge → Discord */
.dc-notes td.wrap { min-width: 16rem; }
.dc-notes td:first-child { white-space: nowrap; }