/* Layout for the recreated Acme Platform screens. Tokens only (from tessera/tokens.css).
   Anything here that isn't a Tessera component is marked "composed". */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg-page); color: var(--text); font: var(--text-ui); -webkit-font-smoothing: antialiased; }

/* App frame: header, nav rail, then the page */
.acme-app { min-height: 100vh; display: grid; grid-template-rows: var(--header-height) 1fr; }
.acme-body { display: grid; grid-template-columns: var(--sidenav-rail) minmax(0, 1fr); min-height: 0; }
.acme-body > .ts-sidenav { border-right: 1px solid var(--border); background: var(--surface); }
.acme-page { display: grid; grid-template-columns: minmax(0, 1fr) 0px; min-width: 0; transition: grid-template-columns 200ms ease; }
.acme-page.ai-open { grid-template-columns: minmax(0, 1fr) 340px; }
.acme-page.no-assistant { grid-template-columns: minmax(0, 1fr); }
.acme-main { min-width: 0; padding: var(--space-24) var(--space-32) var(--space-64); }
.acme-crumbs { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); margin-bottom: var(--space-24); }
.acme-split { display: grid; grid-template-columns: clamp(264px, 20vw, 320px) minmax(0, 1fr); gap: var(--space-24); align-items: start; }
.acme-stack { display: grid; gap: var(--space-16); }

/* Customer and organisation panels (composed from Card, Badge, CopyButton, IconButton) */
.acme-who { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-12); align-items: start; }
.acme-who__name { display: flex; align-items: center; gap: var(--space-8); font: var(--text-ui-strong); }
.acme-who__line { display: flex; align-items: center; gap: var(--space-4); color: var(--text-subtle); }
.acme-facts { display: grid; gap: var(--space-8); margin: var(--space-16) 0; }
.acme-facts div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-8); align-items: baseline; }
.acme-facts dt { color: var(--text-muted); }
.acme-facts dd { margin: 0; }
.acme-cust { display: grid; gap: var(--space-16); }
.acme-cust .acme-facts { margin: 0; }
.acme-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.acme-tile { padding: var(--space-8) var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.acme-tile b { display: block; font: var(--text-ui-strong); }
.acme-tile span { font: var(--text-small); color: var(--text-muted); }
.acme-links { display: grid; gap: var(--space-8); margin: var(--space-12) 0 var(--space-16); }

/* Product thumbnail: white-background product photo; flat placeholder when a product has none */
.acme-thumb { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--text-muted); }
.acme-thumb.is-lg { width: 100%; height: 120px; }

/* Order rows inside the Orders tab (composed) */
.acme-order { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.acme-order + .acme-order { margin-top: var(--space-16); }
.acme-order__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: var(--space-16); align-items: center; padding: var(--space-8) var(--space-16); background: var(--surface-muted); border-bottom: 1px solid var(--border); }
.acme-order__head .count { color: var(--text-muted); font: var(--text-small); }
.acme-order__head .date { color: var(--text-muted); }
.acme-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-16); align-items: center; padding: var(--space-16); }
.acme-line + .acme-line, .acme-notice + .acme-line { border-top: 1px solid var(--border-subtle); }
.acme-line + .acme-notice { border-top: 1px solid var(--border-subtle); }
.acme-line__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); font: var(--text-ui-strong); }
.acme-line__meta { color: var(--text-muted); }
.acme-line__price { text-align: right; }
.acme-line__price span { display: block; color: var(--text-muted); }
.acme-notice { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-16) 0; color: var(--warning); font: var(--text-small-strong); }

/* AI assistant column (composed) */
.acme-assistant-col { min-width: 0; overflow: hidden; border-left: 1px solid var(--border); background: var(--surface); }
.acme-page:not(.ai-open) .acme-assistant-col { border-left-width: 0; }
.acme-assistant-col > .acme-assistant { width: 340px; }
.acme-ai-title { display: flex; align-items: center; gap: var(--space-8); }
.acme-ai-title svg { color: var(--violet-600); }
.acme-assistant__head > span:last-child { display: flex; gap: var(--space-4); }

/* Acme AI floating button (composed). The indigo-to-violet fill is a deliberate exception to
   Tessera's no-gradients rule, so the AI entry point stands apart from regular actions.
   It starts from the current accent, so it follows the Appearance switcher. */
.acme-fab { position: fixed; right: var(--space-24); bottom: var(--space-24); z-index: 5; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--accent), var(--violet-600)); color: var(--on-accent); box-shadow: var(--shadow-lg); cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease; }
.acme-fab:hover { transform: scale(1.06); }
.acme-fab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.acme-fab__dot { position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; border: 2px solid var(--surface); border-radius: var(--radius-pill); background: var(--critical); }
@media (prefers-reduced-motion: reduce) { .acme-page, .acme-fab { transition: none; } }
.acme-assistant { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--space-16); height: calc(100vh - var(--header-height)); padding: var(--space-16); overflow-y: auto; }
.acme-assistant__head { display: flex; align-items: center; justify-content: space-between; font: var(--text-ui-strong); }
.acme-assistant__head span { display: flex; align-items: center; gap: var(--space-8); }
.acme-assistant__hello { margin-top: auto; text-align: center; font: var(--text-title-3); }
.acme-assistant__thread { display: grid; gap: var(--space-12); }
.acme-bubble { justify-self: end; max-width: 85%; padding: var(--space-8) var(--space-12); border-radius: var(--radius-md); background: var(--accent-subtle); color: var(--text-accent); }
.acme-thinking { display: flex; align-items: center; gap: var(--space-8); color: var(--text-muted); }
.acme-context { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border-radius: var(--radius-sm); background: var(--surface-muted); font: var(--text-small); }
.acme-context .ts-link { font: var(--text-small-strong); }
.acme-context > :last-child { margin-left: auto; }
.acme-composer { display: grid; gap: var(--space-8); }
.acme-composer__row { display: flex; justify-content: space-between; align-items: center; }
.acme-composer__row > div { display: flex; gap: var(--space-8); }
.acme-ai-note { font: var(--text-small); color: var(--text-muted); }

/* Disclaimer so every screen reads as a recreation (composed) */
.acme-recreated { flex: none; font: var(--text-small); color: var(--text-muted); }
.acme-recreated a { color: var(--text-accent); }

.mono { font: var(--text-mono); }
.muted { color: var(--text-muted); }
.right { text-align: right; }

/* Appearance switcher rows (composed) */
.acme-theme-row { display: grid; gap: var(--space-4); }
.acme-theme-row + .acme-theme-row { margin-top: var(--space-12); }
.acme-theme-row > span { font: var(--text-small-strong); color: var(--text-muted); }

