/* Client portal, "Flash": the print shop's own language. A warm paper
   ground (or charcoal in dark mode), marigold used like ink (progress, money
   owed, the one primary action), registration marks and a halftone field.
   Light by default; dark is a saved choice. The proof viewer is always dark.
   Condensed industrial display (Big Shoulders), a sturdy grotesk for reading
   (Schibsted Grotesk), sizes, numbers and money use the same face with tabular figures.
   --marigold fills; --accent is text that stands out: ink on paper (never
   brown, the user's rule), marigold on charcoal. */
:root {
  --ink: #f6f4ef; --ink-2: #ffffff; --panel: #ffffff; --raise: #efede7; --raise-2: #e2dfd7;
  --line: rgba(20, 18, 14, .09); --line-2: rgba(20, 18, 14, .16); --line-3: rgba(20, 18, 14, .3); --tint: rgba(20, 18, 14, .03); --track: rgba(20, 18, 14, .12);
  --text: #17150f; --text-2: #3a3832; --muted: #5c5a54; --faint: #6f6d66; --dim: #bdbab2;
  --marigold: #f5b21b; --marigold-hi: #ffc43d; --marigold-ink: #141210; --marigold-wash: rgba(245, 178, 27, .16);
  --accent: #17150f; --accent-hi: #3a3832;
  --bad: #b3261e; --bad-wash: rgba(179, 38, 30, .08); --good: #1d7442; --good-wash: rgba(29, 116, 66, .08); --good-line: rgba(29, 116, 66, .35);
  --top-bg: rgba(246, 244, 239, .86); --row-open: #fcfbf8; --signin-bg: rgba(255, 255, 255, .94); --shadow: rgba(60, 45, 10, .22); --ht-dot: rgba(222, 152, 0, .38);
  --f-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: var(--f-body);
  --gutter: 48px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
:root[data-theme="dark"], .lightbox, .pv {
  --ink: #111113; --ink-2: #0c0c0e; --panel: #19191c; --raise: #232327; --raise-2: #2e2e33;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15); --line-3: rgba(255, 255, 255, .3); --tint: rgba(255, 255, 255, .03); --track: rgba(255, 255, 255, .16);
  --text: #f3f2ef; --text-2: #d7d6d2; --muted: #a6a5a1; --faint: #8e8d89; --dim: #4a4a50;
  --marigold-hi: #ffd56b; --marigold-wash: rgba(245, 178, 27, .12);
  --accent: #f5b21b; --accent-hi: #ffd56b;
  --bad: #ff9a8a; --bad-wash: rgba(255, 120, 100, .12); --good: #8fdcae; --good-wash: rgba(143, 220, 174, .1); --good-line: rgba(143, 220, 174, .4);
  --top-bg: rgba(17, 17, 19, .86); --row-open: #1b1b1f; --signin-bg: rgba(25, 25, 28, .92); --shadow: rgba(0, 0, 0, .8); --ht-dot: rgba(245, 178, 27, .32);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
/* iPad/iPhone: taps act at once (no wait for a double-tap zoom) and without
   Safari's grey tap flash. */
a, button, label, summary, select, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body { background: var(--ink); color: var(--text); font-family: var(--f-body); font-variant-numeric: tabular-nums; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.lightbox-open { overflow: hidden; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
a { color: var(--accent); }
a:hover { color: var(--accent-hi); }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0; }
[hidden] { display: none !important; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.display { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: .92; letter-spacing: .005em; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.muted { color: var(--muted); }
.note { margin: 0; font-size: 13px; color: var(--faint); }
.wrap { max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Top bar ---- */
.top { position: sticky; top: 0; z-index: 20; background: var(--top-bg); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.top-inner { display: flex; align-items: center; gap: 36px; padding-block: 14px; }
.brand { display: block; flex: none; }
.brand img { height: 36px; width: auto; display: block; }
.user { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; }
.user .who { display: flex; align-items: center; gap: 10px; }
.user > .btn { white-space: nowrap; }
.user > .btn + .btn { margin-left: -6px; }
/* + New: Task / Deal / Customer in one menu. */
.hdr-new { position: relative; }
.hdr-new-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 170px; display: flex; flex-direction: column; padding: 6px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 10px 28px var(--shadow); }
.hdr-new-menu[hidden] { display: none; }
.hdr-new-menu .opp-menu-item { width: 100%; text-align: left; font-weight: 600; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--text); color: var(--ink); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 14px; flex: none; }
.avatar.ink { background: var(--marigold); color: var(--marigold-ink); }
.who-text { line-height: 1.25; }
.who-text b { display: block; font-weight: 600; }
.who-text span { color: var(--faint); font-size: 12px; }
.linkish { background: none; border: 0; padding: 6px 0; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.linkish:hover { color: var(--text); }
/* Icon squares: Safari's own button padding and look removed and the icon
   centered with flex, so it sits dead center on an iPad too. */
.theme-toggle, .side-toggle { -webkit-appearance: none; appearance: none; padding: 0; margin: 0; line-height: 0; box-sizing: border-box; align-items: center; justify-content: center; }
.theme-toggle svg, .side-toggle svg { display: block; flex: none; }
.theme-toggle { width: 38px; height: 38px; display: flex; flex: none; border-radius: 0; border: 1px solid var(--line-2); background: transparent; color: var(--muted); }
/* Hover only where there's a mouse: a tap on an iPad would leave it stuck on. */
@media (hover: hover) { .theme-toggle:hover, .side-toggle:hover { color: var(--text); border-color: var(--line-3); } }
.theme-toggle:active, .side-toggle:active { background: var(--tint); }
.theme-toggle .sun, :root[data-theme="dark"] .theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
.signed-out .top { display: none; }

/* ---- Buttons and chips ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 18px; border-radius: 0; border: 1px solid var(--line-2); background: transparent; color: var(--text); font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; transition: transform .15s var(--ease), background .15s, border-color .15s; }
.btn:hover { color: var(--text); border-color: var(--line-3); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--marigold); border-color: var(--marigold); color: var(--marigold-ink); font-weight: 700; }
.btn.primary:hover { background: var(--marigold-hi); border-color: var(--marigold-hi); color: var(--marigold-ink); }
.btn.sm { min-height: 36px; padding: 7px 13px; font-size: 13px; border-radius: 0; }
.btn:disabled { opacity: .55; cursor: wait; }
.btn svg { flex: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 0; padding: 4px 11px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--line-2); color: var(--text-2); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Completed is green; anything still in progress is yellow. */
.chip.complete { color: var(--good); background: var(--good-wash); border-color: var(--good-line); }
.chip.progress { color: var(--accent); background: var(--marigold-wash); border-color: rgba(245, 178, 27, .35); }
.chip.you { color: var(--marigold-ink); background: var(--marigold); border-color: var(--marigold); }
.chip.quiet { color: var(--muted); }
.chip.quiet::before { background: var(--dim); }
.pay { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pay.paid { color: var(--good); }
.pay.partial, .pay.unpaid { color: var(--bad); }
.pay.quote { color: var(--faint); }

/* ---- Halftone and registration marks ---- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
.ht { position: absolute; inset: -40% 0 0 0; z-index: -1; pointer-events: none; background-image: radial-gradient(var(--ht-dot) 1.15px, transparent 1.7px); background-size: 10px 10px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 88% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 70% 70% at 88% 30%, #000 0%, transparent 70%); will-change: transform; }
.reg { position: absolute; width: 44px; height: 44px; z-index: -1; pointer-events: none; }
.reg.a { top: 26px; right: 36px; opacity: .55; color: var(--accent); }
.reg.b { bottom: 24px; left: 16px; opacity: .25; color: var(--text); }
.hero-inner { padding-block: 26px 32px; display: flex; flex-direction: column; gap: 20px; }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.hero-row > .hero-title { flex: 1 1 620px; }
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.hero-title { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hero-title h1 { font-size: clamp(44px, 6vw, 80px); max-width: 16ch; overflow-wrap: anywhere; }
.hero-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.updated { font-size: 12.5px; color: var(--faint); }

/* ---- Number strip ---- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.kpi { padding: 16px 20px; min-width: 0; }
.kpi:first-child { padding-left: 0; }
.kpi + .kpi { border-left: 1px solid var(--line-2); }
.kpi .v { font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi .v.hot { color: var(--accent); text-decoration: underline 4px var(--marigold); text-underline-offset: 6px; text-decoration-skip-ink: none; }
.kpi .s { font-size: 12.5px; color: var(--faint); }

/* ---- Staff directory ---- */
/* One size for every cell; text columns left, everything else centered. */
.dir-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.dir-controls input { flex: 1 1 300px; }
.dir-summary { margin: 0; font-size: 14px; color: var(--muted); display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.dir-scroll { overflow: auto; max-height: calc(100vh - 150px); background: var(--panel); border: 1px solid var(--line); border-radius: 0; }
.dir-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 100%; font-size: 14px; }
.dir-table th, .dir-table td { padding: 10px 14px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--line); text-align: left; }
.dir-table .center { text-align: center; }
.dir-table .right { text-align: right; }
.dir-table th.right .th-inner { justify-content: flex-end; }
.column-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.column-option label { flex: 1; }
.column-option select { font: inherit; font-size: 12px; border: 1px solid var(--line-2); border-radius: 0; padding: 5px; color: var(--text); background: var(--panel); }
.sh-columns-menu:has(.column-option) { min-width: min(300px, calc(100vw - 32px)); max-height: 65vh; overflow: auto; }
.dir-table thead th { position: sticky; z-index: 2; background: var(--ink-2); }
.dir-labels th { top: 0; padding: 0; position: sticky; }
.th-inner { display: flex; align-items: center; padding: 0 8px; }
.dir-labels th.center .th-inner { justify-content: center; }
.th-sort { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 12px 6px; border: 0; background: none; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; }
.th-sort:hover, .dir-labels th[aria-sort="ascending"] .th-sort, .dir-labels th[aria-sort="descending"] .th-sort { color: var(--text); }
/* Floats over the header's right edge, so labels keep the full width. */
.col-filter { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 0; background: none; color: var(--faint); opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.dir-labels th:hover .col-filter, .col-filter:focus-visible, .col-filter[aria-expanded="true"] { opacity: 1; }
.col-filter:hover, .col-filter[aria-expanded="true"] { background: var(--raise); color: var(--text); }
.col-filter.on { opacity: 1; color: var(--marigold-ink); background: var(--marigold); }
@media (hover: none) { .col-filter { opacity: .7; } }
.sort-arrow { color: var(--accent); font-size: 13px; letter-spacing: 0; }
.col-resize { position: absolute; top: 0; right: 0; width: 9px; height: 100%; cursor: col-resize; touch-action: none; }
.col-resize::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 4px; width: 1px; background: var(--line-2); }
.col-resize:hover::after, .resizing .col-resize::after { background: var(--accent); width: 2px; }
.resizing, .resizing * { cursor: col-resize !important; user-select: none; }
/* The filter menu opened from a header. */
.col-menu { position: fixed; z-index: 40; width: 260px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 0; box-shadow: 0 18px 40px -18px var(--shadow); font-size: 14px; }
.col-menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.col-menu-head b { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.col-menu input[type="search"], .col-menu input[type="text"] { min-height: 38px; padding: 8px 12px; font-size: 14px; border-radius: 0; }
.col-menu .note { font-size: 12.5px; }
.col-menu-dates { width: 310px; gap: 8px; }
.col-menu-dates .dp-cal { padding-top: 8px; }
.col-menu-list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow: auto; margin: 0 -6px; }
.col-menu-list button { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 0; background: none; color: var(--text); text-align: left; font-size: 14px; }
.col-menu-list button:hover, .col-menu-list button:focus-visible { background: var(--raise); }
.col-menu-list button[aria-pressed="true"] { background: var(--marigold-wash); font-weight: 700; }
.col-menu-list em { font-style: normal; font-size: 12px; color: var(--faint); }
.active-filter { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: 0; border: 1px solid rgba(245, 178, 27, .5); background: var(--marigold-wash); color: var(--text); font-size: 13px; font-weight: 600; }
.active-filter span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--muted); }
.active-filter:hover span { background: var(--raise-2); color: var(--text); }
.dir-table tbody tr { cursor: pointer; transition: background .12s; }
.dir-table tbody tr:hover { background: var(--tint); }
.dir-table tbody tr:last-child td { border-bottom: 0; }
.dir-table tbody a { color: var(--text); font-weight: 700; text-decoration: none; }
.dir-table tbody a:hover { color: var(--accent); }
.dir-table .dir-empty td { text-align: center; color: var(--faint); padding: 28px; cursor: default; white-space: normal; }
.dim { color: var(--dim); }
.pill { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; padding: 3px 10px; border-radius: 0; font-size: 12px; font-weight: 700; line-height: 1.4; border: 1px solid var(--line-2); color: var(--text-2); }
.pill.type-quote { color: var(--accent); border-color: rgba(245, 178, 27, .5); background: var(--marigold-wash); }
.pill.type-invoice { color: var(--text-2); background: var(--raise); border-color: transparent; }
.pill.tone-done { color: var(--good); background: var(--good-wash); border-color: var(--good-line); }
.pill.tone-production { color: var(--marigold-ink); background: var(--marigold); border-color: var(--marigold); }
.pill.tone-payment { color: var(--bad); background: var(--bad-wash); border-color: rgba(179, 38, 30, .3); }
.pill.tone-art { color: var(--accent); background: var(--marigold-wash); border-color: rgba(245, 178, 27, .4); }
/* Paid (or on terms), waiting on the salesperson's Move to production. */
.pill.tone-release { color: var(--good); background: var(--panel); border-color: var(--good-line); }
.pill.tone-lost { color: var(--faint); text-decoration: line-through; }

/* ---- Mirror status (staff) ---- */
.jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.job { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.job h3 { margin: 0; font-size: 16px; }
.job dl { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 6px 18px; margin: 0; font-size: 14px; }
.job dt { color: var(--faint); }
.job dd { margin: 0; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.job .errs { margin: 0; padding-left: 18px; font-size: 13px; color: var(--bad); overflow-wrap: anywhere; }
.fails { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14px; max-height: 420px; overflow: auto; overflow-wrap: anywhere; }
.fails .errs { padding: 0; margin-top: 2px; }
.chip.ok { color: var(--good); background: var(--good-wash); border-color: var(--good-line); }
.chip.warn { color: var(--accent); background: var(--marigold-wash); border-color: rgba(245, 178, 27, .35); }
.chip.late { color: var(--bad); background: var(--bad-wash); border-color: var(--bad); }

/* ---- Status bar ---- */
.sb { display: flex; flex-direction: column; gap: 14px; }
.sb-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.sb-headline { display: flex; flex-direction: column; gap: 2px; }
.sb-headline b { font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1.05; text-transform: uppercase; }
.sb-headline b.you { color: var(--accent); }
.sb-headline span { font-size: 13.5px; color: var(--muted); }
.sb-rail { position: relative; display: grid; align-items: start; }
.sb-track, .sb-fill { position: absolute; left: 0; top: 10px; height: 3px; border-radius: 0; }
.sb-track { right: 0; background: var(--raise-2); }
.sb-fill { background: var(--marigold); transform-origin: left center; }
.sb-step { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sb-dot { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 4px var(--ink); flex: none; }
.sb-step.done .sb-dot { background: var(--marigold); }
.sb-step.ahead .sb-dot { background: var(--ink); border: 2px solid var(--dim); }
.sb-step.us .sb-dot { background: var(--marigold); box-shadow: 0 0 0 4px var(--ink), 0 0 0 9px rgba(245, 178, 27, .18); }
.sb-step.you .sb-dot { background: var(--ink); border: 4px solid var(--marigold); box-shadow: 0 0 0 4px var(--ink), 0 0 0 9px rgba(245, 178, 27, .2), 0 0 26px rgba(245, 178, 27, .7); animation: pulse 2.4s var(--ease) infinite; }
.sb-step.complete .sb-dot { background: var(--marigold); box-shadow: 0 0 0 4px var(--ink), 0 0 0 7px rgba(245, 178, 27, .35), 0 0 28px rgba(245, 178, 27, .6); }
.sb-label { font-size: 12.5px; line-height: 1.3; color: var(--text-2); padding-right: 6px; }
.sb-step.ahead .sb-label { color: var(--faint); }
.sb-step.you .sb-label, .sb-step.us .sb-label, .sb-step.complete .sb-label { color: var(--text); font-weight: 700; }
.sb-mini { display: grid; gap: 4px; }
.sb-mini span { height: 6px; border-radius: 0; background: var(--track); }
.sb-mini span.on { background: var(--marigold); }
.sb-mini span.now { background: var(--marigold); box-shadow: 0 0 12px rgba(245, 178, 27, .8); }
.sb-mini span.good { background: var(--good); }
/* A completed order's big bar is green end to end. */
.sb.complete .sb-fill { background: var(--good); }
.sb.complete .sb-step.done .sb-dot { background: var(--good); }
.sb.complete .sb-step.complete .sb-dot { background: var(--good); box-shadow: 0 0 0 4px var(--ink), 0 0 0 7px rgba(143, 220, 174, .3), 0 0 26px rgba(143, 220, 174, .5); }
.sb-mini span.now.us { background: var(--marigold); box-shadow: 0 0 8px rgba(245, 178, 27, .5); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--ink), 0 0 0 9px rgba(245, 178, 27, .2), 0 0 26px rgba(245, 178, 27, .7); } 50% { box-shadow: 0 0 0 4px var(--ink), 0 0 0 13px rgba(245, 178, 27, .08), 0 0 34px rgba(245, 178, 27, .45); } }

/* ---- Cards and page body ---- */
.body { padding-block: 36px 72px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.col-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.col-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 0; }
.pad { padding: 22px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-head h2 { font-family: var(--f-display); font-weight: 800; font-size: 30px; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.section-head span { font-size: 13px; color: var(--faint); }

/* ---- Line items ---- */
/* Proofs always show whole: Ink Alley's proof sheets are portrait, so the
   proof column is a portrait frame and the sheet is fitted, never cropped. */
.line-card { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); overflow: hidden; }
.proof-btn { position: relative; display: block; padding: 0; border: 0; background: #f4f3f0; aspect-ratio: 1400 / 1812; cursor: zoom-in; overflow: hidden; }
.proof-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.proof-btn:hover img { transform: scale(1.02); }
.proof-btn .enlarge { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; background: rgba(17, 17, 19, .82); color: #f3f2ef; font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 0; }
.proof-none { display: grid; place-items: center; aspect-ratio: 1400 / 1812; background: var(--raise); color: var(--faint); font-size: 13px; }
/* Line cards: one type scale. Labels are small caps in the body face,
   numbers tabular; the money total is the only display-face figure. */
.line-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.line-body .sku { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.line-body h3 { margin-top: 2px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.swatch { margin-top: 4px; font-size: 14px; color: var(--muted); }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.size { background: var(--raise); border-radius: 0; padding: 8px 0 7px; }
.size small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.size b { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
/* Received / completed under each size, like the extension's tracker. */
.size-stages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; margin: 6px 6px 0; }
.size-stages i { font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 18px; border-radius: 0; border: 1px solid var(--line); background: var(--panel); color: var(--faint); }
.size-stages i.part { border-color: transparent; background: color-mix(in srgb, #f59e0b 30%, var(--panel)); color: var(--text); }
.size-stages i.done { border-color: transparent; background: #65a30d; color: #fff; }
.size-defects { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700; color: #dc2626; }
.size-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -4px 0 0; font-size: 11.5px; color: var(--muted); }
.size-legend span { display: inline-flex; align-items: center; gap: 5px; }
/* Size strip, deals and invoices (sizeStripHtml in portal/summary.js);
   on invoices each cell is colored by its furthest complete stage. */
.size-strip { display: inline-flex; flex-wrap: wrap; align-self: flex-start; max-width: 100%; border: 1px solid var(--line-2); border-radius: 0; overflow: hidden; }
.size-strip > span, .size-strip > button { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 46px; padding: 5px 0 6px; margin-bottom: -1px; box-shadow: inset -1px 0 var(--line), inset 0 -1px var(--line); font-variant-numeric: tabular-nums; }
.size-strip > :last-child { box-shadow: inset 0 -1px var(--line); }
/* Staff on an invoice: each size cell opens its defects. */
.size-strip > button { border: 0; border-radius: 0; background: var(--panel); font: inherit; color: inherit; cursor: pointer; }
.size-strip > button:hover { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; }
.size-strip > button[aria-expanded="true"] { outline: 2px solid var(--text); outline-offset: -2px; }
.size-strip small { font-size: 11px; font-weight: 600; color: var(--faint); }
.size-strip b { font-size: 14px; font-weight: 600; color: var(--text); }
.size-strip em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--bad); }
.size-strip .none b { color: var(--dim); font-weight: 400; }
.size-strip .qty { background: var(--tint); }
/* Received and Completed are the schedule's Fully Received and Complete colors, pastel. */
.size-strip .st-receiving, .strip-legend i.st-receiving { background: color-mix(in srgb, #3b82f6 24%, var(--panel)); }
.size-strip .st-production, .strip-legend i.st-production { background: color-mix(in srgb, #65a30d 28%, var(--panel)); }
.size-strip > [class*="st-"] { box-shadow: inset -1px 0 var(--line-2), inset 0 -1px var(--line-2); }
.size-strip > [class*="st-"]:last-child { box-shadow: inset 0 -1px var(--line-2); }
.strip-legend i { box-shadow: inset 0 0 0 1px var(--line-2); }
.oq-imp-lines + .size-legend, .size-strip + .size-legend { margin: 8px 0 0; }
.size-legend i { width: 10px; height: 10px; border-radius: 0; }
.size-legend i.part { background: color-mix(in srgb, #f59e0b 30%, var(--panel)); }
.size-legend i.done { background: #65a30d; }
.line-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.line-foot .each { font-size: 13px; color: var(--muted); }
.line-foot .amt { margin-top: 2px; font-family: var(--f-display); font-weight: 800; font-size: 30px; line-height: 1; }

/* ---- Side cards ---- */
.money { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.money .row { display: flex; justify-content: space-between; gap: 16px; }
.money .row span:first-child { color: var(--muted); }
.money .row span:last-child { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.money .total { border-top: 1px solid var(--line-2); padding-top: 12px; margin-top: 4px; font-weight: 700; font-size: 16px; }
.money .total span:first-child, .money .bal span:first-child { color: var(--text); }
.money .bal { font-weight: 700; }
.money .bal span:last-child.hot { color: var(--accent); }
.history { display: grid; grid-template-columns: 12px 1fr; gap: 6px 12px; font-size: 14px; }
.history i { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); margin-top: 7px; }
.history i.on { background: var(--marigold); }
.history b { font-weight: 600; display: block; }
.history span { color: var(--faint); font-size: 13px; }
.person { display: flex; align-items: center; gap: 14px; }
.person .avatar { width: 44px; height: 44px; font-size: 17px; }
.person div { min-width: 0; overflow-wrap: anywhere; }

/* ---- Overview ---- */
.greet h1 { font-size: clamp(48px, 6.4vw, 88px); }
.greet p { margin: 0; max-width: 60ch; color: var(--muted); }
.needs { display: grid; gap: 12px; }
.need { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 20px; border-radius: 0; background: linear-gradient(90deg, rgba(245, 178, 27, .14), rgba(245, 178, 27, .04)); border: 1px solid rgba(245, 178, 27, .35); }
.need b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1.05; text-transform: uppercase; color: var(--accent); }
.need span { font-size: 13.5px; color: var(--text-2); }
.need .sb-mini { margin-top: 10px; max-width: 360px; }
.latest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.latest-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.latest-top h3 { font-family: var(--f-display); font-weight: 800; font-size: 32px; line-height: 1; text-transform: uppercase; margin-top: 6px; }
.strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.strip button { position: relative; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: #f4f3f0; aspect-ratio: 1400 / 1812; cursor: zoom-in; transition: transform .2s var(--ease); }
.strip button:hover { transform: translateY(-2px); }
.strip img { width: 100%; height: 100%; object-fit: contain; display: block; }
.list { display: grid; }
.list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.list a:first-child { border-top: 0; }
.list a:hover b { color: var(--accent); }
.list b { font-weight: 600; display: block; overflow-wrap: anywhere; }
.list span { font-size: 12.5px; color: var(--faint); }
/* ---- Overview: every order down the page ---- */
.all-orders { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
/* One grid for every row, so status bars and totals line up order to order. */
/* One grid for every row, so status bars and totals line up order to order.
   A row is a button that opens its details in place. */
.order-rows { --cols: minmax(0, 1fr) 240px 150px 22px; display: grid; gap: 8px; }
.order-rows-head { display: grid; grid-template-columns: var(--cols); gap: 28px; padding: 0 22px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.order-rows-head span:nth-child(3) { text-align: right; }
.order-row { background: var(--panel); border: 1px solid var(--line); border-radius: 0; overflow: hidden; transition: border-color .15s, background .15s; }
.order-row:hover, .order-row.open { border-color: var(--line-3); }
.order-row.open { background: var(--row-open); }
.or-toggle { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: var(--cols); gap: 28px; align-items: center; min-height: 76px; padding: 14px 22px; color: var(--text); }
.or-toggle:hover { background: var(--tint); }
.or-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0; }
.or-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.or-num { font-size: 12px; color: var(--faint); }
.or-name { font-size: 15.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-meta { font-size: 12.5px; color: var(--faint); }
.or-status { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.or-status .sb-mini { width: 100%; min-height: 6px; }
.or-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.or-step::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text); flex: none; }
.or-step em { margin-left: auto; font-style: normal; font-family: var(--f-mono); font-size: 11px; font-weight: 400; color: var(--faint); }
.or-step.you { color: var(--accent); }
.or-step.you::before { background: var(--marigold); box-shadow: 0 0 8px rgba(245, 178, 27, .8); }
.or-step.us { color: var(--accent); }
.or-step.us::before { background: var(--marigold); }
.or-step.complete { color: var(--good); }
.or-step.complete::before { background: var(--good); }
.or-money { text-align: right; display: flex; flex-direction: column; gap: 3px; }
.or-money .mono { font-size: 15px; font-weight: 500; }
.or-money .pay { font-size: 12px; font-weight: 500; }
.or-money .pay.paid { color: var(--faint); }
.or-chev { display: grid; place-items: center; color: var(--faint); transition: transform .25s var(--ease), color .15s; }
.or-chev svg { width: 18px; height: 18px; }
.order-row.open .or-chev { transform: rotate(90deg); color: var(--accent); }
.or-detail { border-top: 1px solid var(--line); padding: 16px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.od-lines { display: grid; gap: 10px; }
.od-line { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.od-proof { width: 112px; aspect-ratio: 1400 / 1812; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: #f4f3f0; cursor: zoom-in; }
.od-proof img { width: 100%; height: 100%; object-fit: contain; display: block; }
.od-proof.none { background: var(--raise); cursor: default; }
.od-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.od-info > b { font-size: 14.5px; font-weight: 600; }
.od-info > span { font-size: 12.5px; color: var(--faint); }
.od-sizes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); }
.od-sizes span { background: var(--raise); border-radius: 0; padding: 2px 7px; }
.od-sizes b { color: var(--text); font-weight: 600; }
.od-amt { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.od-amt span:last-child { font-size: 12px; color: var(--faint); }
.od-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--line); padding-top: 14px; }
.od-money { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--faint); }
.od-money b { color: var(--text); font-weight: 600; margin-left: 4px; }
.od-money b.hot { color: var(--accent); }
.more-row { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 6px; }
.btn.more { align-self: center; }

/* ---- Orders toolbar, cards on phones ---- */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.searchbox { flex: 1 1 280px; max-width: 420px; }
.searchbox input { min-height: 40px; padding: 9px 14px; border-radius: 0; font-size: 15px; }
.crumbs-row { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.order-title { gap: 12px; }
.order-title h1 { font-size: clamp(40px, 5.4vw, 72px); max-width: 20ch; }
.mobile-cta { display: none; }

/* ---- Tables ---- */
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { border: 1px solid var(--line-2); background: transparent; border-radius: 0; padding: 7px 13px; font-size: 13px; font-weight: 600; color: var(--muted); min-height: 36px; }
.filters button[aria-pressed="true"] { background: var(--text); color: var(--ink); border-color: var(--text); }
.filters em { font-style: normal; font-family: var(--f-mono); font-size: 11px; opacity: .7; margin-left: 5px; }
.tablewrap { overflow-x: auto; }
/* Square edges everywhere: only true circles (50%) stay round. */
:where(button, input, select, textarea, img, video, iframe, details, summary, dialog) { border-radius: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
th { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
td { padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.link { cursor: pointer; transition: background .12s; }
tbody tr.link:hover td { background: var(--tint); }
td.r, th.r { text-align: right; }
td .t { font-weight: 600; }
td .sub { font-size: 12px; color: var(--faint); }
td a { text-decoration: none; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---- Home, sign-in, states ---- */
.page-head { padding-block: 40px 8px; display: flex; flex-direction: column; gap: 10px; }
.page-head h1 { font-size: clamp(42px, 5.4vw, 72px); }
.page-head p { margin: 0; color: var(--muted); max-width: 62ch; }
.stack { padding-block: 24px 72px; display: flex; flex-direction: column; gap: 20px; }
.accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.account { display: flex; align-items: center; gap: 14px; padding: 18px; color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s var(--ease); }
.account:hover { color: var(--text); border-color: rgba(245, 178, 27, .5); transform: translateY(-2px); }
.account b { display: block; font-weight: 700; overflow-wrap: anywhere; }
.account span { font-size: 12.5px; color: var(--faint); }
.search { display: flex; gap: 10px; }
.search-scope { display: inline-flex; gap: 4px; padding: 4px; border-radius: 0; background: var(--ink-2); border: 1px solid var(--line-2); align-self: flex-start; }
.search-scope button { border: 0; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; min-height: 36px; padding: 6px 16px; border-radius: 0; }
.search-scope button:hover { color: var(--text); }
.search-scope button[aria-pressed="true"] { background: var(--marigold); color: var(--marigold-ink); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; }
input[type="email"], input[type="search"], input[type="text"] { font: inherit; font-size: 16px; padding: 12px 14px; min-height: 48px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); width: 100%; min-width: 0; }
input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.form-error { margin: 0; color: var(--bad); font-size: 13.5px; }
.state { padding: 64px 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.state h1 { font-size: clamp(34px, 4vw, 52px); }
.state p { margin: 0; color: var(--muted); max-width: 56ch; }
.loading { display: flex; align-items: center; gap: 12px; color: var(--muted); padding: 64px 0; }
.loading::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--raise-2); border-top-color: var(--marigold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { border-radius: 0; background: linear-gradient(90deg, var(--raise), var(--raise-2), var(--raise)); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }

.landing { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: calc(56px + env(safe-area-inset-top, 0px)) clamp(20px, 6vw, 96px) 56px; }
.landing .ht { inset: -30% 0 0 0; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 20% 30%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 60% 70% at 20% 30%, #000 0%, transparent 72%); }
.landing .reg.a { top: 40px; right: 48px; }
.landing .reg.b { bottom: 40px; left: 40px; }
.landing-copy { display: flex; flex-direction: column; gap: 22px; }
.landing-copy img { width: 210px; height: auto; display: block; margin-bottom: 18px; }
.landing-copy .eyebrow { color: var(--marigold); }
.landing-copy h1 { font-size: clamp(56px, 7.4vw, 112px); }
.landing-copy h1 em { font-style: normal; color: var(--marigold); }
.landing-copy p { margin: 0; color: var(--muted); font-size: 17px; max-width: 46ch; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.points li { display: flex; gap: 12px; align-items: baseline; }
.points li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 0; background: var(--marigold); transform: translateY(-1px); }
.signin { width: 100%; max-width: 440px; justify-self: center; padding: 30px; display: flex; flex-direction: column; gap: 16px; background: var(--signin-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 40px 80px -40px var(--shadow); }
.signin h2 { font-family: var(--f-display); font-weight: 900; font-size: 36px; text-transform: uppercase; line-height: 1; }
.signin p { margin: 0; color: var(--muted); }
.signin form { display: flex; flex-direction: column; gap: 10px; }
.signin .btn { width: 100%; min-height: 50px; }
.or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; }
.or::before, .or::after { content: ""; height: 1px; background: var(--line-2); }
.contact { font-size: 13px; color: var(--faint); }

/* ---- Lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; background: rgba(8, 8, 9, .97); color: var(--text); padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); animation: fadein .2s ease both; }
.lb-top { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.lb-top .round { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 0; border: 0; background: rgba(255, 255, 255, .08); color: var(--text); text-decoration: none; flex: none; }
.lb-top .round:hover { background: rgba(255, 255, 255, .16); color: var(--text); }
.lb-title { flex: 1; min-width: 0; line-height: 1.3; }
.lb-title b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-title span { font-size: 12px; color: var(--faint); }
.lb-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; }
/* The whole proof fits the stage; tapping zooms in. */
.lb-stage img { position: absolute; inset: 8px 16px; width: calc(100% - 32px); height: calc(100% - 16px); object-fit: contain; cursor: zoom-in; transform-origin: 50% 50%; transition: transform .35s var(--ease); will-change: transform, opacity; touch-action: none; }
.lb-stage.zoomed img { cursor: grab; transition: none; }
.lb-stage.zoomed.drag img { cursor: grabbing; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 0; border: 0; background: rgba(17, 17, 19, .8); color: var(--text); display: grid; place-items: center; }
.lb-nav.prev { left: 16px; }
.lb-nav.next { right: 16px; }
.lb-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(17, 17, 19, .8); color: var(--text-2); font-size: 12px; padding: 7px 12px; border-radius: 0; white-space: nowrap; pointer-events: none; }
.lb-thumbs { display: flex; gap: 8px; justify-content: center; padding: 12px 16px 18px; overflow-x: auto; }
.lb-thumbs button { flex: none; width: 46px; height: 60px; padding: 0; border-radius: 0; overflow: hidden; border: 2px solid transparent; background: #f4f3f0; opacity: .55; transition: opacity .15s; }
.lb-thumbs button[aria-current="true"] { border-color: var(--marigold); opacity: 1; }
.lb-thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes fadein { from { opacity: 0; } }

/* ---- Entrances: only when a screen first opens ---- */
@media (prefers-reduced-motion: no-preference) {
  .enter .rise { animation: rise .6s var(--ease) both; }
  .enter .rise:nth-child(2) { animation-delay: .05s; }
  .enter .rise:nth-child(3) { animation-delay: .1s; }
  .enter .rise:nth-child(4) { animation-delay: .15s; }
  .enter .sb-fill { animation: fill 1.1s var(--ease) .15s both; }
  .enter .sb-step .sb-dot { animation: pop .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + .2s); }
  .enter .sb-step.you .sb-dot { animation: pop .45s var(--ease) both, pulse 2.4s var(--ease) 1.2s infinite; animation-delay: calc(var(--i, 0) * 70ms + .2s), 1.4s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes fill { from { transform: scaleX(0); } }
  @keyframes pop { from { transform: scale(.4); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ht { transform: none !important; }
}

/* ---- Narrow screens ---- */
@media (max-width: 980px) {
  :root { --gutter: 28px; }
  .line-card { grid-template-columns: minmax(150px, 38%) minmax(0, 1fr); }
  .landing { grid-template-columns: minmax(0, 1fr); gap: 32px; align-content: start; }
  .signin { justify-self: stretch; max-width: none; }
}
@media (max-width: 760px) {
  .dir-scroll { max-height: none; overflow: visible; background: none; border: 0; }
  .dir-table, .dir-table tbody { display: block; width: auto !important; min-width: 0; }
  .dir-table colgroup, .dir-table thead { display: none; }
  .dir-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 14px 16px; margin-bottom: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 0; }
  .dir-table td { display: block; padding: 0; border: 0; white-space: normal; text-align: left !important; }
  .dir-table td::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
  .dir-table .dir-empty { display: block; }
  :root { --gutter: 18px; }
  .top-inner { flex-wrap: wrap; gap: 10px 16px; padding-block: 12px 0; }
  .brand img { height: 30px; }
  .user .who-text { display: none; }
  .hero-inner { padding-block: 22px 24px; gap: 18px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 12px 14px; }
  .kpi:nth-child(odd) { padding-left: 0; border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .sb-rail { display: none; }
  .sb-headline b { font-size: 26px; }
  .reg { display: none; }
  .need { grid-template-columns: minmax(0, 1fr); }
  .need .btn { width: 100%; }
  .line-body { padding: 16px; }
  .line-foot .amt { font-size: 26px; }
  .search { flex-direction: column; }
  .landing { padding-top: calc(28px + env(safe-area-inset-top, 0px)); }
  .landing-copy { gap: 14px; }
  .landing-copy img { width: 140px; margin-bottom: 4px; }
  .landing-copy p:not(.contact), .points { display: none; }
  .signin { padding: 22px; }
  .lb-nav { display: none; }
  .searchbox { max-width: none; flex-basis: 100%; }
    .order-rows { --cols: minmax(0, 1fr) auto 18px; }
  .order-rows-head { display: none; }
  .or-toggle { gap: 12px 14px; padding: 14px 16px; }
  .or-name { white-space: normal; }
  .or-status { grid-column: 1 / -1; grid-row: 2; }
  .or-detail { padding: 14px 16px 16px; }
  .od-line { grid-template-columns: 96px minmax(0, 1fr); }
  .od-proof { width: 96px; }
  .od-amt { grid-column: 2; text-align: left; flex-direction: row; gap: 10px; }
  .crumbs-row .hero-actions { width: 100%; }
  .mobile-cta { display: block; position: sticky; bottom: 0; z-index: 10; padding: 14px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--ink) 40%); }
  .mobile-cta .btn { width: 100%; min-height: 52px; font-size: 16px; }
}
@media (max-width: 560px) {
  .line-card { grid-template-columns: minmax(0, 1fr); }
  .proof-btn, .proof-none { aspect-ratio: auto; height: min(118vw, 460px); }
}
@media (min-width: 761px) { .sb-mini.only-narrow { display: none; } }

/* Tags (dashboards and elsewhere). */
.tag { display: inline-flex; align-items: center; border-radius: 0; padding: 3px 10px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line-2); color: var(--muted); }
.tag.good { color: var(--good); background: var(--good-wash); border-color: var(--good-line); }
.tag.bad { color: var(--bad); background: var(--bad-wash); border-color: transparent; }

/* Customers (#deals/customers) and a customer's page (customerDash in
   app.js): filters beside a row of tiles, as the mockups lay them out. */
.cu-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.cu-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Customers: the search with its filters under it, snug left of the tiles. */
.cu-head { align-items: stretch; margin-bottom: 4px; }
.cu-left { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; flex: 1 1 320px; min-width: 0; }
.cu-head .cu-kpis { flex: 0 1 760px; }
.cu-page > .cu-filters { padding-bottom: 2px; }
.cu-filter { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; list-style: none; cursor: pointer; }
.cu-filter::-webkit-details-marker { display: none; }
.cu-filter:hover { border-color: var(--line-3); }
.cu-filter.on, .cu-filter[aria-expanded="true"] { border-color: var(--text); color: var(--text); }
.cu-kpis { display: flex; flex-direction: column; gap: 12px; flex: 1 1 560px; max-width: 760px; }
/* Orders, Total, AOV; under them Leadership's Margin % and Profit $. */
.cu-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cu-date { min-width: 0; width: 150px; }
.cu-kpi { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 14px 8px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 0; min-width: 0; text-align: center; }
.cu-kpi span { font-size: 13px; color: var(--text-2); }
.cu-kpi b { font-family: var(--f-display); font-weight: 800; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cu-kpi em { min-height: 18px; font-style: normal; font-size: 12.5px; font-weight: 600; }
.cu-kpi em.up { color: var(--good); }
.cu-kpi em.down { color: var(--bad); }
.cu-files { position: relative; }
.cu-files-menu { position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column; min-width: 190px; padding: 6px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 0; box-shadow: 0 12px 32px -14px var(--shadow); }
.cu-files-menu a { padding: 8px 10px; border-radius: 0; color: var(--text); text-decoration: none; font-size: 14px; }
.cu-files-menu a:hover { background: var(--tint); }
/* A customer's page: filters | date · actions, on one strip. */
.cx-bar { gap: 8px; padding: 8px; background: var(--panel); border: 1px solid var(--line); }
.cx-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cx-push { margin-left: auto; }
.cx-pick { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.cx-pick:hover { border-color: var(--line-3); }
.cx-pick .k { color: var(--faint); font-weight: 500; }
.cx-pick .v { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.cx-pick svg { flex: none; color: var(--faint); }
.cx-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
.cx-pick:has(select:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.cx-pick.on { background: var(--marigold-wash); border-color: var(--marigold); color: var(--text); }
.cx-pick.on .v { font-weight: 700; }
.cx-x { position: relative; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; margin-right: -4px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.cx-x:hover { color: var(--text); }
.cx-seg { display: inline-flex; height: 36px; padding: 3px; gap: 3px; background: var(--raise); border: 1px solid var(--line-2); }
.cx-seg button { min-width: 54px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cx-seg button:hover { color: var(--text); }
.cx-seg button.on { background: var(--panel); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.cx-seg button.on.warn { background: var(--marigold); color: var(--marigold-ink); box-shadow: none; }
.cx-clear { border: 0; background: none; padding: 0 4px; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline 2px var(--marigold); text-underline-offset: 3px; cursor: pointer; }
.cx-clear:hover { color: var(--text); }
.cx-count { margin-left: 4px; color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.cx-div { width: 1px; height: 24px; margin: 0 2px; background: var(--line-2); }
.cx-ghost { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; list-style: none; cursor: pointer; }
.cx-ghost::-webkit-details-marker { display: none; }
.cx-ghost:hover, .cu-files[open] > .cx-ghost { color: var(--text); background: var(--tint); border-color: var(--line); }
.cx-ghost svg { flex: none; }
.cx-bar .cu-files-menu { left: auto; right: 0; }
@media (max-width: 760px) {
  .cx-bar > .cx-group:first-child { width: 100%; }
  .cx-bar > .cx-group:first-child .cx-pick { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .cx-bar > .cx-group:first-child .cx-pick .v { flex: 1; }
  .cx-bar .cx-seg { flex: 1 1 auto; }
  .cx-bar .cx-seg button { flex: 1; }
  .cx-push { width: 100%; margin-left: 0; flex-wrap: nowrap; }
  .cx-push .cx-div, .cx-push .cx-label { display: none; }
}

.cu-page { padding-block: 20px 8px; display: flex; flex-direction: column; gap: 12px; }
.cu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
/* A customer's name, the size of the Customers page heading (.sh-head h1). */
.cu-head > h1.display { font-size: clamp(40px, 4.2vw, 58px); font-weight: 800; line-height: 1; overflow-wrap: anywhere; }
.cu-title { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; flex: 1 1 360px; align-self: stretch; }
.cu-title h1 { font-size: clamp(38px, 4.4vw, 60px); overflow-wrap: anywhere; }
/* Both card rows share three columns so their edges line up: contacts and
   the address card (two columns) over category mix, top products and balance. */
.cu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.cu-grid .cu-address { grid-column: span 2; }
/* A customer page spans the window: name, then the five tiles in one strip,
   the filters, then Contacts | Addresses | stats. */
.wrap.cu-page { max-width: none; }
/* A customer's page: the name beside slim tiles (label left, number right). */
.cu-page > .cu-head { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 20px; margin-bottom: 0; }
.cu-page > .cu-head > h1.display { flex: 0 1 auto; max-width: 40%; font-size: clamp(30px, 2.8vw, 42px); }
.cu-page > .cu-head .cu-kpis { flex: 1 1 0; min-width: 0; max-width: none; }
.cu-page .cu-kpi-strip { gap: 8px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.cu-page .cu-kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 8px 12px; text-align: left; }
.cu-page .cu-kpi span { grid-column: 1; font-size: 12.5px; white-space: nowrap; }
.cu-page .cu-kpi b { grid-column: 2; grid-row: 1 / span 2; font-size: clamp(20px, 1.8vw, 26px); }
.cu-page .cu-kpi em { grid-column: 1; min-height: 0; font-size: 11.5px; }
.cu-page .cu-kpi em:empty { display: none; }
.cu-dir-head { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px; margin-bottom: 4px; }
.cu-dir-head .cu-kpis { flex: none; max-width: none; }
.cu-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cu-toolbar > .sh-search { flex: 1 1 320px; min-width: 0; min-height: 40px; padding-block: 0; }
.cu-toolbar > .sh-search input { padding-block: 8px; }
.cu-kpi-strip { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cu-page .cu-grid { grid-template-columns: minmax(280px, 1fr) minmax(0, 2.1fr) minmax(260px, 1fr); }
.cu-page .cu-grid .cu-address { grid-column: auto; }
.cu-page .cu-grid .cu-stats { grid-template-columns: 1fr; align-content: start; }
.cu-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; border-radius: 0; }
.cu-card h3 { font-family: var(--f-display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
/* A contact: who they are, then Edit and New Deal underneath. */
/* Every contact; the list fills the card's height (set by its row) and scrolls. */
/* The glance row: Contacts | Addresses & tax | Balance. */
.cu-glance { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.6fr) minmax(200px, .7fr); }
.cu-glance.no-balance { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.3fr); }
.cu-gl { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 16px; }
.cu-gl + .cu-gl { border-left: 1px solid var(--line); }
.cu-gl h3, .cu-gl h4 { margin: 0; font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); line-height: 1.4; }
.cu-gl h3 + h3, .cu-gl p + h3, .cu-gl ul + h3 { margin-top: 4px; }
.cu-gl .note { margin: 0; font-size: 13px; }
.cu-gl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cu-gl-link { border: 0; background: none; padding: 0; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline 2px var(--marigold); text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.cu-gl-link:hover { color: var(--text); }
.cu-contact-list { flex: 1 1 auto; height: 0; min-height: 76px; overflow-y: auto; display: flex; flex-direction: column; margin-right: -8px; padding-right: 8px; scrollbar-width: thin; }
.cu-gl-contacts .cu-contact { flex-direction: row; align-items: center; gap: 8px; padding: 5px 0; }
.cu-gl-contacts .cu-contact + .cu-contact { padding-top: 5px; }
.cu-gl-contacts .cu-contact-who { flex: 1; font-size: 13.5px; gap: 0; line-height: 1.3; }
.cu-gl-contacts .cu-contact-who b { font-size: 13.5px; font-weight: 700; }
.cu-gl-contacts .cu-contact-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.cu-gl-contacts .cu-contact-who small a { color: inherit; }
.cu-gl-contacts .cu-contact-acts { flex-wrap: nowrap; gap: 4px; opacity: .6; }
.cu-gl-contacts .cu-contact:hover .cu-contact-acts, .cu-gl-contacts .cu-contact-acts:focus-within { opacity: 1; }
.cu-gl-contacts .cu-contact-form { padding: 6px 0 10px; }
.cu-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); color: var(--muted); cursor: pointer; flex: none; }
.cu-ico:hover { color: var(--text); border-color: var(--line-3); }
.cu-ico:disabled { opacity: .4; cursor: default; }
.cu-addr-view { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13.5px; line-height: 1.35; }
.cu-addr-view dt { color: var(--faint); font-size: 12.5px; font-weight: 600; padding-top: 1px; }
.cu-addr-view dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.cu-tax-view { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cu-tax-view .tag { padding: 1px 8px; font-size: 12px; cursor: help; }
.cu-gl-address .cu-addr-cols h4 { margin-bottom: 6px; }
.cu-gl-address form { display: flex; flex-direction: column; gap: 10px; }
.cu-gl-address .cu-addr-foot { padding-top: 8px; }
.cu-gl-balance .row-actions { margin-top: auto; }
.cu-gl .cu-tax-head h3 { margin-right: 0; font-size: 10.5px; }
.cu-bal { font-family: var(--f-display); font-weight: 800; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.cu-gl-balance .row-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 6px; }
.cu-contact { display: flex; flex-direction: column; gap: 10px; }
.cu-contact + .cu-contact { padding-top: 14px; border-top: 1px solid var(--line); }
.cu-contact-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.cu-contact-who b { font-size: 16px; line-height: 1.3; }
.cu-contact-who a, .cu-contact-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.cu-contact-who a { text-decoration: none; }
.cu-contact-who a:hover { color: var(--text); text-decoration: underline; }
.cu-contact-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.cu-contacts-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cu-pager { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cu-pager button { font-size: 18px; line-height: 1; padding: 0 4px; }
.cu-pager button:disabled { opacity: .35; cursor: default; }
.cu-contact-form { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cu-contact-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cu-addr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cu-addr-cols h3 { margin-bottom: 12px; }
.cu-addr-fields { display: grid; gap: 8px; }
/* The page's own inputs, styled like the order editor's. */
.cu-page .o-in { font: inherit; font-size: 14px; min-height: 36px; padding: 6px 10px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); width: 100%; min-width: 0; }
.cu-page .o-in:hover { border-color: var(--line-3); }
.cu-page .o-in:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.cu-page .o-in::placeholder { color: var(--faint); }
.cu-addr-fields .o-in:disabled { opacity: .55; cursor: not-allowed; }
.cu-addr-city { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.cu-addr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.cu-addr-foot .note { margin: 0; color: var(--muted); font-size: 13px; }
.cu-same { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.cu-same-ship { margin-top: 10px; font-size: 13.5px; color: var(--text-2); }
/* Sales tax, under the addresses in the same card. */
.cu-tax { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cu-tax-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cu-tax-head h3 { margin-right: 4px; font-size: 17px; }
.cu-tax-head .tag { cursor: help; }
.cu-tax-exempt { margin-left: auto; font-weight: 600; }
.cu-tax-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.3fr); gap: 10px 14px; align-items: start; }
.cu-tax-fields[hidden] { display: none; }
.cu-field { display: grid; gap: 4px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.cu-cert { display: flex; align-items: center; gap: 8px; min-height: 36px; min-width: 0; font-size: 14px; font-weight: 500; color: var(--text); }
.cu-cert-file { display: inline-flex; align-items: center; gap: 2px; min-width: 0; height: 36px; padding: 0 4px 0 10px; border: 1px solid var(--line-2); border-radius: 0; background: var(--ink-2); }
.cu-cert-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.cu-cert-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.cu-cert-x:hover { background: var(--tint); color: var(--text); }
.cu-cert .btn { flex: none; white-space: nowrap; }
.cu-cert .btn.disabled { opacity: .5; pointer-events: none; }
/* Category mix, top products and the balance: one row under the cards. */
.cu-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cu-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }
.cu-list li { display: flex; align-items: baseline; gap: 8px; overflow-wrap: anywhere; }
.cu-list li b { flex: none; min-width: 42px; font-variant-numeric: tabular-nums; color: var(--accent); }
.cu-list li > span { min-width: 0; }
.cu-list-sub { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; }
.cu-list .note, .cu-balance .note { margin: 0; color: var(--muted); font-size: 13.5px; }
.cu-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cu-balance-row b { font-family: var(--f-display); font-weight: 800; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
/* The tables' header, marigold as in the mockups. */
.cu-table thead th { background: var(--marigold); }
.cu-table .th-sort, .cu-table .th-sort:hover, .cu-table th[aria-sort] .th-sort { color: var(--marigold-ink); font-size: 13.5px; font-weight: 800; letter-spacing: .01em; text-transform: none; }
.cu-table .col-filter { color: var(--marigold-ink); }
.cu-orders { width: 100%; min-width: 940px; table-layout: auto; }
.cu-orders th, .cu-orders td { padding-inline: 6px; }
.cu-orders tbody tr { cursor: pointer; }
.cu-orders thead th { padding: 0; color: var(--marigold-ink); font-size: 13.5px; font-weight: 800; letter-spacing: .01em; text-transform: none; }
/* Each header sorts; its filter button sits in the space kept on the right. */
.cu-orders .th-inner { padding: 0 24px 0 2px; }
.cu-orders .th-sort { padding: 14px 4px; white-space: normal; line-height: 1.15; text-align: left; }
.cu-orders .col-filter { right: 2px; }
.cu-orders th.center .th-sort { text-align: center; }
.cu-table .col-filter.on { background: var(--marigold-ink); color: var(--marigold); }
/* Long job and contact names wrap rather than widen the table. */
.cu-orders td.left { white-space: normal; min-width: 96px; max-width: 200px; }
.cu-orders td, .cu-orders th { text-align: center; }
.cu-orders .left { text-align: left; }
.cu-empty { padding: 18px 0; }
.cu-active { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
/* Messages: every portal email with this customer, at the page's foot. */
.cu-page .ml-customer { margin: 0; }
.cu-page .ml-cust { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cu-page .ml-cust a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.cu-page .ml-cust li:first-child a { border-top: 0; padding-top: 0; }
.cu-page .ml-cust a:hover .ml-cust-subject b { color: var(--accent); }
.ml-cust-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ml-cust-subject { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ml-cust-subject b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-cust-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; font-size: 13.5px; color: var(--text-2); }
.cu-page .ml-cust small { display: block; margin: 0; color: var(--muted); font-size: 13px; }
.inv-stage.open { background: #12873e; }
.inv-stage.lost { background: #111; }
@media (max-width: 1180px) { .cu-tax-fields { grid-template-columns: 1fr 1fr; } .cu-tax-fields > :last-child { grid-column: 1 / -1; } }
@media (min-width: 721px) and (max-width: 1180px) {
  .cu-glance, .cu-glance.no-balance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cu-gl-balance { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--line); flex-direction: row; align-items: center; justify-content: space-between; }
  .cu-gl-balance .row-actions { margin-top: 0; padding-top: 0; }
  .cu-page > .cu-head { flex-wrap: wrap; }
  .cu-page > .cu-head .cu-kpis { flex-basis: 100%; }
}
@media (max-width: 1320px) {
  .cu-page .cu-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .cu-page .cu-grid .cu-stats { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cu-grid, .cu-stats, .cu-addr-cols, .cu-tax-fields, .cu-page .cu-grid, .cu-page .cu-grid .cu-stats { grid-template-columns: 1fr; }
  .cu-grid .cu-address { grid-column: auto; }
  .cu-tax-exempt { margin-left: 0; flex-basis: 100%; }
  .cu-contact-list { height: auto; min-height: 0; max-height: 220px; }
  .cu-glance, .cu-glance.no-balance { grid-template-columns: 1fr; }
  .cu-gl + .cu-gl { border-left: 0; border-top: 1px solid var(--line); }
  .cu-page > .cu-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .cu-page > .cu-head > h1.display { max-width: none; }
  .cu-page .cu-kpi-strip { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-cust-side { display: none; }
  .cu-kpis { flex-basis: 100%; }
  .cu-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cu-kpi b { font-size: clamp(22px, 6vw, 30px); }
}

/* Team page (teamPage in app.js) */
.team { gap: 16px; }
.team .section-head .linkish { padding: 0; font-size: 13px; }
.team-notice { color: var(--good); }
.team-add { display: flex; flex-direction: column; gap: 14px; }
.team-add-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.field-label { font-size: 13px; font-weight: 600; }
.team-list { display: flex; flex-direction: column; gap: 10px; }
.team-row { padding: 14px 18px; }
.team-actions { display: inline-flex; gap: 6px; }
/* Department bubbles: each opens what everyone in that department gets. */
.team-depts { display: flex; flex-wrap: wrap; gap: 8px; }
.team-dept-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 13px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.team-dept-chip small { font-size: 12px; font-weight: 500; color: var(--faint); }
.team-dept-chip:hover { border-color: var(--line-3); }
.team-dept-chip.on { background: var(--text); border-color: var(--text); color: var(--panel); }
.team-dept-chip.on small { color: inherit; opacity: .75; }
.team-dept { margin-top: 0; border-top: 0; }
.team-dept h3 { margin: 4px 0 2px; font-size: 18px; }
.team-what .linkish { padding: 0; font-size: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
/* Staff without See dollar amounts (portal/app.js hideMoney): price fields stay empty. */
body.no-money input[data-o-kind="money"], body.no-money input[data-o-path$=".price"], body.no-money input[data-o-path$="unitPrice"] { visibility: hidden; }
.te-group { margin: 18px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.te-locked { display: inline-block; padding: 6px 10px; border: 1px dashed var(--line-3); border-radius: 0; font-size: 13px; color: var(--muted); }
.view-as { position: sticky; top: var(--top-h, 65px); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; background: var(--marigold-wash); border-bottom: 1px solid var(--marigold); font-size: 13.5px; color: var(--text); }
.team-main { display: grid; grid-template-columns: 34px minmax(0, 1.2fr) minmax(0, 1.5fr) auto auto; gap: 14px; align-items: center; }
.team-who, .team-what { display: flex; flex-direction: column; min-width: 0; }
.team-who b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-who span, .team-what small { font-size: 13px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.team-what span { font-size: 14px; color: var(--text-2); }
.team-edit { display: flex; flex-direction: column; margin-top: 14px; border-top: 1px solid var(--line); }
.te-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.te-label { display: flex; flex-direction: column; gap: 3px; }
.te-label b { font-size: 14px; font-weight: 700; }
.te-label span { font-size: 13px; color: var(--faint); line-height: 1.4; }
.te-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.te-body input[type="text"] { max-width: 420px; min-height: 42px; padding: 9px 12px; font-size: 15px; border-radius: 0; }
.te-body input[type="text"]:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px var(--line); }
.te-sub { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.te-dash { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 0; background: var(--tint); }
.te-dash[hidden] { display: none; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-opt, .seg label { position: relative; cursor: pointer; }
.pill-opt input, .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pill-opt span { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 13px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); font-size: 13.5px; font-weight: 500; color: var(--text-2); transition: background .15s, border-color .15s, color .15s; user-select: none; }
.pill-opt span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-3); box-sizing: border-box; flex: none; }
.pill-opt:hover span { border-color: var(--line-3); }
.pill-opt input:checked + span { background: var(--text); border-color: var(--text); color: var(--panel); }
.pill-opt input:checked + span::before { border: 0; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23777' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pill-opt input:focus-visible + span, .seg input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 0; background: var(--raise); align-self: flex-start; max-width: 100%; }
.seg span { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 14px; border-radius: 0; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: background .15s, color .15s; user-select: none; }
.seg label:hover span { color: var(--text); }
.seg input:checked + span { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px var(--line-2), 0 0 0 1px var(--line); }
.te-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 520px; cursor: pointer; }
.te-switch span { display: flex; flex-direction: column; }
.te-switch b { font-size: 14px; font-weight: 600; }
.te-switch small { font-size: 13px; color: var(--faint); }
.te-switch input { appearance: none; -webkit-appearance: none; flex: none; width: 40px; height: 24px; margin: 0; border-radius: 999px; background: var(--track); position: relative; cursor: pointer; transition: background .15s; }
.te-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s var(--ease); }
.te-switch input:checked { background: var(--text); }
.te-switch input:checked::after { transform: translateX(16px); }
.te-switch input[name="disabled"]:checked { background: var(--bad); }
.te-switch input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.te-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 16px; flex-wrap: wrap; }
.te-actions > span { display: flex; gap: 8px; }
.btn.dark { background: var(--text); border-color: var(--text); color: var(--panel); }
.btn.dark:hover { opacity: .88; }
.btn.danger { color: var(--bad); border-color: transparent; }
.btn.danger:hover { background: var(--bad-wash); }
@media (max-width: 760px) {
  .team-add-row { grid-template-columns: minmax(0, 1fr); }
  .te-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 0; }
  .team-main { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .team-what { grid-column: 2 / -1; grid-row: 2; }
  .team-main .chip { display: none; }
}

/* ---- Staff quotes and invoices (portal/orders.js) ---- */
/* Dense editing controls: smaller than the portal's 48px reading inputs. */
.oe input.o-in, .oe select.o-in, .oe textarea.o-in, .o-status { font: inherit; font-size: 14px; min-height: 36px; padding: 6px 10px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); width: 100%; min-width: 0; }
/* Any field with choices (select or suggestion list) shows a chevron. */
.oe select.o-in, .oe input.o-in[list] { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238b919c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 12px; }
.oe input.o-in[list]::-webkit-calendar-picker-indicator { opacity: 0; }
.oe textarea.o-in { resize: vertical; line-height: 1.45; padding: 10px 12px; }
.oe .o-in:hover { border-color: var(--line-3); }
.oe .o-in:focus, .o-status:focus { outline: none; border-color: var(--marigold); box-shadow: 0 0 0 2px var(--marigold-wash), 0 0 10px 1px rgba(245, 178, 27, .55); position: relative; z-index: 1; }
.oe .o-in.c { text-align: center; padding-inline: 4px; font-family: var(--f-mono); }
.oe .o-in.r { text-align: right; font-family: var(--f-mono); }
.oe .o-in::placeholder, .oe-name::placeholder { color: var(--dim); }
.o-status { width: auto; font-weight: 700; font-size: 12.5px; min-height: 32px; padding: 4px 12px; border-radius: 0; cursor: pointer; }
.o-status.tone-done { color: var(--good); background: var(--good-wash); border-color: var(--good-line); }
.o-status.tone-production { color: var(--marigold-ink); background: var(--marigold); border-color: var(--marigold); }
.o-status.tone-payment { color: var(--bad); background: var(--bad-wash); }
.o-status.tone-art { color: var(--accent); background: var(--marigold-wash); }
.o-status option { color: var(--text); background: var(--panel); }
.oe-title { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.oe-save { font-size: 12.5px; color: var(--faint); align-self: center; white-space: nowrap; }
.oe-save[data-tone="busy"] { color: var(--accent); }
.oe-save[data-tone="bad"] { color: var(--bad); font-weight: 600; }
.oe-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-color: var(--bad); background: var(--bad-wash); }
.oe-static { font-size: 13.5px; color: var(--muted); padding-top: 8px; }
.oe-group { overflow: visible; }
.oe-group-sum { font-size: 13.5px; color: var(--muted); margin-right: auto; }
.oe-group-sum b { color: var(--text); font-family: var(--f-mono); }
.oe-section { padding: 16px 22px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.oe-x { width: 30px; height: 30px; flex: none; border-radius: 0; border: 1px solid transparent; background: none; color: var(--faint); font-size: 17px; line-height: 1; display: inline-grid; place-items: center; }
.oe-x:hover { color: var(--text); border-color: var(--line-2); background: var(--raise); }
/* Proofs belong to a line item: the first shows large, the rest small. */
.oe-line-proofs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; border-radius: 0; outline: 2px dashed transparent; outline-offset: 4px; transition: background .15s, outline-color .15s; }
.oe-line-proofs.over { outline-color: var(--accent); background: var(--marigold-wash); }
.oe-proof { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; }
.oe-proof.first, .oe-line-proofs.empty .oe-drop { grid-column: 1 / -1; }
.oe-proof-view { position: relative; display: grid; place-items: center; aspect-ratio: 1400 / 1812; border-radius: 0; background: #f4f3f0; border: 1px solid var(--line); overflow: hidden; text-decoration: none; }
.oe-proof-view img { width: 100%; height: 100%; object-fit: contain; }
button.oe-proof-view { width: 100%; padding: 0; cursor: zoom-in; }
a.oe-proof-view:hover { border-color: var(--accent); }
.oe-ext { font-family: var(--f-display); font-weight: 900; font-size: 26px; color: #6f6d66; letter-spacing: .04em; }
.oe-proof:not(.first) .oe-ext { font-size: 16px; }
.oe-proof figcaption { display: flex; align-items: center; gap: 2px; font-size: 11.5px; color: var(--muted); min-width: 0; }
.oe-proof:not(.first) figcaption span { display: none; }
.oe-proof:not(.first) figcaption { justify-content: center; }
.oe-proof figcaption span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-proof.uploading .oe-proof-view { opacity: .7; }
.oe-bar { position: absolute; left: 8px; right: 8px; top: calc(50% - 3px); height: 6px; border-radius: 0; background: var(--track); overflow: hidden; }
.oe-bar i { display: block; height: 100%; background: var(--marigold); transition: width .2s; }
.oe-drop { aspect-ratio: 1400 / 1812; border: 1.5px dashed var(--line-3); border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 10px; cursor: pointer; color: var(--muted); font-size: 11.5px; transition: border-color .15s, color .15s, background .15s; }
.oe-drop b { font-size: 14px; color: var(--text); }
.oe-line-proofs:not(.empty) .oe-drop b { font-size: 22px; font-weight: 500; color: var(--muted); }
.oe-drop:hover, .oe-drop:focus-within { border-color: var(--accent); color: var(--text); background: var(--marigold-wash); }
/* Product photos (S&S) under an imprint's proofs, and their dialog. */
.oe-photos-open { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; border-radius: 0; }
.oe-photos-hint { margin: 6px 0 0; font-size: 11px; color: var(--muted); text-align: center; }
.o-modal.oe-photos { width: min(960px, calc(100vw - 32px)); gap: 0; padding: 0; }
.oe-photos .o-modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.oe-photos-garment { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.oe-photos-garment:last-child { border-bottom: 0; }
.oe-photos-garment header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.oe-photos-garment header small { color: var(--muted); }
.oe-photos-garment header .btn { margin-left: auto; border-radius: 0; }
.oe-photos-garment > p { margin: 0; font-size: 12px; }
.oe-photos-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.oe-photos-tiles figure { margin: 0; border: 1px solid var(--line-2); background: #fff; }
.oe-photos-tiles a { display: block; }
.oe-photos-tiles img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.oe-photos-tiles figcaption { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 7px; border-top: 1px solid var(--line-2); background: var(--panel); font-size: 11px; color: var(--muted); }
.oe-photos-tiles figcaption .linkish { font-size: 11px; font-weight: 600; color: var(--text); text-decoration: none; box-shadow: inset 0 -2px 0 var(--marigold); }
/* The editor runs a little wider than reading pages. */
.wrap.oe-wide { max-width: 1480px; }
/* Line items: proofs on the left, details, sizes and price on the right. */
.oe-lines { display: flex; flex-direction: column; }
.oe-line { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.oe-line:hover { background: var(--tint); }
.oe-line-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.oe-line-top { display: flex; gap: 10px; align-items: flex-end; min-width: 0; }
.oe-line-n { flex: none; width: 24px; height: 24px; margin-bottom: 6px; border-radius: 50%; background: var(--raise); color: var(--muted); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.oe-lf { display: flex; flex-direction: column; gap: 4px; min-width: 0; width: 120px; }
.oe-lf.grow { flex: 1; width: auto; }
.oe-lf.price { width: 120px; }
/* One label style for every field in the editor. */
.oe-lf > span, .oe-size > span, .oe .field-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.oe-line-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.oe-size { display: flex; flex-direction: column; gap: 4px; width: 58px; text-align: center; }
.oe-size.total { justify-content: flex-start; }
.oe-size.total b { min-height: 36px; display: grid; place-items: center; border-radius: 0; background: var(--raise); font-size: 14px; }
.oe-line-money { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.oe-line-money .o-check-label { margin-bottom: 9px; }
.oe-line-total { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.oe-line-total span { font-size: 12px; }
.oe-line-total b { font-size: 19px; }
.oe-head > span { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 6px 2px 2px; }
.oe-row-acts { display: flex; gap: 2px; justify-content: flex-end; margin-left: auto; margin-bottom: 3px; }
.oe-hint { font-weight: 500; letter-spacing: 0; text-transform: none; }
.oe-delete { align-self: flex-start; color: var(--bad); border-color: rgba(179, 38, 30, .3); }
.oe-delete:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-wash); }
.oe-subnote.exempt span:first-child { color: var(--good) !important; font-weight: 600; }
.o-check { display: inline-grid; place-items: center; width: 30px; height: 30px; cursor: pointer; }
.o-check input, .o-check-label input { width: 17px; height: 17px; accent-color: var(--marigold); cursor: pointer; }
.oe-group-foot { padding: 10px 22px 18px; }
.oe-add-group { align-self: flex-start; border-style: dashed; }
.oe-fees, .oe-notes { display: flex; flex-direction: column; gap: 12px; }
.oe-fee { display: grid; grid-template-columns: minmax(160px, 1fr) 64px 100px 40px 100px 32px; gap: 8px; align-items: center; }
.oe-fee.oe-head > span { padding: 0 2px; }
.oe-fee .c { text-align: center; }
.oe-fee .r { text-align: right; }
.oe-money .row { align-items: center; }
.oe-money .row > span:first-child { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.oe .oe-money input.o-in, .oe .oe-money select.o-in { width: 72px; min-height: 30px; padding: 3px 8px; font-size: 13px; }
.oe .oe-money select.o-in { width: 52px; padding-inline: 6px 20px; background-position: right 5px center; }
.oe-subnote { font-size: 12px; margin-top: -6px; }
.oe-subnote span:first-child { color: var(--faint) !important; }
.o-check-label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.oe-pay-note { border-top: 1px solid var(--line); padding-top: 12px; }
@media (min-width: 981px) { .oe .col-side { position: sticky; top: 86px; } }
/* Customer picker */
.o-modal-back { position: fixed; inset: 0; z-index: 40; background: rgba(10, 9, 7, .5); backdrop-filter: blur(2px); }
.o-modal { position: fixed; z-index: 41; top: 8vh; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); max-height: 84vh; overflow: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 80px -30px var(--shadow); }
.o-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.o-modal-head h2 { font-family: var(--f-display); font-weight: 800; font-size: 28px; text-transform: uppercase; line-height: 1; }
.o-modal .round { width: 36px; height: 36px; border-radius: 0; border: 1px solid var(--line-2); background: none; font-size: 22px; line-height: 1; }
.o-pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow: auto; }
.o-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 0; border: 1px solid transparent; background: none; }
.o-pick:hover, .o-pick:focus-visible { background: var(--raise); border-color: var(--line-2); }
.o-pick span { font-size: 12.5px; color: var(--faint); }
.o-new-customer { display: flex; flex-direction: column; gap: 12px; }
.o-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.o-modal-wide { width: min(720px, calc(100vw - 32px)); }
.o-nc-sec { border: 0; border-top: 1px solid var(--line); margin: 4px 0 0; padding: 12px 0 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.o-nc-sec legend { font-size: 13px; font-weight: 700; padding: 0 8px 0 0; }
.o-nc-sec > .btn { align-self: flex-start; }
.o-nc-contact { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 0; }
.o-nc-contact-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.o-nc-contact-head b { margin-right: auto; font-size: 13.5px; }
.o-nc-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; }
.o-nc-address { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.o-nc-address input { width: 100%; }
.o-nc-address1, .o-nc-address2, .o-nc-country, .o-nc-paste { grid-column: span 6; }
.o-nc-paste textarea, .oe-addr-paste textarea, .cu-addr-paste { width: 100%; resize: vertical; min-height: 0; font: inherit; }
.o-nc-city { grid-column: span 4; }
.o-nc-state, .o-nc-zip { grid-column: span 1; }
@media (max-width: 760px) { .o-nc-city { grid-column: span 6; } .o-nc-state, .o-nc-zip { grid-column: span 3; } }
.o-matches { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 12px; border-radius: 0; background: var(--marigold-wash); }
.o-list td small { font-size: 12px; }
@media (max-width: 760px) {
  .oe-fee { grid-template-columns: minmax(0, 1fr) 54px 84px 32px; }
  .oe-fee > :nth-child(4), .oe-fee > :nth-child(5) { display: none; }
  .oe-fee.oe-head { display: none; }
  .oe-line { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 14px 14px; }
  .oe-line-top { flex-wrap: wrap; }
  .oe-lf { width: calc(50% - 22px); }
  .oe-lf.grow { flex-basis: 100%; }
  .oe-line-n { display: none; }
  .oe-size { width: 52px; }
  .o-two { grid-template-columns: 1fr; }
  .oe-banner { flex-direction: column; align-items: flex-start; }
}
.oe-fee-price { position: relative; display: block; }
.oe-fee-price em { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13px; color: var(--muted); pointer-events: none; }
.oe .oe-fee-price input.o-in:has(+ em) { padding-right: 24px; }
.oe select.oe-add-fee { width: auto; max-width: 100%; font-weight: 600; border-style: dashed; cursor: pointer; }
.o-toast-host { position: fixed; z-index: 45; left: 50%; bottom: 24px; transform: translateX(-50%); }
.o-toast { display: flex; align-items: center; gap: 16px; padding: 10px 14px 10px 18px; border-radius: 0; background: var(--text); color: var(--ink); font-size: 14px; box-shadow: 0 16px 40px -16px var(--shadow); }
.o-toast .linkish { color: var(--marigold); font-size: 14px; }
.o-toast .linkish:hover { color: var(--marigold-hi); }

/* ---- Quote editor: cards, sizes, imprints ----
   Every card shares one header style (customer, groups), sections inside a
   card share one sub-heading, and fields carry labels, never example text. */
.oe-name-wrap { display: block; }
input.oe-name { font-family: var(--f-body); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.015em; line-height: 1.15; min-height: 0; padding: 4px 10px; margin-left: -11px; border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--text); width: 100%; }
input.oe-name:hover { border-color: var(--line-2); }
input.oe-name:focus { outline: none; border-color: var(--accent); background: var(--ink-2); }
.oe-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.oe-section-title h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.oe-section-title span { font-size: 13px; color: var(--faint); }
.oe-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--line); background: var(--tint); border-radius: 0; }
.oe-card-head h3 { font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
/* An imprint's category of work, big enough to read across the shop. */
.imprint-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.oe-card-head .tag { align-self: center; }
.oe-head-acts { margin-left: auto; display: flex; gap: 8px; }
.oe-cust-name { font-size: 15px; font-weight: 600; }
.oe-cust-name a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-3); }
.oe-cust-name a:hover { color: var(--accent); border-color: var(--accent); }
.oe-group-sum { font-size: 13px; color: var(--muted); }
.oe-group-sum b { color: var(--text); font-family: var(--f-mono); }
.btn.ghost { background: transparent; border-color: var(--line-2); color: var(--text-2); }
.btn.ghost:hover { border-color: var(--line-3); color: var(--text); background: var(--tint); }
.btn.ghost.danger { color: var(--bad); }
.btn.ghost.danger:hover { border-color: var(--bad); background: var(--bad-wash); }
.oe-section { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.oe-section > .btn { align-self: flex-start; }
.oe-sub-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.oe-sub-title { font-size: 11.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--text-2); }
.oe-sub-hint { font-size: 12.5px; color: var(--faint); }
.oe-grid { display: grid; gap: 14px 16px; }
.oe-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oe-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.oe-grid .field { gap: 6px; }
.oe-grid .field small { font-size: 12px; margin-top: 2px; }
.oe-customer-card .oe-section:last-child, .oe-group .oe-lines-head { border-bottom: 0; }
.oe-group .oe-lines-head { padding-bottom: 0; }
.oe-empty-sizes { margin: 0; font-size: 13px; color: var(--faint); padding: 8px 0; }
/* Imprints: location, category and colors on top, design notes below. */
.oe-imprint { border: 1px solid var(--line); border-radius: 0; padding: 14px 14px 14px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--ink-2); }
.oe-imprint-top { display: grid; grid-template-columns: 170px 250px minmax(0, 1fr) 30px; gap: 12px; align-items: start; }
.oe-imprint-top > .oe-x { margin-top: 20px; }
.oe-imprint .oe-lf { width: auto; }
.oe-lf > span em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); margin-left: 6px; font-size: 12px; }
.oe-colors { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.oe-color { position: relative; display: inline-flex; width: 150px; }
.oe .oe-color input.o-in { padding-right: 28px; }
.oe-color-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: 0; border-radius: 0; background: none; color: var(--faint); font-size: 15px; line-height: 1; display: grid; place-items: center; }
.oe-color-x:hover { color: var(--text); background: var(--raise); }
.oe-add-color { height: 36px; padding: 0 12px; border: 1px dashed var(--line-3); border-radius: 0; background: none; font-size: 13px; font-weight: 600; color: var(--muted); }
.oe-add-color:hover { border-color: var(--accent); color: var(--text); background: var(--marigold-wash); }
/* Category-of-work list dialog. */
.o-types-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 44vh; overflow: auto; border: 1px solid var(--line); border-radius: 0; }
.o-types-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 14px; font-size: 14px; border-bottom: 1px solid var(--line); }
.o-types-list li:last-child { border-bottom: 0; }
.o-types-add { display: flex; gap: 8px; }
.o-types-add .o-in { flex: 1; font: inherit; font-size: 14px; min-height: 36px; padding: 6px 10px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); }
.o-types .row-actions { display: flex; justify-content: flex-end; gap: 10px; }
.o-modal-head h2 { font-family: var(--f-body); font-weight: 700; font-size: 20px; text-transform: none; letter-spacing: -.01em; }
.oe-fees h3 { font-size: 15px; font-weight: 700; }
@media (max-width: 1100px) {
  .oe-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oe-imprint-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; }
  .oe-imprint-top > .grow { grid-column: 1 / 3; grid-row: 2; }
  .oe-imprint-top > .oe-x { grid-column: 3; grid-row: 1; }
}
@media (max-width: 760px) {
  .oe-card-head, .oe-section { padding-inline: 16px; }
  .oe-grid.three, .oe-grid.four { grid-template-columns: minmax(0, 1fr); }
  .oe-imprint-top { grid-template-columns: minmax(0, 1fr) 30px; }
  .oe-imprint-top > .oe-loc, .oe-imprint-top > .oe-type, .oe-imprint-top > .grow { grid-column: 1; grid-row: auto; }
  .oe-imprint-top > .oe-x { grid-column: 2; grid-row: 1; }
  .oe-color { width: calc(50% - 3px); }
  .oe-head-acts { margin-left: 0; width: 100%; }
}
.oe-head > span { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.oe-fees .oe-section { gap: 10px; }
.oe-notes-card .oe-section { border-bottom: 0; gap: 16px; }
.oe-lf.price { width: 130px; }
.oe-line-top .oe-lf:nth-of-type(2) { width: 160px; }
.oe-money .row.oe-tax { align-items: flex-start; }
.oe-money .row.oe-tax > span:last-child { padding-top: 5px; }
/* Where the tax is owed; red until another city's rate is typed. */
.oe-money .oe-tax-loc { width: auto; max-width: 200px; margin-right: 4px; }
.oe-money .oe-tax-loc.warn { border-color: var(--bad); }
.oe-tax-rate { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Sizes: a menu in the group header, a checkbox per size inside. */
.oe-sizes { position: relative; }
.oe-sizes summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; max-width: 360px; min-height: 34px; padding: 5px 30px 5px 12px; border: 1px solid var(--line-2); border-radius: 0; background: var(--ink-2); font-size: 13px; position: relative; }
.oe-sizes summary::-webkit-details-marker { display: none; }
.oe-sizes summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: translateY(-70%) rotate(45deg); }
.oe-sizes[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.oe-sizes summary:hover, .oe-sizes[open] summary { border-color: var(--line-3); }
.oe-sizes-label { font-weight: 600; color: var(--text-2); }
.oe-sizes-value { color: var(--text); font-family: var(--f-mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-sizes-value.none { font-family: var(--f-body); color: var(--accent); font-weight: 600; }
.oe-sizes-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 340px; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 0; box-shadow: 0 18px 40px -18px var(--shadow); }
.oe-size-row { border: 0; margin: 0; padding: 0; min-width: 0; }
.oe-size-row legend { padding: 0; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.oe-size-all { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border-radius: 0; padding: 2px 4px 2px 2px; }
.oe-size-all:hover { background: var(--tint); }
.oe-size-all input { width: 14px; height: 14px; margin: 0; accent-color: var(--marigold); cursor: pointer; }
.oe-size-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 10px; }
.oe-size-opt { display: flex; align-items: center; gap: 7px; font-size: 13.5px; padding: 4px 2px; border-radius: 0; cursor: pointer; font-variant-numeric: tabular-nums; }
.oe-size-opt:hover { background: var(--tint); }
.oe-size-opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--marigold); cursor: pointer; }
.oe-size-opt.locked { color: var(--muted); cursor: not-allowed; }
.oe-size-opt.locked input { cursor: not-allowed; }
@media (max-width: 760px) { .oe-sizes { width: 100%; } .oe-sizes summary { max-width: none; width: 100%; } .oe-sizes-menu { width: min(340px, calc(100vw - 40px)); } }

/* The quote page's one header: back, number, title, status, total, saved. */
.oe-top { position: sticky; top: var(--top-h, 65px); z-index: 15; background: var(--top-bg); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.oe-top-inner { display: flex; align-items: center; gap: 14px; padding-block: 12px; min-width: 0; }
.oe-back { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 6px 10px 6px 6px; border-radius: 0; }
.oe-back:hover { color: var(--text); background: var(--tint); }
.oe-num { flex: none; font-size: 13px; color: var(--faint); padding-left: 12px; border-left: 1px solid var(--line-2); }
.oe-name-wrap { flex: 1; min-width: 0; }
input.oe-name { font-size: 22px; margin-left: 0; padding: 4px 10px; }
.oe-top .o-status { flex: none; max-width: 230px; }
.oe-top-total { flex: none; white-space: nowrap; font-size: 14px; }
.oe-top-total b { font-size: 16px; }
.oe-top .oe-save { min-width: 56px; text-align: right; }
.oe-state { padding-block: 48px; }
.oe-state h1 { font-size: 24px; margin-bottom: 8px; }
/* Billing and shipping side by side, Printavo's fields in a grid. */
.oe-addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.oe-addresses > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.oe-address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.oe-address .oe-lf { width: auto; }
.oe-address .span2 { grid-column: 1 / -1; }
.oe-same { margin-left: auto; padding: 0; font-size: 12.5px; }
.oe-addr-toggle { margin-left: auto; padding: 0; font-size: 12.5px; }
.oe-same + .oe-addr-toggle { margin-left: 12px; }
.oe-addr-line { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.oe-locations { gap: 10px; }
.oe-notes-card .oe-lf, .oe-customer-card .oe-lf { width: auto; }
.oe-notes-card textarea.o-in { min-height: 84px; }
.oe-group .oe-lines { border-top: 1px solid var(--line); }
@media (max-width: 980px) { .oe-top-inner { flex-wrap: wrap; } .oe-name-wrap { flex-basis: 100%; order: 3; } }
@media (max-width: 760px) {
  .oe-addresses { grid-template-columns: minmax(0, 1fr); }
  .oe-top-total { margin-left: auto; }
  .oe-num { display: none; }
}
/* A print location: its proof on the left, its fields to the right. */
.oe-imprint { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; }
.oe-imprint-fields { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* A garment: what it is and its sizes; price above the line total, right. */
.oe-line { grid-template-columns: minmax(0, 1fr) 150px; }
.oe-line-money { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 14px; padding-top: 0; }
.oe-line-money .oe-lf.price { width: 100%; }
.oe-line-total { margin-left: 0; }
.oe-status { flex: none; padding: 5px 12px; font-size: 12.5px; }
@media (max-width: 760px) {
  .oe-imprint { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .oe-line { grid-template-columns: minmax(0, 1fr); }
  .oe-line-money { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .oe-line-money .oe-lf.price { width: 130px; }
}
/* Imprint card, compact: garments first (one shared header, a row each
   plus a row of size boxes), then the print location under them. */
.oe-garments { padding: 12px 22px 10px; display: flex; flex-direction: column; }
.oe-g-row { display: grid; grid-template-columns: 112px 140px minmax(0, 1fr) 92px 96px 62px; gap: 8px; align-items: center; }
.oe-g-head { padding-bottom: 6px; }
.oe-g-head span { font-size: 12px; font-weight: 600; color: var(--text-2); }
.oe-g-head .r, .oe-g-total { text-align: right; }
.oe-line { display: block; padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
.oe-line:hover { background: none; }
.oe-g-total { font-size: 14px; padding-right: 2px; }
.oe-garments .oe-row-acts { margin: 0; }
.oe-g-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: flex-end; }
.oe-g-sizes .oe-size { width: 50px; gap: 3px; }
.oe-g-sizes .oe-size > span { font-size: 11px; font-weight: 600; color: var(--muted); }
.oe-g-sizes .oe-line-tax { align-self: center; margin: 14px 0 0 4px; font-size: 12.5px; color: var(--muted); }
.oe .oe-g-sizes .o-in { min-height: 32px; padding: 4px; }
.oe-g-sizes .oe-size.total b { min-height: 32px; font-size: 13px; }
.oe-g-sizes .oe-empty-sizes { padding: 4px 0; }
/* The imprint's Sizes menu leads the first garment's sizes row. */
.oe-g-sizes > .oe-sizes { align-self: flex-end; margin-right: 6px; }
.oe-g-sizes > .oe-sizes summary { min-height: 32px; max-width: 220px; background: var(--panel); }
.oe-add-garment { align-self: flex-start; padding: 10px 0 2px; font-size: 13px; color: var(--accent); }
.oe-add-garment:hover { color: var(--accent-hi); }
.oe-group .oe-locations { border-top: 1px solid var(--line); border-bottom: 0; padding-block: 14px 16px; }
.oe-imprint { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 12px; }
.oe-imprint .oe-line-proofs .oe-drop, .oe-imprint .oe-proof-view { aspect-ratio: 1 / 1; }
.oe-imprint .oe-drop span { display: none; }
.oe-imprint-top { grid-template-columns: 160px 220px minmax(0, 1fr); }
@media (max-width: 1100px) {
  .oe-g-row { grid-template-columns: 96px 120px minmax(0, 1fr) 84px 84px 62px; }
  .oe-garments.costed .oe-g-row { grid-template-columns: 90px 110px minmax(0, 1fr) 76px 80px 84px 62px; }
  .oe-imprint-main .oe-imprint-top:has(.oe-deco) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .oe-imprint-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .oe-imprint-top > .grow { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 760px) {
  .oe-garments { padding-inline: 16px; }
  .oe-g-head { display: none; }
  .oe-g-row, .oe-garments.costed .oe-g-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .oe-imprint-main .oe-imprint-top:has(.oe-deco) { grid-template-columns: minmax(0, 1fr); }
  .oe-g-row > :nth-child(3) { grid-column: 1 / -1; }
  .oe-imprint { grid-template-columns: 80px minmax(0, 1fr); }
  .oe-imprint-top { grid-template-columns: minmax(0, 1fr); }
}
.oe-group .oe-imprint { border: 0; background: none; padding: 0; }
.oe-imprint .oe-line-proofs:not(.empty) .oe-drop { aspect-ratio: auto; height: 30px; padding: 0; }
.oe-imprint .oe-line-proofs:not(.empty) .oe-drop b { font-size: 16px; }
/* Imprint card body: the proof down the left; garments top right, the
   print location (category, colors, details) bottom right. */
.oe-imprint-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 16px 22px 18px; }
.oe-imprint-proof { min-width: 0; }
.oe-loc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.oe-loc-head b { font-size: 13px; font-weight: 700; }
.oe-imprint + .oe-imprint { border-top: 1px dashed var(--line-2); padding-top: 12px; }
.oe-imprint-proof .oe-line-proofs:not(.empty) .oe-drop { aspect-ratio: auto; height: 30px; padding: 0; }
.oe-imprint-proof .oe-line-proofs:not(.empty) .oe-drop b { font-size: 16px; }
.oe-imprint-main { display: flex; flex-direction: column; min-width: 0; }
.oe-imprint-main .oe-garments { padding: 14px 0 10px; }
.oe-imprint-main .oe-locations { border-bottom: 1px solid var(--line); padding-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
/* Decoration first: a location's screens / stitches / transfer size sit
   beside its category; each garment has a blank cost column and a price
   bar that always says what the Sheet makes of it. */
.oe-imprint-main .oe-imprint-top:has(.oe-deco) { grid-template-columns: 150px 210px auto minmax(0, 1fr); }
.oe-deco { width: 110px; }
.oe-deco .o-in.need { border-color: var(--marigold); background: var(--marigold-wash); }
.oe-garments.costed .oe-g-row { grid-template-columns: 112px 140px minmax(0, 1fr) 84px 92px 96px 62px; }
.oe-imprint-main .oe-g-sizes { flex-wrap: wrap; gap: 4px; }
.oe-imprint-main .oe-g-sizes .oe-size { flex: 1 1 0; min-width: 38px; max-width: 50px; width: auto; }
.oe-imprint-main .oe-g-sizes .oe-size.total { flex: 0 0 64px; max-width: none; }
/* A garment's supplier style: color, cost by size, stock, Use cost (portal/orders.js supplierStrip). */
.oe-supplier { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; padding: 5px 6px 5px 12px; min-height: 30px; border: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.oe-supplier b { color: var(--text); font-weight: 700; letter-spacing: .02em; }
.oe-supplier .btn { margin-left: auto; }
.oe-supplier .oe-swatch { width: 12px; height: 12px; }
.oe-supplier .oe-sup-bad { color: var(--bad); font-weight: 600; }
/* Under a size box: the supplier's cost, then stock (red when short). */
.oe-sup-cell { display: flex; flex-direction: column; align-items: center; margin-top: 3px; font-size: 11px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
/* With cells under the boxes, the boxes line up by their tops. */
.oe-g-sizes.has-sup { align-items: flex-start; }
.oe-g-sizes.has-sup > .oe-sizes, .oe-g-sizes.has-sup > .oe-line-tax { margin-top: var(--sup-head, 19px); }
.oe-sup-cell b { font-family: var(--f-mono); font-weight: 600; color: var(--text); }
.oe-sup-cell b:empty { display: none; }
.oe-sup-cell.bad, .oe-sup-cell.bad b { color: var(--bad); }
.oe-price-bar { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 6px 6px 6px 12px; border-radius: 0; background: var(--raise); border: 1px solid var(--line); }
.oe-price-bar .oe-calc-out { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; min-height: 30px; flex: 1; }
.oe-price-bar .oe-calc-out .linkish { align-self: center; font-weight: 700; }
.oe-price-bar .oe-calc-open { flex: none; }
/* A narrow card puts the description on its own line under the row. */
.oe-imprint-main { container-type: inline-size; }
@container (max-width: 720px) {
  .oe-garments.costed .oe-g-head { display: none; }
  .oe-garments.costed .oe-g-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 76px 80px 76px 56px; }
  .oe-garments.costed .oe-g-row > :nth-child(3) { grid-column: 1 / -1; order: 9; }
  .oe-imprint-main .oe-imprint-top:has(.oe-deco) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .oe-imprint-main .oe-imprint-top:has(.oe-deco) > .grow { grid-column: 1 / -1; }
}
.oe-group .oe-imprint { display: block; }
.oe-imprint-main .oe-imprint-top { grid-template-columns: 150px 210px minmax(0, 1fr); }
@media (max-width: 1100px) { .oe-imprint-body { grid-template-columns: 130px minmax(0, 1fr); } }
@media (max-width: 760px) { .oe-imprint-body { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; } .oe-imprint-proof .oe-line-proofs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Staff sidebar ----
   Every staff screen: a left sidebar of screens under the top bar. Clients
   never see it. */
:root { --side-w: 264px; }
.side-toggle { display: none; width: 38px; height: 38px; flex: none; border: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--text); }
.side { position: fixed; z-index: 18; top: var(--top-h, 65px); bottom: 0; left: 0; width: var(--side-w); max-width: calc(100vw - 24px); overflow-y: auto; padding: 14px 10px; background: var(--raise); color: var(--text); border-right: 1px solid var(--line); }
.side-links, .side-group { display: flex; flex-direction: column; gap: 1px; }
/* Groups are split by a hairline only, no section names. */
.side-group + .side-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.side a { display: flex; align-items: center; gap: 10px; min-height: 32px; flex-shrink: 0; padding: 6px 10px; border-radius: 0; color: var(--muted); text-decoration: none; font-family: var(--f-body); font-size: 13.5px; line-height: 1.2; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.side a svg { width: 16px; height: 16px; stroke-width: 1.6; color: var(--faint); flex: none; transition: color .15s; }
@media (hover: hover) {
  .side a:hover { background: var(--tint); color: var(--text); }
  .side a:hover svg { color: var(--muted); }
}
/* The open screen: a raised chip with a marigold dot. */
.side a[aria-current="page"] { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(0, 0, 0, .06); }
.side a[aria-current="page"] svg { color: var(--accent); }
.side a:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
@media (pointer: coarse) { .side a { min-height: 44px; } }
body.staff #app { margin-left: var(--side-w); }
body.staff .top .wrap { max-width: none; }
body.staff .hero .ht, body.staff .hero .reg { display: none; }
body.staff .hero-inner { padding-block: 22px 24px; }
body.staff .hero-title h1.display { font-size: clamp(34px, 3.6vw, 48px); }
@media (max-width: 960px) {
  body.staff #app { margin-left: 0; }
  body.staff .side-toggle:not([hidden]) { display: flex; }
  .side { transform: translateX(-100%); transition: transform .2s var(--ease); box-shadow: 0 0 40px var(--shadow); overscroll-behavior: contain; }
  body.side-open .side { transform: none; }
}

/* ---- Customers (staff home) ---- */
.sh-page { max-width: 1680px; padding: 16px 32px 72px; display: flex; flex-direction: column; gap: 18px; }
.sh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--line-2); }
.sh-head h1 { font-family: var(--f-display); font-size: clamp(40px, 4.2vw, 58px); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: 1; }
.sh-head h1::before { content: ""; display: block; width: 30px; height: 4px; margin-bottom: 14px; background: var(--marigold); }
.sh-head p { margin: 10px 0 0; font-size: 14px; color: var(--muted); max-width: 65ch; }
/* No page subtext under the headings. */
.sh-head h1 + p { display: none; }
/* The sidebar already names the page, so a page heading is for screen
   readers only. The head keeps its buttons and pickers on one compact row,
   and a head with nothing else in it (or a top block holding only that
   head) takes no room. Drawers and panels keep their own titles. */
.sh-head { align-items: center; padding-bottom: 0; border-bottom: 0; }
.sh-head h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sh-head:not(:has(> :nth-child(2))):not(:has(> div > :not(h1, p))) { display: none; }
/* :has() can't nest, so the top block spells out "a head holding only a title". */
.sh-page.sh-top:not(:has(> :nth-child(2))):has(> .sh-head > div:only-child > h1:only-child, > .sh-head > div:only-child > h1:first-child + p:last-child) { display: none; }
body.staff #app .sh-top + .wrap.body { padding-top: 16px; }
.pc-drawer .sh-head h1, .pc-page > .db-shipping > .sh-head h1 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
/* A head left with only its buttons rides up onto the tab row under it. */
.sh-page:has(> .sh-head + nav) { position: relative; }
.sh-page > .sh-head:has(+ nav):not(:has(> div > :not(h1, p))) { position: absolute; top: 16px; right: 32px; z-index: 2; }
/* Staff pages use the whole width beside the sidebar. */
body.staff #app .sh-page, body.staff #app .wrap, body.staff #app .pd-page, .tk-root, .st-page, .so-ws { max-width: none; }
body.staff #app .pd-page { margin: 0; }
/* Money's title goes the same way; its Sandbox / Live tag stays. */
.mn-page > .cu-head > .cu-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sh-search { display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 16px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 0; }
.sh-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--marigold-wash); }
.sh-search > svg { color: var(--faint); flex: none; }
.sh-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--text); padding: 9px 0; }
.sh-search input:focus { outline: none; }
.sh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.sh-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 0; color: var(--text); transition: border-color .12s, background .12s; }
.sh-tile:hover { border-color: var(--line-3); }
.sh-tile[aria-pressed="true"] { border-color: var(--marigold); background: var(--marigold-wash); box-shadow: inset 0 3px 0 var(--marigold); }
.sh-tile span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.sh-tile b { font-family: var(--f-display); font-size: clamp(28px, 3vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sh-tile.owed b { color: var(--bad); }
.sh-tile small { font-size: 12px; color: var(--faint); }
.sh-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.sh-bar .dir-summary { margin: 0; }
.sh-columns { position: relative; flex: none; }
.sh-columns summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 0; }
.sh-columns summary::-webkit-details-marker { display: none; }
.sh-columns[open] summary, .sh-columns summary:hover { color: var(--text); border-color: var(--line-3); }
.sh-columns-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; min-width: 200px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 0; box-shadow: 0 18px 40px -18px var(--shadow); }
.sh-columns-menu label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 0; font-size: 13.5px; cursor: pointer; }
.sh-columns-menu label:hover { background: var(--tint); }
.sh-columns-menu input { accent-color: var(--marigold); width: 16px; height: 16px; }
.sh-page .dir-scroll { max-height: calc(100vh - 300px); border-radius: 0; }
.sh-page #dirMore { margin-top: 12px; }
.sh-skeleton { display: flex; flex-direction: column; gap: 18px; }
.sh-skeleton i { display: block; border-radius: 0; background: var(--raise); animation: sh-pulse 1.2s ease-in-out infinite alternate; }
.sh-skeleton .sh-tiles i { height: 78px; }
.sh-rows { display: flex; flex-direction: column; gap: 8px; }
.sh-rows i { height: 40px; border-radius: 0; }
@keyframes sh-pulse { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sh-skeleton i { animation: none; } }
@media (max-width: 760px) {
  .sh-page { padding: 12px 16px 56px; }
  .sh-page > .sh-head:has(+ nav):not(:has(> div > :not(h1, p))) { top: 12px; right: 16px; }
  .sh-search { flex-wrap: wrap; padding: 6px 6px 6px 14px; }
  .sh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-tile b { font-size: clamp(22px, 6vw, 32px); white-space: nowrap; }
}
/* Staff pages line up with the sidebar: a compact header (.sh-top) above
   the page's own content, both left aligned. */
.sh-page.sh-top { padding-bottom: 0; }
body.staff #app .wrap { margin-left: 0; padding-inline: 32px; }
.sh-page .sh-search input[type="search"] { min-height: 0; }
@media (max-width: 760px) { body.staff #app .wrap { padding-inline: 16px; } }
body.staff .section-head h2 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 25px; line-height: 1.1; }
@media (prefers-reduced-motion: reduce) { .side, .side a { transition: none; } }
.oq-proofs { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 12px; }
.oq-proof { display: block; width: 100%; text-decoration: none; }
/* Deal page imprint cards (detailImprint in portal/orders.js). */
@media (min-width: 561px) { .line-card.oq-group { grid-template-columns: minmax(140px, 190px) minmax(0, 1fr); } }
.oq-group .line-body { gap: 10px; padding: 18px 20px; }
/* Invoice imprint with a proof per garment: each proof row-aligned with its garments. */
.oq-segs { overflow: hidden; }
.oq-seg { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 561px) { .oq-seg { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); } }
.oq-seg-lines { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 20px 12px 8px; }
.oq-seg:first-child .oq-seg-lines { padding-top: 18px; }
.oq-seg-lines .oq-imp-lines { flex: 1; margin-top: 0; }
.oq-seg-lines .oq-imp-line:last-child { flex: 1; display: flex; flex-direction: column; }
.oq-seg-lines .oq-imp-line:last-child .oq-imp-body { flex: 1; }
.oq-seg-bar { height: 4px; margin: 2px 12px; border-radius: 0; background: var(--line-2); }
.oq-seg-lines > .size-legend { margin: 0 0 4px; }
@media (max-width: 560px) { .oq-seg-lines { padding: 4px 16px 14px; } .oq-seg:first-child .oq-seg-lines { padding-top: 4px; } }
.oq-zoom { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 0; background: rgba(17, 17, 19, .7); color: #f3f2ef; opacity: .85; transition: opacity .2s; }
.proof-btn:hover .oq-zoom, .proof-btn:focus-visible .oq-zoom { opacity: 1; }
.oq-imp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.oq-imp-head h3 { flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 700; line-height: 1.25; }
.oq-imp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.oq-imp-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 0; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.oq-imp-chip.good { color: var(--good); background: var(--good-wash); border-color: var(--good-line); }
.oq-imp-chip.bad { color: var(--bad); background: var(--bad-wash); border-color: transparent; }
.oq-imp-chip.wait { color: var(--muted); background: var(--tint); border-style: dashed; }
.oq-art { display: inline-flex; align-items: center; gap: 7px; min-height: 0; background: var(--panel); border-color: var(--line-3); color: var(--text-2); font-family: inherit; line-height: 1.3; cursor: pointer; transition: background .15s, border-color .15s; }
.oq-art:hover { background: var(--tint); border-color: var(--text-2); }
.oq-art:disabled { opacity: .6; cursor: progress; }
.oq-art i { width: 13px; height: 13px; flex: none; border-radius: 0; border: 1.5px solid var(--line-3); background: var(--panel); }
.oq-art.done { color: var(--good); background: var(--good-wash); border-color: var(--good-line); }
.oq-art.done i { border-color: var(--good); background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.oq-imp-locs { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line-2); border-radius: 0; overflow: hidden; }
.oq-imp-locs li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 9px 14px; }
.oq-imp-locs li + li { border-top: 1px solid var(--line); }
.oq-imp-locs li > b { min-width: 96px; font-size: 14px; font-weight: 700; }
.oq-imp-locs .oq-imp-inks { font-size: 13px; }
.oq-imp-locs .pq-details { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.oq-imp-inks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; color: var(--text-2); }
.oq-imp-inks > span { display: inline-flex; align-items: center; gap: 6px; }
.oq-imp-inks b { font-weight: 600; }
.oq-imp-inks small { font-size: 13px; color: var(--faint); }
.oq-imp-lines { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.oq-imp-line { border: 1px solid var(--line-2); border-radius: 0; overflow: hidden; background: var(--panel); }
.oq-imp-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 16px; padding: 10px 14px; background: var(--tint); }
.oq-imp-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 3px 12px; margin: 0; font-size: 13.5px; }
.oq-imp-dl dt { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--faint); white-space: nowrap; }
.oq-imp-dl dd { margin: 0; min-width: 0; color: var(--text-2); overflow-wrap: anywhere; }
.oq-imp-dl dd.desc { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.35; }
.oq-imp-money { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.oq-imp-money b { font-size: 15px; font-weight: 700; white-space: nowrap; }
.oq-imp-money span { font-size: 13px; color: var(--faint); white-space: nowrap; }
.oq-imp-line { container-type: inline-size; }
@container (max-width: 400px) {
  .oq-imp-top { grid-template-columns: minmax(0, 1fr); }
  .oq-imp-money { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; padding-top: 6px; border-top: 1px dashed var(--line-2); }
}
.oq-imp-top:not(:last-child) { border-bottom: 1px solid var(--line); }
.oq-imp-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 12px; }
.oq-imp-line .pq-breaks { font-size: 12.5px; }
.oq-garment + .oq-garment { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; }
.oq-location { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.oq-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.o-pdf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.o-pdf-canvas.ready { opacity: 1; }
.o-pdf-state { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 20px; text-align: center; font: 12px var(--f-body); color: #5c5a54; }
.o-pdf-state[hidden] { display: none; }

/* Printavo sync (#status): one plain-language summary above the detail. */
.sync-hero { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-radius: 0; border: 1px solid var(--good-line); background: var(--good-wash); margin-bottom: 18px; }
.sync-hero h2 { margin: 0 0 4px; font-family: var(--f-display); font-size: 22px; }
.sync-hero p { margin: 0; color: var(--muted); }
.sync-hero.warn { border-color: rgba(245, 178, 27, .35); background: var(--marigold-wash); }
.sync-hero.late { border-color: var(--bad); background: var(--bad-wash); }
.sync-dot { flex: none; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--good); }
.warn > .sync-dot { background: var(--accent); }
.late > .sync-dot { background: var(--bad); }
.sync-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.sync-step { display: flex; gap: 12px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 0; min-width: 0; }
.sync-step.late { border-color: var(--bad); }
.sync-step b { display: block; font-size: 15px; }
.sync-step p { margin: 4px 0; font-size: 14px; }
.sync-issues { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.sync-more { margin-top: 18px; }
.sync-more > summary { cursor: pointer; font-weight: 600; color: var(--muted); padding: 8px 0; }
.sync-more[open] > summary { margin-bottom: 14px; }
.sync-more > * + * { margin-top: 16px; }

/* Production Schedule (#schedule, portal/schedule.js). */
.sc-page { padding-top: 16px; gap: 14px; }
.sc-sync { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 36px; min-height: 36px; padding: 0 8px; border: 1px solid var(--line-2); background: var(--panel); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer; }
.sc-sync:hover { border-color: var(--line-3); }
.sc-sync i { width: 9px; height: 9px; border-radius: 50%; background: var(--good); }
.sc-sync.saving i { background: var(--marigold); animation: sc-blink 1s ease-in-out infinite; }
.sc-sync.ok { color: var(--good); }
.sc-sync.bad { color: var(--bad); }
.sc-sync.bad i { background: var(--bad); }
@keyframes sc-blink { 50% { opacity: .3; } }

/* Toolbar: views and filter. */
.sc-bar { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; margin: -6px 0; background: var(--ink); }
/* Lane tabs: count and total estimated hours. */
.sc-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 0; background: var(--raise); }
.sc-tabs button { display: flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.sc-tabs button[style] { flex: 1 1 0; min-width: 0; margin-left: 4px; border-left: 4px solid var(--wf); }
.sc-tabs button:hover { color: var(--text); }
.sc-lt-top { display: flex; flex: 1; align-items: center; gap: 7px; white-space: nowrap; }
.sc-tab-n { min-width: 22px; padding: 1px 6px; background: var(--line); color: var(--faint); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.sc-lt-h { color: var(--muted); font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-tabs button[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line); }
.sc-tabs button[style][aria-selected="true"] { background: color-mix(in srgb, var(--wf) 12%, var(--panel)); }
.sc-tabs button[aria-selected="true"] .sc-tab-n { background: var(--marigold); color: var(--marigold-ink); }
.sc-more { flex: none; min-height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; }
.sc-more.on { border-color: var(--marigold); background: var(--marigold-wash); color: var(--text); }
.sc-search { display: flex; align-items: center; gap: 8px; min-height: 36px; min-width: min(340px, 100%); padding: 0 12px; border-radius: 0; border: 1px solid var(--line-2); background: var(--panel); color: var(--faint); transition: border-color .15s, box-shadow .15s; }
.sc-search:focus-within { border-color: var(--marigold); box-shadow: 0 0 0 3px var(--marigold-wash); }
.sc-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.sc-search kbd { padding: 1px 7px; border-radius: 0; border: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 11px; color: var(--faint); }
.sc-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 0; font-size: 14px; }
.sc-banner.bad { background: var(--bad-wash); color: var(--bad); border: 1px solid var(--bad); }

/* Capacity strip. */
.sc-cap { background: var(--panel); border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.sc-cap-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; flex-wrap: wrap; }
.sc-cap-toggle.open .sc-chev { transform: rotate(90deg); }
.sc-cap-toggle .sc-meta { font-weight: 400; }
.sc-cap-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; padding: 0 18px 4px; overflow-x: auto; scrollbar-width: thin; }
.sc-day { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 0; background: var(--tint); border: 1px solid var(--line); }
.sc-day.today { border-color: var(--marigold); box-shadow: inset 0 3px 0 var(--marigold); }
.sc-day header { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.sc-day header b { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.sc-day header span { font-size: 12px; color: var(--faint); }
.sc-lane-top { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--muted); }
.sc-lane-top b { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--text); font-size: 11.5px; }
.sc-lane-top i { font-style: normal; color: var(--faint); }
.sc-meter { height: 5px; margin-top: 4px; border-radius: 0; background: var(--line); overflow: hidden; }
.sc-meter em { display: block; height: 100%; border-radius: inherit; background: var(--wf); opacity: .85; }
.sc-lane.full .sc-meter em { opacity: 1; }
.sc-lane.over .sc-meter em { background: var(--bad); opacity: 1; }
.sc-lane.over .sc-lane-top b { color: var(--bad); }
.sc-cap-note { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 18px 14px; font-size: 12px; color: var(--faint); }
.sc-over-text { color: var(--bad); font-weight: 700; }

/* Workflow sections and the grid. Every cell is centered on a clear grid
   with a fixed row height, like the extension's schedule. */
.sc-section { display: flex; flex-direction: column; gap: 10px; }
.sc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-head h2 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.005em; }
.sc-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--wf); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wf) 22%, transparent); }
.sc-pill { padding: 2px 9px; border-radius: 0; border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sc-pill.live { border-color: var(--good-line); background: var(--good-wash); color: var(--good); }
.sc-count { margin-left: auto; padding: 2px 10px; border-radius: 0; background: var(--raise); font-size: 12px; font-weight: 700; color: var(--muted); }
.sc-meta { color: var(--muted); font-size: 13.5px; }
.sc-meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.sc-empty { padding: 26px; border-radius: 0; border: 1px dashed var(--line-2); color: var(--muted); font-size: 14px; text-align: center; }
.sc-scroll { overflow: auto; max-height: calc(100vh - 200px); background: var(--panel); border: 1px solid var(--line-2); border-radius: 0; scrollbar-width: thin; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.sc-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.sc-table th, .sc-table td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; overflow: hidden; }
.sc-table th:last-child, .sc-table td:last-child { border-right: 0; }
.sc-table thead th { position: sticky; top: 0; z-index: 2; height: 52px; padding: 6px 10px; background: color-mix(in srgb, var(--panel) 94%, var(--text)); color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .07em; line-height: 1.25; text-transform: uppercase; white-space: normal; border-bottom: 1px solid var(--line-2); overflow: visible; }
.sc-table td { height: 76px; padding: 0 8px; }
.sc-table th.sc-job, .sc-table td.sc-job { position: sticky; left: 0; z-index: 1; background: var(--panel); border-right: 2px solid var(--line-2); padding: 8px 12px; }
.sc-table thead th.sc-job { z-index: 3; background: color-mix(in srgb, var(--panel) 94%, var(--text)); }
.sc-table tbody tr:last-child td { border-bottom: 0; }
.sc-row:hover td { background: color-mix(in srgb, var(--panel) 96%, var(--text)); }
.sc-row:hover td.sc-filled { background: var(--opt); filter: brightness(.96); }
.sc-row.suspended td:not(.sc-filled) { background: color-mix(in srgb, var(--panel) 90%, var(--bad)); }
.sc-row.open td { border-bottom-color: transparent; }

/* Column resizing: a thin handle on each header's right edge. */
.sc-resize { position: absolute; top: 0; right: 0; z-index: 4; width: 10px; height: 100%; cursor: col-resize; touch-action: none; }
.sc-resize::after { content: ""; position: absolute; top: 12px; bottom: 12px; right: 0; width: 2px; border-radius: 0; background: transparent; transition: background .12s; }
.sc-resize:hover::after, .sc-resizing .sc-resize:active::after { background: var(--marigold); }
.sc-resizing, .sc-resizing * { cursor: col-resize !important; user-select: none !important; }

/* Job cell. */
.sc-job-in { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.sc-job-in:has(> .sc-grip) { padding: 0 10px; }
.sc-num-link { font-size: 15px; font-weight: 800; color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
a.sc-num-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sc-name { max-width: 100%; font-weight: 650; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-sub { max-width: 100%; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-flags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.sc-flag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 0; border: 1px solid var(--line-2); font-size: 10.5px; font-weight: 750; color: var(--muted); white-space: nowrap; }
.sc-flag.bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.sc-flag.good, .sc-flag.live { background: var(--good-wash); border-color: var(--good-line); color: var(--good); }
.sc-flag.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); animation: sc-live 1.6s ease-out infinite; }
@keyframes sc-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
.sc-job-foot { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.sc-tagbtn { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.sc-num-row { position: relative; }
.sc-tag-plus { position: absolute; top: 50%; left: 100%; margin-left: 6px; transform: translateY(-50%); width: 20px; height: 20px; padding: 0; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.sc-table tr:hover .sc-tag-plus, .sc-tag-plus:focus-visible, .sc-tag-plus.sc-popped { opacity: 1; }
.sc-tag-plus:hover, .sc-tag-plus.sc-popped { border-color: var(--accent); color: var(--accent); }
@media (hover: none) { .sc-tag-plus { opacity: 1; } }
.sc-items-btn { display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px 1px 5px; border-radius: 0; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
.sc-items-btn:hover { border-color: var(--line-3); }
.sc-chev { display: inline-flex; color: var(--faint); transition: transform .2s var(--ease); }
[aria-expanded="true"] .sc-chev { transform: rotate(90deg); }

/* Cells that open a menu fill the cell. */
.sc-cellbtn { display: flex; align-items: center; justify-content: center; width: calc(100% + 16px); height: 76px; margin: 0 -8px; padding: 0 8px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .12s, box-shadow .15s; }
.sc-cellbtn:hover { background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-3); }
.sc-cellbtn:focus-visible, .sc-cellbtn.sc-popped { outline: none; box-shadow: inset 0 0 0 2px var(--marigold); }
.sc-cellbtn.empty { color: var(--dim); font-weight: 500; }
.sc-datebtn { font-variant-numeric: tabular-nums; font-size: 14px; }
.sc-datebtn.urgent { color: var(--bad); }
.sc-datebtn.awaiting, .sc-eta.awaiting b { color: var(--accent); font-size: 12px; }
td.sc-filled { background: var(--opt); }
td.sc-filled .sc-cellbtn { color: var(--opt-ink); }
td.sc-filled .sc-cellbtn:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.sc-choice { line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.sc-tagscell { flex-wrap: wrap; gap: 4px; align-content: center; }
.sc-ph { font-style: italic; font-size: 12px; font-weight: 500; color: var(--faint); }
.sc-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 0; border: 1px solid var(--line-2); background: var(--tint); font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--text); }
.sc-tag[data-colored] { background: var(--opt); border-color: var(--opt); color: var(--opt-ink); }
.sc-etas { display: flex; flex-direction: column; height: 76px; margin: 0 -8px; }
.sc-eta { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; min-height: 0; overflow: hidden; width: 100%; padding: 0 8px; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
/* One band per carrier: Carriers and Received ETA share the same lines. */
.sc-eta + .sc-eta, .sc-band + .sc-band { border-top: 2px solid var(--line-3); }
.sc-bands { flex-direction: column; align-items: stretch; padding: 0; }
.sc-band { display: flex; flex: 1 1 0; min-height: 0; overflow: hidden; align-items: center; justify-content: center; padding: 0 8px; }
.sc-eta b { font-size: 13px; line-height: 1.1; text-align: center; font-variant-numeric: tabular-nums; }
.sc-etas:has(> :nth-child(3)) .sc-eta b { font-size: 11.5px; line-height: 1; }
.sc-eta.empty b { color: var(--dim); font-weight: 500; }
.sc-eta:hover { background: var(--tint); }
.sc-eta:focus-visible, .sc-eta.sc-popped { outline: none; box-shadow: inset 0 0 0 2px var(--marigold); }

/* Small boxed numbers, like the extension's Qty and hours. */
.sc-box { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 32px; padding: 0 6px; border: 1px solid var(--line-3); border-radius: 0; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; transition: border-color .12s, box-shadow .15s; -moz-appearance: textfield; }
.sc-box::-webkit-outer-spin-button, .sc-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.sc-box:hover, .sc-boxbtn:hover { border-color: var(--text-2); }
input.sc-box:focus { outline: none; border-color: var(--marigold); box-shadow: 0 0 0 3px var(--marigold-wash); }
input.sc-box::placeholder { color: var(--muted); font-weight: 500; }
.sc-boxbtn { width: auto; min-width: 58px; cursor: pointer; }
.sc-ro-box { border-color: var(--line-2); background: var(--tint); }
.sc-ro-box.none { color: var(--dim); }
.sc-box.needs { border-color: var(--bad); background: var(--bad-wash); }
/* Text cells: borderless until hovered. */
.sc-table input.sc-text { width: calc(100% + 16px); height: 76px; min-height: 0; margin: 0 -8px; padding: 0 10px; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; text-align: center; }
.sc-table input.sc-text:hover { background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-3); }
.sc-table input.sc-text:focus { outline: none; background: var(--panel); box-shadow: inset 0 0 0 2px var(--marigold); text-align: left; }
.sc-table input.sc-text::placeholder { color: var(--dim); font-weight: 500; }
.flash-ok { box-shadow: inset 0 0 0 2px var(--good) !important; }
.flash-bad { box-shadow: inset 0 0 0 2px var(--bad) !important; }
.sc-box.flash-ok { box-shadow: 0 0 0 3px var(--good-line) !important; border-color: var(--good) !important; }

/* Expanded rows: run breakdown and promo line items. */
.sc-detail td { height: auto; padding: 0 12px 14px; background: var(--panel); text-align: left; }
.sc-detail-in { position: sticky; left: 12px; width: min(880px, calc(100vw - 140px)); padding: 14px 16px; border-radius: 0; background: var(--tint); border: 1px solid var(--line); }
.sc-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sc-runs { width: 100%; border-collapse: collapse; font-size: 13px; }
/* The schedule's sticky header and cell rules reach this nested table; undo them. */
.sc-table .sc-runs th, .sc-table .sc-runs td { position: static; z-index: auto; transform: none; box-shadow: none; height: auto; border-right: 0; overflow: visible; text-align: left; }
.sc-runs th, .sc-table .sc-runs thead th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; line-height: inherit; white-space: nowrap; text-transform: uppercase; color: var(--faint); background: none; padding: 4px 8px 6px; border-bottom: 1px solid var(--line-2); }
.sc-runs td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sc-runs .sc-r, .sc-table .sc-runs .sc-r { text-align: right; font-variant-numeric: tabular-nums; }
.sc-runs tfoot td { border-bottom: 0; font-weight: 700; padding-top: 9px; }
.sc-loc { display: inline-block; margin: 0 4px 3px 0; padding: 1px 8px; border-radius: 0; background: var(--good-wash); border: 1px solid var(--good-line); color: var(--good); font-size: 11.5px; font-weight: 650; }
.sc-loc.off { background: transparent; border-color: var(--line-2); color: var(--faint); text-decoration: line-through; }
button.sc-loc { font: inherit; font-size: 11.5px; font-weight: 650; cursor: pointer; }
button.sc-loc:hover { border-color: var(--accent); }
.sc-run-loc { width: 64px; min-height: 28px; padding: 2px 6px; border-radius: 0; font-size: 12.5px; }
.sc-run-setup { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.sc-run-setup input { width: 72px; min-height: 28px; margin-left: 6px; padding: 2px 6px; border-radius: 0; font-size: 12.5px; }
/* Row order: the grip drags its row; the line shows where it will land. */
/* Six dots drawn here; the ⋮⋮ text sits low in its line box. */
.sc-grip { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 8px; height: 12px; padding: 0; font-size: 0; background: radial-gradient(circle, currentColor 1.2px, transparent 1.6px) 0 0 / 4px 4px; color: var(--faint); cursor: grab; user-select: none; }
.sc-grip:hover { color: var(--text); }
tr.dragging { opacity: .45; }
tr.sc-drop-above > td { box-shadow: inset 0 2px 0 var(--accent); }
tr.sc-drop-below > td { box-shadow: inset 0 -2px 0 var(--accent); }
.sc-archive-btn { background: var(--panel); cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 750; }
.sc-archive-btn:hover { border-color: var(--accent); color: var(--text); }
/* Proof preview on hover (portal/schedule.js). */
.sc-proofs { position: fixed; z-index: 60; max-height: min(70vh, 560px); overflow: auto; padding: 12px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); box-shadow: 0 24px 60px -24px var(--shadow); }
.sc-proofs header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sc-proofs header b { font-size: 15px; color: var(--accent); }
.sc-proofs header span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 13px; }
.sc-proofs header em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.sc-proofs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sc-proofs-grid a { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 0; color: var(--text-2); text-decoration: none; font-size: 12px; }
.sc-proofs-grid a:hover { border-color: var(--accent); }
.sc-proofs-grid img, .sc-proofs-grid embed { width: 100%; height: 240px; object-fit: contain; border-radius: 0; background: #fff; }
.sc-proofs-grid i { position: absolute; top: 10px; right: 10px; padding: 1px 6px; border-radius: 0; background: var(--text); color: var(--ink); font-size: 10px; font-style: normal; font-weight: 700; }
.sc-proofs-grid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-proofs-wait { padding: 18px 4px; color: var(--muted); font-size: 13px; }
/* Dropdown choices editor (inside the menu). */
.sc-pop-options { width: 320px; }
.sc-oedit { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.sc-oedit-row { display: flex; align-items: center; gap: 4px; }
.sc-oedit-row input[type=color] { flex: none; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line-2); border-radius: 0; background: none; cursor: pointer; }
.sc-oedit-row input[type=text] { flex: 1; min-width: 0; min-height: 30px; padding: 3px 8px; border-radius: 0; font-size: 13px; }
.sc-oedit-row button { flex: none; width: 26px; height: 28px; padding: 0; border: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; }
.sc-oedit-row button:hover:not(:disabled) { color: var(--text); border-color: var(--line-3); }
.sc-oedit-row button:disabled { opacity: .35; cursor: default; }
.sc-oedit-add { display: flex; gap: 6px; margin-top: 8px; }
.sc-oedit-add input { flex: 1; min-width: 0; min-height: 30px; padding: 3px 8px; border-radius: 0; font-size: 13px; }
.sc-oedit-add .sc-pop-btn { flex: none; }
.sc-warn { color: var(--accent); font-weight: 650; }
.sc-item td { height: 60px; background: color-mix(in srgb, var(--panel) 97%, var(--text)); }
.sc-item .sc-cellbtn, .sc-item input.sc-text, .sc-item .sc-etas { height: 60px; }
.sc-item td.sc-job { background: color-mix(in srgb, var(--panel) 97%, var(--text)); }
.sc-item-in { align-items: flex-start; padding-left: 12px; border-left: 3px solid var(--wf, var(--line-2)); text-align: left; }
.sc-item-label { max-width: 100%; font-weight: 650; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-item-in { flex-direction: row; align-items: center; gap: 10px; }
.sc-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-item-proof { flex: none; display: grid; place-items: center; width: 46px; height: 52px; border: 1px solid var(--line-2); background: #fff; overflow: hidden; cursor: zoom-in; }
.sc-item-proof img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sc-item-proof:hover { border-color: var(--line-3); }
.sc-item-proof.none { background: transparent; border-style: dashed; color: var(--faint); font-size: 12px; cursor: default; }
/* Maintenance: a gear row among the jobs, opening a row per due task. */
.sc-maint { cursor: pointer; }
.sc-maint td, .sc-maint td.sc-job { background: color-mix(in srgb, var(--panel) 92%, var(--good)); }
.sc-maint.late td, .sc-maint.late td.sc-job { background: color-mix(in srgb, var(--panel) 90%, var(--accent)); }
.sc-maint-gear { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--good-line); border-radius: 50%; background: var(--panel); color: var(--good); cursor: pointer; transition: transform .2s; }
.sc-maint.late .sc-maint-gear { border-color: var(--accent); color: var(--accent); }
.sc-maint.open .sc-maint-gear { transform: rotate(90deg); }
.sc-maint-date { display: block; text-align: center; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.sc-maint-task.late .sc-maint-date, .sc-maint-error { color: var(--bad); }
.sc-maint-done { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sc-maint-done input { width: 16px; height: 16px; accent-color: var(--good); cursor: pointer; }
.sc-ro { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--faint); }
.sc-dim { color: var(--faint); font-size: 12px; }
.sc-wf { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.sc-wf::before { content: ""; width: 8px; height: 8px; border-radius: 0; background: var(--wf); }
.sc-archive td { height: 64px; padding: 8px 10px; }
.sc-archive .sc-job-top { display: flex; justify-content: center; }

/* Menus: choices, tags and the calendar. */
.sc-pop { position: fixed; z-index: 60; width: 248px; max-height: min(440px, calc(100vh - 24px)); display: flex; flex-direction: column; padding: 10px; border-radius: 0; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); box-shadow: 0 18px 48px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08); animation: sc-pop .14s var(--ease); }
.sc-pop:focus { outline: none; }
@keyframes sc-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.sc-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 8px; }
.sc-pop-head b { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-pop-x { width: 26px; height: 26px; border: 0; border-radius: 0; background: transparent; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer; }
.sc-pop-x:hover { background: var(--tint); color: var(--text); }
input.sc-pop-search { min-height: 36px; margin-bottom: 8px; padding: 6px 10px; border-radius: 0; font-size: 13.5px; }
.sc-pop-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.sc-pop-list:focus { outline: none; }
.sc-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 6px 11px; border-radius: 0; border: 1px solid var(--line-2); background: var(--tint); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; transition: transform .08s, box-shadow .12s; }
.sc-opt.colored { background: var(--opt); border-color: var(--opt); color: var(--opt-ink); }
.sc-opt:hover, .sc-opt.active { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--marigold); }
.sc-opt[aria-selected="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text-2); }
.sc-opt i { font-style: normal; font-weight: 900; }
.sc-pop-empty { margin: 4px 2px 6px; font-size: 13px; color: var(--muted); }
.sc-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--line); }
.sc-pop-btn { flex: 1; min-height: 32px; padding: 4px 10px; border-radius: 0; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.sc-pop-btn:hover { border-color: var(--line-3); color: var(--text); }
.sc-pop-btn.primary { flex: none; background: var(--marigold); border-color: var(--marigold); color: var(--marigold-ink); }
.sc-pop-btn.wide { flex-basis: 100%; }
.sc-pop-btn.on { border-color: var(--accent); color: var(--accent); background: var(--marigold-wash); }
.sc-pop-hint { margin: 8px 2px 0; font-size: 12px; color: var(--faint); }
.sc-cal-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 6px; }
.sc-cal-nav b { font-size: 14px; }
.sc-cal-nav button { width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--text); font-size: 17px; line-height: 1; cursor: pointer; }
.sc-cal-nav button:hover { border-color: var(--line-3); }
.sc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sc-cal-grid:focus { outline: none; }
.sc-cal-grid em { padding: 4px 0; font-style: normal; font-size: 10.5px; font-weight: 750; color: var(--faint); text-align: center; text-transform: uppercase; }
.sc-day-btn { height: 30px; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.sc-day-btn:hover { background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-3); }
.sc-day-btn.today { box-shadow: inset 0 0 0 1.5px var(--marigold); }
.sc-day-btn.on { background: var(--marigold); color: var(--marigold-ink); font-weight: 800; }
.sc-foot { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12.5px; color: var(--faint); }

/* Toolbar tools: layout switch, salesperson, search. */
.sc-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.sc-tools > .sc-layout, .sc-tools > .sc-cap-toggle { flex: none; }
.sc-tools > .sc-search { flex: 1; min-width: min(240px, 100%); }
.sc-layout { display: inline-flex; gap: 2px; padding: 3px; border-radius: 0; background: var(--raise); }
.sc-layout button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 9px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.sc-layout button:hover { color: var(--text); }
.sc-layout button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line); }
.sc-sp { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 260px; padding: 0 14px; border-radius: 0; border: 1px solid var(--line-2); background: var(--panel); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.sc-sp b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 700; }
.sc-sp i { font-style: normal; color: var(--faint); }
.sc-sp:hover, .sc-sp.sc-popped { border-color: var(--line-3); }
.sc-sp.on { border-color: var(--marigold); background: var(--marigold-wash); }

/* Filterable column headers and the active-filter chips. */
.sc-table thead th.sc-th-f { padding: 0; }
.sc-th-btn { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 100%; min-height: 52px; padding: 6px 12px 6px 10px; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.sc-th-btn i { display: inline-flex; opacity: 0; color: var(--faint); transition: opacity .12s; }
.sc-th-btn:hover { color: var(--text); }
.sc-th-btn:hover i, .sc-th-btn:focus-visible i, .sc-th-btn.sc-popped i { opacity: 1; }
.sc-th-btn:focus-visible, .sc-th-btn.sc-popped { outline: none; box-shadow: inset 0 -2px 0 var(--marigold); color: var(--text); }
.sc-th-btn.on { color: var(--accent); }
.sc-th-btn em { min-width: 18px; padding: 1px 5px; border-radius: 0; background: var(--marigold); color: var(--marigold-ink); font-style: normal; font-size: 10.5px; letter-spacing: 0; }
@media (hover: none) { .sc-th-btn i { opacity: .7; } }
.sc-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--faint); }
.sc-chip { display: inline-flex; align-items: center; border-radius: 0; border: 1px solid var(--marigold); background: var(--marigold-wash); overflow: hidden; }
.sc-chip button { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.sc-chip-edit { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 4px 5px 12px; }
.sc-chip-edit b { font-weight: 750; }
.sc-chip-x { padding: 3px 10px 5px 6px; font-size: 16px !important; line-height: 1; color: var(--muted) !important; }
.sc-chip-x:hover { color: var(--text) !important; }

/* Filter menus. */
.sc-pop-filter { width: 272px; }
.sc-fopt { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px; border-radius: 0; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.sc-fopt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-fopt em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.sc-fopt i { width: 16px; font-style: normal; font-weight: 900; text-align: center; color: var(--accent); }
.sc-fopt:hover { background: var(--tint); border-color: var(--line-2); }
.sc-fopt.on { background: var(--marigold-wash); border-color: var(--marigold); }
.sc-fopt.none:not(.on) span { color: var(--faint); }
.sc-fblank { flex: none; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); overflow: visible; }
.sc-range-vals { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 2px 0 10px; font-size: 12px; color: var(--faint); }
.sc-range-vals b { font-family: var(--f-mono); font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.sc-range { display: grid; gap: 2px; padding: 0 2px 8px; font-size: 11.5px; font-weight: 650; color: var(--muted); }
.sc-range input { width: 100%; accent-color: var(--marigold); }
.sc-day-btn.in { border-radius: 0; background: var(--marigold-wash); }
.sc-day-btn.has { position: relative; }
.sc-day-btn.has::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.sc-day-btn.on.has::after { background: var(--marigold-ink); }

/* Calendar layout: the month by Production Date. */
.sc-cal { display: flex; flex-direction: column; gap: 12px; }
.sc-cal-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sc-cal-head h2 { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -.01em; }
.sc-cal-head .sc-meta { margin-left: auto; }
.sc-cal-move { display: inline-flex; gap: 6px; }
.sc-cal-move .btn { min-width: 36px; justify-content: center; }
.sc-cal-month { border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.sc-cal-wds, .sc-cal-days { display: grid; grid-template-columns: minmax(0, .7fr) repeat(5, minmax(0, 1fr)) minmax(0, .7fr); }
.sc-cal-wds span { padding: 9px 10px; border-bottom: 1px solid var(--line-2); font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: color-mix(in srgb, var(--panel) 94%, var(--text)); }
.sc-cd { display: flex; flex-direction: column; gap: 6px; min-height: 128px; padding: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .12s, box-shadow .12s; }
.sc-cd:nth-child(7n) { border-right: 0; }
.sc-cd.weekend { background: var(--tint); }
.sc-cd.out > * { opacity: .55; }
.sc-cd.today { box-shadow: inset 0 3px 0 var(--marigold); }
.sc-cd.today header b { background: var(--marigold); color: var(--marigold-ink); }
.sc-cd header { display: flex; align-items: center; gap: 6px; }
.sc-cd header b { min-width: 24px; padding: 2px 6px; border-radius: 0; font-size: 12.5px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.sc-cd-wd { display: none; font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sc-cd-hrs { margin-left: auto; font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-cd-hrs.over { color: var(--bad); }
.sc-cd-jobs { display: flex; flex-direction: column; gap: 5px; }
.sc-cd.sc-drop, .sc-cal-tray.sc-drop { background: var(--marigold-wash); box-shadow: inset 0 0 0 2px var(--marigold); }
.sc-cj { border-radius: 0; border: 1px solid var(--line-2); border-left: 4px solid var(--wf); background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); cursor: grab; transition: box-shadow .12s, opacity .12s; }
.sc-cj:hover { box-shadow: 0 0 0 1px var(--line-3), 0 4px 10px rgba(0, 0, 0, .08); }
.sc-cj.dragging { opacity: .4; }
.sc-cj.done { opacity: .6; }
.sc-cj.suspended .sc-cj-name { text-decoration: line-through; }
.sc-cj.flash-ok { box-shadow: 0 0 0 2px var(--good); }
.sc-cj.flash-bad { box-shadow: 0 0 0 2px var(--bad); }
.sc-cj-btn { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; padding: 5px 7px; border: 0; border-radius: inherit; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: inherit; }
.sc-cj-btn:focus-visible, .sc-cj-btn.sc-popped { outline: none; box-shadow: inset 0 0 0 2px var(--marigold); }
.sc-cj-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.sc-cj-top b { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-cj-top em { font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.sc-cj.live .sc-cj-top b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--good); vertical-align: middle; }
.sc-cj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-2); }
.sc-cj-status { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 7px; border-radius: 0; border: 1px solid var(--line-2); font-size: 10.5px; font-weight: 700; color: var(--text-2); }
.sc-cj-status[data-colored] { background: var(--opt); border-color: var(--opt); color: var(--opt-ink); }
.sc-cal-tray { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 0; border: 1px dashed var(--line-2); transition: background .12s, box-shadow .12s; }
.sc-cal-tray header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.sc-cal-tray .sc-count { margin-left: 0; }
.sc-cal-tray header .sc-dim { margin-left: auto; font-size: 12.5px; }
.sc-cal-tray .sc-cd-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.sc-cal-tray p { margin: 0; font-size: 13px; }
@media (max-width: 720px) {
  .sc-tools { width: 100%; }
  .sc-layout { flex: 1; }
  .sc-layout button { flex: 1; justify-content: center; }
  .sc-sp { flex: 1; max-width: none; }
  /* The month becomes a list of the days that have jobs. */
  .sc-cal-wds { display: none; }
  .sc-cal-days { display: block; }
  .sc-cd { min-height: 0; border-right: 0; padding: 10px 12px; }
  .sc-cd.empty:not(.today) { display: none; }
  .sc-cd-wd { display: inline; }
  .sc-cal-head .sc-meta { margin-left: 0; width: 100%; }
}
.sc-skeleton { display: grid; gap: 10px; }
.sc-skeleton i { display: block; height: 52px; border-radius: 0; background: linear-gradient(90deg, var(--raise) 0%, var(--tint) 50%, var(--raise) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.sc-skeleton i:first-child { height: 140px; }
@media (prefers-reduced-motion: reduce) { .sc-flag.live i, .sc-sync.saving i, .sc-skeleton i, .sc-pop { animation: none; } }
@media (max-width: 720px) {
  .sc-bar { position: static; margin: 0; padding: 0; }
  .sc-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .sc-tabs button, .sc-tabs button[style] { flex: none; }
  .sc-search { min-width: 100%; }
  .sc-table th.sc-job, .sc-table td.sc-job { width: 168px; min-width: 168px; max-width: 168px; }
  .sc-scroll { max-height: none; }
}

/* Price Calculator: each garment's price summary beside its sizes, and the
   calculator panel it opens underneath (the extension's inputs, 4 locations
   per decoration, and the breaks to offer on the quote). */
.oe-calc { display: flex; align-items: center; gap: 12px; margin-left: auto; padding-left: 12px; border-left: 1px solid var(--line); min-width: 0; }
.oe-calc-out { display: flex; flex-direction: column; justify-content: center; min-height: 32px; gap: 1px; min-width: 170px; font-size: 12px; }
.oe-calc-out:empty { display: none; }
.oe-calc-price { font-size: 13px; color: var(--muted); }
.oe-calc-price b { font-size: 14px; color: var(--text); }
.oe-calc-note { color: var(--muted); margin: 0; }
.oe-calc-note.warn { color: var(--accent); }
.oe-calc-note.bad { color: var(--bad); }
.oe-calc-out .linkish { align-self: flex-start; font-size: 12px; }
.oe-calc-open.on { border-color: var(--marigold); color: var(--text); background: var(--marigold-wash); }
.oe-calc-panel { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 0; background: var(--raise); }
.oe-calc-inputs { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.oe-calc-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.oe-calc-top .oe-lf, .oe-calc-locs .oe-lf { width: 140px; }
.oe-calc-sec-head { font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.oe-calc-sec-head em { font-style: normal; font-weight: 500; color: var(--faint); margin-left: 6px; font-size: 12px; }
.oe-calc-locs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.oe-calc-locs .oe-lf { width: auto; }
.oe-cost { position: relative; display: block; }
.oe-cost i { position: absolute; z-index: 1; left: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--faint); pointer-events: none; font-size: 13px; }
.oe .oe-cost .o-in { padding-left: 22px; width: 100%; }
.oe-calc-check { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); cursor: pointer; }
.oe-calc-check span { display: flex; flex-direction: column; font-size: 12.5px; }
.oe-calc-check small { color: var(--faint); font-size: 11.5px; }
.oe-calc-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--marigold); cursor: pointer; }
.oe-promo-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.oe-promo-row { display: grid; grid-template-columns: 90px 160px 130px; gap: 10px; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.oe-promo-row em { font-style: normal; font-weight: 500; color: var(--faint); font-size: 12px; }
.oe-calc-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 14px; border-radius: 0; background: var(--panel); border: 1px solid var(--line); }
.oe-calc-slider span { display: flex; flex-direction: column; font-size: 13px; }
.oe-calc-slider small { color: var(--faint); font-size: 11.5px; }
.oe-calc-slider output { font-family: var(--f-mono); font-size: 13px; padding: 4px 10px; border-radius: 0; border: 1px solid var(--marigold); color: var(--accent); min-width: 52px; text-align: center; }
.oe-calc-slider input { grid-column: 1 / -1; width: 100%; accent-color: var(--marigold); }
.oe-calc-results { display: flex; flex-direction: column; min-width: 0; }
.oe-breaks { width: 100%; min-width: 0; border-collapse: collapse; font-size: 13px; }
.oe-breaks th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); padding: 0 6px 6px; }
.oe-breaks td { padding: 5px 6px; border-top: 1px solid var(--line); }
.oe-breaks .r { text-align: right; }
.oe-breaks tr.on td { background: var(--marigold-wash); }
.oe-breaks tr.on td:first-child { border-radius: 0; }
.oe-breaks tr.on td:last-child { border-radius: 0; }
.oe-breaks input { width: 15px; height: 15px; margin: 0; accent-color: var(--marigold); cursor: pointer; }
.oe-calc-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 900px) {
  .oe-calc-panel { grid-template-columns: minmax(0, 1fr); }
  .oe-calc-locs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .oe-calc { margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; }
  .oe-promo-row { grid-template-columns: 80px minmax(0, 1fr) 110px; }
}
/* Breaks a garment is offered at, on the quote. */
/* A garment's Qty: read-only when its sizes add it up, typed in when there's no sizing yet. */
.oe .oe-g-sizes .oe-size.total .o-in[readonly] { background: var(--raise); border-color: transparent; cursor: default; font-weight: 600; }

/* Staff Price Calculator page (portal/pricing.js): the quote garment's
   calculator panel, on its own, with method tabs and copyable breaks. */
.pc-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 0; background: var(--raise); border: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.pc-tab { font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .02em; padding: 8px 18px; border-radius: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.pc-tab:hover { color: var(--text); }
.pc-tab.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pc-tool-tabs { display: flex; width: 100%; padding: 0; gap: 0; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; background: transparent; margin-bottom: 18px; }
.pc-tool-tabs .pc-tab { flex: 1; min-height: 44px; padding: 10px 12px; border-radius: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; font-size: 14px; }
.pc-tool-tabs .pc-tab.on { color: var(--accent); border-bottom-color: var(--marigold); background: var(--marigold-wash); box-shadow: none; }
.pc-panel { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); background: var(--panel); }
.pc-breaks th, .pc-breaks td, .pc-breaks .r { text-align: center; }
.pc-breaks td .linkish { font-size: 12px; }
.pc-copied { margin-right: auto; align-self: center; font-size: 12px; color: var(--muted); }
.pc-note { margin-top: 12px; }
.pc-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pc-mode { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 0; background: var(--raise); }
.pc-mode button { padding: 7px 10px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.pc-mode button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px var(--shadow); }
.pc-drawer { position: fixed; inset: var(--top-h, 65px) 0 0 auto; z-index: 25; width: min(420px, 100vw); overflow: auto; overscroll-behavior: contain; background: var(--ink); border-left: 1px solid var(--line); box-shadow: -12px 0 40px -20px var(--shadow); }
.pc-drawer[hidden] { display: none; }
.pc-drawer .pc-page { position: relative; padding: 20px 16px 32px; }
.pc-drawer .sh-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.pc-drawer .sh-head h1 { font-size: 28px; }
.pc-drawer .sh-head p { font-size: 12px; }
.pc-drawer .pc-controls { width: 100%; }
.pc-drawer [data-p-close] { position: absolute; top: 12px; right: 12px; min-width: 36px; padding: 4px 10px; font-size: 20px; line-height: 1; }
.pc-drawer .pc-panel { grid-template-columns: minmax(0, 1fr); }
.pc-drawer .pc-tabs { display: flex; }
.pc-drawer .pc-tab { flex: 1; padding-inline: 10px; }
.pc-drawer .oe-calc-results { min-width: 0; overflow-x: auto; }
.pc-page > .db-shipping { padding: 0; max-width: none; }
.pc-page > .db-shipping > .sh-head h1 { font-size: 20px; }
.pc-drawer .db-ship-grid { grid-template-columns: minmax(0, 1fr); }
.pc-drawer .db-ship-results { position: static; }
.pc-drawer .db-ship-card { min-width: 0; padding: 12px; }
.pc-drawer .db-city { gap: 8px; }
.pc-drawer .db-box-dims { gap: 8px; }
@media (min-width: 1200px) { body.pc-drawer-open #app { margin-right: 420px; } }
@media (max-width: 900px) { .pc-panel { grid-template-columns: minmax(0, 1fr); } }
/* An unnamed quote: the nickname box stands out until it's filled in. */
.oe-name-wrap { position: relative; }
.oe-name-wrap.empty input.oe-name { border: 1.5px dashed var(--marigold); background: var(--marigold-wash); }
.oe-name-hint { display: none; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; font-weight: 700; font-size: 18px; color: var(--accent); white-space: nowrap; }
.oe-name-wrap.empty .oe-name-hint { display: block; }
.oe-name-wrap.empty input.oe-name:focus + .oe-name-hint { opacity: .55; }

/* Ink / Thread Library colors on quotes */
.oe-swatch { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-3); vertical-align: -2px; }
.oe-color .oe-swatch { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); }
.oe .oe-color.linked input.o-in { padding-left: 30px; }
.oe-suggest { position: fixed; z-index: 60; width: 280px; max-height: 320px; overflow: auto; overscroll-behavior: contain; padding: 4px; border-radius: 0; border: 1px solid var(--line-2); background: var(--panel); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.oe-suggest-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 0; background: none; color: var(--text); text-align: left; }
.oe-suggest-item .oe-swatch { width: 20px; height: 20px; }
.oe-suggest-item span { display: flex; flex-direction: column; min-width: 0; }
.oe-suggest-item b { font-size: 13.5px; font-weight: 600; }
.oe-suggest-item small { font-size: 12px; color: var(--faint); }
.oe-suggest-item:hover, .oe-suggest-item.on { background: var(--raise); }
.oq-colors { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.oq-colors span { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Staff Ink / Thread Library (portal/library.js) ---- */
.lb-toolbar { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.lb-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.lb-field b { color: var(--bad); }
.lb-tabs { margin: 0; }
.lb-page .o-in.lb-invalid { border-color: var(--bad); }
.lb-warning { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: 0; background: var(--bad-wash); border: 1px solid var(--bad); color: var(--bad); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.lb-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.lb-swatch { display: block; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); }
.lb-meta { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 10px; flex: 1; }
.lb-type { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.lb-meta h2 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.2; }
.lb-meta p { margin: 0; font-size: 13px; color: var(--muted); }
.lb-meta code { font-family: var(--f-mono); font-size: 12px; color: var(--text-2); }
.lb-notes { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-style: italic; }
.lb-actions { display: flex; gap: 14px; margin-top: auto; padding-top: 8px; }
.lb-actions .linkish { font-size: 12.5px; }
.lb-actions .lb-danger { color: var(--bad); }
.lb-empty, .lb-status { padding: 18px; }
.lb-status { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.lb-matches { padding: 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.lb-scroll { overflow-x: auto; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lb-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 6px 10px; border-bottom: 1px solid var(--line-2); }
.lb-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lb-table code { font-family: var(--f-mono); font-size: 12.5px; }
.lb-rank, .lb-num { font-family: var(--f-mono); color: var(--muted); }
.lb-num { text-align: right; }
.lb-ref { width: 110px; min-width: 90px; }
.lb-fill { width: 64px; min-width: 48px; }
.lb-all td { padding: 6px 10px; }
.lb-right { text-align: right; }
.lb-match { display: flex; flex-direction: column; gap: 1px; }
.lb-right .lb-match { align-items: flex-end; }
.lb-match small { color: var(--faint); font-size: 12px; }
.lb-dot { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-3); vertical-align: -3px; margin-right: 8px; }
.lb-dot.empty { background: repeating-linear-gradient(45deg, var(--raise), var(--raise) 3px, transparent 3px, transparent 6px); }
.lb-dialog { gap: 12px; }
.lb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lb-hex { display: flex; align-items: center; }
.lb-dialog-color { display: flex; align-items: center; }
.lb-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 12px 0 2px; cursor: pointer; }
.lb-retired { opacity: .62; }
.lb-retired .lb-swatch { filter: saturate(.6); }
.lb-tag { color: var(--bad); }
.lb-flash { margin: 0 0 12px; padding: 10px 14px; background: var(--raise); border-left: 3px solid var(--marigold); }
.lb-offer { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--raise); border: 1px solid var(--marigold); font-size: 13px; }
.lb-offer span { flex: 1; }
.lb-sub { margin: 20px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.lb-inv { padding: 0; }
.lb-inv .lb-table { min-width: 0; }
.lb-inv-table td { padding: 4px 10px; }
.lb-inv-sw { width: 34px; min-width: 34px; }
.lb-inv-in { min-height: 32px; padding: 4px 8px; width: 100%; min-width: 70px; }
.lb-inv-bar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; margin-top: 14px; box-shadow: 0 -8px 24px -16px var(--shadow); }
.lb-missing summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.lb-st-cell { white-space: nowrap; font-size: 12.5px; }
.lb-st { font-size: 12px; font-weight: 700; color: var(--muted); }
.lb-st.new { color: var(--text); background: var(--marigold-wash, var(--raise)); padding: 2px 8px; }
.lb-st.back { color: var(--good); }
.lb-line-x { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: var(--faint); }
.lb-line-x:hover { color: var(--bad); }
.lb-paste { margin-top: 12px; }
.lb-paste summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.lb-paste textarea { width: 100%; margin: 8px 0; font-family: var(--f-mono); }
.lb-tally { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 16px; font-size: 13.5px; color: var(--muted); }
.lb-tally b { color: var(--text); font-size: 16px; }
.lb-pad { padding: 12px 16px; }
.lb-names { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; margin: 0 0 8px; }
.lb-names span { display: inline-flex; align-items: center; }
.lb-missing { margin-top: 14px; }
.lb-missing p { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; max-height: 24vh; overflow: auto; margin: 8px 0 0; }
@media (max-width: 760px) {
  .lb-toolbar { grid-template-columns: 1fr; }
  .lb-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---- Invoice Payments & Expenses (portal/orderMoney.js) ---- */
/* Chart slots: the validated categorical palette, light and dark. */
:root { --om-rev: #2a78d6; --om-exp: #eb6834; --om-labor: #1baf7a; --om-screens: #eda100; --om-paid: #e87ba4; }
:root[data-theme="dark"] { --om-rev: #3987e5; --om-exp: #d95926; --om-labor: #199e70; --om-screens: #c98500; --om-paid: #d55181; }
.om-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 0; background: var(--raise); align-self: flex-start; max-width: 100%; overflow-x: auto; }
.om-tabs a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px; border-radius: 0; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.om-tabs a:hover { color: var(--text); }
.om-tabs a[aria-current="page"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px var(--line-2), 0 0 0 1px var(--line); }
.om { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 20px; }
.om-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.om-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); }
.om-tile span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.om-tile b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.om-tile.good b { color: var(--good); } .om-tile.bad b { color: var(--bad); } .om-tile.hot b { color: var(--accent); }
.om-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.om-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.om-card-head h3 { margin: 0; font-size: 18px; }
.om-card-head > span { font-size: 14px; }
.om-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.om-chart { display: flex; flex-direction: column; gap: 14px; }
.om-bars { display: flex; flex-direction: column; gap: 12px; }
.om-bar-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 110px; gap: 12px; align-items: center; }
.om-bar-label { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.om-bar-value { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
.om-bar-track { position: relative; display: flex; gap: 2px; height: 26px; }
.om-bar-track::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: var(--rev); border-left: 1.5px dashed var(--line-3); pointer-events: none; }
.om-seg { display: block; height: 100%; min-width: 3px; transition: filter .15s; }
.om-seg:first-child { border-radius: 0; } .om-seg:last-child { border-radius: 0; } .om-seg:only-child { border-radius: 0; }
.om-seg:hover { filter: brightness(1.12); }
.om-rev { background: var(--om-rev); } .om-exp { background: var(--om-exp); } .om-labor { background: var(--om-labor); } .om-screens { background: var(--om-screens); } .om-paid { background: var(--om-paid); }
.om-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.om-legend span { display: inline-flex; align-items: center; gap: 6px; }
.om-key { width: 10px; height: 10px; border-radius: 0; display: inline-block; }
.om-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.om-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.om-list li > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.om-list small { flex-basis: 100%; font-size: 12.5px; color: var(--faint); }
/* A card payment's refunds and Refund form, under it. */
.om-list li:has(> .om-refunds) { flex-wrap: wrap; }
.om-refunds { flex-basis: 100%; margin-left: 4px; padding-left: 14px; border-left: 2px solid var(--line-2); }
.om-refunds li { padding: 6px 0; border-bottom: 0; }
.om-refunds li > form { flex: 1; padding: 6px 0; }
.om-refunds .om-form-acts { grid-column: 1 / -1; }
.om-rm { width: 32px; height: 32px; flex: none; border-radius: 0; border: 1px solid var(--line-2); background: none; color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer; }
.om-rm:hover { color: var(--bad); border-color: var(--bad); }
.om-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
.om-form label { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.om-form label em { font-style: normal; font-weight: 500; color: var(--faint); }
.om-form label.span2 { grid-column: span 2; }
.om-form input, .om-form select { font: inherit; font-size: 14.5px; font-weight: 500; width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); }
.om-form input:focus, .om-form select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.om-dollar { position: relative; display: block; }
.om-dollar i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--faint); pointer-events: none; }
.om-dollar input { padding-left: 22px; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.om-form .form-error { grid-column: 1 / -1; }
.om-form > .btn, .om-form-acts { grid-column: 1 / -1; justify-self: end; }
.om-form-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.om-rates { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px; border: 1px solid var(--line); border-radius: 0; background: var(--tint); }
.om-ledgers { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; align-items: start; }
.om-ledgers .eyebrow { margin-bottom: 8px; }
.om-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 13.5px; }
.om-table th { text-align: right; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 6px 8px; border-bottom: 1px solid var(--line-2); }
.om-table td { text-align: right; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; font-variant-numeric: tabular-nums; }
.om-table th:first-child, .om-table td:first-child { text-align: left; white-space: normal; }
.om-table .om-total td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--line-2); }
.om-records { margin-top: 4px; font-size: 12.5px; }
.om-records summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.om-records ul { margin: 6px 0 0; padding-left: 16px; color: var(--text-2); }
@media (max-width: 1000px) { .om-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .om-two, .om-ledgers { grid-template-columns: 1fr; } .om-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .om-form { grid-template-columns: 1fr 1fr; } .om-bar-row { grid-template-columns: 58px minmax(0, 1fr) 88px; gap: 8px; } .om-tile b { font-size: 18px; } }

/* Production files (staff): quotes, invoices and archived Printavo orders. */
.pf { margin-top: 18px; }
.pf .section-head h2 { font-size: 24px; }
.pf-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.pf-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--tint); min-width: 0; }
.pf-ext { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 0; background: var(--panel); border: 1px solid var(--line-2); font-family: var(--f-display); font-weight: 900; font-size: 13px; letter-spacing: .04em; color: var(--muted); }
.pf-name { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pf-name b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-name small { font-size: 12.5px; color: var(--faint); }
.pf-name .oe-bar { position: static; display: block; }
.pf-drop { margin-top: 12px; aspect-ratio: auto; min-height: 84px; }
@media (max-width: 560px) { .pf-list li { flex-wrap: wrap; } .pf-name { flex-basis: calc(100% - 80px); } }
.pf-thumb { flex: none; position: relative; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border-radius: 0; background: #f4f3f0; border: 1px solid var(--line-2); overflow: hidden; }
button.pf-thumb, a.pf-thumb { cursor: zoom-in; }
.pf-thumb img, .pf-thumb canvas { width: 100%; height: 100%; object-fit: contain; }
.pf-thumb .o-pdf-state { position: absolute; inset: auto 0 0; font-size: 9px; text-align: center; color: var(--faint); }

/* ---- Embroidery File Library (#embroidery, portal/embroidery.js) ---- */
.em-toolbar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.em-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 700; }
.em-crumbs .linkish { padding: 4px 0; font-size: 14px; }
.em-crumbs i { font-style: normal; color: var(--dim); }
.em-crumbs [aria-current] { color: var(--text); }
.em-fabric { display: inline-flex; gap: 2px; padding: 3px; border-radius: 0; border: 1px solid var(--line-2); background: var(--panel); }
.em-fabric button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 11px 0 7px; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.em-fabric button:hover { color: var(--text); }
.em-fabric button[aria-checked="true"] { background: var(--raise); color: var(--text); }
.em-fabric i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-3); }
.em-count { margin-bottom: 12px; }
.em-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 22px; }
.em-folder { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border-radius: 0; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 14px; font-weight: 600; text-align: left; transition: border-color .15s, background .15s; }
.em-folder:hover { border-color: var(--marigold); background: var(--marigold-wash); }
.em-folder svg { flex: none; color: var(--marigold); }
.em-folder span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.em-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 0; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.em-card.dst:hover { border-color: var(--line-3); box-shadow: 0 18px 40px -28px var(--shadow); }
.em-thumb { position: relative; display: block; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--raise); aspect-ratio: 16 / 11; cursor: zoom-in; overflow: hidden; }
.em-thumb canvas { display: block; width: 100%; height: 100%; transition: transform .35s var(--ease), opacity .25s; }
.em-card.dst:hover .em-thumb canvas { transform: scale(1.03); }
.em-card:not(.drawn) .em-thumb canvas { opacity: 0; }
.em-card:not(.drawn):not(.failed) .em-thumb { background: linear-gradient(100deg, var(--raise) 40%, var(--raise-2) 50%, var(--raise) 60%) 0 0 / 200% 100%; animation: em-shimmer 1.4s linear infinite; }
@keyframes em-shimmer { to { background-position: -200% 0; } }
.em-badge { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 0; background: var(--marigold); color: var(--marigold-ink); font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; }
.em-zoom { position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; border-radius: 0; background: rgba(17, 17, 19, .78); color: #f3f2ef; font-size: 12px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.em-card.drawn .em-thumb:hover .em-zoom, .em-thumb:focus-visible .em-zoom { opacity: 1; transform: none; }
.em-ext { display: grid; place-items: center; aspect-ratio: 16 / 11; border-bottom: 1px solid var(--line); background: var(--raise); color: var(--muted); font-family: var(--f-mono); font-size: 24px; font-weight: 600; letter-spacing: .06em; }
.em-meta { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; flex: 1; min-width: 0; }
.em-meta h2 { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-facts { display: flex; flex-direction: column; gap: 8px; }
.em-size { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.em-size b { font-family: var(--f-mono); font-size: 17px; font-weight: 600; color: var(--text); }
.em-size span { font-family: var(--f-mono); font-size: 12px; color: var(--faint); }
.em-size.big b { font-size: 26px; }
.em-stats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.em-stats > span:not(.em-seq) { padding: 3px 9px; border-radius: 0; background: var(--raise); font-weight: 600; }
.em-seq { display: inline-flex; margin-left: 2px; }
.em-seq i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--panel); margin-left: -4px; }
.em-seq i:first-child { margin-left: 0; }
.em-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint); }
.em-foot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-foot .btn { flex: none; }
.em-foot .btn:disabled { cursor: wait; }
.em-preview { width: min(1080px, calc(100vw - 32px)); top: 5vh; max-height: 90vh; }
.em-preview .o-modal-head h2 { overflow-wrap: anywhere; }
.em-preview-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; min-height: 0; }
.em-stage { position: relative; border-radius: 0; overflow: hidden; border: 1px solid var(--line-2); background: var(--raise); aspect-ratio: 4 / 3; }
.em-stage canvas { display: block; width: 100%; height: 100%; }
.em-stage .loading { position: absolute; inset: 0; justify-content: center; padding: 0; }
.em-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.em-side > .btn { margin-top: auto; }
.em-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.em-dl div { padding: 10px; border-radius: 0; background: var(--raise); }
.em-dl dt { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.em-dl dd { margin: 2px 0 0; font-family: var(--f-mono); font-size: 14px; font-weight: 600; }
.em-side-block { display: flex; flex-direction: column; gap: 8px; }
.em-side-block .em-fabric { display: grid; grid-template-columns: 1fr 1fr; border-radius: 0; }
.em-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.em-stops li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 0; font-size: 13px; }
.em-stops li:nth-child(odd) { background: var(--tint); }
.em-stops i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-3); flex: none; }
.em-stops span { flex: 1; }
.em-stops b { font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; color: var(--muted); }
@media (max-width: 1100px) { .em-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .em-crumbs { grid-column: 1 / -1; } }
@media (max-width: 820px) { .em-preview-body { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .em-toolbar { grid-template-columns: 1fr; } .em-fabric { flex-wrap: wrap; } }

/* ---- Client Proof Archive (#proofs, portal/proofArchive.js) ---- */
.pa-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; max-width: 900px; }
.pa-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.pa-client { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 0; border: 1px solid var(--line); background: var(--panel); color: var(--text); text-decoration: none; transition: border-color .15s, background .15s; }
.pa-client:hover, .pa-client.on { border-color: var(--marigold); background: var(--marigold-wash); color: var(--text); }
.pa-client b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-client span { font-size: 12.5px; color: var(--muted); }
.pa-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line-2); }
.pa-head h2 { margin: 2px 0 0; font-family: var(--f-display); font-size: 34px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.pa-head-tools { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.pa-head-tools .lb-field { width: min(420px, 100%); }
.pa-summary { margin-bottom: 12px; }
.pa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.pa-order { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 0; min-width: 0; }
.pa-order header { white-space: nowrap; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pa-number { font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; }
.pa-number:hover { color: var(--accent); }
.pa-order h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Each proof takes its own shape (inline aspect-ratio), so the mid-grey checkerboard shows only through transparent art (often white logos), and white and black art both show. */
.pa-proof { position: relative; display: block; padding: 0; border: 1px solid var(--line); border-radius: 0; overflow: hidden; background: repeating-conic-gradient(#b4b2ac 0 25%, #c9c7c1 0 50%) 0 0 / 16px 16px; aspect-ratio: 4 / 3; cursor: zoom-in; transition: border-color .15s; }
.pa-proof:hover { border-color: var(--marigold); }
.pa-count { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 0; background: rgba(17, 17, 19, .78); color: #f3f2ef; font-size: 11.5px; font-weight: 600; }
.pa-proof img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pa-facts { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 12.5px; color: var(--muted); }
.pa-company { margin: 0; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-company a { color: var(--muted); text-decoration: none; }
.pa-company a:hover { color: var(--accent); }
.pa-folder { margin: 0; font-family: var(--f-mono); font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-page .btn.more { display: flex; width: fit-content; margin: 16px auto 0; }
.pa-end { text-align: center; margin-top: 16px; }

/* #opportunities (portal/opportunities.js): List / Quotes / Leads /
   Customers tabs in the portal's own look. */
.opp-head { border-bottom: 0; padding-bottom: 0; }
.opp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-2); margin-top: -4px; }
.opp-tabs a { position: relative; padding: 10px 16px 12px; font-family: var(--f-display); font-weight: 800; font-size: 19px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.opp-tabs a:hover { color: var(--text); }
.opp-tabs a[aria-current="page"] { color: var(--text); }
.opp-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 4px; background: var(--marigold); }
.opp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opp-search { flex: 1 1 320px; }
.opp-select { font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 8px 12px; border-radius: 0; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); }
.opp-archive { align-self: center; }
.opp-archive em { font-style: normal; font-family: var(--f-mono); font-size: 11px; opacity: .7; margin-left: 6px; }

.opp-empty { margin: 0; padding: 26px 10px; text-align: center; font-size: 12.5px; color: var(--faint); border: 1px dashed var(--line-2); border-radius: 0; }
.opp-count { font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; min-width: 24px; text-align: center; padding: 2px 7px; border-radius: 0; background: rgba(255, 255, 255, .7); color: #405a78; }
a.opp-plain { color: inherit; text-decoration: none; font-weight: 600; }
a.opp-plain:hover { color: var(--accent); text-decoration: underline; }

/* Chips and quick actions (list rows) */
.opp-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 26px; padding: 2px 9px; border-radius: 0; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp-chip:hover { border-color: var(--line-3); color: var(--text); }
.opp-chip.empty { color: var(--faint); border-style: dashed; }
.opp-chip.today { color: var(--accent); border-color: rgba(245, 178, 27, .5); background: var(--marigold-wash); border-style: solid; }
.opp-chip.late { color: var(--bad); border-color: rgba(179, 38, 30, .3); background: var(--bad-wash); border-style: solid; }
.opp-owner { flex: none; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--ink); font-family: var(--f-display); font-weight: 800; font-size: 9.5px; margin-left: -5px; }
.opp-actions-row { display: inline-flex; align-items: center; gap: 3px; flex-wrap: nowrap; margin-left: auto; }
.opp-icon { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 0; border: 1px solid transparent; background: none; color: var(--faint); }
.opp-icon.on { color: var(--text-2); }
.opp-icon:hover { background: var(--raise); color: var(--text); }
.opp-icon em { position: absolute; top: -3px; right: -3px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 0; background: var(--text); color: var(--ink); font-style: normal; font-size: 9px; font-weight: 700; line-height: 14px; }
.opp-mini { min-height: 28px; padding: 3px 9px; border-radius: 0; border: 1px solid var(--line-2); background: none; font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.opp-mini:hover { border-color: var(--line-3); color: var(--text); background: var(--tint); }
.opp-mini.strong { background: var(--text); border-color: var(--text); color: var(--ink); }
.opp-mini.strong:hover { opacity: .88; background: var(--text); }

/* List: laid out like the Production Schedule (.sc-table), with a marigold
   header and colored Art / Items / Opportunity boxes. */
.opp-list { max-height: calc(100vh - 230px); }
.opp-list .sc-table thead th { background: var(--marigold); color: var(--marigold-ink); border-bottom-color: var(--marigold); }
.opp-list .sc-table thead .opp-sort, .opp-list .sc-table thead th[aria-sort] .opp-sort { color: inherit; font-size: 11.5px; }
/* Never narrower than the page; dragged widths can make it wider. Rows are
   shorter than the schedule's so more fit on screen. */
.opp-table { min-width: 100%; }
.opp-table td { height: 60px; }
.opp-table .sc-cellbtn { height: 60px; font-size: 12px; }
.opp-table thead th { padding: 6px 12px 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp-table thead th[data-col="owner"], .opp-table thead th[data-col="quote"], .opp-table thead th[data-col="customer"], .opp-table thead th[data-col="activity"] { text-align: left; }
.opp-table thead th[data-col="value"] { text-align: right; padding-right: 14px; }
.opp-resize { position: absolute; top: 0; right: 0; width: 9px; height: 100%; cursor: col-resize; touch-action: none; z-index: 1; }
.opp-resize::after { content: ""; position: absolute; top: 30%; bottom: 30%; right: 3px; width: 2px; border-radius: 0; background: currentColor; opacity: .22; transition: opacity .12s; }
.opp-resize:hover::after, .opp-resize.on::after { top: 6px; bottom: 6px; opacity: .9; }
.opp-table td.opp-left { text-align: left; padding: 6px 10px; }
.opp-table td.opp-money { text-align: right; padding-right: 14px; font-weight: 600; }
.opp-table td .opp-chip { max-width: 100%; }
.opp-cell-row { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; }
.opp-grow { flex: 1 1 auto; min-width: 0; }
.opp-stack { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.opp-clip { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-chip .opp-clip { display: inline; }
.opp-owner-chip small { flex: none; font-size: 11px; color: var(--muted); }
.opp-add { flex: none; border-color: var(--line-2); color: var(--text-2); font-size: 17px; font-weight: 700; line-height: 1; }
.opp-add:hover { background: var(--marigold-wash); border-color: rgba(245, 178, 27, .5); }
.opp-quote-link { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: inherit; text-decoration: none; line-height: 1.3; }
.opp-quote-link span { color: var(--muted); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
a.opp-quote-link:hover b { color: var(--accent); text-decoration: underline; }
.opp-quote-link .opp-chip { margin-top: 3px; }
.opp-quote-link b.opp-clip { max-width: 100%; }
.opp-convert fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.opp-cv-due { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opp-cv-due input[type="date"] { flex: 1 1 180px; }
.opp-sort { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.opp-sort span { opacity: .6; }
.opp-sort:hover, th[aria-sort] .opp-sort { color: var(--text); }
.opp-none { padding: 40px 28px; }

/* Calendar: open opportunities by next follow-up. Cards take the Approval
   option's color as a left edge. */
.opp-cal { display: grid; gap: 14px; }
.opp-cal-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.opp-cal-nav h2 { margin: 0 8px; font-family: var(--f-display); font-weight: 800; font-size: 22px; letter-spacing: .03em; text-transform: uppercase; }
.opp-cal-nav .muted { margin-left: auto; font-size: 12.5px; }
.opp-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: 0; overflow: hidden; background: var(--line); gap: 1px; }
.opp-cal-dow { padding: 6px 8px; background: var(--marigold); color: var(--marigold-ink); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.opp-cal-day { display: flex; flex-direction: column; gap: 4px; min-height: 150px; max-height: 360px; overflow-y: auto; padding: 6px; background: var(--panel); }
.opp-cal-day.out { background: var(--ink); }
.opp-cal-day.out .opp-cal-date { color: var(--dim); }
.opp-cal-day.past .opp-cal-date { color: var(--faint); }
.opp-cal-day.today { box-shadow: inset 0 0 0 2px var(--marigold); }
.opp-cal-day.drop { background: var(--marigold-wash); }
.opp-cal-date { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.opp-cal-date em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.opp-cal-wd { display: none; }
.opp-cal-card { display: grid; gap: 2px; min-width: 0; padding: 5px 7px 5px 9px; border: 1px solid var(--line-2); border-left: 4px solid var(--opt, var(--line-3)); border-radius: 0; background: var(--panel); font-size: 12px; line-height: 1.3; cursor: pointer; }
.opp-cal-card:hover, .opp-cal-card:focus-visible { border-color: var(--line-3); border-left-color: var(--opt, var(--text)); background: var(--tint); }
.opp-cal-card.dragging { opacity: .45; }
.opp-cal-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.opp-cal-top .opp-owner { margin-left: 0; width: 17px; height: 17px; font-size: 8.5px; }
.opp-cal-sub { display: flex; justify-content: space-between; gap: 6px; min-width: 0; color: var(--muted); font-size: 11.5px; }
.opp-cal-sub .opp-money { flex: none; font-weight: 600; color: var(--text-2); }
.opp-cal-sts { display: grid; gap: 3px; margin-top: 2px; }
.opp-cal-st { display: grid; min-width: 0; padding: 2px 6px; border-radius: 0; background: var(--opt); color: var(--opt-ink); font-size: 10.5px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-cal-st small { font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.opp-cal-st.empty { background: var(--tint); color: var(--faint); border: 1px dashed var(--line-2); }
.opp-cal-strip { border: 1px solid var(--line-2); border-radius: 0; padding: 10px 12px; background: var(--panel); }
.opp-cal-strip.late { border-color: rgba(179, 38, 30, .3); background: var(--bad-wash); }
.opp-cal-strip h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.opp-cal-strip.late h3 { color: var(--bad); }
.opp-cal-strip h3 em { font-style: normal; color: var(--muted); }
.opp-cal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; max-height: 172px; overflow-y: auto; }
@media (max-width: 720px) {
  .opp-cal-grid { grid-template-columns: 1fr; }
  .opp-cal-dow, .opp-cal-day.none, .opp-cal-day.out { display: none; }
  .opp-cal-day { min-height: 0; max-height: none; }
  .opp-cal-wd { display: inline; }
  .opp-cal-nav .muted { display: none; }
}

/* Popovers */
.opp-pop { position: fixed; z-index: 45; width: min(340px, calc(100vw - 20px)); max-height: 70vh; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 24px 60px -24px var(--shadow); }
.opp-pop-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.opp-pop-head b { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.opp-pop-list { display: flex; flex-direction: column; gap: 2px; }
.opp-pop-list .o-pick { text-decoration: none; color: var(--text); }
.opp-pop-list .o-pick.on { background: var(--marigold-wash); }
.opp-pop-form { display: flex; flex-direction: column; gap: 10px; }
.opp-pop-form input, .opp-form input[type="date"], .opp-form input[type="email"], .opp-form input[type="text"], .opp-form input[type="search"], .opp-form input[type="tel"] { font: inherit; font-size: 15px; min-height: 44px; padding: 9px 12px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); width: 100%; min-width: 0; }
.opp-pop-form textarea, .opp-form textarea { font: inherit; font-size: 14.5px; line-height: 1.45; padding: 10px 12px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); width: 100%; resize: vertical; }
.opp-pop-quick { display: flex; flex-wrap: wrap; gap: 5px; }
.opp-pop-big { margin: 0; font-size: 14px; line-height: 1.5; }
.opp-pop .row-actions { align-items: center; }
.opp-pop .seg-row { display: flex; flex-wrap: wrap; gap: 6px; }
.round.sm { width: 28px; height: 28px; border-radius: 0; border: 1px solid var(--line-2); background: none; font-size: 17px; line-height: 1; flex: none; }

/* Editor and activity log */
.opp-modal { width: min(760px, calc(100vw - 32px)); top: 4vh; max-height: 92vh; }
.opp-modal .o-modal-head { align-items: flex-start; }
.opp-form { display: flex; flex-direction: column; gap: 14px; }
.opp-form .opp-select { width: 100%; background: var(--ink-2); }
.opp-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.opp-pick { max-height: 280px; margin-top: 6px; border: 1px solid var(--line); border-radius: 0; padding: 4px; }
.opp-pick-new b { color: var(--accent); }
.opp-new-customer { padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--tint); }
.opp-chosen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; padding: 8px 12px; border-radius: 0; background: var(--marigold-wash); border: 1px solid rgba(245, 178, 27, .4); }
.opp-chosen .linkish { margin-left: auto; }
.opp-owners { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow: auto; border: 1px solid var(--line); border-radius: 0; padding: 4px; }
.opp-owner-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 0; font-size: 14px; }
.opp-owner-row.main { background: var(--marigold-wash); }
.opp-owner-row label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.opp-owner-row .muted { font-size: 12.5px; }
.opp-decorations { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.opp-quote-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 0; padding: 4px; }
.opp-quote-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto 90px 78px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 0; font-size: 13.5px; }
.opp-quote-pick:hover { background: var(--raise); }
.opp-quote-check { display: grid; grid-template-columns: 18px 64px minmax(0, 1fr); gap: 8px; align-items: center; cursor: pointer; min-width: 0; }
.opp-quote-check > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-quote-pick > .mono { text-align: right; }
.opp-links { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.opp-link-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 28px; gap: 6px; align-items: center; width: 100%; }
.opp-link-row input { font: inherit; font-size: 14px; min-height: 38px; padding: 7px 10px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); width: 100%; min-width: 0; }
.opp-outcome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-radius: 0; background: var(--tint); border: 1px solid var(--line); }
.opp-outcome.lost { background: var(--bad-wash); border-color: rgba(179, 38, 30, .25); }
.opp-outcome.won { background: var(--good-wash); border-color: var(--good-line); }
.opp-outcome p { margin: 0; flex-basis: 100%; font-size: 13.5px; color: var(--text-2); }
.opp-outcome > .muted { font-size: 13px; font-weight: 600; margin-right: auto; }
.opp-actions { justify-content: space-between; align-items: center; }
.opp-actions-left, .opp-actions-right { display: flex; gap: 8px; flex-wrap: wrap; }
.opp-history summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.opp-history ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.opp-history li { display: flex; justify-content: space-between; gap: 12px; }
.opp-log-history { border: 1px solid var(--line); border-radius: 0; padding: 12px; background: var(--tint); display: flex; flex-direction: column; gap: 8px; }
.opp-log-heading { display: flex; justify-content: space-between; font-size: 13px; }
.opp-log-history ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; }
.opp-log-history li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 0; background: var(--panel); border: 1px solid var(--line); font-size: 13.5px; }
.opp-log-history li.editing { border-color: var(--marigold); }
.opp-log-history li p { margin: 3px 0 0; }
.opp-log-actions { display: flex; gap: 10px; flex: none; align-items: flex-start; }
.linkish.danger { color: var(--bad); }
@media (max-width: 760px) {
  .opp-three { grid-template-columns: minmax(0, 1fr); }
  .opp-tabs a { font-size: 17px; padding-inline: 12px; }
  .opp-quote-pick { grid-template-columns: minmax(0, 1fr) 80px; }
  .opp-quote-pick > .muted { display: none; }
}

/* ---- Leads, Shipping Rates, Pellon Database, Inventory, Maintenance (portal/dashboards.js) ---- */
.db-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.db-toolbar > .lb-field:first-child { flex: 1 1 280px; max-width: 460px; }
.db-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.db-filters .lb-field { min-width: 150px; }
.db-summary { margin-left: auto; align-self: center; }
.db-stack { display: flex; flex-direction: column; gap: 14px; }
.db-count { margin: 0 0 12px; }
.db-scroll { overflow-x: auto; }
.db-hint { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--faint); }
.db-nowrap { white-space: nowrap; }
.db-loading-sm { padding: 14px 0; }
.db-page .pc-tabs a.pc-tab { text-decoration: none; }
.db-dialog { width: min(640px, calc(100vw - 32px)); }

/* Y / N and other two- or three-way switches */
.db-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 0; background: var(--raise); border: 1px solid var(--line); }
.db-seg button { font: inherit; font-size: 12.5px; font-weight: 700; min-width: 38px; padding: 5px 10px; border: 0; border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; }
.db-seg button:hover { color: var(--text); }
.db-seg button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.db-seg button.on.y { background: var(--good-wash); color: var(--good); box-shadow: inset 0 0 0 1px var(--good-line); }
.db-seg button.on.n { background: var(--bad-wash); color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.db-seg button:disabled { opacity: .5; cursor: wait; }
.db-seg.wide { display: flex; }
.db-seg.wide button { flex: 1; min-height: 32px; }

/* Inventory */
.db-inv-section { overflow: hidden; border-radius: 0; }
.db-inv-table th:first-child { font-family: var(--f-display); font-size: 19px; font-weight: 800; letter-spacing: .02em; color: var(--text); padding: 14px 14px 10px; }
.db-inv-table th, .db-inv-table td { padding-inline: 14px; }
.db-inv-table td:nth-child(2), .db-inv-table td:nth-child(3) { color: var(--text-2); white-space: nowrap; }
.db-inv-table th:nth-child(2), .db-inv-table th:nth-child(3) { width: 18%; vertical-align: bottom; }
.db-inv-name a { color: var(--text); font-weight: 600; text-decoration: none; }
.db-inv-name a:hover { color: var(--accent); text-decoration: underline; }
.db-inv-name a span { color: var(--faint); font-size: 12px; }
.db-inv-mark-head, .db-inv-marks { width: 120px; text-align: right; }
.db-inv-table tr.db-marked-y td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.db-inv-table tr.db-marked-n td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.db-inv-logins .db-inv-table td { white-space: nowrap; }
.db-login-cell { display: inline-flex; align-items: center; gap: 6px; }
.db-login-value { font-family: var(--f-body); font-size: 13px; color: var(--text); }

/* Pellon Database */
.db-pel-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.db-pel-image { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 10px; border: 0; border-bottom: 1px solid var(--line); background: var(--raise); cursor: zoom-in; }
.db-pel-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.db-pel-image.empty { cursor: default; background: repeating-linear-gradient(45deg, var(--raise), var(--raise) 8px, var(--tint) 8px, var(--tint) 16px); }
.db-pel-image.empty span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.db-pel-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.db-pel-invoice { font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
a.db-pel-invoice:hover { text-decoration: underline; }
.db-pel-top .pill { font-size: 11px; padding: 2px 8px; }
.lb-meta .db-pel-facts { font-size: 12.5px; }
.db-pel-card .tag { align-self: flex-start; font-size: 11.5px; padding: 2px 8px; margin-top: 4px; }
.db-proof-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-height: 300px; overflow: auto; }
.db-proof-choice { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text-2); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.db-proof-choice img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--raise); border-radius: 0; }
.db-proof-choice:hover { border-color: var(--line-3); }
.db-proof-choice.on { border-color: var(--marigold); box-shadow: 0 0 0 2px var(--marigold-wash); color: var(--text); }

/* Maintenance */
.db-mnt-table { min-width: 1100px; }
.db-mnt-table td { vertical-align: top; }
.db-mnt-table th:first-child, .db-mnt-table td:first-child { padding-left: 16px; }
.db-mnt-task b { display: block; font-weight: 650; line-height: 1.3; }
.db-mnt-task p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); max-width: 46ch; white-space: pre-line; }
.db-mnt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.db-mnt-chips:empty { display: none; }
.db-mnt-chips .tag { font-size: 11.5px; padding: 2px 8px; text-decoration: none; cursor: help; }
.db-mnt-chips a.tag { cursor: pointer; color: var(--accent); }
.db-page select.o-in.db-cell, .db-page input.o-in.db-cell { min-height: 32px; font-size: 13px; padding-block: 4px; min-width: 128px; }
.db-due-overdue input.db-due { border-color: var(--bad); color: var(--bad); background: var(--bad-wash); }
.db-due-today input.db-due { border-color: var(--marigold); background: var(--marigold-wash); }
.db-due-label { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--bad); }
.db-due-today .db-due-label { color: var(--accent); }
.db-mnt-table tr.db-due-overdue td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.db-mnt-table tr.db-due-today td:first-child { box-shadow: inset 3px 0 0 var(--marigold); }
.db-saving { opacity: .55; pointer-events: none; }
.db-mnt-last { font-size: 13px; white-space: nowrap; }
.db-mnt-last small { display: block; color: var(--faint); font-size: 12px; }
.db-mnt-actions { white-space: nowrap; text-align: right; }
.db-mnt-actions .linkish { margin-left: 10px; }
.pc-tab.db-due-tab:not(.on) { color: var(--bad); }

/* Shipping Rates */
.db-ship-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.db-ship-form { display: flex; flex-direction: column; gap: 14px; }
.db-ship-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; border-radius: 0; }
.db-ship-results { position: sticky; top: calc(var(--top-h, 72px) + 16px); }
.db-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.db-card-head h2 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.db-city { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, .8fr) minmax(0, 1fr); gap: 12px; }
.db-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 0; background: var(--tint); border: 1px solid var(--line); }
.db-box + .db-box { margin-top: 8px; }
.db-box-top { display: flex; gap: 8px; align-items: center; }
.db-box-top select { flex: 1; }
.db-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 0; overflow: hidden; background: var(--ink-2); }
.db-stepper button { width: 32px; min-height: 34px; border: 0; background: none; color: var(--text); font-size: 17px; cursor: pointer; }
.db-stepper button:hover { background: var(--raise); }
.db-page .db-stepper input.o-in { width: 54px; border: 0; border-radius: 0; min-height: 34px; }
.db-box-dims { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.db-group { display: inline-flex; align-items: center; gap: 6px; }
.db-page .db-group input.o-in { width: 64px; }
.db-group i, .db-group em { font-style: normal; font-size: 12.5px; color: var(--faint); }
.db-boxes-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.db-ship-go { width: 100%; }
.db-ship-msg { padding: 8px 0; }
.db-ship-stale { margin: 0; padding: 8px 12px; border-radius: 0; background: var(--marigold-wash); color: var(--accent); font-size: 13px; font-weight: 600; }
.db-rates-head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.db-rates { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.db-rates.stale { opacity: .5; }
.db-rate { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; }
.db-rate + .db-rate { border-top: 1px solid var(--line); }
.db-rate b { font-weight: 650; margin-right: 6px; }
.db-rate .tag { font-size: 11px; padding: 1px 7px; margin-right: 4px; }
.db-rate small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.db-rate-price { text-align: right; flex: none; }
.db-rate-price strong { font-family: var(--f-mono); font-size: 16px; }
.db-rate-price small { font-family: var(--f-mono); }
.db-ship-errors { font-size: 13px; color: var(--muted); }
.db-ship-errors summary { cursor: pointer; font-weight: 600; }
.db-ship-errors p { margin: 6px 0 0; }

/* Leads */
.db-leads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.db-lead { padding: 18px; display: flex; flex-direction: column; gap: 12px; border-radius: 0; }
.db-lead-inbox { box-shadow: inset 3px 0 0 var(--marigold); }
.db-lead-archived { opacity: .78; }
.db-lead-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.db-lead-name { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.db-lead-name h2 { margin: 0; font-size: 18px; font-weight: 700; }
.db-lead-company { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.db-lead-meta { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; }
.db-lead-meta .linkish { padding: 2px 0; }
.db-lead-contact { display: flex; flex-wrap: wrap; gap: 6px; }
.db-lead-contact a.tag { text-decoration: none; color: var(--text-2); }
.db-lead-contact a.tag:hover { border-color: var(--line-3); color: var(--text); }
.db-lead-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 14px; margin: 0; }
.db-lead-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.db-lead-facts dd { margin: 2px 0 0; font-size: 13.5px; }
.db-lead-details { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); white-space: pre-line; padding: 10px 12px; border-radius: 0; background: var(--tint); border: 1px solid var(--line); }
.db-lead-files { display: flex; flex-wrap: wrap; gap: 12px; }
.db-lead-notes textarea.o-in { min-height: 52px; }
.db-lead-actions { align-items: center; }
.db-lead-actions .note { margin-right: auto; }

@media (max-width: 980px) {
  .db-ship-grid { grid-template-columns: minmax(0, 1fr); }
  .db-ship-results { position: static; }
}
@media (max-width: 760px) {
  .db-toolbar > .lb-field:first-child { max-width: none; }
  .db-summary { margin-left: 0; }
  .db-filters .lb-field { min-width: 0; flex: 1 1 140px; }
  .db-city { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .db-city .lb-field:first-child { grid-column: 1 / -1; }
  .db-inv-table th:nth-child(2), .db-inv-table th:nth-child(3) { width: auto; }
  .db-inv-mark-head, .db-inv-marks { width: auto; }
  .db-lead-head { flex-direction: column; }
  .db-lead-meta { align-items: flex-start; text-align: left; }
}

/* ---- Staff Screen Inventory (portal/screens.js) ---- */
.si-page #sBody { display: flex; flex-direction: column; gap: 18px; }
.si-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.si-card-head h2 { margin: 0; font-family: var(--f-display); font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.si-finder { padding: 16px 18px; display: grid; grid-template-columns: minmax(240px, 420px) minmax(0, 1fr); gap: 16px; align-items: end; border-radius: 0; }
.si-finder .o-in { font-family: var(--f-mono); font-size: 15px; min-height: 42px; }
.si-found { padding: 10px 14px; border-radius: 0; background: var(--raise); font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.si-found.ok { background: var(--marigold-wash); color: var(--text); }
.si-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.si-kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; border-radius: 0; }
.si-kpi span { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.si-kpi strong { font-family: var(--f-display); font-size: 40px; font-weight: 800; line-height: 1; }
.si-kpi small { font-size: 12.5px; color: var(--muted); }
.si-kpi.warn strong { color: var(--bad); }
.si-card { padding: 18px; border-radius: 0; }
.si-mesh-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.si-page .lb-table th, .si-page .lb-table td { text-align: center; }
.si-mesh-table td:not(:first-child), .si-mesh-table th:not(:first-child) { font-family: var(--f-mono); }
.si-mesh-table .si-total td { font-weight: 700; border-top: 1px solid var(--line-2); border-bottom: 0; }
.si-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.si-live { display: flex; flex-direction: column; gap: 10px; }
.si-live-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.si-live-nums div { padding: 12px 14px; border-radius: 0; background: var(--raise); }
.si-live-nums span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.si-live-nums strong { font-family: var(--f-display); font-size: 32px; font-weight: 800; }
.si-bar { display: flex; height: 16px; border-radius: 0; overflow: hidden; background: var(--raise); gap: 2px; }
.si-bar span { display: block; min-width: 4px; }
.si-bar-empty { flex: 1; }
.si-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.si-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 0; margin-right: 6px; }
.si-mismatch { margin: 14px 0 0; padding: 10px 14px; border-radius: 0; background: var(--marigold-wash); color: var(--accent); font-size: 13px; font-weight: 600; }
.si-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.si-tool { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; border-radius: 0; }
.si-tool h3 { margin: 0; font-size: 15px; font-weight: 700; }
.si-tool h3.si-sub { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.si-scan { display: flex; gap: 8px; align-items: center; }
.si-scan .o-in { flex: 1; font-family: var(--f-mono); }
.si-scan .o-in.c { flex: 0 0 76px; }
.si-queue { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; align-items: center; }
.si-id { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 0; background: var(--raise); border: 1px solid var(--line); color: var(--text); }
.si-id button { border: 0; background: none; padding: 0 0 0 2px; color: var(--faint); font-size: 14px; line-height: 1; cursor: pointer; }
.si-id button:hover { color: var(--bad); }
.si-tool .row-actions { margin-top: auto; }
.si-msg { margin: 0; font-size: 12.5px; color: var(--good); }
.si-msg.bad { color: var(--bad); }
.si-table { min-width: 1180px; font-size: 13px; }
.si-table td { white-space: nowrap; }
.si-sort { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); border: 0; background: none; padding: 0; cursor: pointer; }
.si-sort:hover, .si-sort.on { color: var(--text); }
.si-job { font-family: var(--f-mono); font-weight: 600; color: var(--accent); text-decoration: none; }
.si-job:hover { text-decoration: underline; }
.si-status { display: inline-block; padding: 2px 9px; border-radius: 0; font-size: 11.5px; font-weight: 700; border: 1px solid var(--line-2); color: var(--text-2); }
.si-status.coated { color: var(--good); background: var(--good-wash); border-color: var(--good-line); }
.si-status.prod { color: var(--marigold-ink); background: var(--marigold); border-color: var(--marigold); }
.si-flag { display: block; font-size: 11px; font-weight: 700; color: var(--accent); }
.si-bad { color: var(--bad); font-weight: 700; }
.si-table tr.si-low td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.si-table tr.si-check:not(.si-low) td:first-child { box-shadow: inset 3px 0 0 var(--marigold); }
.si-table tr.si-hit td { background: var(--marigold-wash); }
.si-page input.o-in.si-tension { width: 76px; min-height: 30px; padding: 3px 6px; font-size: 13px; }
.si-tension.saving { opacity: .55; }
.si-tmsg { display: block; font-size: 11px; color: var(--faint); }
.si-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.si-jobcard { padding: 14px 16px; border-radius: 0; }
.si-jobcard header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.si-jobcard ul { list-style: none; margin: 0; padding: 0; }
.si-jobcard li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.si-jobcard li > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.si-jobcard .tag { font-size: 11.5px; padding: 1px 7px; }
@media (max-width: 1100px) {
  .si-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .si-mesh-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .si-finder { grid-template-columns: minmax(0, 1fr); }
  .si-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .si-tools { grid-template-columns: minmax(0, 1fr); }
  .si-kpi strong { font-size: 32px; }
}

/* Production Analytics (portal/productionAnalytics.js): the extension's
   dashboard on the Production Tracker. */
.an-body { display: flex; flex-direction: column; gap: 18px; }
.an-fresh { margin-top: 12px; }
.an-fresh .chip { white-space: normal; text-transform: none; letter-spacing: 0; font-weight: 600; }
.an-filters { padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; border-radius: 0; }
.an-filters select.o-in { min-width: 160px; }
.an-filters .seg span { font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.an-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.an-card .si-card-head { margin-bottom: 0; }
.an-info summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.an-info p { margin: 6px 0 0; font-size: 13px; color: var(--muted); max-width: 70ch; }
.an-toolbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
/* Result tabs, workflow pills and the search box share one bottom line and height. */
.an-toolbar > .seg { align-self: flex-end; }
.an-workflows { display: flex; flex-wrap: wrap; gap: 6px; }
.an-workflows .pill-opt span { min-height: 38px; }
.an-search { flex: 1 1 240px; max-width: 360px; }
.an-search .o-in { min-height: 38px; }
.an-meta { margin: 0; font-size: 13px; }
.om-table th.an-left, .om-table td.an-left { text-align: left; white-space: normal; }
.an-jobs td:first-child { white-space: nowrap; }
.an-jobs:not(.sized) td:nth-child(3) { min-width: 180px; }
.an-jobs:not(.sized) td:nth-child(4) { min-width: 120px; }
/* Catalogue tables look like Job Records (portal/jobRecords.css holds the
   shared sort mark and filter row): column lines, a resize grip on each job
   header that shows on hover, and narrowed columns wrapping, not cut off. */
.om-table.an-jobs th, .om-table.an-jobs td, .om-table.an-clients th, .om-table.an-clients td { border-right: 1px solid var(--line); }
.om-table.an-jobs th:last-child, .om-table.an-jobs td:last-child, .om-table.an-clients th:last-child, .om-table.an-clients td:last-child { border-right: 0; }
.an-jobs [data-a-job-head] th { position: relative; }
.an-jobs [data-a-job-head] th .opp-resize::after { opacity: 0; }
.an-jobs [data-a-job-head] th:hover .opp-resize::after, .an-jobs .opp-resize.on::after { top: 6px; bottom: 6px; opacity: .9; }
.an-jobs.sized { table-layout: fixed; }
.om-table.an-jobs.sized th, .om-table.an-jobs.sized td, .om-table.an-jobs.sized td:first-child { white-space: normal; overflow-wrap: anywhere; }
.an-pos { color: var(--good); } .an-neg { color: var(--bad); } .an-neutral { color: var(--muted); }
.an-flag { color: var(--accent); cursor: help; }
.an-result { text-align: right; }
.an-badge { display: inline-block; padding: 2px 9px; border-radius: 0; font-size: 12px; font-weight: 700; border: 1px solid var(--line-2); color: var(--muted); }
.an-badge.winner { color: var(--good); background: var(--good-wash); border-color: var(--good-line); }
.an-badge.loser { color: var(--bad); background: var(--bad-wash); border-color: rgba(179, 38, 30, .3); }
.an-total-row td { font-weight: 700; }
.an-dept-row td { color: var(--muted); font-size: 13px; }
.an-dept-row td:first-child, .an-dept-row td.an-left:first-of-type { padding-left: 22px; }
.an-zero-labor td { background: var(--marigold-wash); }
/* Every table on Production Analytics (and its Job Records tab) is centered. */
.an-page .om-table th, .an-page .om-table td, .an-page .om-table th.an-left, .an-page .om-table td.an-left, .an-page .om-table .an-result { text-align: center; }
.an-sort, .an-expand { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-align: inherit; }
.an-expand { font-weight: 600; color: var(--text); }
.an-jobs a, .an-clients a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) { .an-search { max-width: none; } }

/* Production overlay (portal/production.js): a proof on an invoice, large,
   with the extension's production controls around it. Staff only. Always
   dark and laid out like the extension's overlay so the press iPad looks
   the same in Printavo and the portal. The same panels on a landscape
   or portrait press screen. Wide, the proof keeps the full height between
   the columns and the job header and counts sit at the top and bottom of
   the left one; tall, the proof runs across the top half. */
body.pv-open { overflow: hidden; }
.pv { position: fixed; inset: 0; z-index: 2000; background: #0a0a0b; color: #f4f4f5; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.35; }
.pv-wrap { --pv-side: clamp(340px, 24vw, 440px); --pv-row: clamp(24px, calc((100vh - 430px) / 14 - 4px), 40px); position: absolute; inset: 0; display: grid; grid-template-columns: var(--pv-side) minmax(0, 1fr) var(--pv-side); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top stage right" "left stage right" "counts stage right"; overflow: hidden; }
.pv-top { grid-area: top; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-width: 0; padding: 10px 12px; border-right: 1px solid #3f3f46; border-bottom: 1px solid #3f3f46; background: #111; }
.pv-job { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; }
.pv-job b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; font-weight: 800; }
.pv-job small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d4d4d8; font-size: 13px; font-weight: 600; }
.pv-fact { flex: none; display: flex; align-items: baseline; gap: 6px; }
.pv-fact small { color: #d4d4d8; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pv-fact b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pv-status { flex: none; padding: 5px 10px; border: 1px solid #3f3f46; border-radius: 0; background: #18181b; color: #fbbf24; font-size: 13px; font-weight: 800; }
/* Dual decoration: one tab per department, each with the whole overlay. */
.pv-tabs { flex: none; display: flex; gap: 6px; margin-left: 8px; }
.pv-toolbar .pv-tab { height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 2px solid #71717a; border-radius: 0; background: #27272a; color: #fafafa; font: inherit; cursor: pointer; }
.pv-tab b { font-size: 14px; font-weight: 800; }
.pv-tab small { color: #d4d4d8; font-size: 12px; font-weight: 700; }
.pv-toolbar .pv-tab.on { border-color: #f59e0b; background: #f59e0b; color: #000; }
.pv-tab.on small { color: #1c1917; }
.pv-waiting { display: grid; grid-template-columns: 1fr; place-items: center; }
.pv-wait { display: grid; place-items: center; gap: 12px; padding: 24px; text-align: center; }
.pv-col { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: #0a0a0b; scrollbar-width: thin; }
.pv-left { grid-area: left; border-right: 1px solid #3f3f46; container-type: inline-size; }
.pv-right { grid-area: right; border-left: 1px solid #3f3f46; gap: 12px; container-type: inline-size; }
/* A narrow right column: the six spec columns still fit across it. */
@container (max-width: 420px) {
  .pv-right .pv-spec-grid { grid-template-columns: 20px minmax(44px, 1.2fr) 52px 36px 86px minmax(44px, 1fr); gap: 3px; }
  .pv-right .pv-spec-grid .pv-in { font-size: 13px; }
  .pv-right .pv-sh { font-size: 10px; letter-spacing: 0; }
  .pv-right .pv-tools3 .pv-btn { padding: 6px 7px; font-size: 12px; }
}
.pv-right > [data-p-region="specs"] { flex: 1 0 auto; }
.pv-label { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fafafa; }
.pv-insp { margin: 2px 0 0; }
.pv-region { display: flex; flex-direction: column; gap: 9px; }
.pv-optype { color: #d4d4d8; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

/* Buttons and boxes, in the extension's colors. */
.pv-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 11px; border: 1.5px solid transparent; border-radius: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .08); transition: filter .12s ease, transform .12s ease; }
.pv-btn:hover:not(:disabled) { filter: brightness(1.12); }
.pv-btn:active:not(:disabled) { transform: translateY(1px); }
.pv-btn:disabled { opacity: .55; cursor: not-allowed; }
.pv ::placeholder { color: #a1a1aa; opacity: 1; }
.pv-btn.primary { background: #f59e0b; color: #000; }
.pv-btn.ghost { background: #3f3f46; color: #fafafa; }
.pv-btn.green { background: #16a34a; color: #fff; }
.pv-btn.red { background: #b91c1c; color: #fff; }
.pv-btn.sm { min-height: 34px; padding: 6px 10px; font-size: 13px; }
.pv-in { width: 100%; min-width: 0; padding: 7px; border: 1.5px solid #71717a; border-radius: 0; background: #18181b; color: #f4f4f5; font: inherit; font-size: 14px; }
.pv-in:focus, .pv-mini input:focus { outline: 2px solid rgba(245, 179, 22, .7); outline-offset: 1px; box-shadow: 0 0 0 3px rgba(245, 179, 22, .12); }
.pv-in.need { border-color: #f59e0b; }
/* Every box on the overlay is centered. */
.pv .pv-in, .pv .pv-mini input { text-align: center; text-align-last: center; }
.pv input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.pv input[type=number]::-webkit-outer-spin-button, .pv input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pv-x { flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #3f3f46; border-radius: 0; background: #27272a; cursor: pointer; line-height: 0; }
.pv-x svg { width: 25px; height: 25px; overflow: visible; }
.pv-x svg line { stroke: #f4f4f5; stroke-width: 3.25; stroke-linecap: round; }
.pv-x:hover { background: #3f3f46; }
.pv-x-float { display: none; position: absolute; top: 10px; right: 10px; z-index: 3; width: 42px; height: 42px; background: rgba(15, 15, 18, .92); border-color: rgba(255, 255, 255, .24); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.pv-waiting .pv-x-float { display: grid; position: fixed; }

/* Inspection cards: dot, item, who signed. */
.pv-checks { display: flex; flex-direction: column; gap: 6px; }
.pv-check { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(110px, 150px); align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 5px 10px; border: 2px solid #52525b; border-radius: 0; background: #18181b; color: #f4f4f5; font-size: 16px; font-weight: 700; text-align: left; cursor: pointer; }
.pv-check b { font-weight: 700; overflow-wrap: anywhere; }
.pv-dot-c { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #a1a1aa; }
.pv-signer { height: 40px; padding: 6px; font-size: 14px; font-weight: 700; text-align: center; color: #d4d4d8; cursor: pointer; }
.pv-check.on { border-color: #22c55e; background: rgba(34, 197, 94, .12); }
.pv-check.on .pv-dot-c { background: #22c55e; border-color: #22c55e; }
.pv-check.on .pv-signer { color: #f4f4f5; }

/* Cards: Production Notes, Activity Log, Print Specs. */
.pv-card { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #3f3f46; border-radius: 0; background: #111; text-align: left; }
.pv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; margin: -8px -10px 0; padding: 9px 10px 8px; border-bottom: 1px solid #3f3f46; border-radius: 0; background: #151820; }
.pv-card-head > span:first-child { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #f8fafc; }
.pv-card-sub { padding-top: 6px; border-top: 1px solid #3f3f46; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fafafa; }
.pv-actions { display: flex; gap: 6px; }
.pv-notes { max-height: 22vh; overflow-y: auto; padding-top: 2px; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.pv-card:empty { display: none; }
.pv-notes.empty { padding: 2px 0; color: #d4d4d8; font-size: 14px; }
.pv-note + .pv-note { margin-top: 8px; }
.pv-note-label { color: #d4d4d8; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.pv-note p { margin: 2px 0 0; white-space: pre-wrap; }
.pv-colors { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.pv-colors span { padding: 2px 8px; border: 1px solid #3f3f46; border-radius: 0; background: #27272a; font-size: 12px; font-weight: 700; }
.pv-files { display: flex; flex-direction: column; gap: 6px; }
.pv-file { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.pv-file > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pv-file > span:last-child { display: flex; gap: 4px; flex: none; }
.pv-file .btn { min-height: 28px; padding: 4px 9px; border-radius: 0; font-size: 11px; background: #27272a; border-color: #3f3f46; color: #fafafa; }

/* Job Metrics. */
.pv-wf { gap: 8px; }
.pv-wf + .pv-wf { padding-top: 10px; border-top: 1px solid #3f3f46; }
.pv-field { display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; }
.pv-flabel { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fafafa; }
.pv-op { display: grid; gap: 8px; }
.pv-op.two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.pv-op select.pv-in { height: 44px; padding: 6px 8px; font-size: 16px; font-weight: 700; text-align: center; text-align-last: center; }
.pv-op .pv-flabel { text-align: center; }
.pv-timer { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-areas: "go time" "more more"; align-items: center; gap: 6px 12px; padding: 10px; border: 1.5px solid #52525b; border-radius: 0; background: #111; }
.pv-timer.running { border-color: #22c55e; background: rgba(34, 197, 94, .1); }
.pv-go { grid-area: go; min-height: 50px; font-size: 18px; }
.pv-time { grid-area: time; display: flex; flex-direction: column; min-width: 0; }
.pv-time small { color: #fafafa; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pv-time-more { grid-area: more; display: grid; grid-template-columns: 64px 64px auto; align-items: end; justify-content: start; gap: 8px; }
@container (min-width: 420px) {
  .pv-timer { grid-template-columns: 104px auto minmax(0, 1fr); grid-template-areas: "go time more"; padding: 8px 10px; }
  .pv-time-more { justify-content: end; }
}
.pv-mini { display: flex; flex-direction: column; align-items: stretch; gap: 2px; color: #d4d4d8; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.pv-mini input { width: 100%; height: 34px; padding: 4px; border: 1.5px solid #71717a; border-radius: 0; background: #18181b; color: #f4f4f5; font: inherit; font-size: 15px; text-align: center; }
.pv-clock { font-family: var(--f-body); font-size: 30px; font-weight: 700; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.pv-qty { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 2px; padding: 4px 6px; border-radius: 0; background: #0d0f13; text-align: left; }
.pv-qty-item { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.pv-qty-label { max-width: 40%; margin-right: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d4d4d8; font-size: 11px; font-weight: 700; }
.pv-chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 26px; padding: 1px 4px; border-radius: 0; background: #1f2937; color: #fff; font-size: 13px; font-weight: 800; line-height: 15px; }
.pv-chip b { color: #d4d4d8; font-size: 9px; font-weight: 700; line-height: 11px; }
.pv-qty-total { margin-left: auto; color: #d4d4d8; font-size: 11px; font-weight: 700; white-space: nowrap; }
.pv-qty-total b { color: #f5b316; font-size: 13px; }
.pv-qty-grand { justify-content: flex-end; padding-top: 3px; border-top: 1px solid #262b35; }
.pv-saves { display: grid; gap: 8px; }
/* Counts, pinned to the bottom edge. */
.pv-counts { grid-area: counts; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-top: 2px solid #f59e0b; border-right: 1px solid #3f3f46; background: #111; }
.pv-counts:empty { display: none; }
.pv-count-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pv-count-title { color: #fbbf24; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.pv-count-title span { margin-left: 8px; color: #fafafa; letter-spacing: .04em; }
.pv-count-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pv-count { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; padding: 6px 8px 8px; border: 2px solid var(--pv-tone); border-radius: 0; background: var(--pv-wash); cursor: text; }
.pv-count.good { --pv-tone: #22c55e; --pv-wash: rgba(34, 197, 94, .1); } .pv-count.bad { --pv-tone: #ef4444; --pv-wash: rgba(239, 68, 68, .1); }
.pv-count span { color: var(--pv-tone); font-size: 14px; font-weight: 800; line-height: 1.15; text-align: center; }
.pv-count .pv-in { height: 44px; font-size: 22px; font-weight: 800; text-align: center; }
.pv-save { width: 100%; }
.pv-msg:empty { display: none; }
.pv-ok, .pv-bad { margin: 0; font-size: 13px; font-weight: 700; }
.pv-ok { color: #22c55e; }
.pv-bad { color: #fca5a5; }

/* The proof: a PDF-viewer grey with the extension's toolbar. */
.pv-center { grid-area: stage; position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #525659; }
.pv-toolbar { display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 7px 10px; overflow-x: auto; background: rgba(24, 24, 27, .97); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.pv-toolbar button, .pv-toolbar a, .pv-toolbar select { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 34px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 0; background: #3f3f46; color: #f4f4f5; font: 800 13px/1 system-ui, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.pv-toolbar select { max-width: 280px; padding: 0 6px; }
.pv-toolbar button:hover:not(:disabled), .pv-toolbar a:hover, .pv-toolbar :focus-visible { border-color: #fbbf24; background: #52525b; outline: none; }
.pv-toolbar button:disabled { opacity: .4; cursor: not-allowed; }
.pv-toolbar button[aria-pressed="true"] { border-color: #f59e0b; background: #f59e0b; color: #000; }
.pv-tb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fafafa; font-size: 14px; font-weight: 800; }
.pv-tb-gap { flex: 1; }
.pv-stage { flex: 1; min-height: 0; overflow: auto; display: flex; padding: 12px; touch-action: none; }
.pv-toolbar .pv-x { width: 34px; height: 34px; margin-left: 4px; border-radius: 0; }
.pv-toolbar .pv-x svg { width: 18px; height: 18px; }
.pv-stage img { display: block; flex: none; margin: auto; max-width: none; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.pv-stage.zoomed { cursor: grab; } .pv-stage.zoomed img { cursor: grab; }
.pv-stage.zoomed:active, .pv-stage.zoomed:active img { cursor: grabbing; }
.pv-loading { color: #fafafa; font-size: 13px; font-weight: 700; }

/* Job Activity. */
.pv-log { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-direction: column; gap: 6px; max-height: 24vh; overflow-y: auto; color: #fafafa; font-size: 15px; line-height: 1.4; }
.pv-log li { padding: 7px 9px; border: 1px solid #3f3f46; border-radius: 0; background: #18181b; overflow-wrap: anywhere; }
.pv-fold { width: calc(100% + 20px); margin-bottom: -8px; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pv-fold[aria-expanded="false"] { border-radius: 0; }
.pv-fold[aria-expanded="true"] { margin-bottom: 0; border-bottom: 1px solid #3f3f46; }
.pv-fold b { flex: none; color: #d4d4d8; font-size: 14px; }
.pv-latest { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d4d4d8; font-size: 12px; text-align: right; }
.pv-log small { display: block; margin-bottom: 2px; color: #d4d4d8; font-size: 12px; }
.pv-chat-send { display: flex; gap: 6px; }
.pv-live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) { .pv-live { animation: pv-pulse 1.6s ease-in-out infinite; } }
@keyframes pv-pulse { 50% { opacity: .35; } }

/* Print Specs. */
.pv-spec-state { color: #d4d4d8; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pv-specs { padding-top: 2px; }
.pv-pellon { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
.pv-tick { display: flex; align-items: center; gap: 8px; color: #f4f4f5; font-size: 14px; font-weight: 800; }
.pv-tick input { width: 18px; height: 18px; accent-color: #f59e0b; }
.pv-tools3 { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; margin-bottom: 8px; }
.pv-tools3 .pv-in { height: 40px; padding: 6px 8px; font-size: 15px; }
.pv-tools3 .pv-btn { min-width: 0; min-height: 40px; padding: 6px 10px; font-size: 13px; }
.pv-spec-grid { display: grid; grid-template-columns: 22px minmax(60px, 1.3fr) 58px 44px 96px minmax(60px, 1fr); grid-template-rows: 22px; grid-auto-rows: var(--pv-row); gap: 4px; align-items: stretch; }
.pv-spec-grid select.pv-in { padding-right: 2px; }
.pv-sh { display: flex; align-items: center; justify-content: center; color: #fafafa; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; text-align: center; line-height: 1; }
.pv-step { display: flex; align-items: center; justify-content: center; color: #fbbf24; font-family: var(--f-body); font-size: 14px; font-weight: 900; }
.pv-spec-grid .pv-in { height: var(--pv-row); padding: 2px 4px; border-radius: 0; font-size: 14px; line-height: 1; text-align: center; }
.pv-add-step { width: 100%; min-height: 34px; margin-top: 6px; border: 1.5px dashed #71717a; }
.pv-house { position: fixed; z-index: 7; width: 220px; max-height: 250px; overflow-y: auto; display: flex; flex-direction: column; padding: 4px; border: 1px solid #3f3f46; border-radius: 0; background: #18181b; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.pv-house button { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border: 0; border-radius: 0; background: none; color: #f4f4f5; font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.pv-house button:hover, .pv-house button:focus-visible { background: #27272a; outline: none; }
.pv-house-note { margin: 0; padding: 8px; color: #d4d4d8; font-size: 13px; }
.pv-house i { flex: none; width: 16px; height: 16px; border: 1px solid #52525b; border-radius: 0; }
.pv-art-status { min-height: 14px; margin: -2px 0 8px; color: #d4d4d8; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.pv-art-status:empty { min-height: 0; margin: 0; }
.pv-art-status.ok { color: #22c55e; } .pv-art-status.warn { color: #fbbf24; }
/* The extension's Pick operator dialog. */
.pv-dialog-back { position: fixed; inset: 0; z-index: 5; background: rgba(0, 0, 0, .72); }
.pv-dialog { position: fixed; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 36px)); display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid #3f3f46; border-radius: 0; background: #0f0f11; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.pv-dialog h2 { margin: 0; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #f4f4f5; }
.pv-dialog p { margin: 0; color: #d4d4d8; font-size: 13px; line-height: 1.35; }
.pv-name-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.pv-name-foot { display: flex; justify-content: flex-end; gap: 8px; }
/* Setup / run time on an invoice's proofs: a strip under the proof. */
.oq-proof-wrap { position: relative; border: 1px solid var(--line-2); border-radius: 0; overflow: hidden; }
.pv-badge { display: flex; align-items: center; border-top: 1px solid var(--line-2); background: var(--panel); font-size: 12px; pointer-events: none; }
.pv-badge:empty { display: none; }
.pv-badge span { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4px 9px; }
.pv-badge span + span { border-left: 1px solid var(--line); }
.pv-badge small { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pv-badge b { font-variant-numeric: tabular-nums; }
.pv-badge .pv-live { margin: 0 8px; }
/* Production numbers on Payments & Expenses. */
.pv-live-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pv-live-list li { display: flex; align-items: center; gap: 10px; }
.pv-live-list li > div { flex: 1; min-width: 0; }
.pv-live-list small { display: block; color: var(--faint); }
.pv-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.pv-dot.on { background: var(--good); }
.pv-scroll { overflow-x: auto; }
.pv-bar { display: flex; gap: 2px; height: 8px; margin-top: 6px; max-width: 220px; }
.pv-seg { display: inline-block; height: 100%; min-width: 2px; border-radius: 0; }
.pv-seg.setup { background: var(--om-rev); } .pv-seg.run { background: var(--om-labor); }
.pv-key { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pv-key .pv-seg { width: 10px; height: 10px; }
/* A tall press screen: the proof across the top half, the two columns
   under it, the counts side by side along the bottom. */
@media (max-aspect-ratio: 1/1) {
  .pv-wrap { --pv-row: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "top top" "stage stage" "left right" "counts counts"; }
  .pv-top { flex-wrap: nowrap; border-right: 0; }
  .pv-job { flex-basis: auto; }
  .pv-center { border-bottom: 1px solid #3f3f46; }
  .pv-counts { border-right: 0; }
}
/* A short landscape screen (a laptop, an iPad): everything still fits
   without scrolling, a little tighter, with the counts side by side. */
@media (min-aspect-ratio: 1/1) and (max-height: 900px) {
  .pv-col { gap: 5px; padding: 6px 12px; }
  .pv-region, .pv-wf { gap: 5px; }
  .pv-top { gap: 4px 14px; padding: 4px 12px; }
  .pv-job b { font-size: 17px; } .pv-fact b { font-size: 16px; }
  .pv-check { min-height: 36px; padding: 2px 8px; font-size: 15px; }
  .pv-dot-c { width: 18px; height: 18px; }
  .pv-signer { height: 32px; }
  .pv-op select.pv-in { height: 38px; }
  .pv-timer { grid-template-columns: 88px minmax(0, 1fr); gap: 4px 10px; padding: 6px 8px; }
  .pv-go { min-height: 42px; font-size: 16px; }
  .pv-clock { font-size: 24px; }
  .pv-mini { font-size: 10px; }
  .pv-mini input { height: 30px; }
  .pv-time-more { grid-template-columns: 52px 52px auto; gap: 6px; }
  .pv-btn.sm { min-height: 30px; padding: 4px 8px; }
  .pv-counts { gap: 6px; padding: 8px 12px; }
  .pv-count { padding: 4px 6px 6px; }
  .pv-count .pv-in { height: 36px; font-size: 18px; }
}
/* A narrow screen: one column that scrolls, counts still on the bottom. */
@media (max-width: 760px) {
  .pv-wrap { display: flex; flex-direction: column; overflow-y: auto; }
  .pv-top { flex-wrap: wrap; }
  .pv-center { flex: none; height: 60vh; }
  .pv-col { overflow: visible; border: 0; }
  .pv-counts { position: sticky; bottom: 0; z-index: 2; }
}

/* ---- Tasks (portal/tasks.js) ----
   My tasks first, then All shop tasks grouped by person. */
.side-badge { margin-left: auto; min-width: 20px; padding: 2px 6px; border-radius: 0; background: var(--marigold-wash); color: var(--accent); font-family: var(--f-mono); font-size: 10.5px; line-height: 1.2; font-style: normal; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.side-badge.due { background: var(--bad-wash); color: var(--bad); }
.tk-root { max-width: 1100px; }
.tk-section { display: flex; flex-direction: column; gap: 14px; }
.tk-section + .tk-section { margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.tk-section-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-section-head h2 { font-family: var(--f-display); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.tk-section-head .opp-select { margin-left: auto; }
.tk-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tk-group h3 em { font-style: normal; font-family: var(--f-mono); font-size: 11px; opacity: .7; }
.tk-group h3 .opp-owner { margin-left: 0; }
.tk-group.late h3 { color: var(--bad); }
.tk-group.today h3 { color: var(--accent); }
.tk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 0; background: var(--panel); }
.tk-row:first-child { border-radius: 0; }
.tk-row:last-child { border-radius: 0; }
.tk-row:only-child { border-radius: 0; }
.tk-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; transition: background .12s; }
.tk-row + .tk-row { border-top: 1px solid var(--line); }
.tk-row:hover { background: var(--tint); }
.tk-row:focus-visible { outline: 2px solid var(--marigold); outline-offset: -2px; }
.tk-row.high { box-shadow: inset 3px 0 0 var(--bad); }
.tk-check { flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-3); background: none; color: transparent; transition: background .15s, border-color .15s, color .15s; }
.tk-check svg { display: block; }
.tk-check:hover { border-color: var(--good); color: var(--good); }
.tk-check[aria-pressed="true"] { background: var(--good); border-color: var(--good); color: #fff; }
.tk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-main b { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.tk-row.done .tk-main b { color: var(--faint); text-decoration: line-through; }
.tk-sub { font-size: 12.5px; color: var(--muted); }
.tk-when { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-due-at { display: flex; gap: 6px; }
.tk-due-at input[type="date"] { flex: 1 1 auto; min-width: 0; }
.tk-due-at input[type="time"] { flex: 0 1 120px; min-width: 0; }
.tk-link { color: var(--text-2); font-weight: 600; text-decoration: none; }
.tk-link:hover { color: var(--accent); text-decoration: underline; }
.tk-meta { flex: none; display: flex; align-items: center; gap: 5px; }
.tk-repeat { color: var(--muted); }
.tk-made { margin: 0; }
.tk-pick { overflow-y: auto; }
.tk-pick .note { margin: 6px 8px; }
.tk-linked { display: flex; flex-direction: column; gap: 10px; }
.tk-linked-head { display: flex; align-items: center; gap: 8px; }
.tk-linked .tk-row { flex-wrap: wrap; }
.tk-linked .tk-meta { margin-left: 36px; flex-wrap: wrap; }
/* Open tasks on an order: a red count on the Tasks tab's corner. */
/* (Inside the corner: the tab bar scrolls sideways, so it clips overflow.) */
.om-tabs a:has(.om-tab-count) { position: relative; }
.om-tabs a:has(.om-tab-count:not([hidden])) { padding-right: 28px; }
.om-tab-count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.om-tab-count[hidden] { display: none; }
/* On the order's Tasks tab the card is full width: one line per task. */
@media (min-width: 720px) {
  .om-tasks .tk-linked .tk-row { flex-wrap: nowrap; }
  .om-tasks .tk-linked .tk-meta { margin-left: 0; flex-wrap: nowrap; }
}
#taskModal .o-modal-back { z-index: 60; }
#taskModal .o-modal { z-index: 61; }
@media (max-width: 640px) { .tk-row { flex-wrap: wrap; } .tk-meta { width: 100%; padding-left: 36px; } }


/* Task automations (portal/taskAutomations.js): the Automations tab of Tasks.
   Each rule is one IF field = value → THEN who · task → DONE field = value line. */
.au-list { display: flex; flex-direction: column; gap: 24px; }
.au-group { display: flex; flex-direction: column; gap: 8px; }
.au-group h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.au-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.au-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); }
.au-row:hover { border-color: var(--line-3); }
.au-row.sub { margin-left: 32px; position: relative; }
.au-row.sub::before { content: ""; position: absolute; left: -20px; top: -10px; bottom: 50%; width: 14px; border-left: 2px solid var(--line-2); border-bottom: 2px solid var(--line-2); border-bottom-left-radius: 8px; }
.au-row.off .au-flow { opacity: .45; }
.au-row.flash { animation: au-flash 1.2s ease; }
@keyframes au-flash { 0%, 40% { background: var(--marigold-wash); } 100% { background: var(--panel); } }
.au-flow { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; cursor: pointer; }
.au-flow:focus-visible { outline-offset: 4px; }
.au-kw { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--faint); min-width: 1ch; }
.au-seg { display: inline-flex; border-radius: 0; overflow: hidden; border: 1.5px solid var(--marigold); font-size: 13.5px; font-weight: 600; max-width: 100%; }
.au-seg > span { padding: 2px 8px; overflow-wrap: anywhere; }
.au-seg .au-f { background: var(--marigold-wash); color: var(--accent); }
.au-seg.done { border-color: var(--line-3); }
.au-seg.done .au-f { background: var(--raise); color: var(--muted); }
.au-who { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; border-radius: 0; background: var(--raise); font-size: 13.5px; font-weight: 600; }
.au-av { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--ink); font-size: 9.5px; font-weight: 800; }
.au-av.role { background: transparent; border: 1.5px dashed var(--line-3); }
.au-title { font-size: 13.5px; overflow-wrap: anywhere; }
.au-title code { font-family: var(--f-mono); font-size: 12px; color: var(--accent); }
.au-high { font-size: 11px; font-weight: 700; color: var(--bad); }
.au-arrow { flex: none; color: var(--faint); }
.au-jump { border: 0; background: none; padding: 0 4px; color: var(--accent); font-size: 15px; font-weight: 700; cursor: pointer; }
.au-switch { flex: none; width: 36px; height: 21px; border-radius: 999px; border: 0; background: var(--line-3); position: relative; padding: 0; cursor: pointer; }
.au-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--panel); transition: transform .15s; }
.au-switch[aria-checked="true"] { background: var(--good); }
.au-switch[aria-checked="true"]::after { transform: translateX(15px); }
.au-switch:disabled { cursor: default; opacity: .6; }
.au-error { flex-basis: 100%; margin: 0; padding: 6px 10px; border-radius: 0; background: var(--bad-wash); color: var(--bad); font-size: 12.5px; }
.au-idea { border-style: dashed; background: var(--tint); }
.au-suggested { padding-top: 20px; border-top: 1px solid var(--line); }
.o-modal.au-modal { width: min(860px, calc(100vw - 32px)); }
.au-name-row { display: flex; align-items: flex-end; gap: 16px; }
.au-name-row .field { flex: 1; }
.au-on { flex: none; }
.au-lines { display: flex; flex-direction: column; gap: 12px; }
.au-line { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; }
.au-line > .au-kw { font-size: 12px; }
.au-slots { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; min-width: 0; }
.au-slots .field { flex: 0 1 auto; gap: 3px; min-width: 0; }
.au-slots .field label { font-size: 11px; font-weight: 600; color: var(--faint); }
.au-slots .opp-select { width: auto; min-height: 38px; padding: 6px 10px; font-size: 13.5px; max-width: 100%; }
.au-slots .au-trigger { max-width: 280px; }
.au-help { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-bottom: 8px; border-radius: 50%; border: 1.5px solid var(--line-3); color: var(--muted); font-size: 12px; font-weight: 700; cursor: help; }
.au-step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.au-step { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.au-step-title { flex: 1 1 240px; min-width: 0; min-height: 38px; padding: 6px 10px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; }
.au-step textarea { flex: 1 1 100%; font-size: 13px; min-height: 38px; }
.au-step-tools { display: inline-flex; gap: 2px; }
.au-step-tools .opp-icon { font-size: 15px; color: var(--text-2); }
.au-step-tools .opp-icon:disabled { opacity: .3; }
.au-add { border: 1px dashed var(--line-3); background: none; border-radius: 0; padding: 7px 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.au-fills { margin: 0; line-height: 1.9; }
.au-fills code { padding: 1px 6px; border-radius: 0; background: var(--raise); font-size: 11.5px; }
.au-test { padding: 12px 14px; border-radius: 0; border: 1px dashed var(--line-3); font-size: 13.5px; }
.au-test p { margin: 0 0 6px; }
.au-test ol { margin: 0 0 6px; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.au-ok { margin: 0; color: var(--good); font-weight: 600; }
#autoModal .o-modal-back { z-index: 60; }
#autoModal .o-modal { z-index: 61; }
@media (max-width: 640px) {
  .au-name-row { flex-direction: column; align-items: stretch; }
  .au-row.sub { margin-left: 18px; }
  .au-row.sub::before { left: -13px; width: 9px; }
  .au-line { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .au-row.flash { animation: none; } .au-switch::after { transition: none; } }
.au-modal input[type="number"], .au-modal input[type="time"], .au-start input[type="text"] { font: inherit; font-size: 15px; min-height: 38px; padding: 6px 10px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); width: 100%; min-width: 0; }
.au-slots input[type="number"] { width: 90px; }
.au-slots input[type="text"]:not(.au-step-title) { min-height: 38px; padding: 6px 10px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); font: inherit; font-size: 14px; }

/* Messages tab (portal/orderMail.js): customer email from your own Gmail. */
.ml { display: flex; flex-direction: column; gap: 16px; }
.ml-connect { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ml-connect h3 { margin: 0 0 4px; font-size: 18px; }
.ml-connect p { margin: 0; max-width: 60ch; color: var(--text-2); }
.ml-from { margin: 0; }
.ml-sent { margin: 0; padding: 10px 14px; border-radius: 0; background: var(--raise); color: var(--good); font-weight: 600; }
.ml-compose, .ml-thread { display: flex; flex-direction: column; gap: 14px; }
.ml-form { display: flex; flex-direction: column; gap: 12px; }
.ml-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.ml-form input:not([type="checkbox"]), .ml-form select, .ml-form textarea { font: inherit; font-size: 14.5px; font-weight: 500; width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); }
.ml-form textarea { resize: vertical; line-height: 1.5; }
.ml-form input:focus, .ml-form select:focus, .ml-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.ml-cc { align-self: flex-start; }
.ml-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.ml-chips .tag { cursor: pointer; border: 0; font: inherit; font-size: 12.5px; }
.ml-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; padding: 0; border: 0; }
.ml-attach legend { width: 100%; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.ml-attach label { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text); }
.ml-attach label.btn { cursor: pointer; }
.ml-attach small, .ml-files small { color: var(--faint); }
.ml-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ml-files li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 0; background: var(--raise); font-size: 13.5px; }
.ml-msg { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.ml-msg-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ml-msg-head small, .ml-msg-to { color: var(--muted); font-size: 13px; }
.ml-msg-body { margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.ml-msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ml-thread .note { margin: 0; }
.ml-templates summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; }
.ml-templates summary::-webkit-details-marker { display: none; }
.ml-templates summary h3 { margin: 0; font-size: 18px; }
.ml-templates[open] summary { margin-bottom: 12px; }
.ml-tpl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ml-tpl-row small { display: block; color: var(--muted); font-size: 13px; }
.ml-msg.in { margin: 0 -12px; padding: 12px; border-top-color: transparent; border-radius: 0; background: var(--raise); }
.ml-msg-files button.tag { cursor: pointer; border: 0; font: inherit; font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }
.ml-reply { padding-top: 12px; border-top: 1px solid var(--line); }
.ml-customer { margin-bottom: 20px; }
.ml-cust { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ml-cust a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.ml-cust a:hover b { color: var(--accent); }
.ml-cust small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }

/* Chat panel (portal/chat.js): your Google Chat in the corner, staff only. */
.chat-fab { position: fixed; z-index: 30; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; display: grid; place-items: center; border: 0; border-radius: 0; background: #f5b21b; color: #17140c; cursor: pointer; box-shadow: 0 12px 30px -12px var(--shadow), 0 2px 6px rgba(0, 0, 0, .14); transition: transform .15s ease; }
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.chat-fab-dot { position: absolute; top: -4px; right: -4px; min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: 0; background: #d93025; color: #fff; border: 2px solid var(--ink); font: 700 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif; font-style: normal; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.chat-panel { position: fixed; z-index: 31; right: 20px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: 384px; height: min(580px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 0; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); box-shadow: 0 30px 70px -24px var(--shadow), 0 4px 14px rgba(0, 0, 0, .1); animation: chat-in .16s ease both; }
@keyframes chat-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.chat-head { display: flex; align-items: center; gap: 6px; min-height: 54px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); background: var(--raise); box-shadow: inset 0 3px 0 #f5b21b; }
.chat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.chat-icon-btn { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; }
.chat-icon-btn:hover { background: var(--panel); color: var(--text); }
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }
.chat-error { margin: 8px 14px; color: var(--bad); font-size: 13.5px; }
.chat-connect { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px; text-align: center; }
.chat-connect h3 { margin: 4px 0 0; font-size: 18px; }
.chat-connect p { margin: 0 0 6px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.chat-connect-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 0; background: #f5b21b; color: #17140c; }
/* Chats | Announcements */
.chat-tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 8px 10px 2px; padding: 3px; border-radius: 0; background: var(--raise); }
.chat-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; border: 0; border-radius: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.chat-tabs button:hover { color: var(--text); }
.chat-tabs button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.chat-tab-dot { min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 0; background: #d93025; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; }
.chat-ann { flex: 1; overflow-y: auto; padding: 10px; }
.chat-ann .ann-pane-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.chat-ann .ann-list { gap: 10px; }
.chat-ann .ann-card { padding: 12px 14px; gap: 8px; }
.chat-ann .ann-card h2 { font-size: 16px; }
.chat-ann .ann-body { font-size: 13.5px; line-height: 1.5; }
.chat-ann .ann-editor { padding: 12px 14px; margin-bottom: 10px; }
.chat-ann .ann-editor textarea, .chat-ann .ann-editor input[type="text"] { width: 100%; }
.chat-ann .opp-empty, .chat-ann .loading { padding: 24px 8px; text-align: center; color: var(--muted); font-size: 14px; }
.chat-list { flex: 1; overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
.chat-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.chat-row:hover { background: var(--raise); }
.chat-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-row-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500; }
.chat-row.unread .chat-row-text b { font-weight: 700; }
.chat-row-text small { color: var(--faint); font-size: 12.5px; }
.chat-avatar { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--raise-2); color: var(--text-2); font-size: 13px; font-weight: 700; }
.chat-avatar.space, .chat-avatar.group { border-radius: 0; }
.chat-avatar { position: relative; }
.chat-face { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--raise-2); color: var(--text-2); font-weight: 700; }
.chat-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chat-face.solo { width: 100%; height: 100%; }
/* Group chats: one face fills it, two overlap corner to corner, three cluster. */
.chat-avatar.faces { background: none; border-radius: 0; }
.chat-avatar.faces .chat-face { position: absolute; font-size: 9px; box-shadow: 0 0 0 2px var(--panel); }
.chat-avatar.n1 .chat-face { inset: 0; font-size: 13px; box-shadow: none; }
.chat-avatar.n2 .chat-face { width: 24px; height: 24px; }
.chat-avatar.n2 .chat-face:nth-child(1) { left: 0; top: 0; }
.chat-avatar.n2 .chat-face:nth-child(2) { right: 0; bottom: 0; }
.chat-avatar.n3 .chat-face { width: 20px; height: 20px; }
.chat-avatar.n3 .chat-face:nth-child(1) { left: 8px; top: 0; }
.chat-avatar.n3 .chat-face:nth-child(2) { left: 0; bottom: 0; }
.chat-avatar.n3 .chat-face:nth-child(3) { right: 0; bottom: 0; }
.chat-count { flex: none; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 0; background: #d93025; color: #fff; font-size: 12px; font-weight: 700; font-style: normal; line-height: 1; }
.chat-messages { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.chat-msg { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: 86%; margin-top: 8px; }
.chat-msg:not(.mine) { padding-left: 36px; }
.chat-msg-pic { position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--raise-2); color: var(--text-2); font-size: 11px; font-weight: 700; }
.chat-msg-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chat-msg.grouped { margin-top: 2px; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg-head { display: flex; gap: 8px; align-items: baseline; margin: 0 4px 3px; font-size: 12.5px; }
.chat-msg-head small { color: var(--faint); }
.chat-bubble { padding: 8px 12px; border-radius: 0; background: var(--raise); font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.mine .chat-bubble { background: #0a84ff; color: #fff; border-bottom-right-radius: 5px; }
.chat-msg:not(.mine) .chat-bubble { border-bottom-left-radius: 5px; }
.chat-msg.mine .chat-bubble a { color: #fff; }
.chat-msg.mine .chat-bubble code, .chat-msg.mine .chat-bubble pre { background: rgba(255, 255, 255, .18); }
.chat-msg.reply .chat-bubble { border-left: 3px solid var(--line-3); }
.chat-in-thread { margin: 0 4px 2px; color: var(--faint); font-size: 11.5px; }
.chat-files { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 12.5px; opacity: .85; }
.chat-muted { opacity: .7; }
.chat-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 0; background: var(--panel); color: var(--accent); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.chat-msg.mine .chat-chip { background: rgba(255, 255, 255, .9); color: #0a64c8; }
.chat-reply-btn { display: inline-flex; align-items: center; gap: 4px; margin: 2px 4px 0; padding: 0; border: 0; background: none; color: var(--faint); font: inherit; font-size: 12px; cursor: pointer; opacity: 0; }
.chat-msg:hover .chat-reply-btn, .chat-reply-btn:focus-visible { opacity: 1; }
@media (hover: none) { .chat-reply-btn { opacity: 1; } }
.chat-compose { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.chat-compose .chat-error { margin: 0; }
.chat-replying { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.chat-compose-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-compose textarea { flex: 1; min-height: 40px; max-height: 140px; resize: none; padding: 9px 12px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.4; }
.chat-compose textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.chat-send { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 0; background: #f5b21b; color: #17140c; cursor: pointer; }
.chat-send:disabled { opacity: .5; cursor: default; }
@media (max-width: 520px) {
  .chat-panel { right: 0; left: 0; bottom: 0; width: auto; height: 100dvh; border-radius: 0; border: 0; }
  .chat:has(.chat-panel) .chat-fab { display: none; }
  .chat-head { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
}
@media print { .chat { display: none; } }
/* Chat: previews, history, search (portal/chat.js). */
.chat-panel { position: fixed; }
.chat-files { opacity: 1; gap: 6px; }
.chat-img { display: block; width: 220px; max-width: 100%; min-height: 120px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 0; background: var(--raise) linear-gradient(90deg, transparent, var(--tint), transparent) 0 0 / 200% 100%; cursor: zoom-in; animation: chat-shimmer 1.2s linear infinite; }
.chat-img.ready { min-height: 0; animation: none; background: var(--raise); }
.chat-img img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; }
.chat-img:not(.ready) img { visibility: hidden; height: 0; }
.chat-img.failed { min-height: 0; animation: none; }
@keyframes chat-shimmer { to { background-position: -200% 0; } }
.chat-file { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 0; background: var(--raise); color: var(--text); font-size: 13px; text-decoration: none; }
.chat-file:hover { color: var(--accent); }
.chat-msg.mine .chat-files { align-items: flex-end; }
.chat-more { align-self: center; margin: 4px 0 8px; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.chat-more:disabled { cursor: default; opacity: .7; }
.chat-start { align-self: center; margin: 4px 0 8px; color: var(--faint); font-size: 12px; }
.chat-earlier { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--raise); font-size: 12.5px; color: var(--text-2); }
.chat-msg.hit .chat-bubble { box-shadow: 0 0 0 2px var(--accent); }
.chat-icon-btn.on { background: var(--panel); color: var(--text); }
.chat-search { display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.chat-search input { flex: 1; min-width: 0; min-height: 36px; padding: 6px 10px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); font: inherit; font-size: 14px; }
.chat-search input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.chat-search-body { padding: 6px; }
.chat-results { margin: 0; padding: 0; list-style: none; }
.chat-result { width: 100%; display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.chat-result:hover { background: var(--raise); }
.chat-result-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.chat-result-head small { color: var(--faint); }
.chat-result-text { font-size: 13.5px; line-height: 1.4; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.chat-result mark { background: rgba(245, 178, 27, .35); color: inherit; border-radius: 0; padding: 0 1px; }
.chat-search-foot { margin: 8px 10px; color: var(--muted); font-size: 12.5px; }
.chat-lightbox { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: rgba(10, 9, 7, .9); cursor: zoom-out; animation: fadein .15s ease both; }
.chat-lightbox img { max-width: min(92vw, 1400px); max-height: calc(100vh - 110px); object-fit: contain; border-radius: 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); cursor: default; }
.chat-lightbox-bar { display: flex; gap: 8px; }
.chat-lightbox-bar .btn { background: #fff; color: #17140c; border-color: transparent; }
.chat-lightbox-bar .btn:first-child { background: #f5b21b; }
/* Chat: formatting, emoji, reactions, files (portal/chat.js). */
.chat-bubble code { padding: 1px 5px; border-radius: 0; background: rgba(0, 0, 0, .08); font: 12.5px/1.4 var(--f-body); }
.chat-bubble pre { margin: 4px 0; padding: 8px 10px; border-radius: 0; background: rgba(0, 0, 0, .08); white-space: pre-wrap; font: 12.5px/1.45 var(--f-body); }
/* React / Reply float over the message on hover so they take no line of their own. */
.chat-msg-tools { position: absolute; z-index: 2; top: -10px; right: 0; display: none; gap: 10px; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); box-shadow: 0 6px 16px -10px var(--shadow); }
.chat-msg:hover .chat-msg-tools, .chat-msg:focus-within .chat-msg-tools { display: flex; }
.chat-msg-tools .chat-reply-btn { margin: 0; opacity: 1; }
@media (hover: none) { .chat-msg-tools { position: static; display: flex; padding: 0; border: 0; background: none; box-shadow: none; } }
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 2px 0; }
.chat-reaction { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.chat-reaction b { font-size: 12px; font-weight: 700; color: var(--text-2); }
.chat-reaction:hover { border-color: var(--accent); }
.chat-emoji { position: relative; z-index: 3; width: 100%; max-width: 300px; margin-top: 6px; padding: 8px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); box-shadow: 0 12px 30px -12px var(--shadow); }
.chat-compose .chat-emoji { max-width: none; margin: 0; }
.chat-emoji-quick { display: flex; gap: 2px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.chat-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 168px; overflow-y: auto; }
.chat-emoji button { height: 32px; border: 0; border-radius: 0; background: transparent; font-size: 19px; line-height: 1; cursor: pointer; }
.chat-emoji button:hover { background: var(--raise); }
.chat-tools { display: flex; align-items: center; gap: 2px; }
.chat-tools button, .chat-attach { min-width: 30px; height: 28px; display: inline-grid; place-items: center; padding: 0 6px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.chat-tools button:hover, .chat-attach:hover, .chat-tools button[aria-expanded="true"] { background: var(--raise); color: var(--text); }
.chat-tools code { font-size: 11.5px; }
.chat-tools-gap { flex: 1; }
.chat-pending { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chat-pending li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 0; background: var(--raise); font-size: 12.5px; max-width: 100%; }
.chat-pending small { color: var(--faint); }
.chat-pending button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.chat-pending button:hover { background: var(--panel); color: var(--text); }
button.chat-file { border: 0; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
button.chat-file:disabled { opacity: .6; cursor: progress; }
.chat-panel.dropping { outline: 3px dashed var(--accent); outline-offset: -6px; }

/* ---- Client view of a quote (portal/clientQuote.js) ----
   The preview banner over the customer link page (.pq-*, below). */
.cq-top { display: flex; flex-direction: column; gap: 18px; padding-top: 24px; }
.cq-banner { border: 1px dashed var(--line-3); border-radius: 0; padding: 10px 14px; font-size: 13.5px; color: var(--text-2); }
.cq-banner .linkish { padding: 0 0 0 6px; }

/* ---- Opportunities, cleaner (portal/opportunities.js) ----
   A quiet table: plain header, row lines only, soft status pills; a
   compact toolbar; status menus with a dot per option; the Dropdown
   options editor. Overrides the schedule-style table above. */
.opp-root .sh-head p { font-size: 13.5px; }
.opp-bar { gap: 8px; }
.opp-bar .opp-search { flex: 1 1 280px; }
.opp-bar .sh-search input { min-height: 40px; }
.opp-select.opp-filter { appearance: none; -webkit-appearance: none; min-height: 40px; padding: 8px 32px 8px 12px; border-radius: 0; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center; cursor: pointer; }
.opp-select.opp-filter:hover { border-color: var(--line-3); }
.opp-select.opp-filter.on { border-color: var(--text); color: var(--text); }
.opp-tool { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 13px; border-radius: 0; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.opp-tool:hover { border-color: var(--line-3); color: var(--text); }
.opp-bar .opp-archive { margin-left: auto; }
.opp-bar .search-scope button { min-height: 32px; padding: 5px 14px; font-size: 13px; }

.opp-list { border: 1px solid var(--line-2); border-radius: 0; box-shadow: none; }
.opp-list .sc-table thead th { height: 40px; background: var(--panel); color: var(--faint); border-bottom: 1px solid var(--line-2); font-size: 10.5px; letter-spacing: .08em; }
.opp-list .sc-table thead .opp-sort, .opp-list .sc-table thead th[aria-sort] .opp-sort { font-size: 10.5px; color: inherit; }
.opp-list .sc-table thead th[aria-sort] { color: var(--text); }
.opp-list .opp-sort span { opacity: .45; }
.opp-list .sc-table thead th[aria-sort] .opp-sort span { opacity: 1; }
.opp-table th, .opp-table td { border-right: 0; }
.opp-table td { height: 58px; border-bottom-color: var(--line); }
.opp-table .sc-row:hover td { background: color-mix(in srgb, var(--panel) 97%, var(--text)); }
.opp-table .sc-row { cursor: pointer; }
.opp-resize::after { opacity: 0; }
.opp-table thead th:hover .opp-resize::after { opacity: .3; }

/* Chips read as text until hovered. */
.opp-table .opp-chip { border-color: transparent; background: none; padding: 2px 6px; font-weight: 500; color: var(--text-2); }
.opp-table .opp-chip:hover { border-color: var(--line-2); background: var(--panel); }
.opp-table .opp-chip.empty { color: var(--dim); border-color: transparent; }
.opp-table .opp-chip.empty:hover { color: var(--muted); border-color: var(--line-2); border-style: dashed; }
.opp-table .opp-chip.late { color: var(--bad); background: var(--bad-wash); }
.opp-table .opp-chip.today { color: var(--accent); background: var(--marigold-wash); }
.opp-table .opp-owner-chip { gap: 7px; padding-left: 2px; font-weight: 600; color: var(--text); }
.opp-table .opp-owner { width: 24px; height: 24px; margin-left: 0; font-size: 10px; background: var(--raise-2); color: var(--text); }
.opp-table .opp-icon { width: 26px; height: 26px; color: var(--dim); }
.opp-table .opp-icon.on { color: var(--muted); }
.opp-table .opp-icon:hover { color: var(--text); }
.opp-table .opp-add { border: 1px solid var(--line-2); width: 22px; height: 22px; border-radius: 0; font-size: 14px; color: var(--muted); }

/* One typeface at two sizes: 13px for what a cell says, 12px muted under
   it. Numbers line up (tabular), no monospace. */
.opp-table { font-size: 13px; }
.opp-table .opp-num { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.opp-table td.opp-money { color: var(--text); }
.opp-table .opp-quote-link b, .opp-table .opp-stack b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.opp-table .opp-quote-link span, .opp-table .opp-stack small { font-size: 12px; color: var(--muted); }
.opp-table .opp-chip { font-size: 13px; }
.opp-table .opp-owner-chip { font-size: 13px; }
.opp-table .opp-owner { font-family: var(--f-body); font-size: 10.5px; font-weight: 600; }

/* Art, Items, Approval and Opportunity: the whole box filled with the
   option color, like the schedule; a thin gap keeps neighbors apart. */
.opp-table td.opp-st-cell { padding: 0; border-right: 2px solid var(--panel); }
.opp-table td.opp-st-cell:last-child { border-right: 0; }
.opp-table .opp-st { width: 100%; height: 58px; margin: 0; padding: 0 10px; font-size: 13px; font-weight: 600; }
.opp-table .opp-st span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-table .opp-st.empty { color: var(--dim); font-weight: 500; }
.opp-table .sc-row:hover td.sc-filled { background: var(--opt); filter: brightness(.96); }

/* Popovers and status menus. */
.opp-pop { width: min(280px, calc(100vw - 20px)); padding: 8px; gap: 4px; border-radius: 0; border: 1px solid var(--line-2); box-shadow: 0 18px 48px -18px var(--shadow), 0 2px 6px -2px var(--shadow); }
.opp-pop-head { padding: 4px 6px 2px; }
.opp-pop-head b { font-size: 10.5px; letter-spacing: .1em; }
.opp-pop-head .round.sm { width: 24px; height: 24px; font-size: 15px; border-color: transparent; color: var(--faint); }
.opp-pop-head .round.sm:hover { background: var(--raise); color: var(--text); }
.opp-pop > .opp-pop-form, .opp-pop > .row-actions, .opp-pop > .note, .opp-pop > .opp-pop-big, .opp-pop > .opp-pop-list { padding: 2px 6px 6px; }
.opp-menu { display: flex; flex-direction: column; gap: 1px; }
.opp-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 8px; border: 0; border-radius: 0; background: none; color: var(--text); text-align: left; font-size: 13.5px; }
.opp-menu-item:hover, .opp-menu-item:focus-visible { background: var(--raise); outline: none; }
.opp-menu-item.on { background: color-mix(in srgb, var(--opt, var(--text)) 9%, var(--panel)); }
.opp-menu-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.opp-menu-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-menu-text small { font-size: 11.5px; color: var(--faint); }
.opp-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--opt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--opt) 18%, transparent); }
.opp-dot.none { background: none; box-shadow: inset 0 0 0 1.5px var(--line-3); }
.opp-check { flex: none; color: var(--text); }
.opp-menu-foot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.opp-menu-edit { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 8px; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 600; text-align: left; }
.opp-menu-edit:hover, .opp-menu-edit:focus-visible { background: var(--raise); color: var(--text); outline: none; }

/* Dropdown options editor. */
.o-modal.opp-options { width: min(560px, calc(100vw - 32px)); top: 8vh; }
.opp-opt-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 0; background: var(--raise); align-self: flex-start; }
.opp-opt-tabs button { border: 0; background: none; padding: 6px 14px; border-radius: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.opp-opt-tabs button[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px var(--shadow); }
.opp-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 0; overflow: hidden; }
.opp-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.opp-opt:last-child { border-bottom: 0; }
.opp-opt-name { font: inherit; font-size: 14px; min-height: 36px; padding: 6px 10px; border-radius: 0; border: 1px solid transparent; background: none; color: var(--text); min-width: 0; }
.opp-opt-name:hover { border-color: var(--line-2); }
.opp-opt-name:focus { outline: none; border-color: var(--text); background: var(--panel); }
.opp-opt-uses { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.opp-opt-tools { display: inline-flex; gap: 2px; }
.opp-opt-tools .opp-icon:disabled { opacity: .35; cursor: not-allowed; }
.opp-swatch { width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--opt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--opt) 20%, transparent); cursor: pointer; padding: 0; }
.opp-swatch.sm { box-shadow: none; }
.opp-swatch.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--opt); }
.opp-swatches { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px 2px; }
.opp-opt-add { align-self: flex-start; }
.opp-opt-saved { margin: 0; font-size: 13px; color: var(--good); }
.opp-options .row-actions { justify-content: flex-end; }
@media (max-width: 760px) {
  .opp-bar .opp-archive { margin-left: 0; }
  .opp-tool span { display: none; }
}

/* What an Art or Items option counts as for Approval, and the note when
   Approval follows them. */
.opp-opt { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.opp-select.opp-opt-counts { min-height: 32px; padding: 4px 8px; border-radius: 0; font-size: 12px; font-weight: 600; color: var(--muted); max-width: 170px; }
.opp-menu-note { margin: 0; padding: 4px 8px 8px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.opp-menu-note b { color: var(--text); }
@media (max-width: 560px) { .opp-opt { grid-template-columns: auto minmax(0, 1fr) auto; } .opp-select.opp-opt-counts { grid-column: 2 / -1; max-width: none; } }

/* ---- A quote's approval page (portal/quote/approval.js) ----
   The customer link and the Client view: a letter-size quote document
   (below), with one Approve pane for Art and Quote. */
.pq-top-note { margin-left: auto; font-size: 13px; color: var(--muted); }
.pq-wrap { max-width: 1000px; padding-block: 32px 72px; display: flex; flex-direction: column; gap: 22px; }
.pq-state { padding-block: 80px; display: flex; flex-direction: column; gap: 12px; }

/* A proof beside its imprint's table. */
.pq-proof { position: relative; display: grid; place-items: center; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 0; background: #fff; overflow: hidden; color: var(--text); text-decoration: none; cursor: zoom-in; }
.pq-proof img { width: 100%; height: auto; max-height: 520px; object-fit: contain; display: block; }
.pq-proof .pq-zoom { position: absolute; right: 8px; bottom: 8px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 0; background: rgba(20, 18, 14, .78); color: #fff; opacity: 0; transition: opacity .15s; }
.pq-proof:hover .pq-zoom, .pq-proof:focus-visible .pq-zoom { opacity: 1; }
@media (hover: none) { .pq-proof .pq-zoom { opacity: 1; } }
.pq-proof.pdf { cursor: pointer; min-height: 160px; gap: 4px; padding: 20px; text-align: center; background: var(--panel); }
.pq-proof.pdf span { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.pq-proof.pdf b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.pq-proof.pdf small { font-size: 13px; color: var(--accent); font-weight: 600; }
.pq-proof-link { align-self: flex-end; margin-top: -4px; font-size: 13px; font-weight: 600; }
.pq-proof.none {min-height: 160px; cursor: default; font-size: 14px; color: var(--muted); background: var(--panel); }

/* The quote as a letter-size business document (portal/quote/approval.js):
   a toolbar on screen, then one sheet that prints on 8.5 x 11. */
.pq-wrap { max-width: 8.5in; }
.pq-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 14px 12px 16px; border-radius: 0; background: var(--panel); border: 1px solid var(--line-2); border-left: 4px solid var(--marigold); }
.pq-bar.good, .pq-bar:has(.pq-bar-status.good) { border-left-color: var(--good); }
.pq-bar:has(.pq-bar-status.bad) { border-left-color: var(--bad); }
.pq-bar-status { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 280px; }
.pq-bar-status b { font-size: 15px; }
.pq-bar-status span { font-size: 13.5px; color: var(--muted); }
.pq-bar-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pq-doc { background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: 0; box-shadow: var(--shadow); padding: 0.55in 0.45in 0.45in; min-height: 11in; display: flex; flex-direction: column; gap: 18px; font-size: 13px; line-height: 1.45; }
.pq-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--text); }
.pq-from img { height: 46px; width: auto; display: block; }
.pq-from p { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.pq-doc-title { text-align: right; }
.pq-doc-title h1 { font-family: var(--f-display); font-size: 34px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1; margin: 0 0 8px; }
.pq-doc-title dl { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; font-size: 12.5px; justify-content: end; }
.pq-doc-title dt { color: var(--muted); text-align: right; }
.pq-doc-title dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pq-doc-name { margin: -4px 0 0; font-size: 15px; font-weight: 600; }
.pq-doc-name span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.pq-parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pq-party { border: 1px solid var(--line-2); border-radius: 0; padding: 8px 10px; font-size: 12.5px; overflow-wrap: anywhere; }
.pq-party > span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.pq-imp { display: grid; grid-template-columns: 1.6in minmax(0, 1fr); gap: 10px 14px; border: 1.5px solid var(--text); border-radius: 0; overflow: hidden; break-inside: avoid; }
.pq-imp > .pq-imp-head, .pq-imp > .pq-table-wrap { grid-column: 1 / -1; }
.pq-imp-proofs { display: flex; flex-direction: column; gap: 8px; padding-left: 10px; }
.pq-imp-proof { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.pq-imp-proof figcaption { font-size: 11px; color: var(--muted); }
.pq-imp .pq-proof { border-radius: 0; cursor: zoom-in; }
.pq-imp .pq-proof img { max-height: 1.9in; }
.pq-imp .pq-proof.none, .pq-imp .pq-proof.pdf { min-height: 1.1in; font-size: 12px; padding: 8px; }
.pq-imp .pq-proof-link { align-self: flex-start; margin: 0; font-size: 11.5px; }
.pq-imp-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-right: 10px; }
.pq-imp-head { padding: 7px 10px; background: var(--raise); border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.pq-imp-head b { font-size: 14px; }
.pq-imp-head span { font-size: 12px; color: var(--muted); }
.pq-inks { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--text-2); }
.pq-table-wrap { overflow-x: auto; }
.pq-imp > .pq-table-wrap { border-top: 1px solid var(--line-2); }
/* Gridlines between every cell; the imprint's box is the outer edge. */
.pq-lines { width: 100%; min-width: 0; border-collapse: collapse; border-style: hidden; font-size: 12px; font-variant-numeric: tabular-nums; }
.pq-lines th { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 5px 4px; border: 1px solid var(--line-2); border-bottom: 1.5px solid var(--text); white-space: nowrap; }
.pq-lines td { padding: 6px 4px; border: 1px solid var(--line-2); vertical-align: top; }
.pq-lines th.pq-num, .pq-lines td.pq-num { padding-left: 6px; }
.pq-lines .c { text-align: center; min-width: 18px; padding-inline: 1px; }
.pq-lines th.c { letter-spacing: 0; font-size: 10px; }
.pq-lines .r { text-align: right; white-space: nowrap; }
.pq-lines th.pq-item, .pq-lines th.pq-num, .pq-lines th.pq-color { text-align: left; }
.pq-item { min-width: 88px; width: 24%; }
.pq-lines .pq-num { font-size: 11.5px; overflow-wrap: anywhere; }
.pq-lines td.pq-color { font-size: 11.5px; }
.pq-lines tr.pq-has-breaks td { border-bottom: 0; }
.pq-lines tr.pq-break-row td { border-top: 0; padding: 0 6px 8px; }
.pq-lines tr.pq-break-row .pq-breaks { margin: 0; }
.pq-item b { display: block; font-weight: 600; }
.pq-item span { display: block; font-size: 11.5px; color: var(--muted); }
/* Price breaks (deal page + client approval page): a tile per break, the
   reached one marigold, then how many more pieces reach the next. */
.pq-breaks { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 8px 0 2px; font-size: 12px; color: var(--muted); }
.pq-breaks > .pq-breaks-label { display: block; align-self: center; margin-right: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pq-breaks > .pq-break { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 5px 10px 4px; border: 1px solid var(--line-2); border-radius: 0; background: var(--raise); line-height: 1.05; }
.pq-breaks .pq-break small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.pq-breaks .pq-break b { display: block; font-family: var(--f-display); font-size: 19px; font-weight: 800; letter-spacing: .01em; color: var(--text); white-space: nowrap; }
.pq-breaks .pq-break b i { margin-left: 2px; font-family: var(--f-body); font-size: 10px; font-weight: 600; font-style: normal; color: var(--muted); }
.pq-breaks > .pq-break.on { background: var(--marigold); border-color: var(--marigold); }
.pq-breaks .pq-break.on small, .pq-breaks .pq-break.on b, .pq-breaks .pq-break.on b i { color: var(--marigold-ink); }
.pq-breaks > .pq-break-next { display: block; align-self: center; margin-left: 4px; font-size: 12px; color: var(--muted); }
.pq-breaks .pq-break-next b { display: inline; font-weight: 700; color: var(--text); box-shadow: inset 0 -2px 0 var(--marigold); }
.pq-item .pq-breaks { gap: 4px; }
.pq-item .pq-breaks > .pq-break { min-width: 54px; padding: 4px 7px 3px; }
.pq-item .pq-breaks .pq-break b { font-size: 16px; }
.pq-item .pq-breaks > .pq-breaks-label, .pq-item .pq-breaks > .pq-break-next { flex-basis: 100%; margin: 0; }
@media print { .pq-breaks > .pq-break.on { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.pq-details { margin: 2px 0 0; font-size: 12px; color: var(--text-2); white-space: pre-line; }
.pq-doc-foot { display: grid; grid-template-columns: minmax(0, 1fr) 2.7in; gap: 20px; align-items: start; margin-top: auto; padding-top: 6px; break-inside: avoid; }
.pq-terms { font-size: 11.5px; color: var(--muted); }
.pq-terms p { margin: 0 0 6px; }
.pq-terms b { color: var(--text); }
.pq-sum { width: 100%; min-width: 0; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pq-sum td { padding: 4px 8px; border: 1px solid var(--line-2); }
.pq-sum td:last-child { text-align: right; }
.pq-sum td:first-child { color: var(--muted); }
.pq-sum tr.total td { border-top: 1.5px solid var(--text); padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--text); }
.pq-approved { margin: 0; font-size: 12px; color: var(--muted); text-align: right; }
.pq-sigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 12px; border-top: 1px solid var(--line-2); break-inside: avoid; }
.pq-sig { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pq-sig-state { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pq-sig-state.good { color: var(--good); }
.pq-sig-state.bad { color: var(--bad); }
.pq-sig-lines { display: grid; grid-template-columns: minmax(0, 1fr) 1.1in; gap: 14px; }
.pq-sig-line { display: block; min-height: 26px; border-bottom: 1px solid var(--text); font-size: 13px; }
.pq-sig-line i { font-family: Georgia, "Times New Roman", serif; font-size: 17px; }
.pq-sig small { font-size: 10.5px; color: var(--muted); }
.pq-paid { padding: 10px 14px; border-radius: 0; background: var(--good-wash); color: var(--good); font-size: 13px; }
/* The Approve pane. */
.pq-modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(10, 10, 12, .5); }
.pq-modal { position: fixed; z-index: 51; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: 0; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.pq-modal-head h2 { font-size: 18px; font-weight: 700; margin: 0; }
.pq-modal-head span { font-size: 13px; color: var(--muted); }
.pq-pick { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 0; cursor: pointer; }
.pq-pick:has(input:checked) { border-color: var(--marigold); background: var(--marigold-wash); }
.pq-pick input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--marigold); flex: none; }
.pq-pick span { display: flex; flex-direction: column; font-size: 14px; }
.pq-pick small { font-size: 12.5px; color: var(--muted); }
.pq-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.pq-field em { font-style: normal; font-weight: 500; color: var(--faint); }
.pq-field input, .pq-field textarea { font: inherit; font-size: 15px; font-weight: 400; padding: 9px 12px; border-radius: 0; border: 1px solid var(--line-2); background: var(--raise); color: var(--text); }
.pq-field textarea { resize: vertical; line-height: 1.45; }
.pq-pane-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pq-pane-legal { margin: 0; font-size: 12px; color: var(--muted); }
.pq-modal .row-actions { justify-content: flex-end; flex-wrap: wrap; }
.pq-help { margin: 0; font-size: 14px; color: var(--muted); }
@media (max-width: 760px) {
  .pq-wrap { padding-block: 18px 56px; }
  .pq-doc { padding: 20px 16px; min-height: 0; }
  .pq-doc-head { flex-direction: column; }
  .pq-doc-title { text-align: left; }
  .pq-doc-title dl { justify-content: start; }
  .pq-doc-title dt, .pq-doc-title dd { text-align: left; }
  .pq-parties, .pq-sigs, .pq-doc-foot, .pq-pane-who { grid-template-columns: minmax(0, 1fr); }
  .pq-imp { grid-template-columns: minmax(0, 1fr); }
  .pq-imp-proofs { flex-direction: row; flex-wrap: wrap; padding-inline: 10px; }
  .pq-imp-body { padding-inline: 10px; }
  .pq-imp-proofs > * { width: 140px; }
}
/* Printing or saving as PDF: just the sheet, black on white. */
@media print {
  @page { size: letter; margin: 0.45in; }
  html, body.pq-body, body { background: #fff !important; }
  body.pq-body .top, .pq-bar, .pq-pay, .pq-paid, .pq-modal, .pq-modal-back, .pq-zoomed, .pq-proof-link, .cq-top { display: none !important; }
  .pq-wrap { max-width: none; padding: 0 !important; margin: 0; }
  .pq-doc { --text: #111; --text-2: #222; --muted: #555; --faint: #777; --line: #ccc; --line-2: #bbb; --panel: #fff; --good: #1d6b2f; --bad: #9b1c1c; background: #fff; color: #111; border: 0; box-shadow: none; padding: 0; min-height: 0; border-radius: 0; gap: 14px; }
  .pq-proof { border-color: #ccc !important; }
  .pq-table-wrap { overflow: visible; }
  .pq-lines tr { break-inside: avoid; }
}

/* A proof, full size. */
.pq-zoomed { position: fixed; inset: 0; z-index: 60; background: rgba(10, 10, 12, .86); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px 16px; cursor: zoom-out; }
.pq-zoomed img { max-width: 100%; max-height: calc(100vh - 80px); object-fit: contain; border-radius: 0; background: #fff; }
.pq-zoomed .btn { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: 14px; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }

/* Staff: the quote's customer link and answers (portal/orders.js). */
.oq-share { display: flex; flex-direction: column; gap: 10px; }
.oq-share-link { display: flex; gap: 6px; }
.oq-share-link input { flex: 1 1 auto; min-width: 0; font: inherit; font-family: var(--f-mono); font-size: 12px; padding: 8px 10px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink); color: var(--text-2); }
.oq-answer-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.oq-answer-row span:first-child { color: var(--muted); }
.oq-answer-row .good { color: var(--good); font-weight: 600; }
.oq-answer-row .bad { color: var(--bad); font-weight: 600; }

/* Pickup & Delivery (portal/fulfillment.js). */
.ff-page { padding-bottom: 96px; }
.ff-h { margin: 22px 0 6px; font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ff-note { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.ff-empty { padding: 18px; border: 1px dashed var(--line-2); border-radius: 0; color: var(--muted); font-size: 14px; }
.ff-alert { margin: 10px 0; padding: 10px 14px; border-radius: 0; font-size: 14px; border: 1px solid var(--line-2); }
.ff-alert.bad { border-color: var(--bad); color: var(--bad); }
.ff-alert.good { border-color: var(--good-line); background: var(--good-wash); color: var(--good); }
.ff-alert.warn { border-color: var(--marigold); background: var(--marigold-wash); }
.ff-search { display: flex; gap: 8px; margin: 14px 0; }
.ff-search input, .ff-filter { flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; border-radius: 0; }
.ff-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ff-list { display: flex; flex-direction: column; gap: 8px; }
.ff-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); }
.ff-row-main { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.ff-row-main:hover b { color: var(--accent); }
.ff-row-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ff-row-top span { font-weight: 600; }
.ff-meta { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.ff-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 140px; font-size: 12px; color: var(--muted); }
.ff-progress { display: block; width: 120px; height: 5px; border-radius: 0; background: var(--line); overflow: hidden; }
.ff-progress i { display: block; height: 100%; background: var(--good); }
.ff-chip { display: inline-block; padding: 2px 8px; border-radius: 0; border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.ff-chip.good { border-color: var(--good-line); background: var(--good-wash); color: var(--good); }
.ff-chip.gold { border-color: var(--marigold); background: var(--marigold-wash); color: var(--text); }
.ff-good { margin-top: 2px; font-size: 13px; color: var(--good); font-weight: 600; }
.ff-run { margin-top: 14px; padding: 12px 14px; }
.ff-stop { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ff-stop.done { opacity: .7; }
.ff-stop-n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 0; background: var(--raise); font-weight: 750; }
.ff-stop.done .ff-stop-n { background: var(--good-wash); color: var(--good); }
.ff-stop-main { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.ff-stop-actions { display: flex; align-items: center; gap: 4px; }
.ff-icon { width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; }
.ff-icon:hover:not(:disabled) { color: var(--text); border-color: var(--line-3); }
.ff-icon:disabled { opacity: .35; cursor: default; }
.ff-run-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.ff-table-wrap { overflow-x: auto; }
.ff-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ff-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 8px; border-bottom: 1px solid var(--line-2); }
.ff-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ff-table .num { text-align: right; }
.ff-more { margin: 12px 0; text-align: center; }
.ff-order-head h1 { margin: 6px 0 10px; font-size: 26px; }
.ff-summary { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.ff-summary small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ff-shipto { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ff-tracking { display: flex; flex-direction: column; gap: 4px; }
.ff-boxes { display: flex; flex-direction: column; gap: 10px; }
.ff-box { display: block; padding: 10px 12px; cursor: pointer; }
.ff-box.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ff-box.gone { opacity: .75; cursor: default; }
.ff-box-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ff-box-head input { width: 20px; height: 20px; }
.ff-box-items img, .ff-item img { width: 56px; height: 56px; object-fit: contain; border-radius: 0; background: #fff; cursor: zoom-in; }
.ff-items { padding: 6px 12px; }
.ff-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ff-item:last-child { border-bottom: 0; }
.ff-item > div:nth-child(2) { flex: 1; min-width: 0; }
.ff-noproof { width: 56px; font-size: 11px; color: var(--faint); text-align: center; }
.ff-sizes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ff-sizes span { padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 0; font-size: 12px; }
.ff-qty { text-align: right; }
.ff-qty small { display: block; color: var(--faint); font-size: 11px; }
.ff-history { padding: 8px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.ff-money { width: 100%; max-width: 360px; font-size: 14px; }
.ff-money td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ff-money .due td { padding-top: 6px; border-top: 1px solid var(--line-2); font-weight: 750; }
.ff-pay { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.ff-sign { display: flex; flex-direction: column; gap: 12px; }
.ff-pad { display: block; width: 100%; max-width: 640px; height: 180px; border: 1px dashed var(--line-3); border-radius: 0; background: #fff; touch-action: none; cursor: crosshair; margin: 6px 0; }
.ff-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); box-shadow: 0 -10px 30px -18px var(--shadow); }
.ff-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) { .ff-row { flex-wrap: wrap; } .ff-row-side { align-items: flex-start; min-width: 0; } .ff-shipto, .ff-pay { flex-direction: column; align-items: flex-start; } }
.ff-page > a.btn { align-self: flex-start; width: auto; }

/* An invoice's Shipping tab (portal/orderShipping.js). */
.shp-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.shp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.shp-head h2 { margin: 0; font-size: 18px; }
.shp-meta { color: var(--muted); font-size: 13px; }
.shp small, .shp-section-head small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.shp-section-head em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; }
.shp-shipto { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 0; }
.shp-shipto pre { margin: 0; font: inherit; font-size: 14px; white-space: pre-wrap; }
.shp-warn { margin: 0; color: var(--bad); font-size: 13px; }
.shp-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.shp-box select { min-width: 160px; }
.shp-dims { display: inline-flex; align-items: center; gap: 4px; }
.shp-dims input { width: 64px; min-height: 34px; padding: 4px 6px; border-radius: 0; }
.shp-dims i, .shp-dims em { font-style: normal; color: var(--muted); font-size: 12px; }
.shp-x { width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; }
.shp-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.shp-row label, .shp-row > div { display: flex; flex-direction: column; min-width: 120px; }
.shp-row input, .shp-row select { min-height: 36px; padding: 4px 8px; border-radius: 0; }
.shp-block { display: flex; flex-direction: column; margin: 8px 0; }
.shp-block textarea { min-height: 90px; padding: 8px; border-radius: 0; font-family: var(--f-mono); }
.shp-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 0; overflow: hidden; }
.shp-seg button { padding: 6px 12px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.shp-seg button[aria-pressed="true"] { background: var(--text); color: var(--ink); }
.shp-quote { margin-top: 12px; }
.shp-rates-head { margin: 10px 0 6px; font-size: 12px; color: var(--muted); }
.shp-rates { display: flex; flex-direction: column; gap: 6px; }
.shp-rate { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; }
.shp-rate > div:first-child { flex: 1; min-width: 0; }
.shp-rate.voided { opacity: .55; }
.shp-price { text-align: right; }
.shp-price small { display: block; color: var(--muted); font-size: 11.5px; }
.shp-tag { margin-left: 6px; padding: 1px 6px; border-radius: 0; background: var(--good-wash); color: var(--good); font-size: 11px; font-weight: 700; }
.shp-actions { display: inline-flex; gap: 6px; }
.shp-errors { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.shp-empty { color: var(--muted); font-size: 13px; }
.shp-h { margin: 18px 0 8px; font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.shp-links { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 12px; font-size: 13px; }
.shp-status { margin: 0 0 12px; padding: 10px 14px; border-radius: 0; border: 1px solid var(--line-2); font-size: 14px; }
.shp-status.bad { border-color: var(--bad); color: var(--bad); }
.shp-status.good { border-color: var(--good-line); background: var(--good-wash); color: var(--good); }
@media (max-width: 900px) { .shp-grid { grid-template-columns: 1fr; } }

/* An invoice's Pipeline tab (portal/orderPipeline.js). */
.pp { display: flex; flex-direction: column; gap: 16px; }
.pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.pp-stat { position: relative; overflow: hidden; padding: 10px 12px 14px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); }
.pp-stat small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pp-stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pp-stat span { margin-left: 4px; color: var(--muted); font-size: 12.5px; }
.pp-stat i { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--marigold); }
.pp-stat.done i { background: var(--good); }
.pp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pp-table th { text-align: left; padding: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.pp-table th .linkish { margin-left: 6px; font-size: 11px; text-transform: none; letter-spacing: 0; }
.pp-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pp-table tr.pp-first td { border-top: 1px solid var(--line-2); }
.pp-name { font-weight: 600; max-width: 260px; }
.pp-num { text-align: right; }
.pp-in { width: 72px; min-height: 32px; padding: 3px 6px; border-radius: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pp-in.full { border-color: var(--good-line); background: var(--good-wash); }
.pp-in.saving { opacity: .6; }
.pp-def { position: relative; }
.pp-def-btn { min-width: 48px; min-height: 32px; border: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
.pp-def-btn.has { border-color: var(--bad); color: var(--bad); font-weight: 700; }
.pp-def-pop { position: absolute; right: 0; top: 100%; z-index: 10; display: flex; flex-direction: column; gap: 6px; width: 200px; padding: 10px; text-align: left; }
.pp-def-pop label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.pp-def-pop input { width: 64px; min-height: 30px; padding: 2px 6px; border-radius: 0; text-align: right; }
.pp-empty { color: var(--muted); font-size: 14px; }
.pp-empty.sm { margin: 4px 0; font-size: 13px; }
/* Invoice card foot: legend left, the two manifest buttons right
   (receiving in the schedule's blue, outgoing in its green). */
.oq-imp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.oq-imp-foot .size-legend { margin: 0; }
.pp-mbtns { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pp-mbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 0; border: 1.5px solid; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pp-mbtn em { font-style: normal; font-weight: 600; font-size: 11.5px; opacity: .75; }
.pp-mbtn.in { border-color: #3b82f6; color: #1d4ed8; background: color-mix(in srgb, #3b82f6 10%, var(--panel)); }
.pp-mbtn.out { border-color: #65a30d; color: #3f6212; background: color-mix(in srgb, #65a30d 12%, var(--panel)); }
.pp-mbtn.in:hover { background: color-mix(in srgb, #3b82f6 20%, var(--panel)); }
.pp-mbtn.out:hover { background: color-mix(in srgb, #65a30d 22%, var(--panel)); }
:root[data-theme="dark"] .pp-mbtn.in { color: #93c5fd; }
:root[data-theme="dark"] .pp-mbtn.out { color: #bef264; }
/* Size marker: a size's received / completed, under its garment. */
.pp-mark { display: flex; flex-direction: column; gap: 6px; max-width: 360px; margin-top: 8px; padding: 10px 12px; }
.pp-mark-head { display: flex; align-items: center; gap: 8px; }
.pp-mark-head span { flex: 1; color: var(--muted); font-size: 12.5px; }
.pp-mark-row { display: grid; grid-template-columns: 84px 72px auto 1fr; align-items: center; gap: 8px; font-size: 13px; }
.pp-mark-row span { font-weight: 700; padding-left: 8px; border-left: 4px solid; }
.pp-mark-row.receiving span { border-color: #3b82f6; }
.pp-mark-row.production span { border-color: #65a30d; }
.pp-mark-row input { width: 72px; min-height: 32px; padding: 3px 6px; border-radius: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pp-mark-row small { color: var(--muted); }
.pp-mark-row .btn { justify-self: end; }
.pp-mark .linkish { font-size: 12px; }
/* Manifest modal, laid out like the extension's box manifest. */
body.pp-modal-open { overflow: hidden; }
.pp-modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(15, 23, 42, .58); }
.pp-modal { width: min(1100px, 100%); max-height: calc(100vh - 36px); display: flex; flex-direction: column; overflow: hidden; border-radius: 0; background: var(--panel); color: var(--text); box-shadow: 0 24px 70px rgba(0, 0, 0, .45); }
.pp-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.pp-modal-head b { font-size: 15px; font-weight: 800; }
.pp-modal-inv { flex: 1; color: var(--muted); font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-close { border: 0; border-radius: 0; padding: 7px 10px; background: var(--text); color: var(--ink); cursor: pointer; }
.pp-modal-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px 14px 14px; }
.pp-mgr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pp-mgr-group { display: flex; align-items: center; gap: 6px; }
.pp-mgr-round b { min-width: 20px; text-align: center; }
.pp-modal-head .pp-mgr-round { margin-left: auto; padding-right: 6px; }
.pp-mgr-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.pp-mgr-active { min-width: 110px; min-height: 32px; padding: 4px 6px; border-radius: 0; font-weight: 700; }
.pp-mgr-cat { min-height: 32px; padding: 4px 8px; border-radius: 0; font-size: 13px; }
.pp-mgr-meta { margin-left: auto; color: var(--muted); font-size: 12px; }
.pp-act { min-height: 32px; padding: 6px 11px; border: 1px solid var(--line-2); border-radius: 0; background: var(--tint); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pp-act:hover:not(:disabled) { border-color: var(--line-3); background: var(--raise); }
.pp-act:disabled { opacity: .45; cursor: default; }
.pp-act.icon { width: 32px; padding: 0; font-size: 16px; line-height: 1; }
.pp-act.primary { background: var(--text); border-color: var(--text); color: var(--ink); }
.pp-modal-scroll { flex: 1; min-height: 180px; overflow: auto; border: 1px solid var(--line-2); border-radius: 0; }
.pp-mtable { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.pp-mtable th { position: sticky; top: 0; z-index: 1; padding: 7px 6px; text-align: left; font-size: 12px; font-weight: 800; background: var(--raise); box-shadow: 0 1px 0 var(--line-2); }
.pp-mtable td { padding: 5px 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.pp-mtable .num { text-align: right; }
.pp-mtable select, .pp-mtable input { width: 100%; min-height: 30px; padding: 3px 6px; border-radius: 0; font-size: 13px; }
.pp-mtable input { text-align: right; font-weight: 700; }
.pp-mtable th:nth-child(6), .pp-mtable td:nth-child(6) { width: 84px; }
.pp-mtable th:nth-child(7), .pp-mtable td:nth-child(7) { width: 132px; }
.pp-mtable th:nth-child(8), .pp-mtable td:nth-child(8) { width: 78px; }
.pp-mtable td.pp-cat-cell { color: var(--text-2); font-weight: 600; white-space: nowrap; }
/* Receiving: a tab per category of work, each with its own boxes. */
.pp-cat-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); }
.pp-cat-tab { margin-bottom: -1px; padding: 7px 12px; border: 1px solid transparent; border-radius: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pp-cat-tab:hover { color: var(--text); }
.pp-cat-tab.on { border-color: var(--line-2); border-bottom-color: var(--panel); background: var(--panel); color: var(--text); }
.pp-mstatus { align-self: center; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pp-mstatus.good { color: var(--good); }
.pp-mstatus.bad { color: var(--bad); }
.pp-mstatus.warn { color: #b45309; }
.pp-blank { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.pp-mtable td.acts { width: 96px; white-space: nowrap; }
.pp-mtable td.acts .pp-act { min-height: 28px; padding: 3px 8px; font-size: 12px; }
.pp-mtable tr.over input { border-color: var(--bad); color: var(--bad); }
.pp-modal-actions { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pp-modal-actions > div { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) { .pp-modal-backdrop { padding: 0; } .pp-modal { max-height: 100vh; border-radius: 0; } }
.pp-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.pp-activity small { display: block; color: var(--faint); font-size: 12px; }

/* Announcements (#announcements) and the unread banner above every staff
   page (#annBanner, beside #app). */
body.staff #annBanner { margin-left: var(--side-w); }
@media (max-width: 960px) { body.staff #annBanner { margin-left: 0; } }
.ann-banner { display: flex; align-items: center; gap: 12px; padding: 10px 32px; background: var(--marigold-wash); border-bottom: 1px solid rgba(245, 178, 27, .5); color: var(--text); }
.ann-banner > svg { flex: none; color: var(--accent); }
.ann-banner-text { flex: 1 1 auto; min-width: 0; display: flex; gap: 10px; align-items: baseline; }
.ann-banner-text b { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-banner-text span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 13.5px; }
.ann-banner .btn { flex: none; }
.ann-list { display: grid; gap: 12px; max-width: 860px; }
.ann-card { position: relative; padding: 18px 22px; display: grid; gap: 10px; }
.ann-card.unread { box-shadow: inset 4px 0 0 var(--marigold); }
.ann-head { display: flex; align-items: center; gap: 10px; }
.ann-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--raise); color: var(--text-2); font-size: 12px; font-weight: 700; }
.ann-who { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.25; }
.ann-who b { font-size: 13.5px; font-weight: 600; }
.ann-who span { font-size: 12px; color: var(--muted); }
.ann-tag { flex: none; padding: 2px 8px; border-radius: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ann-tag.pin { background: var(--raise); color: var(--text-2); }
.ann-tag.new { background: var(--marigold-wash); color: var(--text); box-shadow: inset 0 0 0 1px rgba(245, 178, 27, .6); }
.ann-card h2 { margin: 2px 0 0; font-size: 19px; font-weight: 700; line-height: 1.3; }
.ann-actions { flex: none; display: flex; align-items: center; gap: 2px; }
.ann-act { padding: 4px 8px; border: 0; border-radius: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ann-act:hover { background: var(--raise); color: var(--text); }
.ann-act.danger:hover { color: var(--bad); }
.ann-body { font-size: 14.5px; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; }
.ann-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.ann-reads summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.ann-reads ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.ann-editor { display: grid; gap: 10px; max-width: 860px; margin-bottom: 14px; }
.ann-pin { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ann-bar { margin: 0 0 8px; }
@media (max-width: 720px) {
  .ann-banner { flex-wrap: wrap; padding: 10px 16px; }
  .ann-banner-text { flex-basis: calc(100% - 30px); flex-direction: column; gap: 0; }
  .ann-banner-text b { max-width: 100%; }
  .ann-card header { flex-direction: column; }
}

/* A quote's or invoice's Order details card: label left, value right. */
.oq-facts { display: grid; gap: 8px; font-size: 14px; }
.oq-facts .row { display: flex; justify-content: space-between; gap: 16px; }
.oq-facts .row span:first-child { color: var(--muted); }
.oq-facts .row span:last-child { text-align: right; }
/* Tasks: the row's person chip and its Reassign menu. */
.tk-assign { position: relative; display: inline-flex; }
.tk-assignee { cursor: pointer; }
.tk-assignee svg { opacity: .6; }
.tk-assign-menu { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; min-width: 190px; max-height: 280px; overflow-y: auto; padding: 4px; display: grid; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
.tk-assign-menu button { padding: 7px 10px; border: 0; border-radius: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; }
.tk-assign-menu button:hover { background: var(--tint); }
.tk-assign-menu button[aria-selected="true"] { font-weight: 700; background: var(--marigold-wash); }
/* Chat: "Seen" under my latest message (portal reads only). */
.chat-seen { margin-top: 2px; font-size: 11px; color: var(--muted); text-align: right; }
span.chat-reaction { cursor: default; }

/* A deal's sales side on its own page (#deals/<id>, portal/opportunities.js dealCard). */
.opp-deal-card { display: grid; gap: 8px; }
.opp-deal-card .eyebrow { margin-bottom: 2px; }
.opp-deal-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 34px; }
.opp-deal-label { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.opp-deal-row > .opp-chip, .opp-deal-row > .opp-cell-row { justify-self: start; max-width: 100%; }
.opp-deal-choice { justify-self: stretch; min-height: 32px; padding: 5px 10px; border: 0; border-radius: 0; background: var(--opt); color: var(--opt-ink); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-deal-choice.empty { background: var(--tint); color: var(--muted); border: 1px dashed var(--line-2); font-weight: 600; }
.opp-deal-choice:hover { filter: brightness(.96); }
.opp-deal-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.opp-deal-card .row-actions { justify-content: flex-start; margin-top: 4px; }

/* Pickup & Delivery lists as tables, laid out like the Deals list (portal/fulfillment.js). */
.ff-page .ff-search { margin: 14px 0; }
.ff-page .ff-search input { min-height: 0; padding: 9px 0; border: 0; background: none; }
.ff-search.ff-grow { flex: 1; margin: 0; }
.ff-page .ff-section-head { margin-top: 18px; }
.ff-h em { margin-left: 6px; padding: 1px 7px; border-radius: 0; background: var(--raise); font-style: normal; font-size: 11px; color: var(--text-2); letter-spacing: 0; }
.ff-grid-wrap { overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); scrollbar-width: thin; }
.ff-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.ff-grid th { position: sticky; top: 0; z-index: 1; padding: 11px 12px; text-align: left; white-space: nowrap; background: color-mix(in srgb, var(--panel) 94%, var(--text)); color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--line-2); }
.ff-grid td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ff-grid tbody tr:last-child td { border-bottom: 0; }
.ff-grid tr[data-f-href] { cursor: pointer; }
.ff-grid tbody tr:hover td { background: color-mix(in srgb, var(--panel) 96%, var(--text)); }
.ff-grid small { display: block; color: var(--muted); font-size: 12px; }
.ff-grid .ff-clip { display: block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-grid b.ff-clip { font-weight: 600; }
.ff-strong { font-weight: 700; color: inherit; text-decoration: none; }
.ff-strong:hover { color: var(--accent); text-decoration: underline; }
.ff-nowrap { white-space: nowrap; }
.ff-boxes-cell { min-width: 120px; }
.ff-boxes-cell .ff-progress { margin-bottom: 4px; }
.ff-act { width: 1%; white-space: nowrap; text-align: right; }
.ff-grid a.mono { font-weight: 600; }

/* Invoice Shipping and Tracking tabs: quiet inputs and tables like the rest of the portal. */
.shp .card.pad, .pp .card.pad { padding: 18px 20px; }
.shp-head h2, .pp .shp-head h2 { font-size: 17px; font-weight: 750; letter-spacing: -.005em; }
.pp-in, .pp-def-pop input, .pp-mark-row input, .pp-mtable select, .pp-mtable input, .pp-mgr-active, .pp-mgr-cat,
.shp-row input, .shp-row select, .shp-dims input, .shp-box select, .shp-block textarea {
  border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font: inherit; font-size: 13.5px; box-shadow: none;
}
.pp-in:focus, .pp-def-pop input:focus, .pp-mark-row input:focus, .pp-mtable select:focus, .pp-mtable input:focus, .pp-mgr-active:focus, .pp-mgr-cat:focus,
.shp-row input:focus, .shp-row select:focus, .shp-dims input:focus, .shp-box select:focus, .shp-block textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--marigold-wash);
}
.pp-in.full { border-color: var(--good-line); background: var(--good-wash); }
.ff-grid.pp-table td { padding: 6px 12px; }
.ff-grid.pp-table th.pp-num, .ff-grid.pp-table td.pp-num { text-align: right; }
.ff-grid.pp-table tr.pp-first td { border-top: 0; }
.pp-fill { margin-left: 6px; padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; vertical-align: middle; }
.pp-fill:hover { color: var(--text); border-color: var(--line-3); }
.pp-stat { box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.shp-rate { background: var(--panel); }
.shp-rate:hover { border-color: var(--line-3); }
.shp-shipto { background: color-mix(in srgb, var(--panel) 96%, var(--text)); }

/* Schedule Qty panel (portal/schedule.js runsPanel): the proof beside its
   print locations, and the rate as a colored dropdown like the Deals page. */
.sc-runs td { vertical-align: middle; }
.sc-run-name b { display: block; font-weight: 650; }
.sc-run-name small { color: var(--muted); font-size: 12px; }
.sc-rate-wrap { position: relative; display: inline-flex; flex-direction: column; gap: 3px; }
.sc-rate-wrap small { color: var(--muted); font-size: 11.5px; }
.sc-rate { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 116px; min-height: 30px; padding: 4px 10px; border: 0; border-radius: 0; background: var(--opt); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.sc-rate:hover { filter: brightness(.95); }
.sc-rate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-rate-menu { position: absolute; top: calc(100% - 14px); left: 0; z-index: 20; display: flex; flex-direction: column; gap: 2px; min-width: 170px; padding: 6px; border: 1px solid var(--line-2); border-radius: 0; box-shadow: 0 12px 30px rgba(0, 0, 0, .14); }
.sc-rate-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.sc-rate-opt:hover, .sc-rate-opt.on { background: var(--tint); }
.sc-rate-opt i { width: 12px; height: 12px; border-radius: 50%; background: var(--opt); flex: none; }
.sc-rate-opt span { flex: 1; }
.sc-run-imps { display: flex; align-items: center; gap: 12px; }
.sc-run-proof { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid var(--line-2); border-radius: 0; background: #fff; overflow: hidden; }
.sc-run-proof img { width: 100%; height: 100%; object-fit: contain; }
.sc-run-proof.none { background: var(--raise); color: var(--faint); font-size: 11px; text-align: center; }
a.sc-run-proof:hover { border-color: var(--accent); }
.sc-run-locs { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-run-locs .sc-loc { margin: 0; padding: 4px 10px; border-radius: 0; font-size: 12px; cursor: pointer; }
.sc-run-loc-wrap { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.sc-run-loc, .sc-run-setup input { border: 1px solid var(--line-2); background: var(--panel); }

/* Schedule Edit choices, laid out like the Deals page's Dropdown options. */
.sc-pop-options { width: 360px; }
.sc-oedit { gap: 4px; }
.sc-oedit-row { flex-wrap: wrap; gap: 8px; padding: 6px 4px; border-radius: 0; }
.sc-oedit-row:hover { background: var(--tint); }
.sc-oedit-row .opp-swatch { flex: none; }
.sc-oedit-row input[type=text] { flex: 1; min-width: 0; min-height: 32px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); font-size: 13px; }
.sc-oedit-row input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--marigold-wash); }
.sc-oedit-tools { display: inline-flex; gap: 2px; }
.sc-oedit-row .sc-oedit-tools button { width: 28px; height: 28px; }
.sc-oedit-row .opp-swatches { flex-basis: 100%; padding: 6px 2px 2px 30px; }
.sc-oedit-add input { min-height: 32px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); }
.sc-table tr.sc-detail > td, .sc-runs td { overflow: visible; }
.sc-rate-menu { top: 34px; }
.sc-oedit-row button.opp-swatch { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--opt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--opt) 20%, transparent); }
.sc-oedit-row button.opp-swatch.sm { box-shadow: none; }
.sc-oedit-row button.opp-swatch.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--opt); }
.sc-oedit-row button.opp-swatch:not(.sm) { box-shadow: 0 0 0 1px var(--line-2); }

/* Schedule rate table dialog (portal/schedule.js openRates). */
.sc-rates { width: min(520px, calc(100vw - 32px)); }
.sc-rates .note { margin: 0 0 12px; }
.sc-rates-table input { width: 96px; min-height: 32px; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); font: inherit; font-size: 13.5px; text-align: right; }
.sc-rates-table input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--marigold-wash); }
.sc-rates-table td { padding: 6px 12px; }
.sc-rates .ff-grid-wrap { max-height: 50vh; }
.sc-rates-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; }
.sc-detail-head .btn { margin-left: 8px; }
.sc-banner.good { background: var(--good-wash); color: var(--good); border: 1px solid var(--good-line); }
.sc-rates { width: min(560px, calc(100vw - 32px)); }
.sc-rates-table { table-layout: auto; }
.sc-rates-table td { white-space: nowrap; }
.sc-rates-table input { width: 84px; }
.sc-rates-table .sc-dim { display: inline; margin-left: 4px; font-size: 12.5px; }
.sc-rates-table { min-width: 0; }

/* Invoices table (portal/app.js cellHtml): second lines, balance over total,
   the Paid badge and the Order box. */
.dir-table .dir-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.dir-table .dir-two { display: inline-flex; flex-direction: column; line-height: 1.3; }
.dir-table .dir-two span { color: var(--muted); font-size: 12.5px; }
.inv-paid { display: inline-block; padding: 2px 8px; border: 1.5px solid #dc2626; border-radius: 0; color: #dc2626; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.inv-stage { display: block; padding: 9px 8px; border-radius: 0; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.inv-stage.progress { background: #f4581c; }
.inv-stage.completed { background: #e11d1d; }
.inv-stage.closed { background: #111; }
.inv-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-filters .db-seg button { min-height: 32px; padding-inline: 14px; }
.sh-bar:has(.inv-filters) .dir-summary { flex: 1; }

/* Invoices: a quieter page. Small aging tiles in one row, with room
   between the search, the tiles, the filters and the table. */
.inv-page { gap: 18px; }
.inv-page #directoryResults { display: flex; flex-direction: column; gap: 16px; }
.inv-page .sh-search { max-width: 560px; }
.inv-page .sh-search input { padding: 6px 0; font-size: 14px; }
.inv-page .sh-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.inv-page .sh-tile { padding: 14px 16px; gap: 6px; border-radius: 0; }
.inv-page .sh-tile b { font-family: var(--f-body); font-size: clamp(16px, 1.6vw, 21px); font-weight: 700; line-height: 1.25; letter-spacing: 0; white-space: nowrap; overflow-wrap: normal; }
.inv-page .sh-tile small { font-size: 11.5px; }
.inv-page .sh-bar { margin-top: 0; }
.inv-page .dir-summary { font-size: 13px; color: var(--muted); }
.pq-g-row h4 { font-size: 17px; font-weight: 700; }

/* ---- Flappy Shirt (#flappy, portal/flappyShirt.js) ---- */
.fs-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(260px, 1fr); gap: 20px; align-items: start; }
.fs-stage { padding: 10px; overflow: hidden; }
.fs-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 400 / 560; border-radius: 0; touch-action: manipulation; user-select: none; cursor: pointer; outline: none; }
.fs-stage canvas:focus-visible { box-shadow: 0 0 0 3px var(--marigold); }
.fs-board-card .eyebrow { margin-bottom: 10px; }
.fs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fs-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 0; border: 1px solid transparent; }
.fs-row.me { background: var(--marigold-wash); border-color: var(--marigold); }
.fs-row.zero { opacity: .62; }
.fs-rank { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--muted); }
.fs-medal { color: #17150f; border: 1.5px solid #17150f; }
.fs-m1 { background: #ffc43d; }
.fs-m2 { background: #d6d9de; }
.fs-m3 { background: #d99a5b; }
.fs-avatar { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--raise); border: 1px solid var(--line-2); font-size: 11px; font-weight: 700; color: var(--text-2); }
.fs-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-name small { font-weight: 400; color: var(--faint); font-size: 12px; }
.fs-best { font-family: var(--f-display); font-size: 24px; line-height: 1; }
.fs-record { margin: 0 0 10px; padding: 8px 10px; border-radius: 0; background: var(--good-wash); color: var(--good); font-weight: 700; }
@media (max-width: 860px) { .fs-layout { grid-template-columns: 1fr; } .fs-stage { max-width: 440px; justify-self: center; width: 100%; } }

/* ---- Radio (#radio, portal/radio.js) ---- */
.rd-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.rd-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rd-col .card .eyebrow { margin-bottom: 10px; }
.rd-kind { margin: 12px 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.rd-kind:first-child { margin-top: 0; }
.rd-col .card .eyebrow.rd-next { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.rd-art { flex: none; border-radius: 0; object-fit: cover; background: var(--raise); }
.rd-art.blank { display: grid; place-items: center; color: var(--faint); font-size: 18px; border: 1px solid var(--line); }
.rd-now { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.rd-now > .rd-art { width: 168px; height: 168px; border-radius: 0; box-shadow: 0 6px 18px var(--shadow); font-size: 48px; }
.rd-now-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.rd-now-text h2 { margin: 0; font-family: var(--f-display); font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; text-transform: uppercase; line-height: 1.02; }
.rd-artist { margin: 0; font-size: 16px; color: var(--text-2); font-weight: 600; }
.rd-by { margin: 0; font-size: 13px; color: var(--muted); }
.rd-by b { color: var(--accent); }
.rd-bar { height: 5px; margin-top: 6px; border-radius: 0; background: var(--track); overflow: hidden; }
.rd-bar i { display: block; height: 100%; width: 0; background: var(--marigold); transition: width 1s linear; }
.rd-time { font-family: var(--f-mono); font-size: 11.5px; color: var(--faint); }
.rd-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.rd-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text); }
.rd-btn:hover { border-color: var(--line-3); background: var(--tint); }
.rd-btn.main { width: 54px; height: 54px; background: var(--marigold); border-color: var(--marigold); color: var(--marigold-ink); }
.rd-btn.main:hover { background: var(--marigold-hi); }
.rd-btn:disabled { opacity: .55; cursor: wait; }
.rd-vol { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.rd-vol input { width: 130px; accent-color: var(--marigold); }
.rd-vol b { font-family: var(--f-mono); font-size: 12px; min-width: 24px; }
.rd-rooms { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 0; background: var(--tint); border: 1px solid var(--line); }
.rd-alert { margin: 0 0 14px; padding: 10px 12px; border-radius: 0; background: var(--bad-wash); color: var(--bad); font-size: 13.5px; font-weight: 600; }
.rd-room { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rd-room:not(.on) { opacity: .7; }
.rd-join { display: flex; align-items: center; gap: 8px; min-width: 130px; font-size: 14px; font-weight: 600; }
.rd-join input { width: 18px; height: 18px; accent-color: var(--marigold); }
.rd-vol.room { margin-left: 0; }
.rd-vol.room .eyebrow:empty { display: none; }
.rd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 0; }
.rd-list li:hover { background: var(--tint); }
.rd-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rd-t b, .rd-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-t b { font-weight: 600; font-size: 14px; }
.rd-t small { font-size: 12px; color: var(--faint); }
.rd-req { flex: none; padding: 2px 8px; border-radius: 0; background: var(--marigold-wash); color: var(--accent); font-size: 11.5px; font-weight: 700; }
.rd-e { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 4px; border-radius: 0; background: var(--dim); color: var(--ink); font-size: 9.5px; font-weight: 800; vertical-align: 2px; font-family: var(--f-body); }
.rd-search { display: flex; gap: 8px; margin-bottom: 10px; }
.rd-search input[type="search"] { min-height: 44px; padding: 9px 12px; }
.rd-connect { max-width: 560px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rd-connect h2 { margin: 0; font-size: 22px; }
.rd-connect p { margin: 0; color: var(--muted); }
.rd-account { margin-top: 4px; }
.rd-mini { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; color: var(--muted); }
.rd-q-actions { display: flex; gap: 2px; flex: none; }
.rd-mini:disabled { opacity: .35; cursor: default; }
.rd-mini:hover { background: var(--tint); color: var(--text); }
.rd-mini svg { width: 15px; height: 15px; }
@media (max-width: 960px) { .rd-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .rd-now > .rd-art { width: 100%; height: auto; aspect-ratio: 1; max-width: 320px; } .rd-vol { margin-left: 0; } }

/* Team page: Firebase usage (usageCard in portal/app.js). */
.fu { display: flex; flex-direction: column; gap: 14px; }
.fu-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fu-top small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.fu-top b { font-size: 30px; font-variant-numeric: tabular-nums; }
.fu-top .note { max-width: 460px; margin: 0; }
.fu-scroll { overflow-x: auto; }
.fu-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13.5px; }
.fu-table th { padding: 6px 8px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line-2); }
.fu-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.fu-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fu-table tr.fu-service th { padding-top: 14px; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text); }
.fu-table td small { color: var(--faint); font-size: 11px; }
.fu-free { color: var(--muted); font-size: 12.5px; }
.fu-err { color: var(--bad); font-size: 12.5px; }
.fu-spark { display: inline-flex; align-items: flex-end; gap: 1px; width: 120px; height: 22px; }
.fu-spark i { flex: 1; min-height: 1px; border-radius: 0; background: color-mix(in srgb, var(--accent) 70%, var(--panel)); }
.fu-fns { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.fu-fns b { width: 100%; color: var(--text); }
.fu-fns em { font-style: normal; font-weight: 700; color: var(--text-2); }
.fu-months tr.fu-month { cursor: pointer; }
.fu-months tr.fu-month:hover td, .fu-months tr.fu-month:focus-visible td { background: var(--tint); }
.fu-months tr.fu-month.on td { font-weight: 700; }
.fu-months small { color: var(--muted); font-weight: 400; }

/* Manifest: the description's proof on hover, and the blank-labels switch. */
.pp-proof-field { color: #075985; cursor: zoom-in; text-decoration: underline dotted; text-underline-offset: 3px; }
:root[data-theme="dark"] .pp-proof-field { color: #7dd3fc; }
.pp-proof-preview { position: fixed; z-index: 1001; width: 224px; padding: 8px; border: 1px solid var(--line-3); border-radius: 0; background: var(--panel); box-shadow: 0 14px 30px rgba(15, 23, 42, .28); pointer-events: none; }
.pp-proof-preview img, .pp-proof-preview embed { display: block; width: 100%; height: 270px; border: 0; border-radius: 0; background: #f8fafc; object-fit: contain; }
.pp-proof-preview span { position: absolute; top: 14px; right: 14px; padding: 1px 5px; border-radius: 0; background: #dc2626; color: #fff; font-size: 10px; font-weight: 800; }
.pp-blank { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }

/* Order details pane: the delivery method up top, large, with where it goes. */
.oq-deliv { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 10px; padding: 10px 12px; border-radius: 0; border: 1.5px solid var(--line-2); background: var(--tint); }
.oq-deliv small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.oq-deliv > b { font-size: 17px; font-weight: 800; }
.oq-deliv.pickup { border-color: #65a30d; background: color-mix(in srgb, #65a30d 10%, var(--panel)); }
.oq-deliv.ship { border-color: #7c3aed; background: color-mix(in srgb, #7c3aed 9%, var(--panel)); }
.oq-deliv.deliver { border-color: #3b82f6; background: color-mix(in srgb, #3b82f6 9%, var(--panel)); }
.oq-deliv.none { border-style: dashed; }
.oq-deliv.none > b { color: var(--muted); font-weight: 600; }
.oq-deliv-sub { font-size: 13px; color: var(--text-2); line-height: 1.4; margin-top: 4px; }
.oq-deliv-sub b { display: block; font-size: 11.5px; color: var(--muted); }
.oq-deliv-sub.warn { color: var(--bad); }
.oq-deliv-note { font-size: 13px; color: var(--text-2); line-height: 1.35; }
.oq-deliv.split { border-color: #d97706; background: color-mix(in srgb, #d97706 9%, var(--panel)); }
.oq-deliv.inventory { border-color: var(--line-2); }
/* Order details: header with the PO, profile, delivery, dates grid, money, foot. */
.oq-order-pane { display: flex; flex-direction: column; gap: 12px; }
.oq-pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.oq-pane-head .eyebrow { margin: 0; }
.oq-pane-po { font-size: 12px; color: var(--muted); }
.oq-profile { display: flex; align-items: center; gap: 12px; }
.oq-profile-logo { flex: none; display: grid; place-items: center; width: 92px; height: 48px; padding: 4px 6px; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: 0; background: #fff; overflow: hidden; }
.oq-profile-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.oq-profile-logo i { font-style: normal; font-weight: 800; font-size: 15px; color: #475569; letter-spacing: .04em; }
.oq-profile-text { display: grid; gap: 1px; min-width: 0; }
.oq-profile-text small, .oq-fact small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.oq-profile-text b { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.oq-order-pane .oq-deliv { margin: 0; }
.oq-facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.oq-fact { display: grid; gap: 2px; font-size: 14px; }
.oq-fact.wide { grid-column: 1 / -1; }
.oq-fact em { font-style: normal; color: var(--dim); }
.oq-pane-money { padding-top: 12px; border-top: 1px solid var(--line); gap: 8px; }
.oq-pane-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.oq-back-deal { font-size: 12.5px; color: var(--muted); }
/* Editor: the profile's logo beside its picker. */
.oe-profile { display: flex; align-items: center; gap: 8px; }
.oe-profile select { flex: 1; min-width: 0; }
.oq-profile-logo.sm { width: 54px; height: 34px; padding: 3px 4px; }
.oq-profile-logo.sm:empty { display: none; }
/* A garment's foot: sizes and total qty on a soft band, the calculator's
   price at the right, then its button. */
.oe .oe-g-sizes { gap: 8px; margin-top: 10px; padding: 8px 10px 9px; border-radius: 0; background: var(--tint); border: 1px solid var(--line); }
.oe .oe-g-sizes .oe-size.total { width: 72px; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--line-2); }
.oe .oe-g-sizes .oe-size.total > span { color: var(--text-2); font-weight: 700; }
.oe .oe-g-sizes .o-in { background: var(--panel); }
.oe .oe-g-sizes .oe-empty-sizes { display: grid; gap: 1px; align-self: center; padding: 0; font-size: 12.5px; line-height: 1.35; }
.oe .oe-g-sizes .oe-empty-sizes b { font-size: 13px; font-weight: 600; color: var(--text-2); }
.oe .oe-g-sizes .oe-calc { align-self: center; gap: 14px; }
.oe .oe-calc-price { color: var(--muted); }
.oe .oe-calc-price b { font-size: 16px; font-weight: 700; }
.oe .oe-calc-price i { font-style: normal; font-size: 12px; }
.oe-calc-open { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); }
/* Deal and invoice imprint: one card, its locations on top, then each
   garment (detailImprint). */
.oq-imp-card { border: 1px solid var(--line-2); border-radius: 0; overflow: hidden; background: var(--panel); }
.oq-imp-card .oq-imp-locs { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.oq-imp-card .oq-imp-locs:last-child { border-bottom: 0; }
.oq-imp-card .oq-imp-locs li { padding: 10px 16px; }
.oq-imp-card .oq-imp-lines { gap: 0; margin: 0; }
.oq-imp-card .oq-imp-line { border: 0; border-radius: 0; }
.oq-imp-card .oq-imp-line + .oq-imp-line { border-top: 1px solid var(--line-2); }
.oq-imp-card .oq-imp-top { padding: 12px 16px; }
.oq-imp-card .oq-imp-body { padding: 10px 16px 14px; }
.oq-imp-card .oq-imp-lines > .note { padding: 12px 16px; margin: 0; }
/* Both manifests: every column and its text centered. */
.pp-mtable th, .pp-mtable td, .pp-mtable .num { text-align: center; }
.pp-mtable input, .pp-mtable select { text-align: center; text-align-last: center; }
.pp-mtable td.acts { text-align: center; }
/* Both manifests: gridlines between every cell. */
.pp-mtable th, .pp-mtable td { border-left: 1px solid var(--line-2); }
.pp-mtable td { border-top-color: var(--line-2); }
.pp-mtable th:first-child, .pp-mtable td:first-child { border-left: 0; }
/* A size's defects by reason (the extension's defect breakdown). */
.pp-defect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.pp-defect-grid label { display: grid; gap: 3px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.pp-defect-grid input { min-height: 32px; padding: 4px 8px; border-radius: 0; text-align: center; font-weight: 700; }
.pp-defect-total { padding-top: 6px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pp-defect-total b { color: var(--bad); }
/* Deal and invoice: the three notes on top of the main column (notesPane). */
.oq-notes { padding: 14px 18px 16px; }
.oq-notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.oq-notes-head .eyebrow { margin: 0; }
.oq-notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-2); border-radius: 0; overflow: hidden; }
.oq-notes-col { display: grid; align-content: start; gap: 6px; padding: 10px 12px; min-width: 0; }
.oq-notes-col + .oq-notes-col { border-left: 1px solid var(--line); }
.oq-notes-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.oq-notes-label b { font-size: 13px; font-weight: 800; }
.oq-notes-label small { font-size: 11px; color: var(--faint); white-space: nowrap; }
.oq-notes-col .oq-note { margin: 0; font-size: 13.5px; line-height: 1.45; }
.oq-notes-none { margin: 0; font-size: 13px; color: var(--dim); }
@media (max-width: 720px) { .oq-notes-grid { grid-template-columns: 1fr; } .oq-notes-col + .oq-notes-col { border-left: 0; border-top: 1px solid var(--line); } }
/* Order details, list rows (option A): icon + label left, value right,
   an optional line under it. */
.oq-od-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.oq-od-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.oq-od-label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); white-space: nowrap; }
.oq-od-label svg { flex: none; color: var(--faint); }
.oq-od-value { text-align: right; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.oq-od-value em { font-style: normal; font-weight: 400; color: var(--dim); }
.oq-od-sub { grid-column: 1 / -1; padding-left: 22px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.oq-od-sub .warn { color: var(--bad); }
.oq-od-profile { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.oq-od-profile span:last-child:not(.oq-profile-logo) { font-size: 12.5px; }
.oq-order-pane .oq-pane-money { padding-top: 4px; border-top: 0; gap: 6px; font-size: 13.5px; }
.oq-order-pane .oq-pane-money .bal { padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--line-2); font-size: 15px; }
.oq-order-pane .oq-pane-money .sub span:first-child { color: var(--text); }
.oq-credit { margin: 4px 0 0; font-size: 12.5px; color: var(--good); }
/* Customer page: the approved quote's record, and an invoice's balance. */
.pq-approved { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.pq-approved b { color: var(--accent); font-weight: 600; }
.pq-totals .pq-balance span:last-child { color: var(--accent); }

/* ---- Dashboard (portal/dashboard.js) ---- */
.db-head-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.db-picker { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.db-note { margin: 0; }
.db-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.db-card { display: flex; flex-direction: column; min-width: 0; padding: 0 0 14px; overflow: hidden; }
.db-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.db-card-head h2 { font-family: var(--f-display); font-weight: 800; font-size: 24px; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.db-audit { margin-top: 18px; }
.db-audit h3 { font-size: 14px; font-weight: 700; margin: 16px 20px 6px; }
.db-audit .note { margin: 4px 20px; }
.db-audit .db-table td { white-space: nowrap; }
.db-more { color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; padding: 0; }
.db-more:hover { color: var(--accent-hi); }
.db-sub { font-size: 12px; color: var(--faint); }
.db-month-head { display: flex; align-items: center; gap: 4px; }
.db-month-step { display: grid; place-items: center; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text-2); cursor: pointer; }
.db-month-step:hover:not(:disabled) { background: var(--tint); color: var(--text); }
.db-month-step:disabled { opacity: .35; cursor: default; }
.db-month-head .cu-date { width: 140px; min-height: 32px; }
.db-month-pick input, .db-month-head select { min-height: 32px; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
.db-month-head .dp-btn { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
.db-empty { margin: 0; padding: 28px 20px; color: var(--muted); font-size: 14px; }
.db-card .loading { padding: 32px 20px; }
.db-scroll { overflow-x: auto; }
.db-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13.5px; }
.db-table th { padding: 10px 7px 8px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); vertical-align: bottom; white-space: normal; }
.db-table td { padding: 7px 7px; border-top: 1px solid var(--line); vertical-align: middle; }
.db-table th:first-child, .db-table td:first-child { padding-left: 18px; }
.db-table th:last-child, .db-table td:last-child { padding-right: 18px; }
.db-table .num { text-align: right; }
.db-table a { color: var(--text); font-weight: 600; text-decoration: none; }
/* Sortable headers: click to sort, again to reverse. */
.db-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.db-sort:hover, th[aria-sort="ascending"] .db-sort, th[aria-sort="descending"] .db-sort { color: var(--text); }
.db-table th.num .db-sort { text-align: right; }
.db-table a:hover { color: var(--accent); }
.db-check { width: 1%; }
.db-check .tk-check { border-radius: 0; }
.db-task { background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-weight: 600; text-align: left; }
.db-task:hover { color: var(--accent); }
.db-nowrap { white-space: nowrap; }
.db-late { color: var(--bad); font-weight: 600; white-space: nowrap; }
.db-today { color: var(--accent); font-weight: 600; white-space: nowrap; }
.db-btns { display: flex; flex-wrap: nowrap; gap: 6px; }
/* Rows stay one line: long names and links shrink to "…" (full text on hover). */
.db-table td.db-fit { max-width: 0; width: 34%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-table td.db-fit > * { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-btns .btn.sm { min-height: 30px; padding: 4px 9px; }
.db-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px 4px; }
.db-chip { min-height: 30px; padding: 4px 14px; border-radius: 0; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.db-chip:hover { border-color: var(--line-3); }
.db-chip.on { background: var(--marigold); border-color: var(--marigold); color: var(--marigold-ink); }
/* Goals */
.db-goals { padding-inline: 20px; }
.db-goals .db-card-head { margin-inline: -20px; }
.db-ytd { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-top: 16px; }
.db-label, .db-stats span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.db-big { font-family: var(--f-display); font-weight: 800; font-size: clamp(38px, 3.6vw, 54px); line-height: 1; font-variant-numeric: tabular-nums; }
.db-goal-line { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.db-goal-line b { font-size: 14px; }
.db-goal-line span { font-size: 12px; color: var(--faint); }
/* The bar with two marks: Today (the fill's end) and Pace, label above and percent below. */
.db-bar-wrap { position: relative; margin: 14px 0 4px; padding: 22px 0; }
.db-bar { position: relative; height: 16px; border-radius: 0; background: var(--track); overflow: hidden; }
.db-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--om-rev); }
.db-mark { position: absolute; top: 16px; bottom: 16px; width: 2px; margin-left: -1px; background: var(--text); }
.db-mark.today { background: var(--om-rev); }
.db-mark em, .db-mark small { position: absolute; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-mark em { bottom: calc(100% + 2px); }
.db-mark small { top: calc(100% + 2px); }
.db-mark.today em, .db-mark.today small { color: var(--om-rev); }
.db-mark.left em, .db-mark.left small { left: auto; right: 4px; transform: none; }
.db-mark.right em, .db-mark.right small { left: 4px; transform: none; }
.db-num { font-weight: 700; }
.db-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.db-stats b { display: block; margin: 4px 0 2px; font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 2.4vw, 38px); line-height: 1.05; font-variant-numeric: tabular-nums; }
.db-stats em { display: block; font-style: normal; font-size: 12px; font-weight: 600; }
.db-stats em.up { color: var(--good); }
.db-stats em.down { color: var(--bad); }
.db-stats em.muted { color: var(--faint); font-weight: 500; }
/* Month to date */
.db-legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 20px 0; font-size: 12px; color: var(--text-2); }
.db-legend span { display: inline-flex; align-items: center; gap: 7px; }
.db-legend-total { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.db-key { display: inline-block; width: 18px; height: 0; border-top: 3px solid; }
.db-key.ty { border-color: var(--om-rev); }
.db-key.ly { border-color: var(--dim); }
.db-key.pace { border-top: 3px dashed var(--accent); }
.db-chart { display: block; width: 100%; height: auto; padding: 4px 12px 0 4px; }
.db-chart text { fill: var(--faint); font-size: 11px; font-family: var(--f-body); }
.db-chart .db-gridline { stroke: var(--line); stroke-width: 1; }
.db-chart path { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.db-chart .db-ty { stroke: var(--om-rev); }
.db-chart .db-ly { stroke: var(--dim); }
.db-chart .db-goalpace { stroke: var(--accent); stroke-dasharray: 6 5; stroke-width: 2.2; }
.db-chart .db-ty-dot { fill: var(--om-rev); stroke: var(--panel); stroke-width: 2; }
/* Hover readout */
.db-chart-wrap { position: relative; touch-action: pan-y; cursor: crosshair; }
.db-chart .db-guide { stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 3 3; }
.db-chart .db-hover circle { stroke: var(--panel); stroke-width: 2; }
.db-chart .db-hover-ty { fill: var(--om-rev); }
.db-chart .db-hover-ly { fill: var(--dim); }
.db-chart .db-hover-pace { fill: var(--accent); }
.db-tip { position: absolute; top: 8px; z-index: 3; margin-left: 12px; display: flex; flex-direction: column; gap: 3px; min-width: 150px; padding: 8px 11px; border-radius: 0; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 10px 24px -12px var(--shadow); font-size: 12px; color: var(--text-2); pointer-events: none; white-space: nowrap; }
.db-tip.flip { transform: translateX(calc(-100% - 24px)); }
.db-tip b { font-size: 12.5px; color: var(--text); }
.db-tip span { display: flex; align-items: center; gap: 7px; }
.db-tip em { margin-left: auto; padding-left: 12px; font-style: normal; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.db-tip .db-key { width: 12px; }
/* Team page: Sales goals */
.team-goals { display: flex; flex-direction: column; }
.team-goal { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 1.6fr) auto; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.team-goal:first-child { border-top: 0; padding-top: 0; }
.team-goal div { display: flex; flex-direction: column; min-width: 0; }
.team-goal span { font-size: 12.5px; color: var(--faint); }
.team-goal .team-goal-sum { font-size: 13px; color: var(--text-2); }
.team-goal-add { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.team-goal-add select { width: auto; }
/* Goal editor: Sales Rep, $ / %, the goal and the AOV floor on one line. */
.gl-line { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.gl-line .db-seg { margin-bottom: 1px; }
.gl-line .db-seg button { min-height: 34px; font-size: 14px; }
@media (max-width: 1100px) {
  .db-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .db-stats { grid-auto-flow: row; gap: 12px; }
  .gl-line { grid-template-columns: minmax(0, 1fr); }
  .db-goal-line { align-items: flex-start; text-align: left; }
  .team-goal { grid-template-columns: minmax(0, 1fr) auto; }
  .team-goal .team-goal-sum { grid-column: 1 / -1; grid-row: 2; }
}

/* QuickBooks (/quickbooks, portal/quickbooks.js): the connection, then what
   the company has, in the customer page's card style. */
.qb-conn { gap: 12px; }
.qb-conn-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qb-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qb-main small { color: var(--muted); font-size: 13px; }
.qb-lede { margin: 0; max-width: 70ch; color: var(--text-2); line-height: 1.55; }
.qb-note { margin: 0; color: var(--muted); font-size: 13.5px; }
.qb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.qb-card { max-height: 460px; }
.qb-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; }
.qb-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.qb-list li:first-child { border-top: 0; padding-top: 0; }
.qb-list b { font-weight: 600; overflow-wrap: anywhere; }
.qb-side { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.qb-count { margin-left: 6px; color: var(--muted); font-family: inherit; font-size: 15px; font-weight: 600; }
@media (max-width: 1180px) { .qb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .qb-grid { grid-template-columns: 1fr; } }
/* An invoice's QuickBooks line, on Payments & Expenses. */
/* Payments & Expenses (portal/orderMoney.js), KISS: totals, vertical bars, two centered tables, one footer line. */
.wrap.body.pe { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.pe-box { background: var(--panel); border: 1px solid var(--line-2); min-width: 0; }
.pe-box h3 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pe-box h3 b { margin-left: auto; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text); font-variant-numeric: tabular-nums; }
.pe-tots { display: flex; flex-wrap: nowrap; background: var(--panel); border: 1px solid var(--line-2); }
.pe-tot { flex: 1 1 140px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--line); }
.pe-tot:last-child { border-right: 0; }
.pe-tot span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.pe-tot b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pe-tot.good b { color: var(--good); } .pe-tot.bad b { color: var(--bad); }
.pe-row { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 14px; align-items: start; }
.pe-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pe-chart { padding-bottom: 10px; }
.pe-plot { position: relative; height: 230px; margin: 26px 18px 0 52px; display: flex; align-items: flex-end; justify-content: space-around; border-bottom: 1px solid var(--line-2); }
.pe-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); pointer-events: none; }
.pe-grid i { position: absolute; right: 100%; top: -8px; margin-right: 6px; font-style: normal; font-size: 11px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pe-col { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; width: 22%; height: 100%; }
.pe-col:hover .pe-bar { filter: brightness(1.12); }
.pe-bar { position: relative; width: min(56px, 100%); background: var(--text-2); border-radius: 4px 4px 0 0; }
.pe-bar.cost { background: var(--marigold); } .pe-bar.profit { background: var(--good); } .pe-bar.loss { background: var(--bad); }
.pe-bar em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; font-style: normal; font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }
.pe-xl { display: flex; justify-content: space-around; margin: 6px 18px 0 52px; font-size: 12px; font-weight: 600; color: var(--muted); }
.pe-xl span { width: 22%; text-align: center; }
.pe .pe-table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; }
.pe-table th { padding: 8px 8px; border-bottom: 1px solid var(--line-2); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.pe-table td { padding: 8px 8px; border-bottom: 1px solid var(--line); text-align: center; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pe-table th:last-child { width: 96px; }
.pe-neg td { color: var(--bad); }
.pe-dim { color: var(--faint); }
.pe-ok { color: var(--good); font-weight: 700; }
.pe-tag { display: inline-block; padding: 1px 8px; font-size: 12px; font-weight: 650; color: var(--bad); background: var(--bad-wash); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); white-space: nowrap; }
.pe-auto { margin-left: 4px; padding: 0 6px; font-size: 11px; color: var(--faint); border: 1px solid var(--line-2); }
.pe-x { width: 26px; height: 26px; border: 1px solid var(--line-2); background: none; color: var(--faint); cursor: pointer; font: inherit; }
.pe-x:hover { color: var(--bad); border-color: var(--bad); }
.pe-table .btn.sm { min-height: 0; padding: 3px 10px; font-size: 12.5px; }
.pe-add td { background: var(--row-open); }
.pe-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.pe-form input, .pe-form select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); text-align: center; min-width: 0; }
.pe-form input[name="amount"] { width: 100px; } .pe-form input[type="date"] { width: 140px; }
.pe-form input[name="note"], .pe-form input[name="description"], .pe-form input[name="reason"] { flex: 1 1 160px; }
.pe-add .form-error { margin: 6px 0 0; }
.pe-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 13px; color: var(--muted); }
.pe-foot a { color: var(--text); font-weight: 600; }
.pe-foot label { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1100px) { .pe-row { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .pe-tots { flex-wrap: wrap; } .pe-tot { flex: 1 1 45%; border-bottom: 1px solid var(--line); } .pe-table th:last-child { width: 70px; } }
/* Pipeline test card (portal/quickbooks.js), sandbox only. */
.pt-card .pe-table { min-width: 0; }
.pt-table td:first-child, .pt-table th:first-child { text-align: left; }
.pt-table td:nth-child(3) { text-align: left; color: var(--text-2); }
.pt-table th:nth-child(2), .pt-table th:nth-child(4) { width: 90px; }
.pt-table tr.pt-head td { background: var(--raise); }
.pt-keep { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.om-qb { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding-block: 12px; font-size: 14px; }
.om-qb-label { font-weight: 700; }
.om-qb-status { flex: 1 1 280px; min-width: 0; color: var(--text-2); }
.om-qb-skip { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--text-2); }
/* The QuickBooks page's invoice sync: the switch and the recent activity. */
#qbSync { display: grid; gap: 14px; }
.qb-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.qb-mode { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 0; cursor: pointer; }
.qb-mode:has(input:checked) { border-color: var(--marigold); background: var(--marigold-wash); }
.qb-mode b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; }
.qb-mode small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.qb-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.qb-picks label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.qb-sync-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) { .qb-picks { grid-template-columns: 1fr; } }
/* Money settings: products by kind of work, rates by tax location. */
.qb-map { margin-top: 16px; }
.qb-map-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px 28px; align-items: start; }
.qb-map-list { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; }
.qb-map-list legend { padding: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.qb-map-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.qb-map-row span { color: var(--text); overflow-wrap: anywhere; }
.qb-map-list .qb-note { margin: 8px 0 0; }
@media (max-width: 900px) { .qb-map-cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .qb-map-row { grid-template-columns: 1fr; gap: 4px; } }
/* The Money page (portal/money.js): Needs attention, its tabs, and tables
   in the directory style. Settings folds the QuickBooks company's lists. */
/* Needs attention: a one-line banner under the tabs; Show opens its list. */
.mn-attn { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; border-radius: 0; border: 1px solid var(--line); background: var(--panel); font-size: 14px; }
.mn-attn > b { font-weight: 700; }
.mn-attn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.mn-attn.good .mn-attn-dot { background: var(--good); }
.mn-attn.bad { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.mn-attn.bad .mn-attn-dot { background: var(--bad); }
.mn-attn.wait .mn-attn-dot { background: var(--marigold); }
.mn-attn-kinds { display: inline-flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 13px; }
.mn-attn-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.mn-attn-box { display: flex; flex-direction: column; gap: 10px; padding: 0 0 12px; border-radius: 0; border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); background: var(--panel); }
.mn-attn-box .mn-attn { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.mn-attn-box > .qb-note { padding: 0 14px; }
.mn-attn-list { list-style: none; margin: 0; padding: 0 14px; display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.mn-attn-list li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.mn-attn-list li:first-child { border-top: 0; }
.mn-attn-list .tag { flex: none; min-width: 88px; justify-content: center; }
.mn-attn-list a { color: var(--text); text-decoration: none; }
.mn-attn-list a:hover { color: var(--accent); }
/* Money page type: the page title is the only display face. Card headings
   and every number use the portal's sans, numbers with even-width digits, so
   Payments, Deposits, Expenses and Settings read as one page. */
.mn-page .cu-card h3, .mn-page .set-form h3, .mn-page .set-activity h3 { font-family: inherit; font-size: 17px; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.mn-page .mono, .mn-page .om-tile b { font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.mn-page .mn-table b.mono, .mn-page .mn-table td.mono b { font-weight: 650; }
.mn-results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mn-results > .btn { align-self: flex-start; }
.mn-table { width: 100%; min-width: 940px; table-layout: auto; }
.mn-table td { font-variant-numeric: tabular-nums; padding-inline: 10px; }
.mn-table th .th-inner { padding: 0 28px 0 4px; }
.mn-table th.right .th-inner { justify-content: flex-end; }
.mn-table .dir-sub { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--faint); }
.mn-table tr.mn-neg td:first-child b { color: var(--bad); }
.mn-table td.right .dir-sub { margin-left: auto; text-align: right; }
.mn-table td[data-label="Customer"] { white-space: normal; min-width: 120px; }
.mn-flash td { animation: mn-flash 2.4s ease-out; }
@keyframes mn-flash { from { background: var(--marigold-wash); } to { background: transparent; } }
/* One table (KISS): head tools, six totals, payouts as bold rows; every column centered. */
.mn-page > .mn-head { flex-wrap: wrap; align-items: center; gap: 10px; }
.mn-head-tools { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mn-head-tools .o-in { width: auto; flex: 0 1 auto; }
.mn-head-tools .mn-search { width: 300px; max-width: 100%; }
.mn-tots { display: flex; flex-wrap: wrap; border: 1px solid var(--line-2); background: var(--panel); }
.mn-tot { flex: 1 1 140px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 14px; border-right: 1px solid var(--line); color: var(--text); text-decoration: none; }
.mn-tot:last-child { border-right: 0; }
a.mn-tot:hover { background: var(--tint); }
.mn-tot > span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.mn-tot > b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mn-tot > small { font-size: 11px; color: var(--faint); }
.mn-tots-when { margin: 0 0 6px; font-size: 12.5px; color: var(--faint); }
.mn-tot.good > b { color: var(--good); }
.mn-tot.hot > b { color: var(--bad); }
.mn-ledger { width: 100%; min-width: 760px; table-layout: fixed; }
.mn-ledger th, .mn-ledger td { text-align: center !important; padding: 9px 10px; font-variant-numeric: tabular-nums; }
.mn-ledger th:nth-child(2) { width: 18%; } .mn-ledger th:nth-child(3) { width: 20%; } .mn-ledger th:nth-child(7) { width: 16%; }
.mn-ledger tr.mn-grp td { background: var(--raise); font-weight: 700; border-bottom: 1px solid var(--line-2); }
.mn-ledger tr.mn-grp.bad td { background: var(--bad-wash); }
.mn-ledger tr.mn-grp a { color: var(--text); font-weight: 700; }
.mn-ledger .dim-num { color: var(--faint); font-weight: 400; }
.mn-ledger tr.mn-grp .dim-num { font-weight: 700; }
.mn-ledger .btn.sm { min-height: 0; padding: 2px 10px; font-size: 12.5px; }
.mn-tag { display: inline-block; padding: 1px 8px; font-size: 12px; font-weight: 650; color: var(--bad); background: var(--bad-wash); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); white-space: nowrap; }
@media (max-width: 760px) { .mn-tot { flex: 1 1 45%; border-bottom: 1px solid var(--line); } .mn-head-tools { margin-left: 0; width: 100%; } .mn-head-tools .mn-search { flex: 1 1 100%; width: auto; } .mn-ledger { min-width: 0; } }
.qb-lists { border: 1px solid var(--line); border-radius: 0; background: var(--panel); padding: 14px 18px; }
.qb-lists > summary { cursor: pointer; font-weight: 700; }
.qb-lists > summary small { display: block; margin-top: 2px; font-weight: 500; color: var(--muted); font-size: 13px; }
.qb-lists[open] > summary { margin-bottom: 14px; }
.mn-settings { display: flex; flex-direction: column; gap: 16px; }
/* Settings: a tile per setting with its main button, then the two forms. */
.set-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.set-tile { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 0; min-width: 0; }
.set-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.set-tile h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.set-tile-main { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.set-tile-sub { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.set-tile-acts { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.set-tile-acts .form-error { flex-basis: 100%; }
.set-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.set-form form { display: flex; flex-direction: column; gap: 14px; }
.set-form-head { display: flex; flex-direction: column; gap: 4px; }
.set-form-head h3, .set-activity h3 { margin: 0; }
.set-form .qb-mode { flex: 1 1 140px; }
.qb-picks.one { grid-template-columns: 1fr; }
.set-how { font-size: 13.5px; color: var(--muted); }
.set-how summary { cursor: pointer; width: max-content; font-weight: 600; color: var(--text-2); }
.set-how p { margin: 8px 0 0; line-height: 1.55; max-width: 70ch; }
.set-left { justify-content: flex-start; }
.set-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.set-log li { display: grid; grid-template-columns: 96px 70px 128px minmax(0, 1fr) 96px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.set-log li:first-child { border-top: 0; }
.set-log a { color: var(--text); text-decoration: none; }
.set-log a:hover { color: var(--accent); }
.set-log .tag { justify-self: start; }
.set-log-day { color: var(--muted); font-size: 13px; }
.set-log-note { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-log-total { text-align: right; }
.set-activity .linkish { align-self: flex-start; color: var(--accent); }
@media (max-width: 1180px) { .set-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .set-forms { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .mn-table { min-width: 0; }
  .set-tiles { grid-template-columns: 1fr; }
  .set-log li { grid-template-columns: auto auto 1fr; }
  .set-log-note { grid-column: 1 / -1; white-space: normal; }
  .set-log-total { grid-column: 3; grid-row: 1; }
  .mn-attn-acts { margin-left: 0; width: 100%; justify-content: space-between; }
  .mn-attn-list .tag { min-width: 0; }
  .mn-table td.right .dir-sub { margin-left: 0; text-align: left; }
}
/* Pay by card on a quote's approval page (portal/quote/quote.js): Square's
   card form sits in #pqCard. */
.pq-pay { background: var(--panel); border: 1px solid var(--line-2); border-radius: 0; padding: 18px 22px; margin: 16px 0 0 auto; width: min(460px, 100%); display: flex; flex-direction: column; gap: 12px; }
.pq-pay-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pq-pay-head h2 { font-size: 17px; font-weight: 700; }
.pq-pay-head b { font-size: 18px; }
.pq-pay-test { margin: 0; padding: 8px 10px; border-radius: 0; background: var(--marigold-wash); font-size: 13px; line-height: 1.45; }
.pq-pay-fields { display: grid; gap: 10px; }
.pq-pay-choice { display: grid; gap: 6px; }
.pq-pay-choice label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line-2); cursor: pointer; }
.pq-pay-choice label b { margin-left: auto; }
.pq-pay-choice label:has(input:checked) { border-color: var(--marigold); background: var(--marigold-wash); }
.pq-field em { font-style: normal; font-weight: 400; color: var(--muted); }
.pq-card { min-height: 48px; }
.pq-pay-loading { display: block; padding: 12px 0; color: var(--muted); font-size: 13.5px; }
.pq-pay-btn { width: 100%; justify-content: center; }
.pq-pay-note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.pq-paid { margin: 16px 0 0 auto; width: min(460px, 100%); padding: 12px 16px; border-radius: 0; background: var(--good-wash); border: 1px solid var(--good-line); color: var(--good); font-size: 14.5px; }
.pq-paid a { color: inherit; font-weight: 600; }

/* ---- Phones and iPads ----
   Staff top bar: on a phone + New sits beside the avatar, sign out and
   theme on the top row. */
@media (max-width: 760px) {
  body.staff .top-inner { padding-block: 10px; gap: 10px; }
  body.staff .user { display: contents; }
  body.staff .user > .hdr-new { order: 2; margin-left: auto; }
  body.staff .user .who { order: 3; }
  body.staff .user #signOut { order: 3; white-space: nowrap; }
  body.staff .theme-toggle { order: 4; }
  /* Directory tables turn into cards; the column widths set inline for the
     desktop table must not stretch them past the screen. */
  .dir-table { min-width: 0 !important; }
  /* Filter tiles (Invoices aging) scroll sideways instead of stacking three deep. */
  .sh-tiles:has(> [data-dir-filter]) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .sh-tiles:has(> [data-dir-filter]) > .sh-tile { flex: 0 0 auto; min-width: 150px; scroll-snap-align: start; }
  .sh-tiles:has(> [data-dir-filter]) .sh-tile b { font-size: 20px; }
  .sh-bar { flex-wrap: wrap; }
  .sh-bar .inv-filters { flex-basis: 100%; }
  .inv-filters > select { flex: 1 1 0; min-width: 0; }
  /* Filter dropdowns sit two to a row under a full-width search. */
  .opp-bar .opp-search, .opp-bar .sh-search { flex-basis: 100%; }
  .opp-bar .opp-select.opp-filter { flex: 1 1 calc(50% - 8px); min-width: 0; }
  /* Tab rows and segmented controls stay one line and scroll sideways. */
  .opp-tabs, .pc-tabs, .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .opp-tabs::-webkit-scrollbar, .pc-tabs::-webkit-scrollbar, .seg::-webkit-scrollbar, .sh-tiles::-webkit-scrollbar { display: none; }
  .opp-tabs a, .pc-tab, .seg label { flex: none; white-space: nowrap; }
  .opp-tabs a[aria-current="page"]::after { bottom: 0; }
  .lb-field:has(> .seg) { min-width: 0; max-width: 100%; }
}
@media (max-width: 560px) {
  .sh-head { gap: 12px; }
  .sh-page > .sh-head:has(+ nav):not(:has(> div > :not(h1, p))) { position: static; }
}
/* The phone/iPad-portrait menu dims the page behind it; a tap there closes it. */
@media (max-width: 960px) {
  body.staff.side-open::after { content: ""; position: fixed; inset: 0; z-index: 17; background: rgba(0, 0, 0, .28); cursor: pointer; }
}
/* Touch screens: no iPhone zoom when a field is tapped (Safari zooms under
   16px), and small links and buttons get a finger-sized hit area. */
@media (pointer: coarse) {
  .btn.sm { min-height: 40px; }
  .linkish { min-height: 36px; padding-block: 8px; }
  .sh-columns summary { padding-block: 10px; }
}
@media (pointer: coarse) and (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em); }
}

/* ---- Pickup & Delivery (portal/fulfillment.js): the showroom pickup and
   delivery apps' screens (pickup/styles.css), big touch targets and all, on
   the portal's own colors so they follow light and dark. ---- */
.pd-top { padding-bottom: 0; }
.pd {
  --pd-ink: var(--text); --pd-on-ink: var(--ink-2); --pd-card: var(--panel); --pd-soft: var(--raise); --pd-soft-2: var(--tint);
  --pd-line: var(--line-2); --pd-line-2: var(--line); --pd-gold: var(--marigold); --pd-gold-soft: var(--marigold-wash); --pd-gold-ink: var(--accent);
  --pd-warn: #b45309; --pd-warn-soft: rgba(180, 83, 9, .1); --pd-link: var(--accent);
  --pd-radius: 0; --pd-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  font-family: var(--f-body); color: var(--text);
}
:root[data-theme="dark"] .pd { --pd-warn: #fdba74; --pd-warn-soft: rgba(253, 186, 116, .12); --pd-shadow: none; }
.pd svg { flex: none; }
.pd a { color: inherit; }
.pd table { min-width: 0; }
.pd-page { max-width: 980px; margin: 0 auto; padding: 22px 24px 40px; }
.pd-h1 { font-family: var(--f-body); font-size: 30px; line-height: 1.15; letter-spacing: -.02em; margin: 6px 0; font-weight: 800; text-transform: none; }
.pd-h2 { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 30px 0 12px; font-family: var(--f-body); }
.pd-lede { font-size: 16px; color: var(--muted); margin: 0; line-height: 1.5; }
.pd-card { background: var(--pd-card); border: 1px solid var(--pd-line); border-radius: var(--pd-radius); box-shadow: var(--pd-shadow); }
.pd-pad { padding: 20px 22px; }
.pd-meta { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.pd-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 0; background: var(--pd-soft); color: var(--text-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pd-chip.good { background: var(--good-wash); color: var(--good); }
.pd-chip.warn { background: var(--pd-warn-soft); color: var(--pd-warn); }
.pd-chip.gold { background: var(--pd-gold-soft); color: var(--pd-gold-ink); }
.pd-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pd .mono { font-family: var(--f-mono); }

.pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 24px; border-radius: 0; border: 1px solid transparent; background: var(--pd-ink); color: var(--pd-on-ink) !important; font: inherit; font-size: 16.5px; font-weight: 650; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .08s ease, opacity .15s ease; }
.pd-btn:active { transform: scale(.985); }
.pd-btn:disabled { opacity: .35; cursor: default; transform: none; }
.pd-btn.light { background: var(--pd-card); color: var(--text) !important; border-color: var(--pd-line); box-shadow: var(--pd-shadow); }
.pd-btn.small { height: 40px; padding: 0 16px; border-radius: 0; font-size: 14.5px; }
.pd-back { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 2px; border: 0; background: none; color: var(--muted) !important; font-size: 15px; font-weight: 600; cursor: pointer; margin-bottom: 6px; text-decoration: none; }
.pd-text-btn { border: 0; background: none; color: var(--pd-link); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; padding: 6px 0; }
.pd-text-btn.danger { color: var(--bad); }

.pd-steps { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; font-weight: 600; color: var(--faint); }
.pd-step { display: inline-flex; align-items: center; gap: 8px; }
.pd-step b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--pd-line); color: var(--muted); font-size: 12px; }
.pd-step.on { color: var(--text); }
.pd-step.on b { background: var(--pd-ink); color: var(--pd-on-ink); }
.pd-step.done b { background: var(--pd-gold); color: var(--marigold-ink); }
.pd-step-line { width: 28px; height: 1px; background: var(--pd-line); }

.pd-seg { display: inline-flex; padding: 4px; margin: 0 0 18px; border-radius: 0; background: var(--pd-soft); gap: 4px; }
.pd-seg a { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: 0; font-size: 15px; font-weight: 700; color: var(--muted) !important; text-decoration: none; }
.pd-seg a.on { background: var(--pd-card); color: var(--text) !important; box-shadow: var(--pd-shadow); }

.pd-search { display: flex; gap: 10px; margin: 22px 0 8px; }
.pd-search-field { position: relative; flex: 1; min-width: 0; }
.pd-search-field svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.pd-search input { width: 100%; height: 58px; padding: 0 18px 0 52px; border-radius: 0; border: 1px solid var(--pd-line); background: var(--pd-card); color: var(--text); font: inherit; font-size: 18px; box-shadow: var(--pd-shadow); outline: none; -webkit-appearance: none; appearance: none; }
.pd-search input:focus, .pd-field input:focus { border-color: var(--line-3); box-shadow: 0 0 0 4px var(--marigold-wash); }
.pd-search input:has(~ .pd-clear) { padding-right: 60px; }
.pd-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.pd-search .pd-btn { height: 58px; }
.pd-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--pd-soft); color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; }
.pd-results { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pd-order-row { display: flex; gap: 10px; align-items: stretch; min-width: 0; }
.pd-order-card { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 18px 20px; text-align: left; background: var(--pd-card); border: 1px solid var(--pd-line); border-radius: var(--pd-radius); box-shadow: var(--pd-shadow); cursor: pointer; text-decoration: none; transition: border-color .15s; }
.pd-order-card:hover, .pd-order-card:active { border-color: var(--line-3); }
.pd-order-main { flex: 1; min-width: 0; }
.pd-order-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pd-inv, .pd-order-top > a.mono, .pd-order-top > span.mono { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.pd-order-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-order-card .pd-meta { margin-top: 4px; }
.pd-address-line { color: var(--text) !important; font-weight: 600; margin-top: 2px; }
.pd-order-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pd-progress { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pd-bar { width: 72px; height: 6px; border-radius: 0; background: var(--pd-line); overflow: hidden; }
.pd-bar i { display: block; height: 100%; background: var(--pd-gold); border-radius: 0; }
.pd-chev { color: var(--faint); }
.pd-run-add { flex: none; width: 112px; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); background: var(--pd-card); box-shadow: var(--pd-shadow); font: inherit; font-size: 14.5px; font-weight: 700; color: var(--text); cursor: pointer; }
.pd-run-add:active { background: var(--pd-gold-soft); }
.pd-run-add.on { background: var(--pd-gold-soft); color: var(--pd-gold-ink); border-color: transparent; box-shadow: none; cursor: default; }
.pd-empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.pd-empty svg { color: var(--faint); margin-bottom: 10px; }
.pd-empty.small { padding: 26px 20px; }
.pd-section-note { margin: -6px 0 12px; }
.pd-dropoff-undo { margin-top: 10px; }
.pd-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 0; background: var(--bad-wash); color: var(--bad); font-weight: 600; font-size: 15px; margin: 16px 0; }
.pd-alert.warn { background: var(--pd-warn-soft); color: var(--pd-warn); }
.pd-alert.good { background: var(--good-wash); color: var(--good); }
.pd-loading { padding: 80px 0; display: grid; place-items: center; gap: 14px; color: var(--muted); font-size: 15px; }
.pd-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--pd-line); border-top-color: var(--pd-ink); animation: pd-spin .8s linear infinite; }
@keyframes pd-spin { to { transform: rotate(360deg); } }

/* The run, and the van's map beside it (above it on a phone). */
.pd-run-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; }
.pd-run-row.with-van { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; }
.pd-run-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 30px 0 12px; }
.pd-run-head .pd-h2 { margin: 0; }
.pd-run { overflow: hidden; }
.pd-stop { display: flex; align-items: center; gap: 18px; padding: 20px 20px 20px 22px; border-top: 1px solid var(--pd-line-2); }
.pd-stop:first-child { border-top: 0; }
.pd-stop-num { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--pd-ink); color: var(--pd-on-ink); font-weight: 800; font-size: 17px; }
.pd-stop.done .pd-stop-num, .pd-stop-num.done { background: var(--good-wash); color: var(--good); }
.pd-stop-num.drop { background: var(--pd-gold-soft); color: var(--pd-gold-ink); }
.pd-stop-main { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.pd-stop-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pd-stop-company { font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.pd-stop-po { font-size: 21px; font-weight: 800; color: var(--pd-gold-ink); white-space: nowrap; }
.pd-stop-job { margin-top: 6px; font-size: 15.5px; font-weight: 600; color: var(--text-2); }
.pd-stop-address { margin-top: 4px; font-size: 15px; color: var(--muted); }
.pd-stop-boxes { margin-top: 8px; display: inline-block; padding: 3px 9px; border-radius: 0; background: var(--pd-soft); font-size: 13px; font-weight: 600; color: var(--muted); }
.pd-stop.done .pd-stop-company, .pd-stop.done .pd-stop-po, .pd-stop.done .pd-stop-job { color: var(--muted); }
.pd-received { margin-top: 4px; color: var(--good); font-weight: 700; font-size: 14.5px; }
.pd-received.drop { color: var(--pd-gold-ink); }
.pd-stop-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.pd-icon-sm { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 0; border: 1px solid var(--pd-line); background: var(--pd-card); color: var(--text); cursor: pointer; }
.pd-icon-sm:active { background: var(--pd-soft); }
.pd-icon-sm:disabled { color: var(--dim); cursor: default; }
.pd-reorder { display: inline-flex; border: 1px solid var(--pd-line); border-radius: 0; overflow: hidden; background: var(--pd-card); }
.pd-reorder .pd-icon-sm { border: 0; border-radius: 0; height: 38px; }
.pd-reorder .pd-icon-sm + .pd-icon-sm { border-left: 1px solid var(--pd-line); }
.pd-icon-sm.remove { margin-left: auto; border-color: transparent; color: var(--faint); }
.pd-icon-sm.remove:active { background: var(--bad-wash); color: var(--bad); }
.pd-run-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--pd-line); background: var(--pd-soft-2); }
.pd-run-actions .pd-text-btn { margin-left: auto; }
.pd-run-note { padding: 0 16px 14px; background: var(--pd-soft-2); }
.pd-van-status { padding: 10px 16px; border-top: 1px solid var(--pd-line); background: var(--good-wash); color: var(--good); font-weight: 600; }
.pd-van-status.denied, .pd-van-status.unavailable { background: var(--pd-warn-soft); color: var(--pd-warn); }
.pd-van { overflow: hidden; }
.pd-van iframe { display: block; width: 100%; height: 380px; border: 0; background: var(--pd-soft); }
.pd-van-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 12px 16px; border-top: 1px solid var(--pd-line); font-size: 14px; color: var(--muted); }
.pd-van-bar strong { color: var(--text); }
.pd-van-bar a { color: var(--pd-link) !important; font-weight: 700; text-decoration: none; }
.pd-van-bar.stale { background: var(--pd-warn-soft); color: var(--pd-warn); }

/* One order. */
.pd-summary { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; }
.pd-summary small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.pd-summary span { font-size: 15.5px; font-weight: 600; }
.pd-boxes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pd-box { position: relative; display: block; padding: 16px 18px 18px; background: var(--pd-card); border: 1.5px solid var(--pd-line); border-radius: var(--pd-radius); box-shadow: var(--pd-shadow); cursor: pointer; transition: border-color .15s; }
.pd-box input { position: absolute; opacity: 0; pointer-events: none; }
.pd-tick { width: 26px; height: 26px; border-radius: 0; border: 1.5px solid var(--line-3); display: grid; place-items: center; color: transparent; background: var(--pd-card); flex: none; }
.pd-box.on { border-color: var(--pd-ink); }
.pd-box.on .pd-tick { background: var(--pd-ink); border-color: var(--pd-ink); color: var(--pd-on-ink); }
.pd-box.picked { cursor: default; background: var(--pd-soft-2); box-shadow: none; }
.pd-box.picked .pd-tick { background: var(--good-wash); border-color: transparent; color: var(--good); }
.pd-box-head { display: flex; align-items: center; gap: 12px; }
.pd-box-title { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-weight: 700; font-size: 16.5px; }
.pd-undo-btn { flex: none; height: 38px; padding: 0 14px; border-radius: 0; border: 1px solid var(--pd-line); background: var(--pd-card); color: var(--bad); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.pd-undo-btn:disabled { opacity: .5; }
.pd-table-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--pd-line); border-radius: 0; }
.pd-box-items { width: 100%; border-collapse: collapse; color: var(--text-2); font-size: 14.5px; }
.pd-box-items th, .pd-box-items td { border-left: 1px solid var(--pd-line); border-top: 1px solid var(--pd-line); padding: 9px 12px; text-align: left; vertical-align: middle; }
.pd-box-items th:first-child, .pd-box-items td:first-child { border-left: 0; }
.pd-box-items thead th { border-top: 0; background: var(--pd-soft-2); color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.pd-box-items tr.group-start td { border-top: 2px solid var(--line-3); }
.pd-box-items tbody tr:first-child td { border-top: 1px solid var(--pd-line); }
.pd-box-items .num { text-align: right; width: 1%; white-space: nowrap; }
.pd-box-items .nowrap { white-space: nowrap; }
.pd-box-items b { font-variant-numeric: tabular-nums; color: var(--text); font-size: 15.5px; }
.pd-box-items .pd-proof-cell { width: 1%; padding: 8px; text-align: center; border-right: 1px solid var(--pd-line); }
.pd-box-proof { width: 96px; height: 96px; cursor: zoom-in; border-radius: 0; border: 1px solid var(--pd-line); background: #fafafa; object-fit: contain; display: block; }
.pd-noproof-sm { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 0; border: 1px dashed var(--pd-line); color: var(--faint); font-size: 12px; }
.pd-box.picked .pd-box-items, .pd-box.picked .pd-box-title, .pd-box.picked .pd-box-items b { color: var(--faint); }
.pd-box.picked .pd-box-proof { opacity: .5; }
.pd-items { padding: 4px 22px; }
.pd-item { display: grid; grid-template-columns: 160px 1fr auto; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--pd-line-2); }
.pd-item:first-child { border-top: 0; }
.pd-proof { width: 160px; height: 160px; cursor: zoom-in; border-radius: 0; border: 1px solid var(--pd-line); background: #fafafa; object-fit: contain; display: block; }
.pd-noproof { width: 160px; height: 160px; border-radius: 0; border: 1px dashed var(--pd-line); display: grid; place-items: center; color: var(--faint); font-size: 12.5px; }
.pd-item-name { font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.pd-item-sub { margin: 4px 0 10px; color: var(--muted); font-size: 14px; }
.pd-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-size { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 0; background: var(--pd-soft); font-size: 13px; font-weight: 600; color: var(--muted); }
.pd-size b { color: var(--text); font-variant-numeric: tabular-nums; }
.pd-qty { text-align: right; }
.pd-qty b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pd-qty small { color: var(--faint); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.pd-tl { display: flex; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--pd-line-2); font-size: 14.5px; }
.pd-tl:first-child { border-top: 0; }
.pd-tl svg { color: var(--good); margin-top: 1px; }
.pd-ship-to { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pd-ship-to strong { font-size: 16px; }
.pd-ship-address { font-size: 18px; font-weight: 600; margin-top: 4px; line-height: 1.35; }
.pd-tracking { display: flex; flex-direction: column; gap: 10px; }
.pd-tracking a { font-family: var(--f-mono); font-size: 15px; font-weight: 600; color: var(--pd-link); text-decoration: none; word-break: break-all; }
.pd-pay-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pd-money { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.pd-money td { padding: 11px 0; border-top: 1px solid var(--pd-line-2); }
.pd-money tr:first-child td { border-top: 0; }
.pd-money td:last-child { text-align: right; font-weight: 600; }
.pd-money tr.due td { border-top: 1px solid var(--pd-line); font-size: 20px; font-weight: 800; padding-top: 14px; }
.pd-money tr.due td:last-child { color: var(--bad); }
.pd-money tr.due.paid td:last-child { color: var(--good); }
.pd-field { display: block; }
.pd-field input { width: 100%; height: 58px; padding: 0 18px; border-radius: 0; border: 1px solid var(--pd-line); background: var(--pd-card); color: var(--text); font: inherit; font-size: 18px; box-shadow: var(--pd-shadow); outline: none; -webkit-appearance: none; appearance: none; }
.pd-list-hide { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--pd-line); text-align: center; font-size: 14.5px; }
/* The apps' bottom bar, pinned to the bottom of the page beside the sidebar. */
.pd-actionbar { position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; gap: 16px; margin: 28px -24px -40px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); background: var(--top-bg); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--pd-line); }
.pd-count { flex: 1; font-size: 15px; color: var(--muted); }
.pd-count strong { color: var(--text); font-size: 17px; }

/* Next stop, thank-you. */
.pd-next-stop .pd-h1 { margin-top: 10px; }
.pd-next-stop .pd-ship-address { margin-top: 12px; }
.pd-next-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pd-next-actions .pd-btn { flex: 1 1 200px; }
.pd-next-back { margin-top: 18px; }
.pd-finish { min-height: 60vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.pd-badge { width: 88px; height: 88px; border-radius: 50%; background: var(--good-wash); color: var(--good); display: grid; place-items: center; margin: 0 auto 22px; }
.pd-finish .pd-h1 { font-size: 34px; }
.pd-finish .pd-lede { margin: 6px auto 30px; max-width: 460px; }

/* Delivery log calendar. */
.pd-cal-row { margin-top: 18px; }
.pd-cal-row > div > .pd-run-head { margin-top: 24px; }
.pd-cal-card { padding: 4px 16px 16px; }
.pd-cal-head { margin: 12px 0; }
.pd-monthnav { display: flex; align-items: center; gap: 6px; }
.pd-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pd-wd { padding: 4px 0; text-align: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.pd-cell { min-height: 64px; padding: 6px; border: 1px solid var(--pd-line-2); border-radius: 0; background: var(--pd-card); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; overflow: hidden; container-type: inline-size; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.pd-cell.blank { border: 0; background: none; cursor: default; }
.pd-cell b { font-size: 13px; }
.pd-cell.busy { background: var(--pd-soft-2); }
.pd-cell.today b { color: var(--pd-gold-ink); }
.pd-cell.selected { border-color: var(--pd-ink); box-shadow: inset 0 0 0 1px var(--pd-ink); }
.pd-cell.future { opacity: .4; cursor: default; }
.pd-pill { display: inline-flex; gap: .3em; max-width: 100%; overflow: hidden; padding: 1px 7px; border-radius: 0; background: var(--good-wash); color: var(--good); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pd-pill.drop { background: var(--pd-gold-soft); color: var(--pd-gold-ink); }
/* A narrow day shows its counts only; the legend names the colors. */
@container (max-width: 96px) { .pd-pill span { display: none; } }
.pd-legend { display: flex; gap: 8px; margin-top: 12px; }
.pd-log-day { display: flex; justify-content: space-between; gap: 12px; padding: 10px 20px; background: var(--pd-soft-2); border-top: 1px solid var(--pd-line); font-size: 13px; font-weight: 700; }
.pd-log-day:first-child { border-top: 0; }
.pd-log-day span { color: var(--muted); font-weight: 600; }
.pd-log-row .pd-stop-company { font-size: 18px; }
.pd-log-row .pd-stop-job a { color: var(--pd-link); text-decoration: none; }

/* Overlays: a proof full size, the route's QR code. */
.pd-zoom { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); background: rgba(10, 12, 16, .92); cursor: zoom-out; }
.pd-zoom img { max-width: 100%; max-height: calc(100% - 60px); object-fit: contain; border-radius: 0; background: #fff; }
.pd-zoom-caption { max-width: 460px; color: #fff; font-size: 16px; font-weight: 600; text-align: center; }
.pd-zoom-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.pd-qr-card { width: min(78vw, 78vh, 460px); aspect-ratio: 1; padding: 18px; border-radius: 0; background: #fff; }
.pd-qr-card svg { display: block; width: 100%; height: 100%; }

@media (max-width: 1000px) {
  .pd-run-row.with-van { grid-template-columns: minmax(0, 1fr); }
  .pd-run-row.with-van .pd-van-col { order: -1; }
  .pd-van iframe { height: 260px; }
}
@media (max-width: 720px) {
  .pd-page { padding: 16px 16px 32px; }
  .pd-actionbar { margin: 24px -16px -32px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 8px 10px; }
  .pd-count { flex: 1 1 100%; font-size: 14px; }
  .pd-actionbar .pd-btn { flex: 1; height: 50px; padding: 0 12px; }
  .pd-box-proof, .pd-noproof-sm { width: 64px; height: 64px; }
  .pd-box-head { flex-wrap: wrap; }
  .pd-box-title { min-width: 0; }
  .pd-item { grid-template-columns: 110px 1fr; }
  .pd-proof, .pd-noproof { width: 110px; height: 110px; }
  .pd-qty { grid-column: 2; text-align: left; }
  .pd-qty b { display: inline; font-size: 22px; margin-right: 6px; }
  .pd-step-label { display: none; }
  .pd-order-row { flex-direction: column; gap: 0; }
  .pd-order-row:has(.pd-run-add) .pd-order-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .pd-order-row .pd-run-add { width: 100%; height: 48px; border-top: 0; border-radius: 0 0 var(--pd-radius) var(--pd-radius); }
  .pd-order-row .pd-run-add.on { border: 1px solid var(--pd-line); border-top: 0; }
  .pd-order-card { flex-wrap: wrap; gap: 10px 14px; }
  .pd-order-main { flex: 1 1 100%; }
  .pd-order-side { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .pd-order-card .pd-chev { display: none; }
  .pd-stop { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 12px; padding: 18px 16px; }
  .pd-stop-num { width: 36px; height: 36px; font-size: 16px; }
  .pd-stop-company, .pd-stop-po { font-size: 19px; }
  .pd-stop-actions { grid-column: 2; }
  .pd-run-actions .pd-btn { flex: 1 1 100%; }
  .pd-ship-to, .pd-pay-row { flex-direction: column; align-items: stretch; }
  .pd-search .pd-btn { padding: 0 16px; }
  .pd-cell { min-height: 52px; padding: 4px; }
}

/* Schedule dropdowns share the Deals page's menu: dot, label, check. */
.sc-pop.sc-pop-menu { width: 260px; padding: 8px; border-radius: 0; box-shadow: 0 18px 48px -18px var(--shadow), 0 2px 6px -2px var(--shadow); }
.sc-pop-menu .sc-pop-head { padding: 4px 6px 6px; }
.sc-pop-menu .sc-pop-head b { font-size: 10.5px; letter-spacing: .1em; color: var(--faint); }
.sc-pop-menu .sc-pop-x { width: 24px; height: 24px; font-size: 15px; }
.sc-pop-menu input.sc-pop-search { min-height: 34px; margin: 0 2px 6px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); font-size: 13px; }
.sc-pop-menu input.sc-pop-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--marigold-wash); }
.sc-pop-menu .sc-pop-list { gap: 1px; padding: 0; }
.sc-pop-menu .sc-opt.opp-menu-item { min-height: 34px; border: 0; box-shadow: none; font-weight: 400; transition: none; cursor: pointer; }
.sc-pop-menu .sc-opt.opp-menu-item.active { background: var(--raise); }
.sc-pop-menu .sc-opt.opp-menu-item.on.active { background: color-mix(in srgb, var(--opt, var(--text)) 14%, var(--panel)); }
.sc-pop-menu .sc-pop-foot { margin-top: 4px; padding-top: 6px; gap: 4px; }
.sc-pop-menu .sc-pop-btn { min-height: 32px; border: 0; color: var(--muted); font-weight: 600; text-align: left; }
.sc-pop-menu .sc-pop-btn:hover { background: var(--raise); color: var(--text); }
.sc-pop-menu .sc-pop-btn.primary { text-align: center; color: var(--marigold-ink); }
.sc-pop-menu .sc-pop-btn.primary:hover { background: var(--marigold); filter: brightness(.96); }
.sc-rate-menu { gap: 1px; min-width: 180px; padding: 6px; border-radius: 0; background: var(--panel); box-shadow: 0 18px 48px -18px var(--shadow), 0 2px 6px -2px var(--shadow); }
.sc-rate-menu .opp-menu-item { cursor: pointer; font: inherit; font-size: 13.5px; }
.sc-rate { min-height: 32px; border-radius: 0; font-size: 13px; }
.sc-rate:hover { filter: brightness(.96); }

/* Qty panel proofs: proof-shaped thumbnails that zoom on hover. */
.sc-run-imps { gap: 14px; }
.sc-run-proof { width: 62px; height: auto; aspect-ratio: 1400 / 1812; padding: 0; border: 0; border-radius: 0; background: #f4f3f0; box-shadow: 0 0 0 1px var(--line-2); cursor: zoom-in; transition: box-shadow .15s; }
.sc-run-proof img { object-fit: cover; object-position: top; }
a.sc-run-proof:hover, a.sc-run-proof:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.sc-run-proof.none { display: grid; place-items: center; padding: 4px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); color: var(--faint); font-size: 10.5px; cursor: default; }
.sc-run-locs .sc-loc { padding: 5px 10px; border-radius: 0; background: var(--panel); border-color: var(--line-2); color: var(--text); font-size: 12px; font-weight: 600; }
.sc-run-locs .sc-loc::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--good); vertical-align: 1px; }
.sc-run-locs .sc-loc.off { color: var(--faint); text-decoration: line-through; border-style: dashed; }
.sc-run-locs .sc-loc.off::before { background: none; box-shadow: inset 0 0 0 1.5px var(--line-3); }
.sc-run-locs button.sc-loc:hover { border-color: var(--line-3); background: var(--raise); }
.sc-zoom { position: fixed; z-index: 70; padding: 8px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); box-shadow: 0 24px 60px -20px var(--shadow), 0 2px 8px -2px var(--shadow); pointer-events: none; animation: sc-pop .12s var(--ease); }
.sc-zoom img { display: block; width: 100%; aspect-ratio: 1400 / 1812; object-fit: contain; border-radius: 0; background: #fff; }
@media (prefers-reduced-motion: reduce) { .sc-zoom { animation: none; } }

/* One dropdown across the portal (dropdown.js): every select shows the same
   chevron and opens the Deals page's menu. */
select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; cursor: pointer; }
select:not([multiple]):not([size]):not(.pv-in):not(.pp-mtable select):not(.oe-money select) { padding-right: 30px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8a93' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 12px 12px !important; }
select[aria-expanded="true"] { border-color: var(--accent) !important; }
.dd-pop { z-index: 5000; gap: 2px; overflow-y: auto; scrollbar-width: thin; }
.dd-pop .opp-menu { gap: 1px; }
.dd-pop .opp-menu-item { min-height: 34px; font: inherit; font-size: 13.5px; cursor: pointer; }
.dd-pop .opp-menu-item[disabled] { opacity: .45; cursor: default; }
.dd-search { width: 100%; min-height: 34px; margin-bottom: 4px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
.dd-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--marigold-wash); }
.dd-group { margin: 8px 8px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.dd-group:first-child { margin-top: 2px; }
.dd-empty { margin: 6px 8px; font-size: 13px; color: var(--muted); }

/* The other menus share the same popover: schedule filters and pickers,
   the column filters, and the task reassign menu. */
.sc-pop, .col-menu { border-radius: 0; box-shadow: 0 18px 48px -18px var(--shadow), 0 2px 6px -2px var(--shadow); }
.sc-pop-head b, .col-menu-head b { font-size: 10.5px; letter-spacing: .1em; color: var(--faint); }
.sc-fopt { border: 0; font-weight: 400; font-size: 13.5px; }
.sc-fopt:hover { background: var(--raise); }
.sc-fopt.on { background: color-mix(in srgb, var(--marigold) 12%, var(--panel)); }
.sc-pop-btn { border-radius: 0; }
.tk-assign-menu { gap: 1px; padding: 6px; border-radius: 0; box-shadow: 0 18px 48px -18px var(--shadow), 0 2px 6px -2px var(--shadow); }
.tk-assign-menu .opp-menu-item { padding: 6px 8px; font-size: 13.5px; }
.tk-assign-menu .opp-menu-item:hover { background: var(--raise); }
.tk-assign-menu .opp-menu-item[aria-selected="true"] { font-weight: 400; background: color-mix(in srgb, var(--text) 9%, var(--panel)); }

/* Schedule overview tiles, and headers that follow the page when All or
   Completed stacks the departments (schedule.js floatHeads). */
.sc-stack .sc-scroll { max-height: none; }
.sc-stack .sc-head { position: sticky; top: var(--sc-stick, 0px); z-index: 5; margin: -8px 0; padding: 8px 0; background: var(--ink); }
.sc-table.sc-floating > thead > tr > th { transform: translateY(var(--sc-float, 0px)); box-shadow: 0 1px 0 var(--line-2), 0 8px 14px -10px var(--shadow); }

/* Deal and invoice imprints as one ruled table (orders.js detailImprint):
   where it prints on top, a row per garment, size columns that line up,
   totals at the foot. */
.og-card .oq-imp-locs { background: var(--tint); }
.og-wrap { overflow-x: auto; scrollbar-width: thin; }
/* Sized to the content: each size and Qty column takes a share of the
   width when there's room and shrinks to its numbers when there isn't;
   Total fits its amount; Description takes the rest and wraps. */
.og-table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: auto; font-size: 13px; font-variant-numeric: tabular-nums; }
.og-table th.c, .og-table td.c { width: 5%; white-space: nowrap; }
.og-table .r { width: 1%; white-space: nowrap; padding-inline: 12px 10px; }
.og-table td.r small { margin-top: 2px; }
.og-table td.desc { min-width: 90px; }
.og-table thead th.c { font-size: 10.5px; }
.og-table tbody td:first-child { white-space: nowrap; }
.og-table th, .og-table td { padding: 7px 5px; border: 1px solid var(--line); text-align: left; vertical-align: middle; overflow-wrap: normal; word-break: normal; hyphens: none; }
.og-table tr > :first-child { border-left: 0; } .og-table tr > :last-child { border-right: 0; }
.og-table thead th { border-top: 0; background: var(--tint); color: var(--faint); font-size: 11px; font-weight: 650; letter-spacing: .03em; white-space: nowrap; }
.og-table .c { text-align: center; padding-inline: 2px; } .og-table .r { text-align: center; white-space: nowrap; }
.og-table td.r b { display: block; font-weight: 650; } .og-table td.r small { display: block; color: var(--faint); font-size: 11.5px; } .og-table .mono { font-family: var(--f-mono); font-size: 12.5px; }
/* Price each has its own column, left of Total. */
.og-table td.ea { color: var(--muted); }
.og-table td.desc b { display: block; font-weight: 600; color: var(--text); line-height: 1.3; }
.og-table td.desc small { display: block; margin-top: 2px; color: var(--faint); font-size: 11.5px; }
.og-table td.qty { background: var(--tint); font-weight: 650; }
.og-table td.c > button { display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(100% + 4px); min-height: 34px; margin: -7px -2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
/* Hover / focus: a yellow glow along the cell's own edges. */
.og-table td.c > button:hover, .og-table td.c > button:focus-visible { outline: none; }
.og-table td.c:has(> button:hover), .og-table td.c:has(> button:focus-visible) { box-shadow: inset 0 0 0 2px var(--marigold), inset 0 0 10px 2px rgba(245, 178, 27, .45); }
.og-table td em { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--bad); }
.og-table td.st-receiving { background: color-mix(in srgb, #3b82f6 24%, var(--panel)); }
.og-table td.st-production { background: color-mix(in srgb, #65a30d 28%, var(--panel)); }
.og-table tr.og-sub > td { padding: 8px 12px; background: var(--panel); }
.og-table tr.og-sub .pq-breaks { margin: 0; }
.og-table tbody tr:last-child > td { border-bottom: 0; }
.og-table tfoot td { border-bottom: 0; background: var(--tint); font-weight: 700; }

/* Deal and invoice pages use the screen's width (up to 1920px): the hero
   and whichever tab body follows it, so line items aren't squeezed. */
.wrap.o-wide, .hero:has(.o-wide) ~ .wrap { max-width: 1920px; }
/* One readable face for the whole imprint table: the portal's body font
   everywhere (item #, money, sizes), digits evenly spaced so columns align. */
.og-card .oq-imp-locs, .og-card .oq-imp-locs *, .og-table, .og-table * { font-family: var(--f-body); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.og-table { font-size: 13.5px; }
.og-table thead th { color: var(--muted); font-size: 12.5px; text-transform: none; letter-spacing: 0; }
/* Size labels head the quantities people scan: full size, bold, full ink. */
.og-table thead th.c { color: var(--text); font-size: 13px; font-weight: 700; }

/* Size defects picker (orderPipeline.js markerHtml): a small card floating
   under the size cell, like the extension's defect breakdown. */
.pp-pick { position: fixed; z-index: 900; width: 248px; max-width: calc(100vw - 16px); margin: 0; padding: 0; display: block; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); box-shadow: 0 18px 48px -18px var(--shadow), 0 2px 6px -2px var(--shadow); font-family: var(--f-body); animation: sc-pop .12s var(--ease); }
.pp-pick-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.pp-pick-head b { font-size: 13.5px; font-weight: 700; }
.pp-pick-head span { flex: 1; color: var(--faint); font-size: 12px; }
.pp-pick-x { align-self: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; }
.pp-pick-x:hover { background: var(--raise); color: var(--text); }
.pp-pick-rows { display: flex; flex-direction: column; padding: 6px 8px; }
.pp-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 0 6px; border-radius: 0; font-size: 13.5px; color: var(--text); cursor: text; }
.pp-pick-row:hover { background: var(--raise); }
.pp-pick-row input { flex: none; width: 64px; height: 30px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); color: var(--text); font: inherit; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.pp-pick-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--marigold-wash); }
.pp-pick-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-pick-total { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pp-pick-total b { color: var(--bad); font-variant-numeric: tabular-nums; }
.pp-pick .form-error { margin: 0 14px 10px; }
.og-table td.c > button[aria-expanded="true"] { outline: 2px solid var(--text); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .pp-pick { animation: none; } }

/* Deal and invoice imprint cards read as one table: the card is the only
   frame, the proof is its left column, and the art check-off, location,
   columns, rows and manifest buttons run edge to edge on the right. */
.oq-group:has(.og-card) .oq-proofs { border-right: 1px solid var(--line-2); background: var(--tint); }
.oq-group .line-body:has(.og-card) { gap: 0; padding: 0; }
.line-body > .og-card { border: 0; border-radius: 0; background: none; }
.line-body > .og-card .oq-imp-locs { border-bottom: 1px solid var(--line-2); }
.line-body > .oq-imp-head:has(+ .og-card) { padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.line-body > .og-card + .oq-imp-foot { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line-2); }
.line-body > .og-card + .size-legend { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line-2); }
.line-body > .og-card .og-table tfoot td, .line-body > .og-card .og-table tbody tr:last-child > td { border-bottom: 0; }
/* A size's defect count sits pinned at the cell's foot, so the size
   number stays centered whether or not there are defects. */
.og-table td.c { position: relative; }
.og-table td.c > button { position: static; }
.og-table td.c em { position: absolute; left: 0; right: 0; bottom: 3px; line-height: 1; font-size: 10px; pointer-events: none; }
/* The table fills the card's height beside a taller proof: a blank last
   row takes the spare room, so the column lines run to the card's foot. */
.oq-group .line-body:has(.og-card) { display: flex; flex-direction: column; }
.line-body > .og-card { flex: 1; display: flex; flex-direction: column; }
.line-body > .og-card .og-wrap { flex: 1; display: flex; flex-direction: column; }
.line-body > .og-card .og-table { flex: 1; height: 100%; }
.og-table tbody tr:not(.og-fill) { height: 1px; }
.og-table tr.og-fill > td { padding: 0; border-bottom: 0; }
.og-table tbody tr.og-fill:last-child > td { border-bottom: 0; }

/* Settings (portal/settings.js): one layout on every tab. A section index
   on the left follows the scroll; cards of label | control rows; lists as
   chips; one save bar for every changed setting. Team, Firebase and
   QuickBooks draw into the same cards. */
.sa { display: grid; grid-template-columns: 200px minmax(0, 1000px); gap: 32px; padding: 22px 32px 72px; align-items: start; }
.sa-index { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 1px; }
.sa-index small { padding: 14px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.sa-index small:first-child { padding-top: 0; }
.sa-index a { padding: 6px 12px; border-left: 2px solid var(--line); color: var(--muted); font-size: 13.5px; text-decoration: none; line-height: 1.35; }
.sa-index a:hover { color: var(--text); border-left-color: var(--line-3); }
.sa-index a.on { color: var(--text); font-weight: 600; border-left-color: var(--marigold); }
.sa-index a.out[aria-disabled="true"] { pointer-events: none; }
.sa-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sa-card { background: var(--panel); border: 1px solid var(--line-2); min-width: 0; scroll-margin-top: 84px; }
.sa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 22px 14px; }
.sa-head h2 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.sa-head p { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); max-width: 72ch; }
.sa-head p .linkish { padding: 0; font-size: inherit; }
.sa-side { display: flex; align-items: center; gap: 10px; flex: none; font-size: 13px; color: var(--faint); }
.sa-body { padding: 0 22px 18px; min-width: 0; }
.sa-head + .sa-body:not(:has(> table, > .fu-scroll)) { padding-top: 2px; }
.sa-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; padding: 16px 22px; border-top: 1px solid var(--line); align-items: start; scroll-margin-top: 84px; }
.sa-lbl { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.sa-lbl b { font-size: 14px; line-height: 1.35; }
.sa-lbl > span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.sa-ctl { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sa-reset, .sa .linkish.sa-reset { padding: 0; margin-top: 4px; font-size: 12.5px; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--marigold); text-underline-offset: 3px; }
.sa-foot { display: flex; justify-content: flex-start; }
.sa-foot:empty, .sa-body.sa-foot:not(:has(*)) { display: none; }
.sa-note { margin: 10px 0 0; }
.sa .o-in { font: inherit; font-size: 14px; min-height: 34px; padding: 5px 9px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); }
.sa .o-in:hover { border-color: var(--line-3); }
.sa .o-in:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.sa .o-in::placeholder { color: var(--faint); }
.sa input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--marigold); }
.sa .o-in.sa-wide { width: 100%; max-width: 520px; }
/* Chips: a list, in the menu's order. */
.sa-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sa-chip { display: inline-flex; align-items: center; border: 1px solid var(--line-2); background: var(--ink-2); min-height: 32px; max-width: 100%; }
.sa-chip:hover { border-color: var(--line-3); }
.sa-chip:focus-within { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.sa-chip.sa-hide { display: none; }
.sa-chip.dragging { opacity: .4; }
.sa-chip.over { box-shadow: -3px 0 0 var(--marigold); }
.sa-grip { padding: 0 2px 0 7px; color: var(--dim); cursor: grab; font-size: 12px; letter-spacing: -3px; user-select: none; align-self: stretch; display: flex; align-items: center; }
.sa-chip input { border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); padding: 4px 4px 4px 6px; min-width: 3ch; max-width: 34ch; field-sizing: content; outline: none; }
.sa-chip input::placeholder { color: var(--faint); }
.sa-x { border: 0; background: transparent; color: var(--faint); font-size: 16px; line-height: 1; padding: 4px 8px 4px 2px; cursor: pointer; align-self: stretch; }
.sa-x:hover { color: var(--bad); }
.sa-add, .sa-more { min-height: 32px; padding: 4px 11px; font: inherit; font-size: 13px; cursor: pointer; background: transparent; }
.sa-add { border: 1px dashed var(--line-3); color: var(--text-2); }
.sa-add:hover { border-style: solid; color: var(--text); }
.sa-more { border: 0; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--marigold); text-underline-offset: 3px; }
/* Tables in a card. */
.sa-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sa-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 0 6px 6px; }
.sa-table td { padding: 4px 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.sa-table td > .o-in { width: 100%; border-color: transparent; background: transparent; }
.sa-table tr:hover td > .o-in { border-color: var(--line-2); background: var(--ink-2); }
.sa-table td > .o-in:focus { background: var(--ink-2); }
.sa-table .ctr { text-align: center; }
.sa-table .w-num { width: 110px; }
.sa-table .w-rate { width: 150px; }
.sa-tax td:last-child { width: 46%; }
.sa-tax select.o-in { width: 100%; }
.sa-table .w-chk { width: 64px; }
.sa-table .w-x { width: 44px; }
.sa-table .w-name { width: 26%; }
.sa-table .sa-x { padding: 4px 8px; }
.sa-under { margin-top: 10px; }
.sa-unit { display: inline-flex; align-items: center; gap: 6px; }
.sa-unit .o-in { width: 110px; text-align: right; }
.sa-unit b { font-weight: 500; color: var(--faint); font-size: 13px; }
.sa-nums { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.sa-nums label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.sa-preview { margin: 0; font-size: 14px; color: var(--text-2); }
/* Profile logos: the logo on white beside its link. */
.sa-row.sa-logo { align-items: center; padding-block: 10px; }
.sa-logo-ctl { flex-direction: row; align-items: center; gap: 12px; }
.sa-logo-ctl .o-in { flex: 1; min-width: 0; max-width: 520px; }
.sa-logo-ctl .st-logo-art { width: 150px; height: 56px; flex: none; }
.st-logo-art { height: 76px; display: grid; place-items: center; padding: 6px 10px; box-sizing: border-box; background: #fff; border: 1px solid var(--line-2); }
.st-logo-art img { max-width: 100%; max-height: 42px; object-fit: contain; }
.st-logo-art span { font-size: 12px; color: #64748b; }
.st-logo-art .st-logo-bad, .st-logo-art.broken img { display: none; }
.st-logo-art.broken .st-logo-bad { display: block; color: #b91c1c; }
/* The save bar: every changed setting, at the bottom of the screen. */
.sa-bar { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; background: var(--text); color: var(--ink); box-shadow: 0 10px 28px var(--shadow); font-size: 14px; }
.sa-bar[hidden] { display: none; }
.sa-bar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-bar span { opacity: .8; white-space: nowrap; }
.sa-bar .sa-bar-sp { flex: 1; }
.sa-bar .linkish { color: var(--ink); text-decoration: underline; font-size: 13px; padding: 4px 6px; }
/* Team: seats are rows in the Seats card. */
.sa .team-list { gap: 0; }
.sa .team-row { padding: 12px 22px; border-top: 1px solid var(--line); }
.sa .team-row.open { background: var(--tint); }
.sa .team-main { grid-template-columns: 34px minmax(0, 1.1fr) minmax(0, 1.7fr) 96px 156px; }
.sa .team-main > :last-child { justify-self: end; }
@media (max-width: 860px) { .sa .team-main { grid-template-columns: 34px minmax(0, 1fr) auto; } .sa .team-main .team-what { grid-column: 2 / -1; grid-row: 2; } }
.sa .team-add { padding: 16px 22px; border-top: 1px solid var(--line); background: var(--tint); }
.sa .team-goals { margin-top: 0; }
.sa .team-dept { margin-top: 14px; }
/* QuickBooks & Square inside its card: flatter, the same type sizes. */
.sa-qb.mn-page { padding-top: 0; }
.sa-qb .mn-settings { gap: 14px; }
.sa-qb .set-tile, .sa-qb .cu-card, .sa-qb .qb-lists { border: 1px solid var(--line-2); box-shadow: none; background: var(--panel); }
.sa-qb .cu-card { scroll-margin-top: 84px; }
.sa-qb .set-form-head h3, .sa-qb .set-activity h3, .sa-qb .cu-card h3 { font-size: 15px; }
.sa-qb form[id] { scroll-margin-top: 84px; }
.sa-qb label, .sa-qb .qb-picks > * { min-width: 0; }
.sa-qb select.o-in { width: 100%; max-width: 100%; min-width: 0; }
/* Firebase usage in its cards. */
.sa .fu-top { margin-bottom: 10px; }
.sa .fu-when { font-size: 13px; color: var(--faint); }
.sa .fu-when .linkish { padding: 0; font-size: 13px; }
@media (max-width: 1100px) {
  .sa { grid-template-columns: 170px minmax(0, 1fr); gap: 22px; }
  .sa-row { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .sa { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 60px; }
  .sa-index { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .sa-index small { display: none; }
  .sa-index a { border-left: 0; border-bottom: 2px solid var(--line); white-space: nowrap; }
  .sa-index a.on { border-bottom-color: var(--marigold); }
  .sa-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
  .sa-head { padding: 14px 16px 12px; flex-wrap: wrap; }
  .sa-body { padding: 0 16px 16px; }
  .sa .team-row, .sa .team-add { padding-inline: 16px; }
  .sa-table { font-size: 13px; }
  .sa-body:has(> .sa-table) { overflow-x: auto; }
  .sa-table { min-width: 520px; }
  .sa-bar { flex-wrap: wrap; }
}

/* Store Orders (portal/storeOrders.js): Shopify orders of brands we fulfill for. */
.so-page #soRoot { display: grid; gap: 18px; }
.so-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.so-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
/* Several stores: a small header and a table each. */
.so-group { display: grid; gap: 8px; min-width: 0; }
.so-store-head { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 700; }
.so-store-head .so-muted { font-weight: 500; }
.so-store-none { padding: 2px 2px 4px; }
.so-bulk-card { padding: 6px 10px 6px 14px; background: var(--tint); position: sticky; top: 0; z-index: 3; }
.so-two { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.so-two small, .so-muted { color: var(--muted); font-size: 12.5px; }
.so-muted { margin: 0; }
.so-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--dim); }
.so-dot.ok { background: var(--good); }
.so-dot.warn { background: var(--marigold); }
.so-dot.late { background: var(--bad); }
.so-stores-btn { gap: 8px; }
.so-warn { margin: 0; padding: 10px 14px; background: var(--marigold-wash); border-left: 3px solid var(--marigold); font-size: 14px; }
/* Tabs and filters */
.so-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.so-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-2); }
.so-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.so-tab:hover { color: var(--text); }
.so-tab.on { color: var(--text); }
.so-tab.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: var(--marigold); }
.so-tab em { font-style: normal; font-size: 12px; font-weight: 700; padding: 1px 7px; background: var(--marigold); color: var(--marigold-ink); }
.so-tab:focus-visible { outline: 2px solid var(--marigold); outline-offset: -2px; }
.so-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 420px; justify-content: flex-end; }
.so-page .o-in { font: inherit; font-size: 14px; min-height: 40px; padding: 8px 12px; border-radius: 0; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); width: 100%; min-width: 0; }
.so-page .o-in:focus { outline: none; border-color: var(--marigold); box-shadow: 0 0 0 3px var(--marigold-wash); }
.so-page select.o-in { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238b919c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
.so-page .so-select { width: auto; min-width: 150px; }
.so-page .so-search { flex: 0 1 320px; }
.so-page .so-form .o-in[readonly] { color: var(--muted); background: var(--raise); }
.so-lines img, .so-noimg { object-fit: cover; background: var(--raise); display: block; }
/* The list, laid out like Shopify's Orders page */
.so-card { overflow-x: auto; border-radius: 12px; }
.so-table { width: 100%; min-width: 1180px; border-collapse: collapse; font-size: 13px; }
.so-table thead th { text-align: left; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 550; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--tint); height: 40px; }
.so-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; height: 40px; }
/* Orders headers: sort, filter, drag to resize (the Customers table's look). */
.so-orders thead th[data-so-col] { position: relative; padding: 0; }
.so-orders .th-inner { justify-content: center; padding: 0 16px 0 4px; }
.so-orders .so-th-sort { padding: 10px 4px; font-size: 12px; font-weight: 550; letter-spacing: 0; text-transform: none; color: var(--muted); cursor: pointer; }
.so-orders .so-th-sort:hover, .so-orders th[aria-sort="ascending"] .so-th-sort, .so-orders th[aria-sort="descending"] .so-th-sort { color: var(--text); }
.so-orders .col-filter { right: 2px; width: 20px; height: 20px; }
.so-orders th:hover .col-filter { opacity: 1; }
.so-orders td { overflow: hidden; text-overflow: ellipsis; }
/* Orders list: every column and what's in it centered (tables only; phones keep the card layout). */
@media (min-width: 761px) {
  .so-orders thead th, .so-orders td, .so-orders .r { text-align: center; }
  .so-orders .so-two { align-items: center; }
  .so-orders .so-tags { justify-content: center; }
  .so-orders .so-pick input { display: block; margin: 0 auto; }
}
.so-table tbody tr:last-child td { border-bottom: 0; }
.so-table .r { text-align: right; white-space: nowrap; }
.so-table .nw { white-space: nowrap; }
.so-table .so-pick { width: 1%; padding: 0 4px 0 14px; }
.so-pick input, .so-check input, .so-bulk-count input { width: 16px; height: 16px; accent-color: var(--text); cursor: pointer; margin: 0; }
.so-row { cursor: pointer; }
.so-row:hover td, .so-row.picked td { background: var(--row-open); }
.so-row.open td { background: var(--row-open); border-bottom-color: transparent; }
.so-row:focus-visible { outline: 2px solid var(--marigold); outline-offset: -2px; }
.so-row b { font-weight: 650; }
.so-red { color: var(--bad); }
.so-tags { display: flex; flex-wrap: nowrap; gap: 4px; }
/* Badges: neutral (grey), attention (yellow), warning (orange) */
.so-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 8px; font-size: 12px; font-weight: 550; white-space: nowrap; background: var(--raise); color: var(--text-2); }
.so-badge.attention { background: #ffeb78; color: #17150f; }
.so-badge.warning { background: #ffd6a4; color: #17150f; }
.so-mark { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1.5px solid currentColor; box-sizing: border-box; }
.so-mark.dot { background: currentColor; border-color: transparent; opacity: .7; }
.so-mark.half { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
/* Ticked orders: the bulk bar takes the header row */
.so-table thead.bulk th { padding: 6px 10px 6px 14px; background: var(--tint); }
.so-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.so-bulk-count { display: inline-flex; align-items: center; gap: 10px; margin-right: 6px; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.so-bulk-btn { font: inherit; font-size: 12.5px; font-weight: 550; color: var(--text); background: var(--raise); border: 0; border-radius: 8px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.so-bulk-btn:hover:not(:disabled) { background: var(--line-2); }
.so-bulk-btn:disabled { opacity: .45; cursor: default; }
select.so-bulk-btn { max-width: 240px; }
.so-badge.success { background: #cdfed4; color: #014b40; }
.so-badge.info { background: #e0f0ff; color: #00527c; }
/* Orders | Products */
.so-views { display: inline-flex; gap: 2px; padding: 3px; background: var(--raise); border-radius: 10px; justify-self: start; }
.so-view { font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: transparent; border: 0; border-radius: 8px; padding: 7px 16px; cursor: pointer; }
.so-view.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.so-view:focus-visible { outline: 2px solid var(--marigold); outline-offset: 1px; }
/* Products */
.so-ptable { min-width: 860px; }
.so-product { display: flex; align-items: center; gap: 12px; }
.so-product img, .so-product .so-noimg { border-radius: 8px; border: 1px solid var(--line); object-fit: cover; flex: none; background: var(--raise); }
.so-variants { display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.so-variants p { margin: 0; }
.so-vtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.so-vtable th { text-align: left; font-size: 12px; font-weight: 550; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.so-vtable td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.so-vtable tr:last-child td { border-bottom: 0; }
.so-vtable .r { text-align: right; }
.so-stock { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.so-page .so-stock .o-in { width: 88px; min-height: 32px; padding: 4px 8px; text-align: right; border-radius: 8px; }
/* Pick bins */
.so-bins { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.so-bins small { font-size: 12px; color: var(--muted); }
.so-bin { display: inline-block; padding: 1px 7px; font-weight: 700; font-size: 12.5px; letter-spacing: .03em; background: var(--marigold-wash); border: 1px solid var(--marigold); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.so-bin.big { font-size: 17px; padding: 3px 10px; }
.so-nobin { font-size: 12px; font-weight: 600; color: var(--muted); }
.so-page .so-binform .o-in::placeholder { text-transform: none; font-weight: 500; }
.so-binrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.so-binrow-label { display: grid; gap: 1px; }
.so-binrow-label small { color: var(--muted); font-size: 12px; }
.so-binform { display: inline-flex; gap: 6px; align-items: center; }
.so-page .so-binform .o-in { width: 96px; min-height: 32px; padding: 4px 8px; border-radius: 8px; text-transform: uppercase; font-weight: 650; }
.so-empty { padding: 36px 20px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.so-empty p { margin: 0; color: var(--muted); }
/* An opened order */
.so-open > td { background: var(--row-open); padding: 4px 14px 22px 36px; }
/* An opened order: pick list on the left, the Ship card and facts on the right */
.so-ws { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "alerts alerts" "pick side"; gap: 14px 28px; max-width: 1180px; background: var(--panel); border: 1px solid var(--line); padding: 18px 20px 20px; }
.so-ws h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; }
.so-alerts { grid-area: alerts; display: grid; gap: 6px; }
.so-alert { margin: 0; padding: 8px 12px; font-size: 13.5px; font-weight: 550; border-left: 3px solid var(--line-2); background: var(--raise); overflow-wrap: anywhere; }
.so-alert.note { display: grid; gap: 2px; background: var(--marigold-wash); border-left-color: var(--marigold); font-weight: 500; font-size: 14.5px; }
.so-alert.note b { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.so-alert.note span { white-space: pre-wrap; }
.so-alert.bad { background: var(--bad-wash); border-left-color: var(--bad); color: var(--bad); }
.so-alert.warn { background: #fff1d6; border-left-color: #f5b21b; color: #17150f; }
.so-alert.info { border-left-color: var(--muted); color: var(--text-2); }
.so-ws-pick { grid-area: pick; display: grid; gap: 6px; align-content: start; min-width: 0; }
.so-pls { list-style: none; margin: 0; padding: 0; display: grid; }
.so-pl { display: grid; grid-template-columns: 52px 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; }
.so-pl + .so-pl { border-top: 1px solid var(--line); }
.so-pl img, .so-pl .so-noimg { border: 1px solid var(--line); }
.so-pl-qty { font-size: 26px; font-weight: 750; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.so-pl-qty small { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 1px; }
.so-pl .so-line-text > b { font-size: 15px; }
.so-pl .so-variant span { font-size: 13.5px; padding: 2px 9px; background: var(--text); color: var(--panel); }
.so-prop { font-size: 12.5px; color: var(--text-2); }
.so-pl-side { display: grid; justify-items: end; gap: 4px; text-align: right; }
.so-line-tag { font-size: 12px; font-weight: 600; color: var(--muted); }
.so-line-stock { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.so-line-stock.short { color: var(--bad); font-weight: 650; }
.so-pl.done { opacity: .55; }
.so-pl.done .so-variant span { background: var(--raise); color: var(--text-2); }
.so-ws-side { grid-area: side; display: grid; gap: 14px; align-content: start; min-width: 0; }
.so-shipcard { display: grid; gap: 12px; padding: 14px 16px 16px; background: var(--tint); border: 1px solid var(--line-2); }
.so-to { display: grid; gap: 6px; }
.so-to address { font-style: normal; font-size: 15px; line-height: 1.45; }
.so-icon-btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); background: transparent; border: 0; padding: 2px 4px; cursor: pointer; }
.so-icon-btn:hover { color: var(--text); }
.so-service-line { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.so-service-line span { color: var(--muted); }
.so-service-line b { text-align: right; overflow-wrap: anywhere; }
.so-ship { display: grid; gap: 10px; margin: 0; }
.so-ship label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.so-boxpick { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.so-boxpick legend { font-size: 13px; font-weight: 600; color: var(--text-2); padding: 0; margin-bottom: 6px; }
.so-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.so-ship .so-tile { position: relative; display: grid; gap: 1px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line-2); cursor: pointer; color: var(--text); }
.so-tile input { position: absolute; opacity: 0; pointer-events: none; }
.so-tile b { font-size: 13.5px; overflow-wrap: anywhere; }
.so-tile small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.so-tile.on { border-color: var(--marigold); box-shadow: inset 0 0 0 1px var(--marigold); background: var(--marigold-wash); }
.so-tile:has(input:focus-visible) { outline: 2px solid var(--marigold); outline-offset: 1px; }
.so-custom { display: grid; gap: 8px; }
.so-ship .so-check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.so-ship .form-error { margin: 0; }
.btn.so-go { width: 100%; min-height: 46px; font-size: 15px; justify-content: center; }
.so-go-note { margin: -4px 0 0; font-size: 12px; color: var(--muted); }
.so-ship-go { display: grid; gap: 6px; }
.so-ship-more { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.so-mini { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: transparent; border: 0; padding: 2px 0; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.so-mini:hover:not(:disabled) { color: var(--text); text-decoration-color: currentColor; }
.so-mini:disabled { opacity: .45; cursor: default; }
.so-form-title { font-weight: 650; margin: 0; }
.so-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.so-facts dt { color: var(--muted); }
.so-facts dd { margin: 0; overflow-wrap: anywhere; }
.so-weighed { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; margin: 0; font-size: 13.5px; }
.so-weighed span { color: var(--muted); }
.so-weighed b { text-align: right; }
.so-weighed small { grid-column: 1 / -1; text-align: right; font-size: 12px; color: var(--muted); }
.so-ship .so-tile.off { opacity: .5; cursor: not-allowed; }
.so-shipcard .so-link { padding-top: 10px; border-top: 1px solid var(--line-2); }
.so-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-2); justify-self: start; }
.so-count { letter-spacing: .04em; text-transform: none; font-weight: 600; color: var(--muted); }
.so-line-text { display: grid; gap: 4px; min-width: 0; }
.so-variant { display: flex; flex-wrap: wrap; gap: 4px; }
.so-variant span, .so-tags span { padding: 1px 8px; font-size: 12px; font-weight: 600; background: var(--raise); color: var(--text-2); }
.so-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.so-sku { color: var(--muted); font-size: 12px; letter-spacing: .02em; }
.so-total { font-size: 15px; margin-left: 6px; }
/* Stores */
.so-stores { padding: 16px 18px; display: grid; gap: 14px; }
.so-stores-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.so-stores-head h2 { margin: 0; }
.so-store-list { list-style: none; margin: 0; padding: 0; display: grid; }
.so-store { display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 0; }
.so-store + .so-store { border-top: 1px solid var(--line); }
.so-store .so-warn { grid-column: 2 / -1; }
.so-store-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.so-store-actions .btn { gap: 6px; }
.so-remove:hover { color: var(--bad); border-color: var(--bad); }
.so-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.so-form h3, .so-form .row-actions { grid-column: 1 / -1; margin: 0; }
.so-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.so-setup { border-top: 1px solid var(--line); padding-top: 12px; }
.so-setup summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.so-setup dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 12px 0; font-size: 13.5px; }
.so-setup dt { color: var(--muted); }
.so-setup dd { margin: 0; overflow-wrap: anywhere; }
.so-store-ship { grid-column: 2 / -1; color: var(--muted); font-size: 12.5px; }
.so-store .so-settings { grid-column: 1 / -1; }
.so-page .so-template { font: 12.5px/1.5 ui-monospace, Consolas, monospace; resize: vertical; min-height: 180px; }
.so-wide { grid-column: 1 / -1; }
.so-logo-row { display: flex; gap: 10px; align-items: center; }
/* Our boxes */
.so-boxes { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.so-boxes h3, .so-boxes p { margin: 0; }
.so-box-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.so-box-list li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line-2); font-size: 13.5px; }
.so-box-list li span:not(.chip) { color: var(--muted); }
.so-box-wrap { overflow-x: auto; }
.so-box-table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 13px; }
.so-box-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 6px 6px 6px 0; white-space: nowrap; }
.so-box-table td { padding: 4px 6px 4px 0; }
.so-page .so-box-table .o-in { min-height: 36px; padding: 6px 9px; }
.so-page .so-box-table td:nth-child(n + 2):nth-child(-n + 5) .o-in { width: 84px; }
.so-box-table input[type="radio"] { width: 17px; height: 17px; accent-color: var(--marigold); margin: 0 0 0 14px; }
.so-boxes .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.so-logo-preview { max-height: 40px; max-width: 140px; object-fit: contain; background: #fff; padding: 4px; border: 1px solid var(--line); }
/* Shipping: picking rows, the batch bar, the Ship block */
.so-ship-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.so-ship-form label, .so-settings label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.so-ship-form fieldset, .so-settings fieldset { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; display: grid; gap: 5px; }
.so-ship-form legend, .so-settings legend { font-size: 13px; font-weight: 600; color: var(--text-2); padding: 0; margin-bottom: 5px; }
.so-dims { display: flex; align-items: center; gap: 6px; }
.so-dims > span { color: var(--muted); }
.so-page .so-dims .o-in { width: 76px; flex: 0 1 76px; }
.so-ship-form .so-check { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; font-weight: 500; }
.so-ship-form .so-muted, .so-ship-form .row-actions, .so-service, .so-ship-form .so-wide { grid-column: 1 / -1; margin: 0; }
.so-service summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); }
.so-service[open] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.so-service[open] summary { grid-column: 1 / -1; }
.so-ship-list { list-style: none; margin: 0; padding: 0; display: grid; }
.so-ship-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; }
.so-ship-list li + li { border-top: 1px solid var(--line); }
@media (max-width: 1100px) {
  .so-ws { grid-template-columns: 1fr; grid-template-areas: "alerts" "pick" "side"; }
}
/* Phones: each order is a card. */
@media (max-width: 760px) {
  .so-tabs { width: 100%; overflow-x: auto; }
  .so-filters { flex-basis: 100%; justify-content: stretch; }
  .so-page .so-filters > * { flex: 1 1 140px; }
  .so-page .so-search { flex: 1 1 100%; }
  .so-card { overflow: visible; background: transparent; border: 0; }
  .so-table { min-width: 0; }
  .so-table thead { display: none; }
  .so-table, .so-table tbody, .so-table tr, .so-table td { display: block; }
  .so-table tr.so-row { display: grid; grid-auto-flow: row dense; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px; margin-bottom: 10px; background: var(--panel); border: 1px solid var(--line); }
  .so-row.open { margin-bottom: 0; }
  .so-table .so-row td { padding: 0; border: 0; background: transparent; }
  .so-row td[data-l="Pick"] { grid-column: 1; grid-row: 1; align-self: center; }
  .so-row td[data-l="Order"] { grid-column: 2; grid-row: 1; }
  .so-row td[data-l="Fulfillment status"] { grid-column: 3; grid-row: 1; justify-self: end; }
  .so-row td[data-l="Date"], .so-row td[data-l="Customer"], .so-row td[data-l="Items"], .so-row td[data-l="Delivery status"] { grid-column: 2 / -1; height: auto; }
  .so-row td[data-l="Delivery status"]:empty { display: none; }
  .so-row td[data-l="Payment status"] { grid-column: 2; }
  .so-row td[data-l="Total"] { grid-column: 3; text-align: right; }
  .so-row td[data-l="Fulfill by"], .so-row td[data-l="Channel"], .so-row td[data-l="Delivery method"], .so-row td[data-l="Tags"] { display: none; }
  .so-table .so-row td { height: auto; }
  .so-table thead.bulk, .so-table thead.bulk tr, .so-table thead.bulk th { display: block; }
  .so-table thead.bulk th { padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--line); background: var(--panel); }
  .so-ship-form, .so-service[open] { grid-template-columns: 1fr; }
  .so-ptable { min-width: 0; }
  .so-ptable tr.so-row { grid-template-columns: minmax(0, 1fr) auto; }
  .so-ptable .so-row td[data-l="Product"] { grid-column: 1; grid-row: 1; }
  .so-ptable .so-row td[data-l="Status"] { grid-column: 2; grid-row: 1; justify-self: end; }
  .so-ptable .so-row td[data-l="Inventory"], .so-ptable .so-row td[data-l="Vendor"] { grid-column: 1 / -1; }
  .so-ptable .so-row td[data-l="Category"], .so-ptable .so-row td[data-l="Type"], .so-ptable .so-row td:empty { display: none; }
  .so-vtable th:nth-child(2), .so-vtable td:nth-child(2) { display: none; }
  .so-items-cell { max-width: none; }
  .so-open > td { padding: 0 0 12px; border: 1px solid var(--line); border-top: 0; margin-bottom: 10px; }
  .so-ws { padding: 12px; border: 0; }
  .so-pl { grid-template-columns: 40px 48px minmax(0, 1fr); }
  .so-pl img, .so-pl .so-noimg { width: 48px; height: 48px; }
  .so-pl-side { grid-column: 3; justify-items: start; text-align: left; }
  .so-store { grid-template-columns: auto minmax(0, 1fr); }
  .so-store-state, .so-store-actions { grid-column: 2; justify-content: flex-start; }
  .so-form { grid-template-columns: 1fr; }
}

/* Date range picker (datePicker.js): This / Last chips, Custom calendar, All. */
.dp-btn { text-align: left; white-space: nowrap; }
.dp-pop { z-index: 5000; width: 300px; padding: 10px; gap: 8px; }
.dp-grid { display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 4px; align-items: center; }
.dp-when { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding-right: 6px; }
.dp-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.dp-chip { font: inherit; font-size: 12.5px; font-weight: 600; min-height: 32px; padding: 4px 6px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); color: var(--text-2); cursor: pointer; }
.dp-chip:hover, .dp-chip:focus-visible { border-color: var(--line-3); color: var(--text); outline: none; }
.dp-chip.on { background: var(--marigold); border-color: var(--marigold); color: var(--marigold-ink); }
.dp-cal { border-top: 1px solid var(--line); padding-top: 8px; }
.dp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-cal-head b { font-size: 13px; }
.dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.dp-dow { font-size: 10.5px; font-weight: 700; color: var(--faint); text-align: center; padding: 2px 0 4px; }
.dp-day { font: inherit; font-size: 12.5px; height: 32px; border: 0; border-radius: 0; background: none; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.dp-day:hover, .dp-day:focus-visible { background: var(--raise); outline: none; }
.dp-day.today { box-shadow: inset 0 -2px 0 var(--marigold); }
.dp-day.in { background: var(--marigold-wash); }
.dp-day.start, .dp-day.end { background: var(--marigold); color: var(--marigold-ink); font-weight: 700; }
.dp-hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
/* The range strip: Date Status, 1W…Max, the two days. */
.dp-range { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dp-presets { display: inline-flex; align-items: center; }
.dp-preset { font: inherit; font-size: 13px; font-weight: 600; padding: 2px 10px; border: 0; border-left: 1px solid var(--line-3); border-radius: 0; background: none; color: var(--text-2); cursor: pointer; }
.dp-preset:first-child { border-left: 0; }
.dp-preset:hover, .dp-preset:focus-visible { color: var(--text); outline: none; }
.dp-preset.on { color: var(--text); font-weight: 800; text-decoration: underline 3px var(--marigold); text-underline-offset: 5px; }
.dp-dates { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.dp-date { font: inherit; font-size: 13px; height: 34px; width: 132px; box-sizing: border-box; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); color: var(--text); color-scheme: light; }
:root[data-theme="dark"] .dp-date { color-scheme: dark; }
.dp-date:focus-visible { border-color: var(--line-3); outline: none; }
.dp-note { font-size: 12px; color: var(--muted); }
.cu-orders th.dp-hit .th-sort { text-decoration: underline 3px var(--marigold); text-underline-offset: 4px; }

/* Loading bar (loadingBar.js): while a page's server reads are out. */
.lb-load { position: fixed; inset: 0 0 auto 0; z-index: 6000; pointer-events: none; opacity: 0; transition: opacity .2s; }
.lb-load.on { opacity: 1; }
.lb-load-bar { display: block; height: 3px; background: linear-gradient(90deg, transparent 0, var(--marigold) 30%, var(--marigold-hi) 50%, var(--marigold) 70%, transparent 100%); background-size: 50% 100%; background-repeat: no-repeat; animation: lb-slide 1.1s ease-in-out infinite; }
.lb-load-tag { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 4px 12px; font-size: 12px; font-weight: 700; letter-spacing: .04em; background: var(--marigold); color: var(--marigold-ink); box-shadow: 0 6px 18px -8px var(--shadow); }
@keyframes lb-slide { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { .lb-load-bar { animation: none; background: var(--marigold); } }

/* Linked orders (portal/linkedOrders.js): the group's chip beside an order
   number, the invoice page's card and the group dialog. --lo is the group's
   color, shared with the extension's Invoice Groups. */
.lo-slot:empty, [data-lo-chip]:empty { display: none; }
[data-lo-chip] { display: inline-flex; vertical-align: middle; margin-left: 6px; }
/* In table cells and schedule jobs the chip gets its own line under the
   number, so it never squeezes or hides it. */
td [data-lo-chip]:not(:empty), .sc-job-in [data-lo-chip]:not(:empty) { display: block; margin: 3px 0 1px; }
td .lo-chip, .sc-job-in .lo-chip { max-width: 100%; }
.lo-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 160px; padding: 2px 7px; border: 0; border-radius: 0; background: var(--lo, var(--text)); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.3; cursor: pointer; white-space: nowrap; }
.lo-chip span { overflow: hidden; text-overflow: ellipsis; }
.lo-chip:hover { filter: brightness(1.1); }
.lo-chip:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
.lo-card { display: flex; flex-direction: column; gap: 10px; }
.lo-none { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lo-wait { margin: 0; }
.lo-group { display: flex; flex-direction: column; gap: 10px; border-left: 4px solid var(--lo, var(--line-2)); padding-left: 12px; }
.lo-group-head { display: flex; align-items: center; gap: 8px; }
.lo-group-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-group-head .linkish { padding: 0; }
.lo-swatch { width: 10px; height: 10px; flex: none; background: var(--lo); }
.lo-notes { margin: 0; font-size: 13px; color: var(--text-2); white-space: pre-wrap; }
.lo-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lo-member { padding: 8px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.lo-member.here { background: var(--tint); margin: 0 -8px; padding: 8px; }
.lo-member-top { display: flex; align-items: center; gap: 8px; }
.lo-member-top .pill { margin-left: auto; }
.lo-member-sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-facts { display: flex; gap: 16px; margin: 0; font-size: 12px; }
.lo-facts div { display: flex; gap: 5px; }
.lo-facts dt { color: var(--faint); font-weight: 600; }
.lo-facts dd { margin: 0; color: var(--text-2); }
.lo-x { width: 24px; height: 24px; flex: none; border: 0; background: none; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer; }
.lo-x:hover { color: var(--bad); }
.lo-member-top .pill + .lo-x { margin-left: 0; }
.lo-member-top b + .lo-x, .lo-member-top a + .lo-x { margin-left: auto; }
.lo-by { margin: 0; font-size: 12px; }
.lo-results { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; border: 1px solid var(--line); }
.lo-results:empty { display: none; }
.lo-results li { border-top: 1px solid var(--line); }
.lo-results li:first-child { border-top: 0; }
.lo-results li.dim { padding: 10px 12px; font-size: 13px; }
.lo-results button { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 9px 12px; border: 0; background: none; color: var(--text); text-align: left; font-size: 13px; cursor: pointer; }
.lo-results button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.lo-results button em { font-style: normal; font-size: 12px; color: var(--faint); }
.lo-results button:hover:not(:disabled) { background: var(--marigold-wash); }
.lo-results button:disabled { opacity: .45; cursor: default; }
.lo-picked { display: flex; flex-wrap: wrap; gap: 6px; }
.lo-pick { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 9px; background: var(--raise); font-size: 13px; }
.lo-pick button { border: 0; background: none; color: var(--faint); font-size: 16px; line-height: 1; padding: 0 4px; cursor: pointer; }
.lo-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.lo-color { width: 26px; height: 26px; border: 2px solid transparent; background: var(--lo); cursor: pointer; }
.lo-color.on { outline: 2px solid var(--text); outline-offset: 2px; }
.lo-dialog textarea { resize: vertical; }
[data-lo-link]:empty { display: none; }
[data-lo-link] { display: contents; }
.lo-link.on { background: var(--lo); border-color: var(--lo); color: #fff; max-width: 260px; }
.lo-link.on:hover { color: #fff; border-color: var(--lo); filter: brightness(1.1); }
.lo-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-link em { font-style: normal; font-size: 12px; opacity: .8; }

/* ---- Purchasing (portal/purchasing.js) ----
   The pipeline (a tile per stage, which is also the tab), a toolbar, the S&S
   cart on Needs purchasing, then the jobs in the stage. */
.pu-page { gap: 16px; }
#puRoot { display: flex; flex-direction: column; gap: 16px; }
.pu-flow { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.pu-steps { flex: 1 1 640px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line-2); background: var(--panel); }
.pu-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 14px 16px 13px; border: 0; border-right: 1px solid var(--line); background: transparent; text-align: left; color: var(--text); transition: background .15s; }
.pu-step:last-child { border-right: 0; }
.pu-step:hover { background: var(--tint); }
.pu-step::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: transparent; }
.pu-step.on::before { background: var(--marigold); }
.pu-step.on { background: var(--row-open); }
.pu-step-label { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pu-step-label i { display: inline-grid; place-items: center; flex: none; width: 17px; height: 17px; font-style: normal; font-size: 10px; letter-spacing: 0; border: 1px solid var(--line-2); color: var(--muted); }
.pu-step.on .pu-step-label { color: var(--text); }
.pu-step.on .pu-step-label i { background: var(--marigold); border-color: var(--marigold); color: var(--marigold-ink); }
.pu-step b { font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 2.6vw, 40px); line-height: 1.05; font-variant-numeric: tabular-nums; }
.pu-step.zero b { color: var(--dim); }
.pu-step-note.over { color: var(--bad); }
.pu-step-note { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pu-sides { flex: 0 1 200px; display: flex; flex-direction: column; border: 1px solid var(--line-2); background: var(--panel); }
.pu-side { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; text-align: left; }
.pu-side:last-child { border-bottom: 0; }
.pu-side b { font-family: var(--f-display); font-weight: 800; font-size: 22px; color: var(--text); }
.pu-side:hover { background: var(--tint); color: var(--text); }
.pu-side.on { color: var(--text); box-shadow: inset 3px 0 0 var(--marigold); background: var(--row-open); }

.pu-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pu-search { flex: 1 1 320px; max-width: 460px; display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-2); background: var(--panel); color: var(--faint); }
.pu-search:focus-within { border-color: var(--line-3); color: var(--text); }
.pu-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; }
.pu-sync { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.pu-sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-wash); }
.pu-sync.busy i { background: var(--marigold); box-shadow: 0 0 0 3px var(--marigold-wash); animation: pu-pulse 1s ease-in-out infinite; }
@keyframes pu-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pu-sync.busy i, .pu-skeleton i, .pu-skeleton-panel i { animation: none; } }

.pu-panel { border: 1px solid var(--line-2); background: var(--panel); min-width: 0; }
.pu-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.pu-panel-head.slim { padding: 11px 18px; }
.pu-panel-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pu-panel-title .eyebrow { display: block; margin-bottom: 1px; }
.pu-panel-title h2 { font-size: 16px; font-weight: 700; letter-spacing: -.005em; }
.pu-panel-title h2 .muted { font-weight: 500; }
.pu-supplier { display: inline-grid; place-items: center; flex: none; min-width: 44px; height: 44px; padding: 0 8px; background: var(--text); color: var(--panel); font-family: var(--f-display); font-weight: 900; font-size: 18px; letter-spacing: .02em; }
.pu-supplier.other { background: transparent; color: var(--muted); border: 1px solid var(--line-2); font-size: 14px; }
.pu-meter { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12.5px; color: var(--muted); }
.pu-meter b { color: var(--text); font-weight: 700; }
.pu-meter span { display: inline-flex; align-items: center; gap: 6px; }
.pu-meter.met span, .pu-meter.met b { color: var(--good); }
.pu-meter-bar { display: block; width: 200px; height: 6px; background: var(--track); }
.pu-meter-bar > i { display: block; height: 100%; background: var(--marigold); transition: width .3s var(--ease); }
.pu-meter.met .pu-meter-bar > i { background: var(--good); }
.pu-alert { display: flex; align-items: flex-start; gap: 9px; padding: 10px 18px; background: var(--bad-wash); color: var(--bad); font-size: 13px; border-bottom: 1px solid var(--line); }
#puRoot > .pu-alert { border: 1px solid var(--line-2); }
.pu-alert svg { margin-top: 2px; flex: none; }
.pu-foot { display: flex; align-items: flex-start; gap: 9px; padding: 11px 18px; font-size: 12.5px; color: var(--muted); background: var(--tint); border-top: 1px solid var(--line); }
.pu-foot svg { margin-top: 1px; flex: none; }
.pu-foot b { color: var(--text); }

.pu-scroll { overflow-x: auto; }
.pu-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pu-table th { text-align: left; padding: 9px 14px; background: var(--raise); color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.pu-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pu-table tbody tr:last-child td { border-bottom: 0; }
.pu-table tbody tr:hover td { background: var(--tint); }
.pu-table .r { text-align: right; }
.pu-table td.pu-num { font-weight: 600; white-space: nowrap; padding-top: 14px; }
.pu-lines { display: flex; flex-direction: column; }
.pu-line { display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(0, 3fr) minmax(100px, .7fr) 64px; gap: 10px 16px; align-items: start; padding: 13px 18px; border-bottom: 1px solid var(--line); min-width: 0; }
.pu-lines.cost .pu-line { grid-template-columns: minmax(190px, 1.1fr) minmax(0, 3fr) minmax(100px, .7fr) 64px 90px; }
.pu-line:hover:not(.pu-line-head) { background: var(--tint); }
.pu-line-head { padding-top: 9px; padding-bottom: 9px; background: var(--raise); border-bottom-color: var(--line-2); color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.pu-line .r { text-align: right; }
.pu-line .pu-num { font-weight: 600; white-space: nowrap; padding-top: 6px; }
.pu-line .pu-num small { font-size: 11px; font-weight: 500; color: var(--muted); }
.pu-garment { display: flex; align-items: center; gap: 11px; min-width: 180px; }
.pu-garment b { display: block; font-weight: 700; }
.pu-garment span { display: block; font-size: 12.5px; color: var(--muted); }
.pu-swatch { flex: none; width: 30px; height: 30px; border: 1px solid var(--line-2); background: repeating-linear-gradient(45deg, var(--raise), var(--raise) 4px, var(--panel) 4px, var(--panel) 8px); }
.pu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pu-chip { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 7px; min-width: 92px; padding: 6px 9px; border: 1px solid var(--line); background: var(--ink); }
.pu-chip em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--faint); }
.pu-chip b { justify-self: end; font-size: 15px; font-weight: 700; }
.pu-chip small { grid-column: 1 / -1; font-size: 11px; color: var(--muted); white-space: nowrap; }
.pu-chip .pu-chip-cost { color: var(--faint); }
.pu-chip.bad { border-color: var(--bad); background: var(--bad-wash); }
.pu-chip.bad em, .pu-chip.bad b, .pu-chip.bad small { color: var(--bad); }
.pu-jobchips { display: flex; flex-wrap: wrap; gap: 4px; }
.pu-job { display: inline-block; padding: 1px 6px; border: 1px solid var(--line-2); font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }

.pu-else-list { list-style: none; margin: 0; padding: 4px 0; }
.pu-else-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 18px; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.pu-else-list li:last-child { border-bottom: 0; }
.pu-else-list .mono { color: var(--muted); font-size: 12.5px; }
.pu-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; color: var(--muted); background: var(--raise); }

.pu-jobno { font-weight: 800; font-size: 14px; text-decoration: none; color: var(--text); border-bottom: 2px solid var(--marigold); }
.pu-jobno:hover { color: var(--text); background: var(--marigold-wash); }
.pu-cust { display: block; font-weight: 600; }
.pu-jobs td small { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.pu-due { display: inline-flex; flex-direction: column; font-weight: 600; white-space: nowrap; }
.pu-jobs td .pu-due small { font-weight: 600; }
.pu-jobs td .pu-due.soon small { color: var(--text); background: var(--marigold-wash); padding: 0 4px; margin-left: -4px; width: max-content; }
.pu-due.bad, .pu-jobs td .pu-due.bad small { color: var(--bad); }
.pu-prog { display: inline-flex; flex-direction: column; gap: 6px; padding-top: 3px; white-space: nowrap; }
.pu-track { display: grid; grid-template-columns: repeat(5, 18px); gap: 3px; }
.pu-track i { height: 6px; background: var(--track); }
.pu-track i.done { background: var(--good); }
.pu-track i.now { background: var(--marigold); }
.pu-prog-label { font-size: 12px; font-weight: 700; color: var(--text-2); }
.pu-prog.own { flex-direction: row; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pu-facts { display: flex; flex-direction: column; gap: 4px; min-width: 260px; }
.pu-fact { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.4; }
.pu-fact svg { flex: none; margin-top: 2px; color: var(--faint); }
.pu-fact.muted { color: var(--muted); }
.pu-fact.good, .pu-fact.good svg { color: var(--good); }
.pu-fact a { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 2px; color: var(--text); }
.pu-fact a:hover { text-decoration-color: var(--marigold); }
.pu-over { color: var(--bad); font-weight: 700; }
.pu-under { color: var(--good); font-weight: 700; }
.pu-acts { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.pu-act { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 10px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pu-act:hover { border-color: var(--line-3); background: var(--tint); }
.pu-act.strong { background: var(--marigold); border-color: var(--marigold); color: var(--marigold-ink); }
.pu-act.strong:hover { background: var(--marigold-hi); border-color: var(--marigold-hi); }
.pu-act:disabled { opacity: .5; cursor: wait; }

.pu-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 20px; text-align: center; color: var(--muted); }
.pu-empty svg { color: var(--dim); margin-bottom: 4px; }
.pu-empty b { font-size: 15px; color: var(--text); }
.pu-empty span { font-size: 13.5px; max-width: 46ch; }
.pu-skeleton { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line-2); background: var(--line); }
.pu-skeleton i, .pu-skeleton-panel i { display: block; height: 96px; background: var(--panel); animation: pu-pulse 1.4s ease-in-out infinite; }
.pu-skeleton-panel { display: flex; flex-direction: column; gap: 1px; background: var(--line); }
.pu-skeleton-panel i { height: 56px; }

.pu-steps, .pu-tools, .pu-panel { min-width: 0; }
@media (max-width: 700px) {
  .pu-steps { flex: 1 1 100%; grid-template-columns: repeat(5, 136px); overflow-x: auto; }
  .pu-line-head { display: none; }
  .pu-line, .pu-lines.cost .pu-line { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "garment pieces" "chips chips" "jobs cost"; padding: 12px 16px; }
  .pu-line .pu-garment { grid-area: garment; min-width: 0; }
  .pu-line .pu-chips { grid-area: chips; }
  .pu-line .pu-jobchips { grid-area: jobs; }
  .pu-line .pu-pieces { grid-area: pieces; padding-top: 0; }
  .pu-line .pu-cost { grid-area: cost; padding-top: 0; }
  .pu-chip { min-width: 0; flex: 1 1 96px; }
  .pu-search { flex-basis: 100%; max-width: none; }
}
@media (max-width: 900px) {
  .pu-sides { flex: 1 1 100%; flex-direction: row; }
  .pu-side { border-bottom: 0; border-right: 1px solid var(--line); }
  .pu-side:last-child { border-right: 0; }
  .pu-sync { margin-left: 0; }
  .pu-meter { align-items: flex-start; }
  .pu-else-list li { grid-template-columns: auto minmax(0, 1fr); }
}
.oq-proofs .oe-photos-open { justify-self: start; }

/* ---- Leadership Dashboard (#leadership, portal/leadership.js) ---- */
.ldr-page { gap: 16px; }
#ldrRoot { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ldr-tabs { flex-wrap: wrap; }
.ldr-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 42px; }
.ldr-tools-end { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ldr-saved { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ldr-saved i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-wash); }
.ldr-saved.busy i { background: var(--marigold); box-shadow: 0 0 0 3px var(--marigold-wash); animation: pu-pulse 1s ease-in-out infinite; }
.ldr-saved.bad { color: var(--bad); }
.ldr-search { flex: 1 1 240px; max-width: 360px; display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-2); background: var(--panel); color: var(--faint); }
.ldr-search:focus-within { border-color: var(--line-3); color: var(--text); }
.ldr-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; }
.ldr-select { min-height: 38px; padding: 0 10px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font: inherit; font-size: 13.5px; }
.ldr-late { display: inline-flex; align-items: center; gap: 6px; color: var(--bad); font-size: 13px; font-weight: 700; }
.ldr-count { font-size: 13px; }
.ldr-panel { border: 1px solid var(--line-2); background: var(--panel); min-width: 0; }
.ldr-panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ldr-panel-head.slim { padding: 9px 16px; }
.ldr-panel-head h2 { font-size: 15px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.ldr-head-end { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.ldr-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; text-decoration: none; }
.ldr-icon:hover { color: var(--text); border-color: var(--line-2); background: var(--tint); }
.ldr-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }
.ldr-empty b { color: var(--text); font-size: 15px; }
.ldr-empty .btn { margin-top: 8px; }
.ldr-none { padding: 18px 6px; text-align: center; color: var(--faint); font-size: 13px; }

/* Issues board */
.ldr-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ldr-col { border: 1px solid var(--line-2); background: var(--raise); min-width: 0; }
.ldr-col > header { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.ldr-col > header h2 { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ldr-col > header .ldr-icon { margin-left: auto; }
.ldr-col-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.ldr-col-dot.week { background: var(--bad); }
.ldr-col-dot.month { background: var(--marigold); }
.ldr-col-dot.quarter { background: #2a78d6; }
.ldr-cards { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.ldr-issue { border: 1px solid var(--line-2); background: var(--panel); transition: border-color .15s; }
.ldr-issue:hover { border-color: var(--line-3); }
.ldr-issue.late { box-shadow: inset 3px 0 0 var(--bad); }
.ldr-issue.done .ldr-issue-open b { color: var(--muted); text-decoration: line-through; }
.ldr-issue-open { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 11px 12px 8px; border: 0; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.ldr-issue-open b { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ldr-issue-open span { font-size: 12.5px; color: var(--muted); line-height: 1.45; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ldr-issue footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px 10px; border-top: 1px solid var(--line); }
.ldr-who { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ldr-due { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ldr-due.late { color: var(--bad); font-weight: 700; }
.ldr-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ldr-pill.in_progress { color: var(--marigold-ink); background: var(--marigold); border-color: var(--marigold); }
.ldr-pill.done { color: var(--good); background: var(--good-wash); border-color: var(--good-line); }
.ldr-pill.off { color: var(--bad); background: var(--bad-wash); border-color: rgba(179, 38, 30, .3); }

/* L10 */
.ldr-date { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-2); background: var(--panel); font-size: 14px; font-weight: 600; cursor: pointer; }
.ldr-date input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.ldr-progress { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ldr-progress b { color: var(--text); }
.ldr-bar { display: block; width: 140px; height: 6px; background: var(--track); }
.ldr-bar > i { display: block; height: 100%; background: var(--good); transition: width .3s var(--ease); }
.ldr-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.ldr-checks { list-style: none; margin: 0; padding: 6px 0; }
.ldr-checks:empty { display: none; }
.ldr-checks li { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 16px; }
.ldr-checks li:hover { background: var(--tint); }
.ldr-checks label { flex: 1; display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 14px; cursor: pointer; min-width: 0; }
.ldr-checks label span { overflow-wrap: anywhere; }
.ldr-checks input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--marigold); flex: none; }
.ldr-checks li.done label span { color: var(--faint); text-decoration: line-through; }
.ldr-checks li .ldr-icon { opacity: 0; }
.ldr-checks li:hover .ldr-icon, .ldr-checks li .ldr-icon:focus-visible { opacity: 1; }
.ldr-add-item { display: flex; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.ldr-add-item .o-in { flex: 1; min-width: 0; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font: inherit; font-size: 13.5px; }
.ldr-add-item .o-in:focus { outline: none; border-color: var(--marigold); box-shadow: 0 0 0 2px var(--marigold-wash); }

/* Scorecard */
.ldr-score td { padding: 6px 8px; vertical-align: middle; }
.ldr-score th:last-child, .ldr-score td:last-child { width: 44px; }
.ldr-score .o-in { width: 100%; min-width: 90px; min-height: 34px; padding: 5px 8px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; }
.ldr-score .o-in:hover { border-color: var(--line-2); }
.ldr-score .o-in:focus { outline: none; border-color: var(--marigold); box-shadow: 0 0 0 2px var(--marigold-wash); background: var(--panel); }
.ldr-score td:first-child { min-width: 170px; }
.ldr-score td:nth-child(2) { min-width: 220px; }

/* Vision */
.ldr-visions { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; align-items: start; }
.ldr-vision-body { padding: 14px 18px 18px; font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; color: var(--text-2); }

/* Org chart: a top-down tree with connector lines */
.ldr-org-wrap { overflow-x: auto; padding: 24px 16px 28px; }
.ldr-org, .ldr-org ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; }
.ldr-org { width: max-content; min-width: 100%; }
.ldr-org ul { position: relative; padding-top: 22px; }
.ldr-org ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1px solid var(--line-3); }
.ldr-org li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 8px 0; }
.ldr-org > li { padding-top: 0; }
.ldr-org ul > li::before, .ldr-org ul > li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 1px solid var(--line-3); }
.ldr-org ul > li::after { right: auto; left: 50%; border-left: 1px solid var(--line-3); }
.ldr-org ul > li:first-child::before, .ldr-org ul > li:last-child::after { border: 0; }
.ldr-org ul > li:last-child::before { border-right: 1px solid var(--line-3); }
.ldr-org ul > li:only-child { padding-top: 0; }
.ldr-org ul > li:only-child::before, .ldr-org ul > li:only-child::after { display: none; }
.ldr-person { position: relative; width: 200px; border: 1px solid var(--line-2); border-top: 4px solid var(--dept); background: var(--panel); text-align: left; }
.ldr-person-open { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px 4px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ldr-person-open b { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.ldr-person-open span { font-size: 12.5px; color: var(--muted); }
.ldr-dept { display: inline-flex; align-items: center; gap: 6px; margin: 2px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.ldr-dept i { width: 8px; height: 8px; border-radius: 50%; background: var(--dept); }
.ldr-person-moves { display: flex; justify-content: flex-end; padding: 0 4px 4px; border-top: 1px solid var(--line); }
.ldr-person-moves .ldr-icon { width: 28px; height: 28px; }
.ldr-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.ldr-color { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ldr-color input { width: 32px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }

/* SOPs */
.ldr-sop-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; align-items: start; }
.ldr-sops { list-style: none; margin: 0; padding: 0; }
.ldr-sops li { display: flex; align-items: center; gap: 6px; padding-right: 10px; border-bottom: 1px solid var(--line); }
.ldr-sops li:last-child { border-bottom: 0; }
.ldr-sops li:hover { background: var(--tint); }
.ldr-sop-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 11px 16px; border: 0; background: none; color: var(--muted); font: inherit; text-align: left; cursor: pointer; }
.ldr-sop-open > span { display: flex; flex-direction: column; min-width: 0; }
.ldr-sop-open b { color: var(--text); font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ldr-sop-open small { font-size: 12px; color: var(--muted); }

/* Modals */
.ldr-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
#ldrForm .lb-field .o-in { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 400; }
#ldrForm textarea.o-in { resize: vertical; line-height: 1.5; }
.ldr-people { display: flex; flex-wrap: wrap; gap: 6px; text-transform: none; letter-spacing: 0; }
.ldr-modal-foot { display: flex; align-items: center; gap: 8px; }
.o-modal.ldr-preview { width: min(1100px, calc(100vw - 32px)); height: 84vh; max-height: 84vh; padding: 0; gap: 0; overflow: hidden; }
.ldr-preview .o-modal-head { padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--line-2); }
.ldr-preview .o-modal-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ldr-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; }

@media (max-width: 1100px) { .ldr-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ldr-board, .ldr-cats, .ldr-visions, .ldr-sop-groups { grid-template-columns: minmax(0, 1fr); }
  .ldr-tools-end { margin-left: 0; width: 100%; justify-content: space-between; }
  .ldr-search { max-width: none; }
  .ldr-checks li .ldr-icon { opacity: 1; }
}