/* ---------- Quote and checkout screens (composed) ---------- */
.q-assoc { display: grid; }
.q-assoc__row { padding: var(--space-12) 0; border-top: 1px solid var(--border-subtle); }
.q-assoc__row:first-child { padding-top: 0; border-top: 0; }
.q-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6) var(--space-16); align-items: center; }
.q-head > div:first-child { display: contents; }
.q-back { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; color: var(--text-accent); font: var(--text-small-strong); text-decoration: none; }
.q-back:hover { text-decoration: underline; }
.q-head__count { color: var(--text-muted); font: var(--text-ui); }
.q-verified { display: inline-flex; color: var(--success); }
.q-head__title { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); font: var(--text-title-2); }
.q-head__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); color: var(--text-muted); font: var(--text-small); }
.q-head__meta span + span::before { content: ""; display: inline-block; width: 1px; height: 12px; margin-right: var(--space-12); vertical-align: -2px; background: var(--border); }
.q-head__actions { grid-column: 2; grid-row: 2; display: flex; flex: none; gap: var(--space-8); }
.q-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 360px); gap: var(--space-24); align-items: start; }
.q-summary { position: sticky; top: calc(var(--control-lg) + var(--space-24)); }
.q-sum { display: grid; gap: var(--space-6); margin-bottom: var(--space-16); }
.q-sum > div { display: flex; justify-content: space-between; gap: var(--space-8); }
.q-sum > div span:first-child { display: inline-flex; align-items: center; gap: var(--space-4); }
.q-sum .sub { color: var(--text-muted); font: var(--text-small); }
.q-sum .total { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); font: var(--text-title-4); }
.q-apply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: end; margin-top: var(--space-12); }
.q-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); }
.q-toolbar .end { margin-left: auto; display: flex; align-items: center; gap: var(--space-8); }
.q-attn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); }
.q-attn b { font: var(--text-ui-strong); }
.q-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-16); align-items: stretch; }
.q-cards > .ts-card > .ts-card__body { height: 100%; }
.q-card { display: flex; flex-direction: column; gap: var(--space-12); height: 100%; }
.q-card__more { display: flex; justify-content: space-between; align-items: center; margin: auto calc(-1 * var(--space-16)) calc(-1 * var(--space-16)); padding: var(--space-12) var(--space-16); border: 0; border-top: 1px solid var(--border-subtle); background: none; color: var(--text); font: var(--text-ui); text-align: left; cursor: pointer; }
.q-card__more:hover { background: var(--surface-hover); }
.q-card__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-8); align-items: start; font: var(--text-ui-strong); }
.q-card__links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); }
.q-noart { display: grid; place-items: center; gap: var(--space-4); height: 120px; border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--text-muted); font: var(--text-small); text-align: center; }
.q-kv { display: grid; gap: var(--space-6); padding-top: var(--space-12); border-top: 1px solid var(--border-subtle); }
.q-kv > div > span:first-child { color: var(--text-subtle); }
.q-kv .ts-iconbtn { margin-right: calc(-1 * var(--space-6)); }
.q-kv > div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); }
.q-kv > div > span:last-child { display: inline-flex; align-items: center; gap: var(--space-4); }
.q-total { display: grid; gap: var(--space-2); padding-top: var(--space-12); border-top: 1px solid var(--border-subtle); }
.q-total small { justify-self: end; color: var(--text-muted); font: var(--text-small); }
.q-total .ok { justify-self: end; color: var(--success); font: var(--text-small); }
.q-total > div { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--space-4); }
.q-total > div b { font: var(--text-ui-strong); white-space: nowrap; }
.q-total > .ts-link, .q-total > a { justify-self: start; margin-top: var(--space-4); }
.q-total > div > span:last-child { white-space: nowrap; }
.q-total s { color: var(--text-muted); font-weight: 400; margin-right: var(--space-8); }

/* Large quote list view */
.q-rows { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.q-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) clamp(84px, 7vw, 140px) 184px auto auto; gap: var(--space-12); align-items: center; padding: var(--space-16); }
.q-row + .q-row, .q-row + .q-acc, .q-acc + .q-row, .q-more + .q-row, .q-row + .q-more { border-top: 1px solid var(--border-subtle); }
.q-row__thumb { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--text-muted); }
.q-row__thumb.is-none { background: none; border: 1px dashed var(--border-control); }
.q-row__name { display: grid; gap: var(--space-4); min-width: 0; }
.q-row__name > b { font: var(--text-ui-strong); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.q-row__name > span { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); color: var(--text-muted); font: var(--text-small); }
.q-row__name > span .mono { font: var(--text-small); font-family: var(--font-mono); color: var(--text-subtle); }
.q-row__price { display: grid; justify-items: end; gap: var(--space-2); text-align: right; }
.q-row__amount { display: inline-flex; align-items: center; gap: var(--space-4); }
.q-row__amount b { font: var(--text-ui-strong); }
.q-row__amount s { color: var(--text-muted); font: var(--text-small); margin-right: var(--space-4); }
.q-row__amount .ts-iconbtn { margin-right: calc(-1 * var(--space-6)); }
.q-row__price small { color: var(--text-muted); font: var(--text-small); }
.q-row__price .ok { color: var(--success); font: var(--text-small); }
.q-acc { padding: var(--space-6) var(--space-12) 0 calc(var(--space-12) + 44px); background: var(--surface-muted); color: var(--text-muted); font: var(--text-small-strong); }
.q-acc + .q-row { background: var(--surface-muted); }
.q-more { background: var(--surface); }
.q-more__head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-6) var(--space-12); background: var(--surface-muted); border-bottom: 1px solid var(--border-subtle); font: var(--text-ui); }
.q-more__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-24); padding: var(--space-16); }
.q-free { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border-radius: var(--radius-sm); background: var(--surface-muted); }
.q-free__ok { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--success); font: var(--text-small); }
.q-free__remove { padding: 0; border: 0; background: none; color: var(--critical); font: var(--text-small-strong); cursor: pointer; }
.q-free__remove:hover { text-decoration: underline; }
.q-more__facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-16); margin-top: var(--space-16); }
.q-more__facts > div { display: grid; gap: var(--space-4); align-content: start; }
.q-more__facts .acme-who__line { white-space: nowrap; }
.q-more__facts b { display: flex; gap: var(--space-8); font: var(--text-ui-strong); }
.q-selbar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-8) var(--space-16); border-radius: var(--radius-sm); background: var(--surface-muted); }
.q-selbar__remove { padding: 0; border: 0; background: none; color: var(--text-accent); font: var(--text-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.q-selbar__remove:disabled { color: var(--text-disabled); cursor: not-allowed; }
.q-panel { padding: 0 var(--space-24) var(--space-24); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.q-panel > .q-head { padding-bottom: var(--space-16); margin: 0 calc(-1 * var(--space-24)); padding-left: var(--space-24); padding-right: var(--space-24); border-bottom: 1px solid var(--border); }
.q-pager { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); padding: var(--space-8) var(--space-12); border-top: 1px solid var(--border-subtle); }

/* Add item dialog */
.q-tiers { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.q-tier { display: grid; grid-template-columns: auto minmax(0, 1fr) 100px 110px; gap: var(--space-12); align-items: center; width: 100%; padding: var(--space-8) var(--space-12); border: 0; border-top: 1px solid var(--border-subtle); background: var(--surface); color: var(--text); font: var(--text-ui); text-align: left; cursor: pointer; }
.q-tier:first-child { border-top: 0; }
.q-tier.is-head { background: var(--surface-muted); color: var(--text-subtle); font: var(--text-small-strong); cursor: default; }
.q-tier.is-on { background: var(--accent-subtle); }
.q-tier .r { text-align: right; }
.q-tier .dot { width: 16px; height: 16px; border: 1px solid var(--border-control); border-radius: var(--radius-pill); }
.q-tier.is-on .dot { border: 5px solid var(--accent); }
.q-section { margin-top: var(--space-12); padding: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.q-section > header { display: flex; justify-content: space-between; margin-bottom: var(--space-8); font: var(--text-ui-strong); }
.q-section .field-label { display: block; margin: var(--space-12) 0 var(--space-4); font: var(--text-ui-strong); }
.q-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.q-qtyline { display: flex; align-items: end; gap: var(--space-12); }
.q-qtyline span { padding-bottom: var(--space-8); color: var(--text-muted); }
.q-dlgfoot { display: flex; align-items: center; gap: var(--space-8); width: 100%; }
.q-dlgfoot > div { margin-right: auto; }
.q-dlgfoot > div > b { display: block; font: var(--text-ui-strong); }
.q-dlgfoot > div > span { color: var(--text-muted); font: var(--text-small); }

/* Checkout */
.q-ship { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.q-ship__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) 112px minmax(0, 1fr); gap: var(--space-12); align-items: center; padding: var(--space-12) var(--space-16); border-top: 1px solid var(--border-subtle); }
.q-ship__row:first-child { border-top: 0; }
.q-ship__row.is-head { background: var(--surface-muted); color: var(--text-subtle); font: var(--text-small-strong); }
.q-ship__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.q-ship__item > div > b { display: block; font: var(--text-ui-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-ship__item > div > span { color: var(--text-muted); font: var(--text-small); }
.q-ship__qty { display: grid; gap: var(--space-2); }
.q-split { display: grid; gap: var(--space-8); padding: var(--space-12); background: var(--surface-muted); border-top: 1px solid var(--border-subtle); }
.q-split__row { display: grid; grid-template-columns: minmax(0, 1.6fr) 130px minmax(0, 1.2fr) auto; gap: var(--space-8); align-items: end; }
.q-split__done { display: flex; justify-content: space-between; align-items: center; color: var(--success); font: var(--text-small-strong); }
.q-split__done span { display: inline-flex; align-items: center; gap: var(--space-4); }
.q-quick { display: grid; gap: var(--space-12); }
.q-quick__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4) var(--space-12); align-items: start; padding-bottom: var(--space-12); border-bottom: 1px solid var(--border-subtle); }
.q-quick__item:last-child { padding-bottom: 0; border-bottom: 0; }
.q-quick__eod { grid-column: 1 / -1; margin: var(--space-4) 0 0; color: var(--text-muted); font: var(--text-small); }
.q-quick__item b { display: block; font: var(--text-small-strong); color: var(--text); }
.q-quick__item > div > span, .q-quick__item small { display: block; color: var(--text-muted); font: var(--text-small); }
.q-quick__item .r { text-align: right; }
.q-summary-list { display: grid; }
.q-summary-group { border-top: 1px solid var(--border-subtle); }
.q-summary-group > header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); background: var(--surface-muted); font: var(--text-ui-strong); }
.q-summary-group > header span { display: inline-flex; align-items: center; gap: var(--space-8); }
.q-summary-group > header small { color: var(--text-muted); font: var(--text-small); }
.q-summary-group > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-16); padding: var(--space-12); }
.q-summary-group ul { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.q-pick { display: grid; gap: var(--space-8); }
.q-pick__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; padding: var(--space-8) var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.q-pick__row small { display: block; color: var(--text-muted); font: var(--text-small); }
.q-pick__row .r { text-align: right; }
.q-pick__label { margin: var(--space-12) 0 var(--space-4); font: var(--text-ui-strong); }

/* Page ground is white in light mode (Tessera's default is gray-25). Dark mode keeps Tessera's value. */
:root:not([data-theme="dark"]) { --bg-page: var(--gray-0); }

.q-sku { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }

/* Toast stack, bottom-left (composed around Tessera's Toast) */
.acme-toasts { position: fixed; left: calc(var(--sidenav-rail) + var(--space-16)); bottom: var(--space-24); z-index: 80; display: grid; gap: var(--space-8); width: min(380px, calc(100vw - 32px)); }

/* Interactive quote builder (composed) */
.q-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16) var(--space-24); padding-top: var(--space-8); }
.q-form__wide { grid-column: 1 / -1; }
.q-form__actions { display: flex; justify-content: flex-end; gap: var(--space-8); }
.q-row.is-selected { background: var(--accent-subtle); }
.q-priceedit { display: grid; gap: var(--space-6); justify-items: end; }
.q-priceedit .ts-field { width: 150px; }
.q-priceedit > div:last-child { display: flex; gap: var(--space-4); }
.q-optedit { display: grid; gap: var(--space-8); }
.q-optedit > div:last-child { display: flex; gap: var(--space-4); }
.q-sum__toggle { display: inline-flex; align-items: center; gap: var(--space-4); padding: 0; border: 0; background: none; color: var(--text); font: var(--text-ui); cursor: pointer; }
.q-sum__toggle:hover { color: var(--text-accent); }
.q-sum__lines { display: grid; gap: var(--space-2); margin: var(--space-4) 0; padding: var(--space-8); border-radius: var(--radius-sm); background: var(--surface-muted); font: var(--text-small); }
.q-sum__lines > div { display: flex; justify-content: space-between; gap: var(--space-8); }
.q-sum__lines > div > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-sum .ok { color: var(--success); }
.q-applied { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-12); padding: var(--space-6) var(--space-8); border-radius: var(--radius-sm); background: var(--success-subtle); color: var(--success); font: var(--text-small-strong); }
.q-applied > span { display: inline-flex; align-items: center; gap: var(--space-4); }
.q-panel > .ts-alert { margin-top: var(--space-4); }

.q-ship__row.is-selected { background: var(--accent-subtle); }
.q-split__done.is-off { color: var(--warning); }
.q-split__done > span:last-child { display: inline-flex; gap: var(--space-4); }
.q-err { color: var(--critical); }
.q-problems { margin: var(--space-8) 0 0; padding-left: var(--space-16); color: var(--critical); font: var(--text-small); }

/* A little more air than Tessera's dense defaults, for these screens */
.ts-card--compact .ts-card__body { padding: var(--space-16); gap: var(--space-12); }
.ts-card--compact .ts-card__header { padding: var(--space-12) var(--space-16) 0; }
.acme-assistant { gap: var(--space-24); padding: var(--space-24) var(--space-16); }
.q-sum > div > span:last-child { white-space: nowrap; }

/* Attention filters */
.q-attn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.q-attn > b { margin-right: var(--space-4); font: var(--text-ui-strong); }
.q-attn__ok { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--success); font: var(--text-small-strong); }
.q-filtered { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-16); border-radius: var(--radius-sm); background: var(--accent-subtle); color: var(--text-accent); font: var(--text-ui-strong); }
.q-toolbar:has(.q-attn) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.q-toolbar:has(.q-attn) .end { padding-top: var(--space-2); }

/* Sticky customer column and record tabs: only the middle column scrolls */
.acme-split > .acme-stack:first-child { position: sticky; top: var(--space-16); max-height: calc(100vh - var(--space-32)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.acme-split > .acme-stack:last-child > .ts-tabs { position: sticky; top: 0; z-index: 6; background: var(--bg-page); }
.q-panel > .ts-tabs { margin: 0 calc(-1 * var(--space-24)); padding: 0 var(--space-24); background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* Status filter tabs above the item list */
.q-statusbar { display: flex; align-items: end; gap: var(--space-16); border-bottom: 1px solid var(--border); }
.q-statusbar > .ts-tabs { flex: 1; min-width: 0; border-bottom: 0; }
.q-statusbar > .end { display: flex; align-items: center; gap: var(--space-8); padding-bottom: var(--space-6); }

/* Keep stacked columns from growing past their grid track (long tab rows scroll instead) */
.acme-stack { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.q-selbar__end { display: flex; align-items: center; gap: var(--space-16); }
.q-selbar__end .end { display: flex; align-items: center; gap: var(--space-8); }

/* Orders tab (orders.html) */
.ord-list { display: grid; gap: var(--space-12); container-type: inline-size; }
.ord-title { margin: 0; font: var(--text-title-3, var(--text-ui-strong)); }
.ord-filters { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(4, minmax(0, 1fr)) auto; gap: var(--space-8); align-items: end; }
.ord-filters > * { min-width: 0; }
.ord-applied { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-16); border-radius: var(--radius-sm); background: var(--accent-subtle); color: var(--text-accent); font: var(--text-ui-strong); }
.ord-rows { display: grid; gap: var(--space-8); }
.ord-row { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.ord-row__head { display: grid; grid-template-columns: auto minmax(150px, 1fr) 96px 100px minmax(120px, 172px) 156px 104px auto; gap: var(--space-16); align-items: center; padding: var(--space-8) var(--space-8) var(--space-8) var(--space-8); background: var(--surface-muted); }
.ord-row.is-open .ord-row__head { border-bottom: 1px solid var(--border); }
.ord-row__id { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-8); min-width: 0; white-space: nowrap; }
.ord-row__count { color: var(--text-muted); font: var(--text-small); }
.ord-row__meta { display: flex; align-items: center; gap: var(--space-4); min-width: 0; white-space: nowrap; }
.ord-row__meta > span { overflow: hidden; text-overflow: ellipsis; }
.ord-row__date { gap: var(--space-8); }
.ord-row__date span { color: var(--text-muted); }
.ord-row__total { text-align: right; white-space: nowrap; font: var(--text-ui-strong); }
.ord-ico { flex: none; width: 14px; height: 14px; color: var(--text-muted); }
.ord-item + .ord-item { border-top: 1px solid var(--border-subtle); }
.ord-item__notice { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-16) 0; color: var(--warning); font: var(--text-small-strong); }
.ord-item__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-12); align-items: center; padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16); }
.ord-item__name > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.ord-item__name > span { color: var(--text-muted); font: var(--text-small); }
.ord-item__price { text-align: right; white-space: nowrap; }
.ord-item__price span { display: block; color: var(--text-muted); font: var(--text-small); }
.ord-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); }
.ord-foot > .ts-select, .ord-foot > div:first-child { width: 160px; }
/* The facts are grid columns when wide; in a narrow column they drop to a line under the order ID */
.ord-row__facts { display: contents; }
@container (max-width: 920px) {
  .ord-row__head { grid-template-columns: auto minmax(0, 1fr) auto auto; row-gap: 0; }
  .ord-row__facts { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-16); grid-row: 2; grid-column: 2 / -1; padding-bottom: var(--space-4); color: var(--text-muted); }
  .ord-row__id { grid-row: 1; grid-column: 2; }
  .ord-row__total { grid-row: 1; grid-column: 3; }
  .ord-row__head > :last-child { grid-row: 1; grid-column: 4; }
  .ord-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ord-filters > :first-child { grid-column: 1 / 4; }
  .ord-filters > :last-child { grid-row: 1; grid-column: 4; }
}

/* Address list dialog */
.ord-addr { display: grid; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-12) var(--space-12) 0; }
.ord-addr > .ts-search, .ord-addr > :first-child { margin-bottom: var(--space-8); }
.ord-addr__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-12); align-items: center; padding: var(--space-8) 0; border-top: 1px solid var(--border-subtle); }
.ord-addr__row .acme-thumb { width: 32px; height: 32px; }
.ord-addr__name small { display: block; color: var(--text-muted); font: var(--text-small); }
.ord-addr__empty { margin: 0; padding: var(--space-16) 0; border-top: 1px solid var(--border-subtle); }

/* Reorder dialog */
.ord-re { display: grid; gap: var(--space-12); }
.ord-re > p { margin: 0; font: var(--text-small); }
.ord-re__opt { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ord-re__opt.is-on { border-color: var(--accent); }
.ord-re__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); min-height: 48px; padding: var(--space-8) var(--space-12); }
.ord-re__table { width: 100%; border-collapse: collapse; font: var(--text-ui); }
.ord-re__table th { padding: var(--space-8) var(--space-12); background: var(--surface-muted); color: var(--text-muted); font: var(--text-small-strong); text-align: left; }
.ord-re__table td { padding: var(--space-8) var(--space-12); border-top: 1px solid var(--border-subtle); white-space: nowrap; }
.ord-re__table .num { text-align: right; }
.ord-re__table tr.is-on td { background: var(--accent-subtle); }
.ord-re__none { margin: 0; padding: var(--space-12); border-top: 1px solid var(--border-subtle); font: var(--text-small); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Order details (order-details.html). Composed: Tessera's Stepper has one current step, an order can have several active */
.od-head { align-items: flex-start; }
.od-cancel.ts-btn:not(:disabled) { color: var(--critical); border-color: var(--critical); }
.od-steps { list-style: none; display: flex; margin: 0; padding: 0 0 var(--space-24); }
/* Marks are evenly spaced: every step after the first is its line plus its mark */
.od-step { position: relative; display: flex; align-items: center; gap: var(--space-4); flex: 1 1 0; }
.od-step:first-child { flex: 0 0 auto; }
.od-step:not(:first-child)::before { content: ''; flex: 1; height: 2px; background: var(--accent); }
.od-step.is-upcoming::before { background: var(--border); }
.od-step.is-critical::before { background: var(--critical); }
.od-step__label { position: absolute; top: calc(100% + var(--space-4)); right: 11px; transform: translateX(50%); white-space: nowrap; }
.od-step:first-child .od-step__label { right: auto; left: 0; transform: none; }
.od-step:last-child .od-step__label { right: 0; transform: none; }
.od-step__mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid var(--accent); border-radius: 50%; background: var(--surface); color: var(--surface); }
.od-step.is-done .od-step__mark { background: var(--accent); }
.od-step.is-warning .od-step__mark { border-color: var(--warning); background: var(--warning); color: var(--surface); font: 700 12px/1 var(--font-sans); }
.od-step.is-critical .od-step__mark { border-color: var(--critical); background: var(--critical); }
.od-step.is-upcoming .od-step__mark { border-color: var(--border); }
.od-step__label { font: var(--text-small); }
.od-step.is-upcoming .od-step__label { color: var(--text-muted); }
.od-step.is-active .od-step__label { font: var(--text-small-strong); }
.od-cards { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.3fr); gap: var(--space-12); }
@media (max-width: 1279px) { .od-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.od-card { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.od-card h3 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8); margin: 0; font: var(--text-ui-strong); }
.od-card p { margin: 0; }
.od-card__foot { margin-top: auto !important; padding-top: var(--space-12); color: var(--text-muted); font: var(--text-small); }
.od-pay > div { display: flex; justify-content: space-between; gap: var(--space-12); }
.od-pay > div > span:last-child { white-space: nowrap; }
.od-pay small { display: block; font: var(--text-small); }
.od-pay .save { color: var(--success); }
.od-pay .total { padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); font: var(--text-ui-strong); }
.od-pay .refunded { color: var(--text-muted); }
.od-pay .links { margin-top: var(--space-4); }
.od-subtabs { margin: 0 calc(-1 * var(--space-24)); padding: 0 var(--space-24); border-bottom: 1px solid var(--border); }
.od-subtabs > .ts-tabs { border-bottom: 0; }
.od-tab { display: grid; gap: var(--space-16); min-width: 0; }
.od-barlinks { display: flex; gap: var(--space-16); }
.od-viewas { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-8); }
.od-rows { display: grid; gap: var(--space-8); }
.od-row { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.od-row__main { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto auto auto; gap: var(--space-8) var(--space-12); align-items: start; padding: var(--space-12); }
.od-row__chev { display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
.od-row__main .acme-thumb { width: 32px; height: 32px; }
.od-row__main .acme-thumb svg { width: 24px; height: 24px; }
.od-row__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.od-row__title b { font: var(--text-ui-strong); }
.od-row__ids { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-12); margin-top: var(--space-4); color: var(--text-muted); font: var(--text-small); }
.od-row__ids > span, .od-row__ids > b { white-space: nowrap; }
.od-row__ids > b { color: var(--text); font: var(--text-small-strong); }
/* Divider sits in the gap, so it's clipped away when an item wraps to the start of a line */
.od-row__ids { overflow: hidden; }
.od-sep { position: relative; }
.od-sep::before { content: ''; position: absolute; top: 2px; bottom: 2px; left: calc(var(--space-12) / -2); width: 1px; background: var(--border); }
.od-id { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--text); }
.od-id code, .od-id .mono, .od-id [class*=copy] { font-family: inherit; }
.od-row__ship, .od-row__price { text-align: right; white-space: nowrap; font: var(--text-small); }
.od-row__price { padding-left: var(--space-12); border-left: 1px solid var(--border-subtle); }
.od-row__price b { display: block; font: var(--text-ui-strong); }
.od-row__ship small, .od-row__price small { display: block; font: var(--text-small); }
/* Status line under an item: icon, text, then the link right beside it */
.od-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); background: var(--success-subtle, var(--surface-muted)); }
.od-note > svg { color: var(--success); }
.od-note > .ts-link { margin-left: var(--space-8); }
.od-note.is-warning { background: var(--warning-subtle, var(--surface-muted)); }
.od-note.is-warning > svg { color: var(--warning); }
.od-note.is-info { background: var(--info-subtle, var(--surface-muted)); }
.od-note.is-info > svg { color: var(--info); }
.od-note.is-critical { background: var(--critical-subtle, var(--surface-muted)); }
.od-note.is-critical > svg { color: var(--critical); }
/* Expanded item. Delivered: a framed panel inside the card, then carrier tracking. Otherwise the panel runs edge to edge. */
.od-row__inset { display: grid; gap: var(--space-12); padding: 0 var(--space-12) var(--space-12); }
.od-more { border: 1px solid var(--border); background: var(--surface-muted); min-width: 0; }
.od-more.is-flush { border-width: 1px 0 0; }
.od-more__head { display: flex; justify-content: space-between; align-items: center; min-height: 32px; padding: 0 var(--space-4) 0 var(--space-12); border-bottom: 1px solid var(--border); }
.od-more__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-16); padding: var(--space-12); }
.od-attrs { flex: 1 1 200px; display: grid; gap: var(--space-4); padding: var(--space-12) var(--space-12) var(--space-12) 0; }
.od-attrs__head { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.od-attrs b { font: var(--text-ui-strong); }
.od-price { flex: 0 1 386px; min-width: 280px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.od-price h4 { margin: 0; padding: var(--space-12); font: var(--text-ui-strong); }
.od-price dl { display: grid; gap: var(--space-8); margin: 0; padding: 0 var(--space-12) var(--space-12); color: var(--text-muted); font: var(--text-small); }
.od-price dl > div { display: flex; justify-content: space-between; gap: var(--space-12); }
.od-price dd { display: flex; gap: var(--space-12); margin: 0; white-space: nowrap; }
.od-price dd b { font: var(--text-small-strong); }
.od-price .save { color: var(--success); }
.od-price__total { display: flex; justify-content: space-between; padding: var(--space-12); border-top: 1px solid var(--border); }
.od-price__total b { font: var(--text-ui-strong); }
.od-track { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); padding: var(--space-8); border: 1px solid var(--info, var(--accent)); border-radius: var(--radius-lg); background: var(--info-subtle, var(--accent-subtle)); }
.od-track > svg { color: var(--info, var(--accent)); margin-right: calc(-1 * var(--space-8)); }
.od-breakdown { display: grid; gap: var(--space-12); }
.od-breakdown .od-price { min-width: 0; }
.od-dialogmore { display: grid; gap: var(--space-12); }
.od-dialogmore .od-more { border-radius: var(--radius-lg); }
.od-barlink { padding: 0; border: 0; background: none; color: var(--text-accent); font: var(--text-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.od-barlink:disabled { color: var(--text-disabled); cursor: not-allowed; }
.od-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); }
@media (max-width: 1700px) { .od-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1240px) { .od-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.od-gcard { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.od-gcard > .ts-link { align-self: flex-start; font: var(--text-small); }
.od-gcard__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-8); align-items: start; }
.od-gcard__top b { font: var(--text-ui-strong); }
.od-gcard__badges { display: flex; flex-wrap: wrap; gap: var(--space-4); padding-left: var(--space-24); min-height: 22px; }
.od-gcard__img { margin: var(--space-4) calc(-1 * var(--space-16)) 0; padding-bottom: var(--space-12); border-bottom: 1px solid var(--border); }
.od-gcard__img .acme-thumb.is-lg { height: 128px; background: none; border-radius: 0; }
.od-gcard__img .acme-photos { padding: 0 var(--space-16); }
.od-gcard__facts { display: grid; gap: var(--space-8); margin: var(--space-4) 0 0; }
.od-gcard__facts > div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); }
.od-gcard__facts dt { font: var(--text-ui-strong); }
.od-gcard__facts dd { margin: 0; text-align: right; }
.od-gcard__money { display: grid; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }
.od-gcard__money small { color: var(--text-muted); font: var(--text-small); text-align: right; }
.od-gcard__money > div { display: flex; justify-content: space-between; }
.od-gcard__money b { font: var(--text-ui-strong); }
.od-gbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-12); margin-top: auto; padding: var(--space-12) var(--space-16); border: 1px solid var(--success); border-radius: var(--radius-lg); }
.od-gbox > svg { color: var(--success); }
.od-gbox b { display: block; font: var(--text-ui-strong); }
.od-gbox span { display: block; font: var(--text-small); }
.od-gbox.is-success { background: var(--success-subtle); }
.od-gbox.is-info { border-color: var(--info); background: var(--info-subtle); }
.od-gbox.is-info > svg { color: var(--info); }
.od-gbox.is-critical { border-color: var(--critical); background: var(--critical-subtle); }
.od-gbox.is-critical > svg { color: var(--critical); }
.od-gbox.is-warning { border-color: var(--warning); background: var(--warning-subtle); }
.od-gbox.is-warning > svg { color: var(--warning); }
.od-gbox.is-muted { border-color: var(--border); }
.od-gbox.is-muted > svg { color: var(--text-muted); }
.od-gcard__opts { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: var(--space-12) 0 0; border: 0; border-top: 1px solid var(--border-subtle); background: none; color: inherit; font: var(--text-ui); text-align: left; cursor: pointer; }
.od-act { display: grid; gap: var(--space-16); }
.od-act__list { display: grid; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.od-act__list > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-12); align-items: center; padding: var(--space-8) var(--space-12); }
.od-act__list > div + div { border-top: 1px solid var(--border-subtle); }
.od-act__list .acme-thumb { width: 32px; height: 32px; }
.od-act__list small { display: block; color: var(--text-muted); font: var(--text-small); }
.od-act__no { display: grid; gap: var(--space-4); color: var(--text-muted); font: var(--text-small); }
.od-act__no b { color: var(--text); font: var(--text-small-strong); }
.od-act__sum { display: flex; justify-content: space-between; font: var(--text-ui-strong); }
.od-evbody { display: grid; gap: var(--space-8); margin-top: var(--space-4); }
.od-shipitem { display: inline-flex; align-items: center; gap: var(--space-8); }
.od-shipitem .acme-thumb { width: 32px; height: 32px; }
/* Item and doc IDs use the body typeface here, as in the design */
.od-id .ts-copyinline.is-mono .ts-copyinline__value, .od-gcard__facts .ts-copyinline.is-mono .ts-copyinline__value { font: inherit; }

/* Status badges open the item's events */
.od-badgebtn { display: inline-flex; flex-wrap: wrap; gap: var(--space-4); padding: 0; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; }
.od-badgebtn:hover .ts-badge { box-shadow: 0 0 0 1px currentColor; }
.od-badgebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Item events drawer */
.od-ev { display: grid; gap: var(--space-16); min-width: 0; }
.od-ev__toggle { position: sticky; top: calc(-1 * var(--space-16)); z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-8); padding: var(--space-8) 0; border-bottom: 1px solid var(--border); background: var(--surface); }
.od-ev__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-8); min-width: 0; }
.od-ev__item .acme-thumb { width: 32px; height: 32px; }
.od-ev__item .acme-thumb svg { width: 24px; height: 24px; }
.od-ev__item b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--text-ui-strong); }
.od-ev__item span { color: var(--text-muted); font: var(--text-small); }
.od-ev__now { display: grid; justify-items: start; gap: var(--space-4); padding: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.od-ev__label { color: var(--text-muted); font: var(--text-small); }
.od-ev__state { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.od-ev__now small { color: var(--text-muted); font: var(--text-small); }
.od-ev__tools { display: flex; justify-content: space-between; align-items: end; gap: var(--space-16); }
.od-ev__tools > :first-child { flex: 0 1 200px; }
.od-ev__title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
/* Events read as one list: no box around each event's details */
.od-ev .ts-timeline__body { margin-top: var(--space-2); padding: 0; border: 0; background: none; }
.od-ev .od-evbody { margin-top: 0; gap: var(--space-2); font: var(--text-small); }

/* Product photography. Photos sit on white in both themes, like a printed catalogue. */
.acme-thumb.is-photo { padding: 0; overflow: hidden; background: #fff; border: 1px solid var(--border); appearance: none; }
button.acme-thumb.is-photo { cursor: zoom-in; }
button.acme-thumb.is-photo:hover { border-color: var(--border-control); }
button.acme-thumb.is-photo:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 1px; }
.acme-thumb.is-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.q-row > .acme-thumb.is-photo, .od-row__main .acme-thumb.is-photo, .od-ev__item .acme-thumb.is-photo { width: 40px; height: 40px; }
.acme-photos { display: grid; gap: var(--space-8); }
.acme-photos__main { display: block; width: 100%; height: 160px; object-fit: contain; background: #fff; border-radius: var(--radius-sm); }
.acme-photos.is-dialog .acme-photos__main { height: min(56vh, 400px); }
.acme-photos__views { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.acme-photos__view { width: 32px; height: 32px; padding: 0; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.acme-photos__view img { display: block; width: 100%; height: 100%; object-fit: contain; }
.acme-photos__view:hover { border-color: var(--border-control); }
.acme-photos__view.is-on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.acme-photos__view:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.q-addprod { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-12); }
.q-addprod b { font: var(--text-ui-strong); }

.od-ids { gap: var(--space-12); margin: var(--space-12) 0 0; }
.ts-dialog .od-ev__toggle { top: 0; margin-bottom: var(--space-12); background: var(--surface, #fff); }

/* Item artwork modal */
.acme-photos__open { display: block; width: 100%; padding: 0; background: none; border: 0; border-radius: var(--radius-sm); cursor: zoom-in; }
.acme-photos__open:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ts-dialog:has(.od-art) { max-width: min(1240px, calc(100vw - 48px)); height: calc(100vh - 48px); }
.ts-dialog__body:has(.od-art) { flex: 1; min-height: 0; padding: 0; gap: 0; }
.od-art { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.od-art > .od-ev__toggle { position: static; margin: 0; padding: var(--space-8) var(--space-16); }
.od-art .ts-tabs, .od-art [role="tablist"] { flex: none; padding: 0 var(--space-16); }
.od-art__body { display: grid; grid-template-columns: 124px minmax(0, 1fr); flex: 1; min-height: 0; }
.od-art__rail { position: relative; display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-12); overflow: auto; background: var(--surface-muted); }
.od-art__thumb { flex: none; display: grid; gap: var(--space-4); justify-items: center; padding: 2px; color: var(--text); font: var(--text-small); text-align: center; background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; overflow-wrap: anywhere; }
.od-art__thumb.is-on { color: var(--text); font: var(--text-small-strong); background: var(--accent-subtle); box-shadow: 0 0 0 2px var(--accent); }
.od-art__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.od-art__thumbimg { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: #fff; border-radius: var(--radius-sm); }
.od-art__thumbimg > img:first-child { display: block; width: 100%; height: 100%; object-fit: contain; }
.od-art__logo { position: absolute; display: block; height: auto; }
.od-art__main { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; min-height: 0; padding: var(--space-12) var(--space-16) var(--space-16); }
.od-art__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); }
.od-art__head b { font: var(--text-ui-strong); color: var(--text); }
.od-art__pair p { min-height: 40px; }
.od-art__head span, .od-art__pair p { margin: 0; color: var(--text-muted); font: var(--text-small); }
.od-art__stage { position: relative; flex: 1 1 0; min-height: 0; container-type: size; background: #fff; border-radius: var(--radius-sm); }
.od-art__scroll { position: absolute; inset: 0; display: flex; overflow: auto; }
.od-art__canvas { position: relative; flex: none; width: calc(min(100cqw, 100cqh) * var(--zoom, 1)); aspect-ratio: 1; margin: auto; }
.od-art__canvas > img:first-child { display: block; width: 100%; height: 100%; object-fit: contain; }
.od-art__acts, .od-art__zoom { position: absolute; display: flex; gap: var(--space-8); }
.od-art__acts { top: var(--space-8); right: var(--space-8); }
.od-art__zoom { right: var(--space-8); bottom: var(--space-8); }
.od-art__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); flex: 1; min-height: 0; }
.od-art__pair section { display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; }
.od-art__pair h4 { margin: 0; padding: 2px var(--space-12); color: var(--text); font: var(--text-small); background: var(--surface-muted); border-radius: var(--radius-sm); }

/* Quote listing: order rows with the quote's own labelled facts */
.qp-head { grid-template-columns: auto minmax(168px, 1fr) 124px 40px minmax(112px, 1fr) 118px 84px 88px auto; gap: var(--space-12); }
.qp-fact { display: grid; gap: 0; min-width: 0; white-space: nowrap; }
.qp-fact > small { color: var(--text-muted); font: var(--text-small); }
.qp-fact > span { overflow: hidden; text-overflow: ellipsis; }
.qp-fact .ts-copyinline .ts-copyinline__value, .qp-fact .ts-copyinline.is-mono .ts-copyinline__value { font: inherit; }
.qp-num { display: inline-flex; align-items: center; gap: var(--space-2); }
.qp-spacer { width: 32px; }
.qp-none { margin: 0; padding: var(--space-12) var(--space-16); color: var(--text-muted); }

.od-art__pages { position: relative; display: flex; flex-direction: column; flex: 1 1 0; gap: var(--space-16); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.od-art__page { display: flex; flex-direction: column; flex: 0 0 100%; min-height: 0; }
.od-art__head b small { margin-left: var(--space-8); color: var(--text-muted); font: var(--text-small); }

/* Addresses tab */
.adr { display: grid; gap: var(--space-12); container-type: inline-size; }
.adr__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); }
.adr__top > div { display: flex; gap: var(--space-8); }
.adr__filters { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: end; }
.adr__controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8) var(--space-24, 24px); }
.adr__controls > div { display: flex; align-items: center; gap: var(--space-12); }
.adr-row { display: grid; grid-template-columns: minmax(220px, 1fr) 44px 52px 84px 136px 124px auto; gap: var(--space-12); align-items: center; padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16); }
.adr-row__main { display: grid; gap: var(--space-2); min-width: 0; }
.adr-row__main b { font: var(--text-ui-strong); overflow-wrap: anywhere; }
.adr-row__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); color: var(--text-muted); font: var(--text-small); }
.adr-row__mark { display: flex; justify-content: flex-start; white-space: nowrap; }
.adr-row__mark .ts-btn { white-space: nowrap; }
.adr-group { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.adr-group__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; padding: var(--space-8) var(--space-16) var(--space-8) var(--space-8); background: var(--surface-muted); }
.adr-group__head b { font: var(--text-ui-strong); }
.adr-group__sub { display: block; color: var(--text-muted); font: var(--text-small); }
.adr-group__head small { color: var(--text-muted); font: var(--text-small); }
.adr-group .adr-row { border-top: 1px solid var(--border-subtle); }
.adr-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.adr-form__wide { grid-column: 1 / -1; }
.adr-up { display: grid; gap: var(--space-12); }
.adr-up__list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.adr-up__list li { padding: var(--space-4) var(--space-12); font: var(--text-small); }
.adr-up__list li + li { border-top: 1px solid var(--border-subtle); }

/* Financial history */
.od-fin { display: grid; gap: var(--space-16); }
.od-fin__sum { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24, 24px); margin: 0; }
.od-fin__sum > div { display: flex; align-items: baseline; gap: var(--space-8); }
.od-fin__sum dt { color: var(--text-muted); font: var(--text-small); }
.od-fin__sum dd { margin: 0; font: var(--text-ui-strong); }
.od-fin__sum .is-good { color: var(--success); }
.od-fin__sum .is-bad, .od-fin .is-bad { color: var(--critical); }
.od-fin__box { display: grid; gap: var(--space-12); padding: var(--space-16); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.od-fin__box h4 { margin: 0; font: var(--text-ui-strong); white-space: nowrap; }
.od-fin__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); }
.od-fin__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) 0; margin: 0; }
.od-fin__facts > div { display: flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-16); }
.od-fin__facts > div:first-child { padding-left: 0; }
.od-fin__facts > div + div { border-left: 1px solid var(--border); }
.od-fin__facts dt { color: var(--text-muted); }
.od-fin__facts dd { margin: 0; white-space: nowrap; }
.od-fin__facts .ts-copyinline .ts-copyinline__value { font: inherit; }
.od-fin__plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.od-fin__plan li { display: grid; padding: var(--space-8) var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.od-fin__plan span, .od-fin__plan small { color: var(--text-muted); font: var(--text-small); }
.od-fin__plan b { font: var(--text-ui-strong); }
.od-fin__plan li.is-paid small { color: var(--success); }
.od-fin__credit { display: grid; gap: var(--space-4); }
.od-fin__credit > div:first-child { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: baseline; }
.od-fin__credit > div:first-child > span { color: var(--text-muted); font: var(--text-small); }
.od-fin__credit > div:first-child > span:last-child { margin-left: auto; }
.od-fin__credit > div:first-child > span.is-bad { color: var(--critical); }
.od-fin__meter { height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-muted); }
.od-fin__meter i { display: block; height: 100%; background: var(--accent); }
.od-fin__meter i.is-over { background: var(--critical); }
.od-fin__guide { display: grid; gap: var(--space-8); }
.od-fin__guide p { margin: 0; }
.od-fin__guide ul { margin: 0; padding-left: var(--space-16); }
.od-fin__logshead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8) var(--space-16); }
.od-fin__logshead > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); }
.od-fin__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-12); }
.od-fin__card { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.od-fin__card header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); }
.od-fin__card header b { font: var(--text-title-3, var(--text-ui-strong)); }
.od-fin__card small { color: var(--text-muted); font: var(--text-small); }
.od-fin__card strong { padding-bottom: var(--space-8); border-bottom: 1px solid var(--border-subtle); font: var(--text-small-strong); }
.od-fin__card dd { color: var(--text-muted); }
.od-fin__reason { margin: var(--space-4) 0 0; padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); color: var(--critical); font: var(--text-small-strong); }
.od-fin__dialog { display: grid; gap: var(--space-12); justify-items: start; }
.od-fin__dialog dl { width: 100%; }

.ts-drawer .od-fin .ts-table-wrap { overflow-x: auto; }

/* Order summary card: neutral when healthy, tinted when something needs attention */
.od-sum.is-warning { background: var(--warning-subtle); border-color: var(--warning); }
.od-sum.is-critical { background: var(--critical-subtle); border-color: var(--critical); }
.od-sum__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.od-sum__head > svg { margin-top: 2px; }
.od-sum.is-ok .od-sum__head > svg { color: var(--success); }
.od-sum.is-warning .od-sum__head > svg { color: var(--warning); }
.od-sum.is-critical .od-sum__head > svg { color: var(--critical); }
.od-sum__head b { display: block; font: var(--text-ui-strong); }
.od-sum__head span { display: block; }
.od-sum__head .od-sum__issue { font: var(--text-ui-strong); }
.od-sum__brief { color: var(--text-muted); }
.od-sum.is-warning .od-sum__brief, .od-sum.is-critical .od-sum__brief { color: var(--text); }

/* Order summary at scale */
.od-sum__head span { color: var(--text); }
.od-sum__bar { display: flex; gap: 2px; height: 6px; overflow: hidden; border-radius: var(--radius-pill); }
.od-sum__bar i { display: block; flex: 1 1 0; min-width: 2px; }
.od-sum__bar .is-blocked { background: var(--critical); }
.od-sum__bar .is-risk { background: var(--warning); }
.od-sum__bar .is-track { background: var(--success); }
.od-sum__legend { color: var(--text-muted); font: var(--text-ui); }
.od-sum.is-warning .od-sum__legend, .od-sum.is-critical .od-sum__legend { color: var(--text); }
.od-sum__types { display: grid; border-top: 1px solid var(--border); }
.od-sum.is-warning .od-sum__types, .od-sum.is-critical .od-sum__types { border-color: color-mix(in srgb, currentColor 20%, transparent); }
.od-sum__types button { display: flex; justify-content: space-between; gap: var(--space-8); padding: var(--space-4) 0; color: inherit; font: var(--text-ui); text-align: left; background: none; border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); cursor: pointer; }
.od-sum__types button:hover span { text-decoration: underline; }
.od-sum__types button:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.od-sum__types button b { font: var(--text-ui-strong); }
.od-sum__types .is-more { color: var(--text); border-bottom: 0; }
.od-iss { display: grid; gap: var(--space-8); }
.od-iss__sum { display: grid; gap: var(--space-8); padding-bottom: var(--space-8); }
.od-iss__sum b { font: var(--text-ui-strong); }
.od-iss__sum p { margin: 0; }
.od-iss__group { border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm); scroll-margin-top: var(--space-8); }
.od-iss__group.is-critical { border-left-color: var(--critical); }
.od-iss__group.is-warning { border-left-color: var(--warning); }
.od-iss__head { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12) var(--space-8) var(--space-8); }
.od-iss__title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-8); }
.od-iss__title b { font: var(--text-ui-strong); }
.od-iss__title small { color: var(--text-muted); font: var(--text-ui); }
.od-iss__items { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-subtle); }
.od-iss__items li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-12); padding: var(--space-8) var(--space-12) var(--space-8) var(--space-16); }
.od-iss__items li + li { border-top: 1px solid var(--border-subtle); }
.od-iss__items .acme-thumb { width: 32px; height: 32px; }
.od-iss__items b { display: block; font: var(--text-ui-strong); }
.od-iss__items small { display: block; color: var(--text-muted); font: var(--text-ui); }
.od-sum__legend, .od-iss__sum p { margin: 0; }
.od-iss .od-sum__legend { font: var(--text-ui); }

/* Home */
.home { display: grid; gap: var(--space-16); max-width: 1280px; margin: 0 auto; }
.home h2, .home h3, .home p, .home ol, .home ul, .home dl, .home dd { margin: 0; padding: 0; }
.home-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-16); }
.home-top h2 { font: 600 20px/28px var(--font-sans); }
.home-top p, .home-note { color: var(--text-muted); }
.home-persona { display: flex; align-items: center; gap: var(--space-8); color: var(--text-muted); }
.home-card { display: grid; gap: var(--space-12); align-content: start; padding: var(--space-16); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.home-card > header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); }
.home-card h3 { font: var(--text-ui-strong); }
.home-answer { border-color: var(--border-control); }
.home-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-12); }
.home-kpi { gap: 0; }
.home-kpi span { color: var(--text-muted); }
.home-kpi b { font: 600 20px/28px var(--font-sans); }
.home-work { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: var(--space-12); }
.home-stack { display: grid; gap: var(--space-12); align-content: start; }
.home-ask { display: grid; gap: var(--space-8); }
.home-askbox { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; padding: var(--space-8) var(--space-8) var(--space-8) var(--space-12); color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-control); border-radius: var(--radius-lg); }
.home-askbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.home-askbox input { min-width: 0; color: var(--text); font: var(--text-ui); background: none; border: 0; outline: 0; }
.home-askbox input::placeholder { color: var(--text-muted); }
.home-send { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--surface); background: var(--text); border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.home-send:disabled { color: var(--text-muted); background: var(--surface-muted); cursor: default; }
.home-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.home-chips button { padding: var(--space-4) var(--space-12); color: var(--text); font: var(--text-ui); background: none; border: 1px solid var(--border); border-radius: var(--radius-pill); cursor: pointer; }
.home-chips button:hover { background: var(--surface-muted); }
.home-chips button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.home-todos { display: grid; list-style: none; }
.home-todos li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-12); align-items: center; padding: var(--space-8) 0; border-top: 1px solid var(--border-subtle); }
.home-todos li:first-child { border-top: 0; }
.home-todos b { display: block; font: var(--text-ui-strong); }
.home-todos div span { color: var(--text-muted); }
.home-todos .is-critical { color: var(--critical); }
.home-todos .is-warning { color: var(--warning); }
.home-todos .is-success { color: var(--success); }
.home-todos .is-info, .home-todos .is-neutral { color: var(--info); }
.home-bar { display: flex; gap: 2px; height: 6px; overflow: hidden; border-radius: var(--radius-pill); }
.home-bar i { display: block; flex: 1 1 0; }
.home-bar .is-critical, .home-legend .is-critical { background: var(--critical); }
.home-bar .is-warning, .home-legend .is-warning { background: var(--warning); }
.home-bar .is-info, .home-legend .is-info { background: var(--info); }
.home-bar .is-success, .home-legend .is-success { background: var(--success); }
.home-bar .is-neutral, .home-legend .is-neutral { background: var(--text-muted); }
.home-legend { display: grid; gap: var(--space-4); list-style: none; }
.home-legend li { display: grid; grid-template-columns: 8px minmax(0, 1fr) 24px minmax(104px, auto); gap: var(--space-8); align-items: center; }
.home-legend i { display: block; width: 8px; height: 8px; border-radius: 2px; }
.home-legend b { font: var(--text-ui-strong); text-align: right; }
.home-legend em { color: var(--text-muted); font: var(--text-ui); text-align: right; }
.home-dl { display: grid; gap: var(--space-4); }
.home-dl div { display: flex; justify-content: space-between; gap: var(--space-12); }
.home-dl dt { color: var(--text-muted); }
.home-dl dd { font: var(--text-ui-strong); text-align: right; }
.home-case { display: grid; gap: var(--space-16); }
.home-case__pos { grid-template-columns: minmax(0, 1fr); }
.home-thread { display: grid; gap: var(--space-8); list-style: none; }
.home-thread li { display: grid; padding: var(--space-8) var(--space-12); background: var(--surface-muted); border-radius: var(--radius-sm); }
.home-thread b { font: var(--text-ui-strong); }
.home-case__acts { display: flex; justify-content: flex-end; gap: var(--space-8); }
@media (max-width: 1100px) { .home-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-work { grid-template-columns: minmax(0, 1fr); } }

/* My open quotes: the quote row, with customer and state in place of store and sales rep */
.mq-filters { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); align-items: end; }
.mq-head { grid-template-columns: auto minmax(180px, 1fr) minmax(130px, 1fr) 176px 92px 124px 104px; gap: var(--space-12); }
.mq-state { min-width: 0; }
@media (max-width: 1100px) { .mq-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mq-filters > :first-child { grid-column: 1 / -1; } }

/* Top-bar search results */
.ts-appheader__search > .ts-field { display: none; }
.gs { position: relative; width: 100%; max-width: 440px; }
.gs .ts-field { max-width: none; }
.gs-panel { position: absolute; top: calc(100% + var(--space-4)); left: 0; right: 0; z-index: 50; max-height: 70vh; overflow-y: auto; padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32); }
.gs-group + .gs-group { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--border); }
.gs-label, .gs-more, .gs-none { padding: var(--space-4) var(--space-8); font-size: 12px; color: var(--text-muted); }
.gs-row { display: flex; flex-direction: column; padding: var(--space-4) var(--space-8); border-radius: var(--radius-md); color: inherit; text-decoration: none; font-size: 14px; }
.gs-row b { font-weight: 600; }
.gs-row span { font-size: 12px; color: var(--text-muted); }
.gs-row.is-active { background: var(--surface-hover); }

/* Home header: commission progress beside the greeting */
.home-top__end { display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap; justify-content: flex-end; }
.home-goal { display: grid; gap: var(--space-4); width: max-content; min-width: 320px; }
.home-goal__top { display: flex; justify-content: space-between; gap: var(--space-24); white-space: nowrap; }
.home-goal__top span { color: var(--text-muted); }
.home-goal__top b { font: var(--text-ui-strong); }
.acme-crumbs__end { display: flex; align-items: center; gap: var(--space-16); }
.home-goal .ts-progress__track { height: 8px; }
.home-bar, .home-bar i { height: 8px; }
.home-kpi b.is-up, .home-kpi b.is-down { display: flex; align-items: center; gap: var(--space-4); }
.home-kpi b.is-up { color: var(--success); }
.home-kpi b.is-down { color: var(--critical); }
.home-kpi__note { margin-left: var(--space-4); font: 400 14px/20px var(--font-sans); }

/* Quantity picker on quote items: the pricing grid in a dropdown */
.q-qty { width: 100%; justify-content: space-between; cursor: pointer; color: var(--text); font: inherit; }
.q-qty .ts-select__chev { position: static; transform: none; }
.q-qty__panel { position: fixed; z-index: 60; margin: 0; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-md); outline: none; }
.q-qty__panel .q-tier.is-at:not(.is-on) { background: var(--surface-hover); }
.q-split__intro { display: grid; gap: var(--space-4); }
.q-split__intro b { font: var(--text-ui-strong); }
.q-split__intro span { color: var(--text-subtle); }
.q-addr-default { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); }
.q-split__tools { display: flex; gap: var(--space-8); }
.od-gcard__qty { flex: 0 1 120px; }
.od-gcard__money small.ok { color: var(--success); }

/* Refund dialogs (item and order). */
.rf { display: grid; gap: var(--space-12); }
.rf-title { display: inline-flex; align-items: center; gap: var(--space-8); }
.rf-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-16); align-items: center; padding-bottom: var(--space-12); border-bottom: 1px solid var(--border-subtle); }
.rf-head .od-ev__toggle { border-bottom: 0; padding: 0; margin: 0; }
.rf-head.is-order { align-items: start; }
.rf-head.is-order > div, .rf-head__total { display: grid; gap: var(--space-2); }
.rf-head span { color: var(--text-muted); font: var(--text-small); }
.rf-head b { font: var(--text-ui-strong); }
.rf-head__total { text-align: right; }
.rf-prior { border: 1px solid var(--critical); border-radius: var(--radius-lg); background: var(--critical-subtle); overflow: hidden; }
.rf-prior__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; width: 100%; padding: var(--space-12); background: none; border: 0; color: var(--critical); font: inherit; text-align: left; cursor: pointer; }
.rf-prior__head b { font: var(--text-ui-strong); }
.rf-prior__head i { margin: 0 var(--space-8); font-style: normal; }
.rf-prior__body { margin: 0 var(--space-12) var(--space-12); overflow-x: auto; background: var(--surface); border-radius: var(--radius-sm); }
.rf-prior table { width: 100%; border-collapse: collapse; font: var(--text-small); color: var(--text); }
.rf-prior th { padding: var(--space-8); background: var(--surface-muted); color: var(--text-muted); font: var(--text-small-strong); text-align: left; white-space: nowrap; }
.rf-prior td { padding: var(--space-8); border-top: 1px solid var(--border-subtle); white-space: nowrap; }
.rf-prior td:last-child { white-space: normal; min-width: 140px; }
.rf-prior .num { text-align: right; }
.rf-card, .rf-opt { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.rf-card__bar { display: flex; align-items: center; gap: var(--space-12); width: 100%; padding: var(--space-12); background: var(--surface-muted); border: 0; color: var(--text); font: var(--text-ui); text-align: left; cursor: pointer; }
.rf-card__body { padding: var(--space-16); border-top: 1px solid var(--border-subtle); }
.rf-method { margin: 0 0 var(--space-8); font: var(--text-ui); }
.rf-rows { display: grid; gap: var(--space-8); margin: 0; font: var(--text-ui); }
.rf-rows > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4) var(--space-16); }
.rf-rows dt, .rf-rows dd { margin: 0; }
.rf-rows .is-total { padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); font: var(--text-ui-strong); }
.rf-opt.is-on { border-color: var(--accent); }
.rf-opt.is-off { background: var(--surface-muted); }
.rf-opt__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: 48px; padding: var(--space-4) var(--space-12); }
.rf-opt__body { padding: var(--space-12); border-top: 1px solid var(--border-subtle); }
.rf-partial { display: grid; gap: var(--space-12); }
.rf-partial__acts { display: flex; justify-content: space-between; gap: var(--space-8); }
.rf-partial__acts > span { display: inline-flex; gap: var(--space-8); }
.rf-total { display: flex; justify-content: space-between; padding: var(--space-12); border: 1px solid var(--success); border-radius: var(--radius-sm); background: var(--success-subtle); font: var(--text-ui-strong); color: var(--text); }
.rf-fields { display: grid; gap: var(--space-12); }
.rf-conc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-16); font: var(--text-ui); }
.rf-conc em { color: var(--critical); font-style: normal; }
.rf-conc small { flex-basis: 100%; color: var(--critical); font: var(--text-small); }