/* components.css, shared component styles (spec 01 §2, CLAUDE.md §9).
   Treatments transcribed from design/reference/*.jsx. Colors ONLY via
   tokens.css custom properties; radii limited to 6/8/10/12/14/16 (+pills). */

/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button { font-family: var(--font-body); cursor: pointer; }
input, select, textarea { font-family: var(--font-body); }
a.btn-primary, a.btn-ghost, a.btn-sm { text-decoration: none; display: inline-block; }

/* ---------- keyframes (timings/curves from the references) ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}

/* ---------- buttons ---------- */
.btn-primary {
  border: none;
  background: var(--accent);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 10px;
  white-space: nowrap;
  transition: background .15s, transform .1s;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary.lg { font-size: 15px; padding: 13px 26px; }
.btn-primary.full { width: 100%; }

.btn-ghost {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 10px;
  white-space: nowrap;
  transition: all .15s;
}
.btn-ghost:hover { border-color: var(--text-dim); color: var(--text); }

.btn-sm {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  white-space: nowrap;
  transition: all .12s;
}
.btn-sm:hover { border-color: var(--text-dim); color: var(--text); }
.btn-sm.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.btn-sm.accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-sm.ghost { background: transparent; }
.btn-sm.danger { color: var(--danger); }
.btn-sm.danger:hover { background: var(--danger-light); border-color: var(--danger); color: var(--danger); }
/* the same danger treatment one size up, for a destructive confirm in a
   dialog (danger is never a filled button in this design) */
.btn-ghost.danger { border-color: var(--danger); color: var(--danger); }
.btn-ghost.danger:hover { background: var(--danger-light); color: var(--danger); }

/* ---------- badges & pills ---------- */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.badge.done   { background: var(--accent-light); color: var(--accent-hover); }
.badge.review { background: var(--warn-light); color: var(--warn); }
.badge.empty  { background: var(--surface-alt); color: var(--text-faint); }

.pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
  padding: 6px 14px;
  border-radius: 99px;
  white-space: nowrap;
}

/* filter chip (import-system page) */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface-alt);
  padding: 6px 12px;
  border-radius: 99px;
}

.hs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
.hs-pill .hs-code { letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.hs-pill .hs-conf { font-size: 12px; opacity: .7; }
.hs-pill.conf-high { background: var(--accent-light); color: var(--accent-hover); }
.hs-pill.conf-mid  { background: var(--warn-light); color: var(--warn-text); }
.hs-pill.conf-low  { background: var(--danger-light); color: var(--danger); }

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
}
.card:hover { box-shadow: var(--shadow-card); }
.card-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}
@media (max-width: 560px) {
  .card { padding: 20px 16px; border-radius: 14px; }
}

/* ---------- repeat-import / repeat-export shortcut (operator 2026-08-06) ----
   The way back into whatever the store did last time, at the top of /import/
   and /export/. Nothing new to look at: a .card carrying the highlight
   treatment .billing-trial and .api-new-key already use (accent border on the
   accent tint), the standard .card-title / .card-context copy, and one
   .btn-primary. The rest is layout, copy left, action right, stacking on a
   phone so the banner stays two short lines tall. */
.repeat-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 22px;
  padding: 22px 26px;
  border-color: var(--accent);
  background: var(--accent-tint);
}
.repeat-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  color: var(--system, var(--accent));
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--system, var(--accent)) 28%, var(--border));
  box-shadow: var(--shadow-card);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.repeat-mark svg { width: 28px; height: 28px; fill: currentColor; }
.repeat-copy { flex: 1 1 320px; min-width: 0; }
.repeat-card .card-title { font-size: 21px; margin-bottom: 6px; }
.repeat-card .card-context { margin-bottom: 0; }
.repeat-eyebrow {
  margin-bottom: 6px;
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media (max-width: 620px) {
  .repeat-card { padding: 20px 16px; }
  /* the flex-basis above would become a HEIGHT once this wraps to a column,
     see CLAUDE.md §9; pin the copy back to its content */
  .repeat-copy { flex: 1 1 auto; }
  .repeat-card .btn-primary { width: 100%; text-align: center; }
}

/* ---------- option rows (question cards) ---------- */
.option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  transition: all .15s;
}
.option:hover { border-color: var(--accent); }
.option.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: var(--ring-accent);
}
/* an email-less supplier can't be asked yet (spec 09.5) */
.option.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  justify-content: space-between;
}
.option.is-disabled:hover { border-color: var(--border); }
.option-num {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--surface-alt);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
}
.option.selected .option-num { background: var(--accent); color: var(--white); }
.option-title { font-size: 14px; font-weight: 600; }
.option-desc { font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.option .swatch,
.swatch {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border-translucent);
}

/* ---------- material swatches (spec 05: curated table, review + supplier) ---------- */
.swatch-loops {
  background-image:
    radial-gradient(circle at 3px 3px, var(--sw-loop-1) 1.6px, transparent 2px),
    radial-gradient(circle at 9px 9px, var(--sw-loop-2) 1.6px, transparent 2px);
  background-size: 12px 12px;
  background-color: var(--sw-loop-bg);
}
.swatch-felt {
  background: linear-gradient(135deg, var(--sw-felt-1) 0%, var(--sw-felt-2) 50%, var(--sw-felt-1) 100%);
}
.swatch-woven {
  background:
    repeating-linear-gradient(45deg, var(--sw-loop-1) 0 3px, var(--sw-loop-bg) 3px 6px),
    repeating-linear-gradient(-45deg, var(--sw-woven-shade) 0 3px, transparent 3px 6px);
}
.swatch-wool-high {
  background-image: radial-gradient(circle at 4px 4px, var(--sw-wool-1) 2.5px, transparent 3px);
  background-size: 10px 10px;
  background-color: var(--sw-wool-bg);
}
.swatch-wool-mid {
  background: repeating-linear-gradient(90deg, var(--sw-wool-bg) 0 4px, var(--sw-wool-mid-2) 4px 8px);
}
.swatch-synthetic {
  background: repeating-linear-gradient(0deg, var(--sw-syn-1) 0 2px, var(--sw-syn-2) 2px 4px);
}
.swatch-sisal {
  background: repeating-linear-gradient(45deg, var(--sw-sisal-1) 0 2px, var(--sw-sisal-2) 2px 4px);
}
.swatch-jute {
  background:
    repeating-linear-gradient(45deg, var(--sw-jute-1) 0 3px, var(--sw-jute-2) 3px 7px),
    repeating-linear-gradient(-45deg, var(--sw-jute-shade) 0 3px, transparent 3px 7px);
}
.swatch-coir {
  background-image: radial-gradient(circle at 3px 3px, var(--sw-coir-1) 2px, transparent 2.6px);
  background-size: 9px 9px;
  background-color: var(--sw-coir-bg);
}
.swatch-seagrass {
  background: repeating-linear-gradient(90deg, var(--sw-sea-1) 0 4px, var(--sw-sea-2) 4px 8px);
}
.swatch-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
  color: var(--text-dim);
  font-weight: 700;
  font-size: 16px;
}

/* ---------- form fields ---------- */
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
}
.field-input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text);
  transition: border-color .15s;
}
.field-input::placeholder { color: var(--text-faint); }
.field-input:focus { outline: none; border-color: var(--accent); }
select.field-input,
.field-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}
select.field-input:focus, .field-select:focus { outline: none; border-color: var(--accent); }
.field-error { font-size: 13px; color: var(--danger); margin-top: 6px; }

/* ---------- progress ---------- */
.progress-track {
  height: 6px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.card .progress-track { background: var(--surface-alt); }
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
  transition: width .6s var(--ease-smooth);
}
.progress-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 8px;
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 10px;
  animation: toastIn .3s var(--ease-spring);
  z-index: 50;
  max-width: 90vw;
}

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .2s ease;
}
.modal-box {
  background: var(--surface);
  border-radius: 16px;
  padding: 28px;
  width: 480px;
  max-width: 92vw;
  box-shadow: var(--shadow-float);
  animation: fadeUp .25s var(--ease-spring);
}

/* ---------- export liability consent modal (CLAUDE.md §2.8) ---------- */
.consent-paragraph { margin-bottom: 10px; }
.consent-record-line { font-size: 13px; margin-bottom: 14px; }
.consent-check { cursor: pointer; margin-bottom: 16px; }
.consent-check input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.consent-actions { justify-content: flex-end; }
.consent-actions .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
/* signup liability acknowledgment (directive 8): compact checkbox + fine print */
.signup-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-dim);
  text-align: left;
}
.signup-consent input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--accent);
}
.signup-consent a { color: var(--accent); font-weight: 600; text-decoration: none; }
.signup-consent a:hover { text-decoration: underline; }

/* ---------- review card thumbnail + image lightbox ---------- */
.card-top.with-thumb {
  position: relative;
  padding-right: 68px;
  min-height: 56px;
}
.rq-thumb {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
  transition: border-color .15s;
}
.rq-thumb:hover { border-color: var(--accent); }
.rq-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: zoom-out;
  animation: fadeIn .2s ease;
}
.lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow-float);
  animation: fadeUp .25s var(--ease-spring);
}

/* ---------- review card product-details fold-out ---------- */
.rq-details { margin: 2px 0 16px; }
.rq-details-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: border-color .15s;
}
.rq-details-bar:hover { border-color: var(--accent); }
.rq-details-label { font-weight: 600; white-space: nowrap; }
.rq-details-preview {
  flex: 1;
  min-width: 0;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rq-details-caret { margin-left: auto; color: var(--text-dim); }
.rq-details-body { margin-top: 10px; }
.rq-details-note { margin-bottom: 8px; }
.rq-details-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* the review guide's static vignette still wears these (the live review
   workspace moved to the .rw-* section further down) */
.rq-ruled-reason {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-faint);
}
.rq-scenario {
  margin: 8px 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}
.rq-scenario-label { font-weight: 600; color: var(--text); }

.rq-details-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.rq-thumb-inline { position: static; }

/* ---------- slide-over panel ---------- */
.panel-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 100;
  animation: fadeIn .2s ease;
}
.panel-box {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 440px;
  max-width: 92vw;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-panel);
  animation: slideIn .3s var(--ease-spring);
}
.panel-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.panel-body { flex: 1; overflow-y: auto; padding: 24px; }
.panel-footer { padding: 16px 24px; border-top: 1px solid var(--border); }
@media (max-width: 560px) {
  .panel-box { width: 100%; max-width: 100%; }
}

/* ---------- table (head + row grid pattern) ---------- */
.table-head {
  display: grid;
  grid-template-columns: 40px 1fr 100px 180px 130px 40px;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .6px;
  border-bottom: 1px solid var(--border);
}
.table-row {
  display: grid;
  grid-template-columns: 40px 1fr 100px 180px 130px 40px;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: 8px;
  transition: background .12s;
}
.table-row:hover { background: var(--surface-alt); }
.table-row.selected { background: var(--accent-light); }
@media (max-width: 768px) {
  .table-head, .table-row { grid-template-columns: 32px 1fr 100px 40px; }
}

/* ---------- status tabs ---------- */
.status-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  transition: all .15s;
}
.status-tab:hover { border-color: var(--accent); }
.status-tab.active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-hover);
  font-weight: 600;
}
.status-tab .tab-count { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.status-tab.active .tab-count { color: var(--accent); }

/* ---------- empty state ---------- */
.empty-state { text-align: center; padding: 48px 20px; }
.empty-state-title { font-size: 15px; font-weight: 600; color: var(--text-dim); }
.empty-state-sub { font-size: 14px; color: var(--text-faint); margin-top: 4px; }

/* ---------- kbd ---------- */
kbd {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  font-family: var(--font-body);
}
.kbd-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 18px;
}
@media (max-width: 560px) { .kbd-hints { display: none; } }

/* ---------- topbar ---------- */
/* Restyled to the approved mockup docs/dashboard-header-redesign.html
   (operator 2026-08-05): a sticky, faintly translucent bar; the brand keeps an
   accent dot; store switcher and account control wear monogram tiles; the group
   dropdowns became rich rows (icon + label + one plain line). Structure and
   behaviour are untouched, only the treatment.
   Two deliberate departures from the mockup: the bar stays full-bleed instead
   of adopting its centred 1260px shell (app pages set their own widths, 560px
   to 1500px, so one fixed shell would misalign with most of them), and the
   groups still flatten into the burger list rather than becoming accordions.
   --topbar-h is the bar's height per width: anything else that sticks to the
   top of the viewport parks below it (see .pl-table thead th). */
:root { --topbar-h: 76px; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  min-height: var(--topbar-h);
  padding: 0 28px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid var(--border);
}
.topbar-left { display: flex; align-items: center; gap: 18px; margin-right: 22px; }
.topbar-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--accent);
  letter-spacing: -.3px;
  text-decoration: none;
}
.topbar-logo-dot { color: var(--warn); }
/* the monogram tile: store initials in the bar, again beside every store in
   the switcher menu */
.topbar-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-hover);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.topbar-store {
  display: grid;
  grid-template-columns: 30px minmax(0, auto) 12px;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 4px 9px 4px 5px;
  border: 1px solid transparent;
  border-left-color: var(--border);
  border-radius: 0 9px 9px 0;
  background: none;
  color: var(--text-dim);
  text-align: left;
  transition: border-color .18s var(--ease-smooth),
              background .18s var(--ease-smooth);
}
.topbar-store:hover,
.topbar-store[aria-expanded="true"] {
  border-color: var(--border);
  background: var(--surface-alt);
}
.topbar-store-copy { display: grid; min-width: 0; line-height: 1.1; }
.topbar-store-copy small {
  margin-bottom: 3px;
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.topbar-store .caret,
.topbar-account .caret,
.nav-dropdown-toggle .caret {
  font-size: 12px;
  color: var(--text-faint);
  transition: transform .18s var(--ease-smooth);
}
[aria-expanded="true"] > .caret { transform: rotate(180deg); }
.topbar-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.topbar-nav > a,
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: color .18s var(--ease-smooth),
              background .18s var(--ease-smooth),
              border-color .18s var(--ease-smooth);
}
.topbar-nav > a:hover,
.nav-dropdown-toggle:hover { background: var(--surface-alt); color: var(--text); }
.topbar-nav > a.active,
.nav-dropdown-toggle.active {
  background: var(--surface-alt);
  color: var(--text);
  font-weight: 700;
}
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding-left: 18px;
}
.topbar-site-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 10px;
  transition: all .15s;
}
.topbar-site-link:hover { background: var(--surface-alt); color: var(--text); }
/* the two square icon controls at the right end: help and the burger */
.topbar-help,
.nav-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-dim);
  transition: color .16s var(--ease-smooth),
              border-color .16s var(--ease-smooth),
              background .16s var(--ease-smooth);
}
.topbar-help svg { width: 17px; height: 17px; }
.topbar-help:hover,
.nav-burger:hover,
.topbar-help[aria-expanded="true"],
.nav-burger[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--surface-alt);
  color: var(--accent);
}
.nav-burger { display: none; }
.account-switch { position: relative; display: flex; align-items: center; }
.topbar-account {
  display: grid;
  grid-template-columns: 34px minmax(0, auto) 12px;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 5px 8px 5px 5px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  color: var(--text-dim);
  text-align: left;
  transition: border-color .16s var(--ease-smooth),
              background .16s var(--ease-smooth);
}
.topbar-account:hover,
.topbar-account[aria-expanded="true"] {
  border-color: var(--border);
  background: var(--surface-alt);
}
.topbar-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--accent), var(--accent-hover));
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
}
.topbar-account-copy { display: grid; gap: 2px; min-width: 0; line-height: 1.15; }
.topbar-account-copy strong { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.topbar-account-copy small { font-size: 12px; color: var(--text-faint); }
/* long store names / emails must never widen the page (pre-existing
   37px overflow at 390px, found while adding the burger) */
.topbar-store-label,
.topbar-account-copy strong,
.topbar-account-copy small {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-store-label { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.topbar-account-copy strong,
.topbar-account-copy small { max-width: 190px; }
/* the name/email block goes first when the bar gets tight, the avatar carries
   the identity on its own */
@media (max-width: 1180px) {
  .topbar { padding: 0 20px; }
  .topbar-left { gap: 12px; margin-right: 12px; }
  .topbar-nav > a, .nav-dropdown-toggle { padding: 0 9px; }
  .topbar-right { padding-left: 10px; }
  .topbar-account-copy { display: none; }
  .topbar-account { grid-template-columns: 34px 12px; }
}
/* ≤1050px the inline nav can't fit (measured 249px overflow at 800px),
   it becomes a burger dropdown; below 768px this REPLACES the old
   nav-vanishes rule, so phones finally get a menu too */
@media (max-width: 1050px) {
  .nav-burger { display: inline-flex; }
  .topbar-nav {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 16px;
    left: 16px;
    max-width: 380px;
    margin-left: auto;
    max-height: calc(100vh - var(--topbar-h) - 20px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-float);
    padding: 8px;
    z-index: 90;
    animation: fadeUp .2s var(--ease-spring);
  }
  .topbar-nav.open { display: flex; }
  .topbar-nav > a { min-height: 46px; justify-content: space-between; }
}
@media (max-width: 768px) {
  :root { --topbar-h: 68px; }
  .topbar { padding: 0 16px; }
  .topbar-left, .topbar-right { min-width: 0; }
  .topbar-store-label { max-width: 110px; }
}
/* phone-width budget: logo + store + help + account + burger must never
   overlap. The switcher keeps its monogram (and its full menu, store names
   and all), only the inline label folds away. */
@media (max-width: 560px) {
  :root { --topbar-h: 64px; }
  .topbar-left { gap: 10px; margin-right: 8px; }
  .topbar-logo { font-size: 21px; }
  .topbar-right { gap: 5px; padding-left: 0; }
  .topbar-store { grid-template-columns: 30px 12px; padding: 4px 6px 4px 4px; }
  .topbar-store-copy { display: none; }
  .topbar-account { min-height: 40px; padding: 3px; grid-template-columns: 32px; }
  .topbar-account > .caret { display: none; }
  .topbar-avatar { width: 32px; height: 32px; }
}

/* ---------- dropdown menu (topbar switcher / account menu / help) ---------- */
[x-cloak] { display: none !important; }
.store-switch { position: relative; display: flex; align-items: center; }
.menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
  padding: 8px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: fadeUp .18s var(--ease-spring);
}
.menu.menu-right { left: auto; right: 0; }
.menu form { display: contents; }
/* the little tail that points back at the control that opened the menu */
.menu::before,
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 24px;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  background: var(--surface);
  transform: rotate(45deg);
}
.menu.menu-right::before { left: auto; right: 22px; }
.menu-label {
  margin: 6px 10px 5px;
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 9px;
  transition: all .12s;
}
.menu-item:hover { background: var(--surface-alt); color: var(--text); }
.menu-item.active { background: var(--accent-light); color: var(--accent-hover); font-weight: 600; }
.menu-item-ext { color: var(--text-faint); font-size: 12px; }
/* one store per row, monogram first, a tick on the one you are in */
.store-option { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.store-option .topbar-mark { width: 26px; height: 26px; font-size: 12px; }
.store-option.active::after {
  content: "✓";
  margin-left: auto;
  color: var(--accent);
  font-weight: 800;
}

/* ---------- help control (topbar) ---------- */
/* A square icon button left of the account control, opening the shared .menu:
   Guides, and on pages with the help panel a way into its chat tab. It lives in
   topbar-right, not the nav, so it survives the ≤1050px burger collapse at
   every width; the menu is right-anchored so it never runs past the viewport
   edge on a phone. Its box is shared with .nav-burger, see the topbar block. */
.topbar-help-menu { position: relative; display: flex; align-items: center; }

/* ---------- nav dropdowns (topbar) ---------- */
/* Click dropdowns grouping the catalog pages, Codes & duties and Data. On
   desktop they float like the switcher menu; ≤1050px the toggle hides and the
   links flatten into the burger list via display:contents (see the burger
   media query). */
.nav-dropdown { position: relative; display: flex; align-items: center; }
/* the toggle shares its box with the plain nav links, see the topbar block */
.nav-dropdown-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--surface-alt);
  color: var(--text);
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
  padding: 9px;
  z-index: 40;
  flex-direction: column;
  gap: 2px;
  animation: fadeUp .2s var(--ease-spring);
}
.nav-dropdown-menu.open { display: flex; }
/* invisible bridge over the 10px gap to the trigger, so a hover-opened menu
   survives the mouse crossing from the toggle into the panel */
.nav-dropdown-menu::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-menu-heading {
  margin: 6px 10px;
  color: var(--text-faint);
  /* 12px is the floor for uppercase micro-labels (CLAUDE.md §9) */
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* a heading that follows rows opens a second group inside one menu (Products
   cross-links Import and Export): a rule above it keeps the two apart */
.nav-dropdown-menu a + .nav-menu-heading {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
/* a row is an icon tile, the page name, and one plain line about what is
   behind it */
.nav-dropdown-menu a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: background .15s var(--ease-smooth);
}
.nav-dropdown-menu a:hover { background: var(--surface-alt); }
.nav-dropdown-menu a.active { background: var(--accent-light); }
.nav-menu-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 10px;
}
.nav-menu-icon svg { width: 18px; height: 18px; }
.nav-menu-icon.icon-accent { color: var(--accent); background: var(--accent-light); }
.nav-menu-icon.icon-info { color: var(--info); background: var(--info-light); }
.nav-menu-icon.icon-warn { color: var(--warn); background: var(--warn-light); }
.nav-menu-icon.icon-neutral { color: var(--text-dim); background: var(--surface-alt); }
.nav-menu-copy { display: grid; gap: 3px; min-width: 0; line-height: 1.25; }
.nav-menu-copy strong { font-size: 14px; font-weight: 700; color: var(--text); }
.nav-menu-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 12px;
}
.nav-menu-arrow {
  color: var(--text-faint);
  font-size: 14px;
  transition: color .15s var(--ease-smooth), transform .15s var(--ease-smooth);
}
.nav-dropdown-menu a:hover .nav-menu-arrow { color: var(--accent); transform: translateX(2px); }
/* ≤1050px the dropdown flattens into the burger list: the group + its menu
   become display:contents so Import/Export/API keys drop in as ordinary rows
   and the toggle disappears (no second copy of the links). The group heading
   stays, it is what names the group once its toggle is gone, and the plain
   line wraps instead of being clipped: nothing informative disappears at a
   breakpoint. This block sits AFTER the base .nav-dropdown-* rules so it wins
   on source order at equal specificity, the earlier burger @media only
   restyles .topbar-nav itself. */
@media (max-width: 1050px) {
  .nav-dropdown, .nav-dropdown-menu, .nav-dropdown-menu.open { display: contents; }
  .nav-dropdown-toggle { display: none; }
  /* display:contents still generates pseudo-elements: drop the tail and the
     hover bridge, there is no floating menu left for them to serve */
  .nav-dropdown-menu::before, .nav-dropdown-menu::after { display: none; }
  .nav-dropdown-menu a { min-height: 54px; padding: 8px; }
  .nav-dropdown-menu a.active { background: var(--surface-alt); }
  .nav-menu-copy small { white-space: normal; }
  /* Every group is in one flat list here, so the Products group's cross-links
     to Import and Export (and their heading) would be a second copy of rows
     the Data group already contributes. Drop them: nothing becomes
     unreachable, the duplicate does not appear. Scoped under
     .nav-dropdown-menu because the bare class (0,1,0) loses to the base
     .nav-dropdown-menu a { display: grid } (0,1,1) whatever the source
     order; two classes win the cascade for the anchors too. */
  .nav-dropdown-menu .nav-menu-xlink { display: none; }
}

/* ---------- auth pages & forms ---------- */
.auth-wrap { max-width: 420px; margin: 48px auto; padding: 0 16px; }
/* The four anonymous auth pages wear the shared marketing chrome, whose tall
   navy footer would ride up under a short card. Let their <main> fill the space
   below the sticky chrome header and centre the card, so the footer settles at
   the bottom. Scoped to this modifier: the base.html auth surfaces (select /
   create store) keep the plain .auth-wrap and are untouched. */
.auth-chrome-wrap {
  min-height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 6px;
}
.auth-sub { font-size: 14px; color: var(--text-dim); margin-bottom: 20px; line-height: 1.5; }
.auth-alt { font-size: 14px; color: var(--text-dim); margin-top: 18px; text-align: center; }
.auth-alt a { color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }
.auth-alt .dot { margin: 0 6px; color: var(--text-faint); }
.form-row { margin-bottom: 14px; }
.form-row .btn-primary { margin-top: 6px; }
.form-error {
  background: var(--danger-light);
  color: var(--danger);
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 6px 0 14px;
}
/* instructional text under a field is reading copy: 14px and a real
   line-height, never below (operator readability pass 2026-08-06) */
.field-hint { font-size: 14px; line-height: 1.5; color: var(--text-faint);
  margin-top: 6px; }
/* Signup's silent browser check (ALTCHA). The widget is a self-contained web
   component with its own shadow styles, so this only gives it room and matches
   the surrounding rhythm; it stays out of the way until a submit starts it. */
.signup-check { margin: 0 0 14px; }
.signup-check altcha-widget { display: block; max-width: 100%; }
.store-list { display: flex; flex-direction: column; gap: 10px; }
.store-list form { display: contents; }
.option-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }

/* ---------- dashboard ---------- */
.dash-wrap { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; }
.dash-title { font-family: var(--font-display); font-size: 28px; font-weight: 600; }
.dash-sub { font-size: 14px; color: var(--text-dim); line-height: 1.55; max-width: 460px; }
.dash-sub strong { color: var(--text); font-weight: 600; }
/* idea 2: cumulative time-saved counter, quiet accent line under the headline */
/* time-saved scoreboard (operator 2026-07-12): sports-board digit tiles on
   the hero's right, dark tiles, light counter digits, flip-board mid seam */
.saved-board { margin-left: auto; flex: none; display: flex;
  flex-direction: column; align-items: center; gap: 10px; }
.sb-label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-dim); }
.sb-tiles { display: flex; align-items: baseline; gap: 5px; }
.sb-digit { position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 52px; height: 72px;
  background: var(--text); color: var(--surface); border-radius: 8px;
  font-family: var(--font-counter); font-variant-numeric: tabular-nums;
  font-size: 46px; font-weight: 700; line-height: 1;
  box-shadow: var(--shadow-card); }
.sb-digit::after { /* the flip-board seam */
  content: ""; position: absolute; left: 3px; right: 3px; top: 50%;
  border-top: 1px solid var(--board-seam); }
.sb-unit { font-family: var(--font-counter); font-size: 15px;
  font-weight: 700; color: var(--text-dim); margin-left: 5px;
  text-transform: uppercase; letter-spacing: 0.06em; }
.sb-sub { font-size: 13px; color: var(--text-dim); max-width: 180px;
  text-align: center; line-height: 1.45; }
/* activation scoreboard (spec P3): the time-saved board extended into a small
   first-session scoreboard, numeric tiles + the sports board + a before/after
   ROI line, stacked on the hero's right. Coverage % stays in the ring. Layout
   only; every colour comes from the tokens the tiles/board already use. */
.scoreboard { margin-left: auto; flex: none; display: flex;
  flex-direction: column; align-items: center; gap: 18px; max-width: 340px; }
.scoreboard .saved-board { margin-left: 0; }
.score-tiles { display: flex; gap: 28px; flex-wrap: wrap;
  justify-content: center; }
.score-demo { align-self: center; background: var(--warn-light);
  color: var(--warn); }
.score-roi { font-size: 13px; color: var(--text-dim); line-height: 1.5;
  text-align: center; max-width: 300px; }
.ring-wrap { position: relative; flex: none; width: 160px; height: 160px; }
.ring-track { fill: none; stroke: var(--border); stroke-width: 10; }
.ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1.3s var(--ease-smooth);
}
.ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  font-variant-numeric: tabular-nums; /* steady digits during the count-up */
}
@media (max-width: 640px) {
  .dash-wrap { padding: 20px 16px 48px; }
  .saved-board { margin-left: 0; }
  .scoreboard { margin-left: 0; max-width: none; align-self: stretch; }
  .sb-digit { width: 36px; height: 52px; font-size: 32px; }
}

/* ---------- import flow (spec 03, onboarding reference) ---------- */
.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
@media (max-width: 768px) { .method-grid { grid-template-columns: 1fr; } }
.method-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.method-sub { font-size: 14px; color: var(--text-dim); margin: 6px 0 16px; }
.method-foot { font-size: 14px; margin-top: 14px; }
.method-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
.upload-zone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 2px dashed var(--border); border-radius: 14px;
  padding: 44px 32px; cursor: pointer; text-align: center; transition: all .15s;
}
.upload-zone:hover {
  border-color: var(--accent); background: var(--accent-light);
}
.upload-sub { font-size: 13px; color: var(--text-faint); }
.format-row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.mapper-wrap { max-width: 860px; }
.rung0-banner {
  background: var(--accent-light); color: var(--accent-hover);
  font-size: 14px; font-weight: 600; padding: 12px 16px;
  border-radius: 10px; margin-bottom: 16px; animation: fadeUp .3s ease;
}
.preset-banner {
  background: var(--accent-light); color: var(--accent-hover);
  font-size: 14px; font-weight: 600; padding: 12px 16px;
  border-radius: 10px; margin-bottom: 16px; animation: fadeUp .3s ease;
}
/* one optional sentence of advice about the recognized format */
.preset-advisory { display: block; margin-top: 6px; font-weight: 400;
  line-height: 1.5; }
.preview-scroll { overflow-x: auto; }
.preview-table { border-collapse: collapse; font-size: 13px; width: 100%; }
.preview-table th {
  text-align: left; padding: 6px 10px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .5px; font-size: 12px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.preview-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap; max-width: 260px; overflow: hidden;
  text-overflow: ellipsis;
}
.mapper-card { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.mapper-row { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: center; }
@media (max-width: 560px) { .mapper-row { grid-template-columns: 1fr; gap: 4px; } }
.mapper-row .field-label { margin-bottom: 0; }
.mapper-leftovers { border-top: 1px solid var(--border); padding-top: 14px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.attr-toggle { font-size: 14px; color: var(--text-dim); display: inline-flex;
  gap: 6px; align-items: center; }
.mapper-actions { display: flex; justify-content: space-between; margin-top: 18px; }
.progress-wrap { max-width: 640px; }
.phase-list { display: flex; flex-direction: column; gap: 14px; }
.phase-item { display: flex; align-items: center; gap: 10px; font-size: 14px;
  color: var(--text-faint); }
.phase-item .phase-dot { width: 10px; height: 10px; border-radius: 50%;
  background: var(--border); flex: none; }
.phase-item.active { color: var(--text); font-weight: 600; }
.phase-item.active .phase-dot { background: var(--accent); animation: pulse 1.6s ease infinite; }
.phase-item.done { color: var(--text-dim); }
.phase-item.done .phase-dot { background: var(--accent); }
.progress-note { display: flex; align-items: center; gap: 10px; font-size: 14px;
  color: var(--text-dim); margin-top: 20px; }
.done-card { text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 14px; animation: cardIn .45s var(--ease-spring); }
.done-counts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.invalid-codes { font-size: 14px; color: var(--text-dim); }
.invalid-codes ul { list-style: none; margin-top: 8px; display: flex;
  flex-direction: column; gap: 4px; }

/* ---------- feed import (spec 08) ---------- */
.feed-divider { text-align: center; color: var(--text-faint); font-size: 13px;
  margin: 14px 0; text-transform: uppercase; letter-spacing: .5px; }
.feed-form { display: flex; flex-direction: column; gap: 8px; }
.feed-input-row { display: flex; gap: 8px; }
.feed-input-row .field-input { flex: 1; min-width: 0; }
@media (max-width: 560px) { .feed-input-row { flex-direction: column; } }
/* compact CTA to the dedicated product-feed page (the inline feed form moved
   there); reuses .btn-primary + tokens, no new colours */
.feed-cta { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.feed-cta-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feed-cta .btn-primary { flex: 0 0 auto; text-decoration: none; }
@media (max-width: 560px) {
  .feed-cta { align-items: stretch; }
  .feed-cta .btn-primary { width: 100%; text-align: center; }
}
.feeds-card { margin-top: 20px; }
.feed-list { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.feed-row { display: flex; gap: 12px; align-items: center;
  justify-content: space-between; flex-wrap: wrap; }
.feed-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feed-name { font-size: 14px; font-weight: 600; }
.feed-url { font-size: 13px; color: var(--text-faint); overflow-wrap: anywhere; }
.feed-checked { font-size: 13px; color: var(--text-dim); }
.feed-banner {
  background: var(--accent-light); color: var(--accent-hover);
  font-size: 14px; font-weight: 500; padding: 12px 16px;
  border-radius: 10px; margin-bottom: 16px; animation: fadeUp .3s ease;
}
.fill-pct { color: var(--text-faint); font-weight: 400; font-size: 12px; }
.classify-choice { margin-top: 16px; display: flex; flex-direction: column;
  gap: 10px; }
.live-cancel { margin-top: 18px; text-align: center; }

/* ---------- guides (spec 11) ---------- */
.guide-wrap { max-width: 780px; }
.guides-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 20px; }
@media (max-width: 640px) { .guides-grid { grid-template-columns: 1fr; } }
.guide-card { display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: var(--text); transition: border-color .15s; }
.guide-card:hover { border-color: var(--accent); }
.guide-card-head { display: flex; align-items: center; gap: 10px;
  justify-content: space-between; }
.guide-card-title { font-family: var(--font-display); font-size: 19px;
  font-weight: 600; }
.guide-card-promise { font-size: 14px; color: var(--text-dim);
  line-height: 1.5; }
.guide-back { font-size: 14px; margin-bottom: 14px; }
.guide-back a { color: var(--text-dim); text-decoration: none; }
.guide-back a:hover { color: var(--text); }
.guide h2 { font-family: var(--font-display); font-size: 22px;
  font-weight: 600; margin: 34px 0 10px; }
.guide h3 { font-size: 15px; font-weight: 600; margin: 22px 0 6px; }
.guide p, .guide li { font-size: 14px; line-height: 1.65;
  color: var(--text); }
.guide p { margin: 10px 0; }
.guide ol, .guide ul { margin: 10px 0 10px 22px; }
.guide li { margin: 6px 0; }
.guide code { background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px; font-size: 13px; }
.guide-where { display: inline-block; font-size: 13px; font-weight: 600;
  color: var(--accent-hover); background: var(--accent-light);
  border-radius: 999px; padding: 4px 12px; margin: 2px 0 8px; }
.guide-where strong { font-weight: 700; }
.guide-callout { background: var(--accent-light); color: var(--accent-hover);
  font-size: 14px; padding: 12px 16px; border-radius: 10px;
  margin: 14px 0; line-height: 1.55; }
.guide-callout a { color: inherit; font-weight: 600; }
.good-to-know { border-top: 1px solid var(--border); margin-top: 30px;
  padding-top: 8px; }
.good-to-know h3 { margin-top: 18px; }
.good-to-know p { color: var(--text-dim); margin-top: 4px; }

/* ---------- shared row + detail bits (the old products table's own
   grid, thumb, sort links and pagination went with the slide-over) ------- */
.table-body { display: flex; flex-direction: column; gap: 2px; }
.row-meta { font-size: 13px; color: var(--text-faint); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.detail-rows { display: flex; flex-direction: column; margin-bottom: 16px; }
.detail-row { display: flex; justify-content: space-between; gap: 16px;
  font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.detail-row > span:first-child { color: var(--text-dim); flex: none; }
.detail-row > span:last-child { text-align: right; }
.panel-desc { font-size: 14px; color: var(--text-dim); line-height: 1.55;
  margin-bottom: 16px; }
.variant-list { list-style: none; display: flex; flex-direction: column;
  gap: 6px; font-size: 14px; margin-top: 8px; }

/* ---------- styleguide-only scaffolding (layout, no colors) ---------- */
.sg-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 16px 64px; }
.sg-title { font-family: var(--font-display); font-size: 30px; font-weight: 600; margin-bottom: 6px; }
.sg-h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 36px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.sg-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
.sg-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sg-col .field-input, .sg-col .field-select,
.sg-col .progress-track, .sg-col .table-head, .sg-col .table-row { align-self: stretch; }
.sg-narrow { max-width: 420px; }
.sg-grow { flex: 1; }
.sg-item { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sg-label { font-size: 12px; color: var(--text-faint); letter-spacing: .3px; }
.sg-card-demo { max-width: 560px; }
.sg-static .toast { position: static; transform: none; animation: none; display: inline-block; }
.sg-kbd-show { justify-content: flex-start; margin-top: 0; }
@media (max-width: 560px) { .sg-kbd-show { display: flex; } }
.sg-overlay .modal-backdrop { position: static; border-radius: 12px; padding: 32px; }
.sg-overlay .modal-box { animation: none; }
.sg-panel-demo .panel-backdrop { position: relative; height: 380px; border-radius: 12px; overflow: hidden; }
.sg-panel-demo .panel-box { animation: none; }
.sg-swatch-felt { background: var(--surface-alt); }
.sg-swatch-loop { background: var(--accent-light); }

/* ---------- spinner ---------- */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.spinner.sm { width: 24px; height: 24px; border-width: 2px; }
.spinner.xs { width: 14px; height: 14px; border-width: 2px; display: inline-block; }

/* ---------- success check ---------- */
.success-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 24px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: popIn .4s var(--ease-spring);
}
.success-check.sm { width: 36px; height: 36px; font-size: 16px; }

/* ---------- review queue shell (spec 05, review-queue reference) ---------- */
/* .rq-wrap is the narrow one-column shell, still worn by the suppliers page.
   The review queue itself is the .rw-* workspace further down. */
.rq-wrap { max-width: 640px; margin: 0 auto; padding: 0 24px 60px; }
/* Ask your suppliers keeps its one-column focus but not the 640px squeeze */
.rq-wrap.suppliers-page { max-width: 820px; }
.session-counter { font-size: 14px; color: var(--text-dim); }
.session-counter strong { color: var(--accent); font-size: 15px; }
.supplier-pill {
  font-size: 13px;
  font-weight: 600;
  color: var(--warn);
  background: var(--warn-light);
  padding: 5px 12px;
  border-radius: 99px;
  animation: popIn .3s ease;
}
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.leverage-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
  padding: 6px 12px;
  border-radius: 99px;
}
.conf-chip {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface-alt);
  padding: 6px 12px;
  border-radius: 99px;
}
.cluster-chip { font-size: 13px; font-weight: 500; color: var(--text-faint); }

/* Plain-language trust band (spec P6.1): the merchant-legible calibration
   label that agrees with the routing decision. Tokens only. */
.trust-band {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 99px;
}
.trust-band-high      { color: var(--accent-hover); background: var(--accent-light); }
.trust-band-confirmed { color: var(--accent-hover); background: var(--accent-light); }
.trust-band-glance    { color: var(--warn-text); background: var(--warn-light); }
.trust-band-together  { color: var(--text-dim); background: var(--surface-alt); }
.card-context { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin-bottom: 18px; }
.card-context strong { color: var(--text); }
.actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.escape-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.escape-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 9px;
  cursor: pointer;
  transition: all .15s;
}
.escape-btn:hover { border-color: var(--text-dim); color: var(--text); }
.escape-btn.supplier:hover { border-color: var(--warn); color: var(--warn); background: var(--warn-light); }
.escape-btn.supplier.hinted { border-color: var(--warn); color: var(--warn); background: var(--warn-light); font-weight: 600; }

/* success flash, the flywheel moment */
.flash { text-align: center; padding: 80px 20px; animation: cardIn .3s ease; }
.flash-check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 32px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: popIn .4s var(--ease-spring);
}
.flash-count {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 16px;
  animation: fadeUp .4s ease .1s both;
}
.flash-label { font-size: 15px; color: var(--text-dim); margin-top: 4px; animation: fadeUp .4s ease .2s both; }

/* end summary */
.end-summary { text-align: center; padding: 40px 20px; animation: cardIn .45s ease; }
.end-check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 28px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: popIn .4s ease;
}
.end-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin-top: 20px; }
.end-sub { font-size: 15px; color: var(--text-dim); margin-top: 8px; line-height: 1.6; }
.end-sub strong { color: var(--text); }
.end-stats { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.end-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 28px;
  min-width: 140px;
}
.end-stat-val { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--accent); }
.end-stat-label { font-size: 13px; color: var(--text-dim); margin-top: 4px; display: block; }
.end-supplier-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--warn-light);
  border: 1px solid var(--warn);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 24px auto 0;
  max-width: 440px;
  font-size: 14px;
  font-weight: 600;
  color: var(--warn);
  flex-wrap: wrap;
}
.end-pipeline {
  font-size: 14px;
  color: var(--text-faint);
  margin-top: 24px;
  line-height: 1.6;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.end-actions { display: flex; gap: 10px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .rq-wrap { padding: 0 12px 40px; }
  .end-stats { flex-direction: column; align-items: center; }
  .actions-row .btn-primary.lg, .actions-row .btn-ghost { width: 100%; }
}

/* ---------- review workspace (.rw-*), the three-pane decision screen ----------
   Queue panel (what is waiting) · decision stage (what we suggest and why) ·
   action panel (what you do about it). Tokens only. Down to 380px the panes
   restack: the queue becomes a horizontal strip above the stage and the action
   panel drops below it. Nothing informative is ever hidden by a breakpoint. */
.rw-page { max-width: 1500px; margin: 0 auto; padding: 22px 24px 60px; }

.rw-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.rw-title-wrap { display: flex; align-items: center; gap: 16px; min-width: 0; }
.rw-back {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 18px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.rw-back:hover { border-color: var(--accent); color: var(--accent); }
.rw-title-copy { min-width: 0; }
.rw-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
}
.rw-sub { font-size: 14px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }
.rw-session { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rw-progress-slot { min-width: 190px; flex: 1 1 190px; }
.rw-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.rw-workspace {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 370px;
  min-height: 620px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  animation: cardIn .35s var(--ease-spring);
}
/* flash + end-summary fill the whole shell, there is nothing to stage */
.rw-workspace-clear { display: block; min-height: 480px; }

.rw-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}

/* queue panel */
.rw-queue {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--border);
  background: var(--bg);
}
.rw-queue-head { padding: 20px 18px 14px; border-bottom: 1px solid var(--border); }
.rw-queue-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.rw-queue-sub { font-size: 14px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
.rw-queue-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.rw-queue-item {
  width: 100%;
  text-align: left;
  padding: 12px 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .15s, border-color .15s;
}
.rw-queue-item:hover { border-color: var(--border); background: var(--surface); }
.rw-queue-item.is-current {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.rw-queue-num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rw-queue-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--warn);
  white-space: nowrap;
}
.rw-queue-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.rw-state-question { color: var(--info); }
.rw-state-spot_check { color: var(--accent); }
.rw-state-conflict { color: var(--danger); }
.rw-queue-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 3px;
}
.rw-queue-meta {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rw-queue-more { font-size: 13px; color: var(--text-faint); padding: 6px 13px; }
.rw-queue-foot {
  margin-top: auto;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
.rw-queue-foot strong { display: block; color: var(--text); margin-bottom: 2px; }

/* decision stage */
.rw-stage { min-width: 0; padding: 26px 28px 30px; }
.rw-product-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 18px;
}
.rw-product-title { min-width: 0; }
.rw-product-name {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.14;
  max-width: 680px;
  margin-bottom: 7px;
}
.rw-product-sum { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.rw-product-scope { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 8px; }
.rw-head-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.rw-head-side .rq-thumb { position: static; }

.rw-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
  margin-bottom: 16px;
}
.rw-fact { min-width: 0; padding: 10px 13px; border-right: 1px solid var(--border); }
.rw-fact:last-child { border-right: 0; }
.rw-fact-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.rw-fact-value {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rw-evidence-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}

/* the suggested code + its duty stack */
.rw-suggestion {
  border: 1.5px solid var(--accent);
  border-radius: 16px;
  background: var(--accent-tint);
  padding: 22px 24px;
  margin: 16px 0;
}
.rw-suggestion-kicker,
.rw-question-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.rw-suggestion-kicker span,
.rw-question-kicker span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--accent-light);
}
/* the duty column is bounded, an `auto` track lets a long duty note eat the
   whole row and squeeze the code description to one word per line */
.rw-suggestion-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 170px);
  gap: 22px;
  align-items: start;
}
.rw-code-number {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.rw-code-desc { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin-top: 8px; }
.rw-duty { min-width: 0; padding-left: 18px; border-left: 1px solid var(--border); }
.rw-duty-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rw-duty-rate {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--accent-hover);
  margin-top: 2px;
}
.rw-duty-est,
.rw-duty-extra,
.rw-duty-note {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.45;
  margin-top: 4px;
}
.rw-duty-note { color: var(--text-faint); }
/* an alternative is picked: the best match keeps its suggestion styling
   (it is still our suggestion) but becomes clickable, clicking it clears
   the pick and restores the suggested code as the action */
.rw-suggestion.is-repick { cursor: pointer; }
.rw-suggestion.is-repick:hover,
.rw-suggestion.is-repick:focus-visible { border-color: var(--accent-hover); }
.rw-suggestion-repick { margin-left: auto; font-style: normal; }

/* why it matches / what to verify */
.rw-evidence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.rw-evidence-single { grid-template-columns: 1fr; }
.rw-evidence-card {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg);
}
.rw-evidence-head { margin-bottom: 7px; }
.rw-evidence-head strong { font-size: 14px; }
.rw-evidence-signal { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.5; }
.rw-evidence-body { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin-top: 4px; }

/* other codes considered */
.rw-alts { margin-top: 20px; }
.rw-alts-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rw-alts-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.rw-alts-sub { font-size: 13px; color: var(--text-dim); margin-top: 3px; }
.rw-alts-search-btn {
  border: 0;
  background: none;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 0;
}
.rw-alts-search-btn:hover { text-decoration: underline; }
.rw-alt-list { display: flex; flex-direction: column; gap: 8px; }
.rw-alt-list:empty { display: none; }
.rw-alt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 28px;
  gap: 14px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color .15s, background .15s;
}
.rw-alt:hover { border-color: var(--accent); }
.rw-alt.is-ruled-out { background: var(--bg); }
.rw-alt.is-ruled-out .rw-alt-code strong { color: var(--text-dim); }
/* after .is-ruled-out so a picked ruled-out row still reads as picked */
.rw-alt.is-picked {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: var(--ring-accent);
}
.rw-alt.is-picked .rw-alt-code strong { color: var(--text); }
.rw-alt-code strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.rw-alt-code span {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rw-alt-note { font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.rw-alt-note b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.rw-alt-duty { display: block; margin-top: 2px; font-weight: 600; }
.rw-alt-arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 14px;
}
.rw-alt-search { margin-top: 14px; }
.rw-alt-search #alt-results { margin-top: 8px; }

/* the question stage */
.rw-question {
  border: 1.5px solid var(--accent);
  border-radius: 16px;
  background: var(--accent-tint);
  padding: 20px 22px;
  margin: 16px 0;
}
.rw-question-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.2; }
.rw-question-context { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin-top: 8px; }
.rw-answers { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.rw-answer {
  display: grid;
  grid-template-columns: 26px 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}
.rw-explain { margin-top: 4px; }

/* the conflict stage: two codes side by side */
.rw-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.rw-choice {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px;
}
.rw-choice .rw-code-number { font-size: 28px; }
.rw-choice .rw-code-desc { font-size: 14px; margin: 8px 0 10px; }
.rw-choice-source {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}

/* action panel */
.rw-actions {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--border);
  background: var(--bg);
}
.rw-actions-head { padding: 22px 20px 16px; border-bottom: 1px solid var(--border); }
.rw-actions-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.2; }
.rw-actions-sub { font-size: 14px; color: var(--text-dim); margin-top: 5px; line-height: 1.5; }
.rw-actions-body { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; }
.rw-reco {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.rw-reco.is-picked { border-color: var(--accent); background: var(--accent-light); }
.rw-reco-kicker {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.rw-reco-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  word-break: break-word;
}
.rw-reco-copy { font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.rw-answer-summary { border-style: dashed; background: var(--bg); }
.rw-answer-summary.is-picked { border-style: solid; }
.rw-primary {
  width: 100%;
  min-height: 50px;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background .15s, opacity .15s;
}
.rw-primary:hover:not(:disabled) { background: var(--accent-hover); }
.rw-primary:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.rw-primary-form { display: block; }
.rw-primary-choice + .rw-primary-choice { margin-top: 0; }
.rw-actions .kbd-hints { margin-top: -8px; gap: 12px; flex-wrap: wrap; }
.rw-divider {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rw-divider::before,
.rw-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.rw-secondary { display: flex; flex-direction: column; gap: 8px; }
.rw-secondary-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rw-secondary-action:hover { border-color: var(--accent); }
.rw-action-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 14px;
}
.rw-action-copy { flex: 1; min-width: 0; }
.rw-action-copy small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1.4;
}
.rw-action-arrow { color: var(--text-faint); }
.rw-supplier-action .rw-action-icon { background: var(--info-light); color: var(--info); }
.rw-supplier-action:hover { border-color: var(--info); }
.rw-supplier-action.is-hinted { border-color: var(--warn); background: var(--warn-light); }
.rw-supplier-action.is-hinted .rw-action-icon { background: var(--warn-light); color: var(--warn); }
.rw-skip-action .rw-action-icon { background: var(--surface-alt); color: var(--text-dim); }
.rw-wrong-action:hover { border-color: var(--danger); }
.rw-wrong-action .rw-action-icon { background: var(--danger-light); color: var(--danger); }
.rw-side-link {
  display: inline-block;
  padding: 4px 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.rw-side-link:hover { text-decoration: underline; }
.rw-answer-map {
  padding: 12px 13px;
  border-radius: 11px;
  background: var(--surface-alt);
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}
.rw-answer-map strong { display: block; margin-bottom: 3px; font-size: 14px; color: var(--text); }
/* the shared merchant legal notice (directive 8), quiet at the panel foot */
.rw-responsibility {
  margin-top: auto;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
}
.rw-responsibility .decision-legal-notice {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
}
.rw-responsibility-end {
  margin: 28px auto 0;
  padding: 0;
  border-top: 0;
  max-width: 560px;
  text-align: left;
}

/* 'Ask my supplier' drawer */
.rw-drawer {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  justify-content: flex-end;
  background: var(--overlay);
  animation: fadeIn .2s ease;
}
.rw-drawer-panel {
  width: min(460px, 100%);
  height: 100%;
  padding: 24px;
  overflow-y: auto;
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  animation: slideIn .25s var(--ease-spring);
}
.rw-drawer-top { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.rw-drawer-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.2; }
.rw-drawer-sub { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin-top: 8px; }
.rw-drawer-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
}
.rw-drawer-close:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 1240px) {
  .rw-workspace { grid-template-columns: 230px minmax(0, 1fr) 320px; }
  .rw-stage { padding: 22px 20px 26px; }
  .rw-product-name { font-size: 26px; }
  .rw-code-number { font-size: 32px; }
  .rw-alt { grid-template-columns: minmax(0, 1fr) 130px 28px; }
  /* three panes in this width leave the stage too narrow for two columns */
  .rw-suggestion-main { grid-template-columns: 1fr; gap: 14px; }
  .rw-duty { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}

/* below 1020px the three panes restack; nothing is hidden, the queue turns
   into a horizontal strip and the action panel drops under the stage */
@media (max-width: 1019px) {
  .rw-workspace { display: block; min-height: 0; }
  .rw-queue { border-right: 0; border-bottom: 1px solid var(--border); }
  .rw-queue-list { flex-direction: row; overflow-x: auto; }
  .rw-queue-item { flex: 0 0 230px; }
  .rw-queue-foot { margin-top: 0; }
  .rw-actions { border-left: 0; border-top: 1px solid var(--border); }
  .rw-responsibility { margin-top: 0; }
}

@media (max-width: 760px) {
  .rw-page { padding: 16px 14px 44px; }
  .rw-title { font-size: 24px; }
  .rw-product-head { flex-direction: column; align-items: stretch; }
  .rw-head-side { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .rw-facts { grid-template-columns: 1fr; }
  .rw-fact { border-right: 0; border-bottom: 1px solid var(--border); }
  .rw-fact:last-child { border-bottom: 0; }
  .rw-fact-value { white-space: normal; }
  .rw-suggestion-main { grid-template-columns: 1fr; gap: 14px; }
  .rw-duty { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .rw-evidence-grid { grid-template-columns: 1fr; }
  .rw-choices { grid-template-columns: 1fr; }
  .rw-alt { grid-template-columns: minmax(0, 1fr) 28px; }
  .rw-alt-note { grid-column: 1 / -1; }
  .rw-answer { grid-template-columns: 26px 40px minmax(0, 1fr); }
  .rw-answer .option-duty { grid-column: 2 / -1; }
  .rw-queue-name, .rw-queue-meta { white-space: normal; }
}

@media (max-width: 420px) {
  .rw-page { padding: 12px 10px 40px; }
  .rw-workspace { border-radius: 14px; }
  .rw-stage { padding: 18px 14px 22px; }
  .rw-queue-head, .rw-queue-foot { padding-inline: 14px; }
  .rw-actions-head, .rw-actions-body, .rw-responsibility { padding-inline: 14px; }
  .rw-suggestion { padding: 18px 15px; }
  .rw-question { padding: 16px 15px; }
  .rw-product-name { font-size: 23px; }
  .rw-question-title { font-size: 21px; }
  .rw-code-number { font-size: 28px; }
  .rw-queue-item { flex-basis: 200px; }
  .rw-drawer-panel { padding: 18px 14px; }
}

/* ---------- review cards: evidence, code block, conflict (spec 05.4) ---------- */
.evidence { margin-bottom: 20px; }
.evidence-row { display: flex; flex-direction: column; gap: 5px; }
.evidence-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-alt);
  border-radius: 8px;
}
.evidence-title {
  font-size: 14px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evidence-more {
  border: none;
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 0 0 4px;
}
.evidence-more:hover { text-decoration: underline; }

.code-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border: 1.5px solid var(--accent);
  background: var(--accent-tint);
  border-radius: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.code-num {
  display: block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.code-label {
  font-size: 14px;
  color: var(--text-dim);
  display: block;
  margin-top: 3px;
  max-width: 360px;
  line-height: 1.4;
}
.code-source {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-top: 6px;
}
.duty-chip {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-hover);
  background: var(--accent-light);
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
.duty-estimate {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin: -14px 2px 20px;
}
.detail-duty-note { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.quality-tag { background: var(--warn-light); color: var(--warn); }
.wrong-link {
  border: none;
  background: none;
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 10px;
  text-decoration: underline;
}
.wrong-link:hover { color: var(--danger); opacity: .8; }
.conflict-choices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.conflict-choice { margin-bottom: 0; }
.conflict-choice-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .code-block { flex-direction: column; align-items: flex-start; }
}

/* ---------- question card: options, confirm, learn-more (spec 05.5) ---------- */
.options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.option-body { flex: 1; min-width: 0; }
.option-body .option-title { display: block; }
.option-body .option-desc { display: block; margin-top: 2px; }
.option-duty {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-faint);
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 2px;
}
.option.selected .option-duty { color: var(--accent-hover); }
.option-duty-amount { display: block; font-weight: 600; margin-top: 1px; }
.confirm-bar { margin: 14px 0 6px; animation: fadeUp .25s ease; }
.learn-toggle {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 0 0;
}
.learn-toggle:hover { color: var(--accent); }
.learn-body {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.65;
  padding: 12px 16px;
  background: var(--surface-alt);
  border-radius: 10px;
  margin-top: 8px;
  animation: fadeUp .25s ease;
}
.learn-duties { margin-top: 8px; font-weight: 600; }

/* "Here's why" evidence reveal (spec P6.2): the deciding signal + the model's
   reasoning, one click from any suggested code. Tokens only, works at 380px. */
.here-why { margin: 10px 0 4px; }
.here-why-summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  list-style: none;
  padding: 4px 0;
}
.here-why-summary::-webkit-details-marker { display: none; }
.here-why-summary::before { content: "▸ "; color: var(--text-faint); }
.here-why[open] .here-why-summary::before { content: "▾ "; }
.here-why-summary:hover { color: var(--accent); }
.here-why-body {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.65;
  padding: 12px 16px;
  background: var(--surface-alt);
  border-radius: 10px;
  margin-top: 8px;
}
.here-why-signal { font-weight: 600; color: var(--text); }
.here-why-reasoning { margin-top: 6px; }

/* ---------- supplier hatch modal (spec 05.6) ---------- */
.modal-title { margin-bottom: 8px; }
.hatch-suppliers { margin-bottom: 8px; }
.hatch-or { margin: 14px 0 10px; }
.hatch-create { display: flex; flex-direction: column; gap: 8px; }
.hatch-create .btn-primary { margin-top: 6px; }

/* ---------- suppliers page (spec 05.7) ---------- */
.suppliers-page .page-title { margin: 24px 0 6px; }
.suppliers-page .section-title { font-size: 19px; margin: 28px 0 12px; }
.supplier-group { margin-top: 16px; }
.supplier-question-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }
.supplier-question {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-alt);
  border-radius: 8px;
  font-size: 14px;
}
.sq-text { color: var(--text); font-weight: 500; min-width: 0; }
.sq-products { color: var(--text-faint); white-space: nowrap; font-size: 13px; }
/* count + the quiet Withdraw action on one waiting question */
.sq-side { display: flex; align-items: center; gap: 10px; flex: none; }
.supplier-send-row { margin-top: 10px; }
.supplier-request-row { margin-top: 10px; }
.supplier-request-row .card-context { margin-bottom: 0; }
/* how long a still-open request has been waiting, plus the reminder nudge */
.sr-wait {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.sr-wait-note { color: var(--text-dim); font-size: 13px; }
.sr-wait-action { margin-left: auto; }

/* ---------- supplier magic page (spec 05.8, supplier-answer reference) ---------- */
.sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.sp-head-from { font-size: 14px; color: var(--text-dim); }
.sp-head-from strong { color: var(--text); }
.sp-lang-form { display: flex; gap: 6px; }
.sp-container { max-width: 560px; margin: 0 auto; padding: 28px 16px 60px; }
.sp-hero { text-align: center; margin-bottom: 20px; }
.sp-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.sp-hero-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin-bottom: 8px; }
.sp-hero-body { font-size: 14px; color: var(--text-dim); line-height: 1.65; max-width: 460px; margin: 0 auto; }
.sp-hero-pills { margin-top: 14px; }
.sp-trust-line { font-size: 12px; color: var(--text-faint); margin-top: 10px; letter-spacing: .2px; }
.sp-progress { margin-bottom: 20px; }
.sp-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  animation: fadeUp .35s ease both;
}
.sp-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.sp-group-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.sp-group-meta { font-size: 13px; color: var(--text-faint); }
.sp-group-progress {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--surface-alt);
  padding: 5px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.sp-samples { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.sp-sample { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--surface-alt); border-radius: 8px; }
.sp-sample-title { font-size: 13px; color: var(--text-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-sample-ean { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-sample-more { font-size: 12px; color: var(--text-faint); padding: 2px 10px; }
.sp-q { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.sp-q-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.sp-q-text { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.sp-q-done {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  animation: popIn .3s ease;
}
.sp-q .option { cursor: pointer; }
.idk-btn {
  display: inline-block;
  border: none;
  background: none;
  color: var(--text-faint);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0 0;
  transition: color .15s;
}
.idk-btn:hover { color: var(--text-dim); }
.idk-btn.active { color: var(--warn); font-weight: 600; }
.sp-submit-area { text-align: center; margin-top: 24px; }
.sp-submit:disabled { background: var(--border); color: var(--text-faint); cursor: default; }
.sp-submit-hint { font-size: 13px; color: var(--text-faint); margin-top: 8px; }
.sp-footer { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 32px; }
.sp-link-note { font-size: 12px; color: var(--text-faint); }
.sp-powered { font-size: 13px; color: var(--text-dim); }
.sp-powered strong { font-family: var(--font-display); color: var(--accent); }
.sp-done { max-width: 440px; margin: 0 auto; padding: 90px 20px; text-align: center; animation: fadeUp .45s ease; }
.sp-done-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin-top: 20px; }
.sp-done-body { font-size: 14px; color: var(--text-dim); line-height: 1.65; margin-top: 10px; }
.sp-expired-icon { font-size: 44px; }
.sp-growth {
  margin-top: 26px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.sp-growth a { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.sp-growth a:hover { text-decoration: underline; }
.sp-done .sp-powered { margin-top: 28px; display: block; }

/* ---------- datasheet shortcut + answer-on-behalf (spec 05.9) ---------- */
.sp-shortcut {
  background: var(--surface);
  border: 1.5px dashed var(--accent);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 22px;
  transition: all .2s;
}
.sp-shortcut.has-file { border-style: solid; }
.sp-shortcut-text h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.sp-shortcut-text p { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin-bottom: 12px; }
.upload-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-alt);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
  flex-wrap: wrap;
}
.upload-mini:hover { background: var(--accent-light); }
.upload-mini-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex: none;
}
.upload-mini-text { font-size: 14px; font-weight: 600; flex: 1; min-width: 140px; }
.upload-mini-formats { font-size: 12px; color: var(--text-faint); }
.file-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--accent-light);
  border-radius: 10px;
  flex-wrap: wrap;
}
.file-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.file-name { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-covered-note { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-top: 10px; }
.covered-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-hover);
  background: var(--accent-light);
  padding: 5px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.answer-anyway {
  border: none;
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: none;
}
.answer-anyway:hover { text-decoration: underline; }
.supplier-upload-row { margin-top: 10px; }
.answer-on-behalf { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
.answer-on-behalf .sq-text { margin-bottom: 8px; }
.behalf-option { cursor: pointer; }
.answer-on-behalf .btn-sm { margin-top: 8px; }

/* ---------- manual assign results + row checkboxes (spec 05.11) ------- */
.assign-result { cursor: pointer; }
.assign-empty { padding: 6px 2px; }
.row-check { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ---------- design-review polish (spec 05 follow-ups) ---------- */
.file-remove-form { display: inline; }
.file-remove {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}
.file-remove:hover { color: var(--text); }
@media (max-width: 560px) {
  /* the flywheel moment sits centered in the card area on phones */
  .flash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
    padding: 40px 20px;
  }
}

/* ── Compliance dossier (spec 06.4), layout only, existing tokens ──── */
.dossier { max-width: 820px; margin: 0 auto; padding: 32px 16px 64px; }
.dossier-head { display: flex; justify-content: space-between;
  align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.dossier-title { font-family: var(--font-display); font-size: 28px;
  font-weight: 600; }
.dossier-sub { color: var(--text-dim); font-size: 14px; line-height: 1.55;
  margin-top: 4px; }
.dossier-chain { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.dossier-section { margin-bottom: 20px; }
.dossier-h2 { font-family: var(--font-display); font-size: 19px;
  font-weight: 600; margin-bottom: 14px; }
.dossier-h3 { font-size: 14px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 18px 0 8px; }
.dossier-product { padding-bottom: 8px; }
.dossier-product + .dossier-product { border-top: 1px solid var(--border);
  padding-top: 12px; }
.dossier-path { list-style: none; display: flex; flex-direction: column;
  gap: 2px; counter-reset: none; }
.dossier-path-step { display: grid;
  grid-template-columns: 90px 90px 1fr; gap: 12px; align-items: baseline;
  font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.dossier-path-level { color: var(--text-faint); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em; }
.dossier-path-code { font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--accent); }
.dossier-path-title { color: var(--text); }
.dossier-attempt { border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; margin-bottom: 12px; background: var(--surface-alt); }
.dossier-attempt-head { display: flex; justify-content: space-between;
  align-items: baseline; gap: 12px; margin-bottom: 8px; }
.dossier-attempt-rung { font-weight: 600; font-size: 14px; }
.dossier-reasoning { font-size: 14px; color: var(--text-dim);
  line-height: 1.55; margin-top: 8px; white-space: pre-wrap; }
.dossier-scenario { font-size: 14px; color: var(--text-dim);
  line-height: 1.55; margin-top: 14px; }
.dossier-verdict { display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 14px; }
.dossier-verdict:last-child { border-bottom: none; }
.dossier-verdict-detail { flex: 1; min-width: 120px; }

@media print {
  .topbar, .toast, .no-print { display: none !important; }
  body { background: var(--white); }
  main { display: block; }
  .dossier { max-width: none; margin: 0; padding: 0; }
  .dossier-section, .card { break-inside: avoid; box-shadow: none;
    border: 1px solid var(--border); }
  .dossier-attempt { break-inside: avoid; }
}

/* ── API keys + docs page (spec 06.5/06.6), layout only ────────────── */
.api-new-key { border-color: var(--accent); background: var(--accent-tint); }
.api-key-reveal { justify-content: flex-start; }
.api-key-value { font-family: monospace; font-size: 15px; font-weight: 600;
  color: var(--accent); word-break: break-all; }
.api-keys-card .card-top { align-items: center; margin-bottom: 8px; }
.api-create-form { display: flex; gap: 8px; align-items: center; }
.api-create-form .field-input { width: auto; }
.api-key-row { align-items: center; }
.api-key-meta { display: flex; gap: 12px; align-items: center; }
.api-curl { background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 14px;
  line-height: 1.5; margin: 6px 0 16px; }
.api-curl code { font-family: monospace; white-space: pre; color: var(--text); }
.api-limits { margin-top: 4px; }
.export-api-hint { margin: 8px 0 20px; }

/* ── Alerts list (spec 06.10), layout only, existing tokens ────────── */
.alert-row { margin-bottom: 12px; }
.alert-row.alert-new { border-color: var(--accent); }
.alert-copy { font-size: 14px; line-height: 1.55; margin: 10px 0 14px; }
.alert-actions { align-items: center; gap: 10px; }
.alert-seen-note { color: var(--text-faint); }

/* ── Dashboard (spec 07 §2, ref tariffs-dashboard-redesign.jsx) ───────
   .hero-stat* / .stat-done / .stat-pending serve _scoreboard.html. */
.hero-stat { display: flex; flex-direction: column; }
.hero-stat-val { font-family: var(--font-display); font-size: 24px;
  font-weight: 700;
  /* digits keep one width while the count-up runs, no wiggle */
  font-variant-numeric: tabular-nums; }
.hero-stat-label { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.stat-done .hero-stat-val { color: var(--accent); }
.stat-pending .hero-stat-val { color: var(--warn); }
.pulse-line { display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 14px; font-weight: 600; color: var(--accent); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); animation: pulse 1.6s ease infinite; }

.dash-tab-body { padding-top: 20px; }

.action-list { display: flex; flex-direction: column; gap: 12px; }
.action-card { display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; background: var(--surface);
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: 12px; animation: fadeUp .5s var(--ease-spring) both;
  transition: box-shadow .2s; }
.action-card:hover { box-shadow: var(--shadow-card); }
.action-card.primary { padding: 26px 28px; border-left-color: var(--accent);
  background: linear-gradient(0deg, var(--accent-tint), var(--accent-tint)),
    var(--surface); }
.action-card.primary h4 { font-size: 18px; }
.kind-review, .kind-running, .kind-caught_up,
.kind-bulk { border-left-color: var(--accent); }
.kind-supplier, .kind-alerts { border-left-color: var(--warn); }
.action-icon { font-size: 26px; width: 48px; text-align: center;
  flex-shrink: 0; }

.activity-list { display: flex; flex-direction: column; }
.activity-item { display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-icon { width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface-alt); display: flex; align-items: center;
  justify-content: center; font-size: 14px; flex-shrink: 0; }
.activity-text { flex: 1; font-size: 14px; color: var(--text-dim);
  text-decoration: none; }
.activity-text:hover { color: var(--text); }
.activity-time { font-size: 13px; color: var(--text-faint); flex-shrink: 0; }

.empty-hero-icon { width: 64px; height: 64px; border-radius: 16px;
  background: var(--accent-light); color: var(--accent); font-size: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px; }

/* lead-in above the first-run import offer (spec onboarding/02) */
.empty-lead { max-width: 560px; margin: 40px auto 4px; text-align: center; }
.empty-lead .dash-sub { margin: 10px auto 0; }

/* first-run import offer (spec onboarding/02): a single centred door card */
.import-offer { max-width: 440px; margin: 0 auto; }
.import-offer-card { text-align: center; display: flex; flex-direction: column;
  align-items: center; animation: fadeUp .5s var(--ease-spring); }
.import-offer-card .method-sub { margin: 6px 0 20px; }
.import-offer-card .btn-primary.lg { width: 100%; }

/* auto-vs-ask framing (spec P6.3): review-as-a-feature, shown beside the
   import offer on first-run / empty states. Tokens only, 380px. */
.auto-ask { max-width: 620px; margin: 28px auto 0; text-align: left; }
.auto-ask-title { font-size: 16px; font-weight: 700; margin-bottom: 14px;
  text-align: center; }
.auto-ask-list { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px; }
.auto-ask-item { display: flex; gap: 12px; align-items: flex-start; }
.auto-ask-icon { flex: none; width: 28px; height: 28px; border-radius: 99px;
  display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.auto-ask-icon.ok { color: var(--accent-hover); background: var(--accent-light); }
.auto-ask-icon.ask { color: var(--warn-text); background: var(--warn-light); }
.auto-ask-icon.supplier { color: var(--text-dim); background: var(--surface-alt); }
.auto-ask-body { font-size: 14px; color: var(--text-dim); line-height: 1.6; }
.auto-ask-verify { margin-top: 16px; font-size: 14px; color: var(--text-faint);
  line-height: 1.6; text-align: center; }

@media (max-width: 768px) {
  .pulse-line { justify-content: center; }
  .action-card { flex-direction: column; text-align: center;
    align-items: stretch; }
  .action-card .btn-primary, .action-card .btn-ghost { text-align: center; }
}

/* ── Live classification + arrival (spec 07.4, onboarding ref) ──────── */
.live-card { max-width: 520px; margin: 24px auto 0; padding: 36px 28px;
  text-align: center; animation: fadeUp .4s var(--ease-spring); }
.pulse-line.center { justify-content: center; margin-top: 0;
  margin-bottom: 18px; }
.live-count { font-family: var(--font-display); font-size: 56px;
  font-weight: 700; color: var(--accent); line-height: 1; }
.live-count-label { font-size: 14px; color: var(--text-dim); margin-top: 6px; }
.live-bar-wrap { height: 6px; background: var(--surface-alt);
  border-radius: 3px; overflow: hidden; margin: 20px auto 10px;
  max-width: 340px; }
.live-bar { height: 100%; background: var(--accent); border-radius: 3px;
  transition: width 1s ease; }
.live-sub { font-size: 14px; color: var(--text-dim); }
.live-ticker { font-size: 13px; color: var(--text-faint); margin-top: 18px;
  animation: fadeUp .4s ease; min-height: 18px; }
.live-ticker-code { font-variant-numeric: tabular-nums; letter-spacing: .3px;
  color: var(--text-dim); }
.live-note { font-size: 13px; color: var(--text-faint); margin-top: 20px; }
.success-check.lg { width: 56px; height: 56px; font-size: 24px; }
.arrival .dash-title { margin-top: 18px; font-size: 26px; }
.arrival-big { font-size: 15px; color: var(--text-dim); margin-top: 8px;
  line-height: 1.6; }
.arrival-big strong { color: var(--text); }
.arrival-need { margin: 20px 0; }
.arrival-badge { display: inline-block; background: var(--accent-light);
  color: var(--accent-hover); font-size: 14px; font-weight: 700;
  padding: 6px 14px; border-radius: 99px; }
.arrival-need p { font-size: 14px; color: var(--text-dim); margin-top: 10px;
  line-height: 1.55; }
.arrival-need strong { color: var(--text); }
.arrival-note { margin-top: 16px; font-size: 13px; }
.btn-link { background: none; border: none; color: var(--text-dim);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  text-decoration: underline; cursor: pointer; }
.btn-link:hover { color: var(--text); }

/* ── Profile prefs (spec 07.5) ──────────────────────────────────────── */
.check-row { display: flex; align-items: center; gap: 10px; font-size: 14px;
  color: var(--text); padding: 6px 0; cursor: pointer; }
.check-row input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ── Suppliers CRUD (spec 07.6 / 09.3) ──────────────────────────────── */
/* The directory list AND the record page both live in the .sup-* block at
   the end of this file (rebuilt 2026-08-06). Nothing is left here. */

/* ── Supplier email template editor (spec 09.4) ─────────────────────── */
.placeholder-cheatsheet { margin: 14px 0 18px; }
.placeholder-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.placeholder-chip {
  font-size: 13px;
  color: var(--text-dim);
  background: var(--surface-alt);
  padding: 4px 10px;
  border-radius: 6px;
}
.email-preview {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.email-preview-subject {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text);
}
.email-preview-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-faint);
  margin-right: 8px;
}
.email-preview-body {
  margin: 0;
  padding: 16px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Staff ops (spec 07.9, internal) ────────────────────────────────── */
.staff-card { margin-bottom: 16px; }
.staff-table-wrap { overflow-x: auto; }
.staff-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.staff-table th { text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-faint); padding: 8px 10px;
  border-bottom: 1px solid var(--border); }
.staff-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.staff-table tr:last-child td { border-bottom: none; }
.staff-table a { color: var(--accent); text-decoration: none; }
.staff-status-failed { color: var(--danger); font-weight: 600; }
.staff-status-running { color: var(--warn); font-weight: 600; }
.staff-status-finished { color: var(--accent); }

/* ── Staff management pages (spec 17.5, internal) ───────────────────── */
.staff-links a { color: var(--accent); text-decoration: none; }
.pill.pill-muted { color: var(--text-faint); background: var(--surface-alt); }
.staff-search { margin-bottom: 14px; }
.staff-search .field-input { max-width: 360px; }
.staff-inline-form { display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin: 0; }
.staff-inline-form .field-input { width: auto; }
.staff-pager { display: flex; align-items: center; gap: 12px;
  margin-top: 14px; }
.staff-pager-at { font-size: 14px; color: var(--text-dim); }
.staff-pager .is-disabled { opacity: .4; pointer-events: none; }

/* ── Free-tool usage monitoring (super-admin, internal) ─────────────── */
.staff-stats { display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px; margin-bottom: 16px; }
.staff-stat { padding: 16px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); }
.staff-stat strong { display: block; font-family: var(--font-display);
  font-size: 28px; font-weight: 600; line-height: 1.1; }
.staff-stat span { display: block; margin-top: 4px; font-size: 13px;
  color: var(--text-dim); }
.staff-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.staff-filters .field-input { max-width: 280px; }
.staff-filters select.field-input { max-width: 220px; }
.staff-table .row-nowrap { white-space: nowrap; }
@media (max-width: 720px) {
  .staff-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Help-chat transcripts (spec 21.7, internal) ────────────────────── */
.pill.pill-warn { color: var(--warn); background: var(--warn-light); }
.pill.pill-danger { color: var(--danger); background: var(--danger-light); }
.staff-check { display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--text-dim); }
.staff-turn { padding: 14px 0; border-bottom: 1px solid var(--border); }
.staff-turn:last-child { border-bottom: none; }
.staff-turn-user { background: var(--surface-alt); border-radius: 12px;
  padding: 14px 16px; border-bottom: none; }
.staff-turn-head { display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px; font-size: 14px; }
.staff-turn-text { font-size: 14px; line-height: 1.6; margin: 0;
  white-space: pre-wrap; word-break: break-word; }
.staff-turn-prose { font-size: 14px; line-height: 1.6; }
.staff-turn-prose p { margin: 0 0 8px; }
.staff-turn-prose ul, .staff-turn-prose ol { margin: 0 0 8px 18px; }
.staff-turn-data { display: grid; grid-template-columns: 160px 1fr;
  gap: 4px 12px; margin: 10px 0; font-size: 14px; }
.staff-turn-data dt { color: var(--text-faint); text-transform: uppercase;
  font-size: 12px; letter-spacing: .8px; padding-top: 2px; }
.staff-turn-data dd { margin: 0; word-break: break-word; }
.staff-turn-rating { display: flex; align-items: center; gap: 10px;
  margin: 8px 0 0; }
.staff-trace { margin-top: 8px; }
.staff-trace summary { cursor: pointer; font-size: 14px;
  color: var(--text-dim); }
.staff-trace-label { margin: 8px 0 4px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .8px; color: var(--text-faint); }
.staff-json { font-family: var(--font-counter); font-size: 13px;
  line-height: 1.5; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-alt); overflow-x: auto;
  max-height: 320px; white-space: pre-wrap; word-break: break-word;
  margin: 0; }
@media (max-width: 720px) {
  .staff-turn-data { grid-template-columns: 1fr; }
}

/* ── Nightly traffic digest (spec 22 §4, internal) ──────────────────── */
.digest-warning { margin: 0 0 12px; padding: 10px 12px; font-size: 14px;
  line-height: 1.5; border-radius: 10px; color: var(--danger);
  background: var(--danger-light); }
.digest-chips { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin: 12px 0; }
.sev-chip { display: inline-flex; align-items: center; border-radius: 999px;
  padding: 2px 10px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.sev-chip.sev-critical { background: var(--danger-light); color: var(--danger); }
.sev-chip.sev-high { background: var(--warn-light); color: var(--warn); }
.sev-chip.sev-medium { background: var(--warn-light); color: var(--warn-text); }
.sev-chip.sev-low, .sev-chip.sev-info { background: var(--surface-alt);
  color: var(--text-dim); }
.badge.badge-new { background: var(--accent-light); color: var(--accent-hover); }
.digest-findings { list-style: none; margin: 0; padding: 0; }
.digest-finding { border-top: 1px solid var(--border); padding: 10px 0; }
.digest-finding:first-child { border-top: none; }
.digest-finding > details > summary { display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.digest-finding-title { font-weight: 600; }
.digest-finding-cat { font-size: 12px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-faint); }
.digest-finding-detail { margin: 8px 0; font-size: 14px; line-height: 1.6;
  color: var(--text-dim); }
.digest-day { border-bottom: 1px solid var(--border); padding: 12px 0; }
.digest-day:last-child { border-bottom: none; }
.digest-day > summary { display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px; cursor: pointer; font-size: 14px; }
.digest-day-date { font-weight: 600; white-space: nowrap; }

/* ── Plan editor form (spec 18.1, internal) ─────────────────────────── */
.staff-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px; }
.staff-form-row { display: flex; flex-direction: column; gap: 4px; }
.staff-form-row label { font-size: 12px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-faint); }
.staff-form-row .row-meta { font-size: 13px; }
.staff-form-actions { display: flex; align-items: center; gap: 12px;
  margin: 16px 0; }
.staff-plan-delete { display: flex; align-items: center; gap: 10px;
  margin-top: 8px; }
.form-errors, .form-field-error { color: var(--danger); font-size: 14px; }
@media (max-width: 640px) {
  /* minmax(0, …) like the two-column form above: a bare 1fr means
     minmax(auto, 1fr), and the reason textarea's intrinsic ~40-column
     width then forces the whole page past the viewport (gate catch,
     2026-08-06, staff API-limit form at 390px) */
  .staff-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Lifecycle email controller (spec 19.2, internal) ───────────────── */
.staff-email-subject { font-weight: 600; margin: 0 0 8px; }
.staff-email-body { white-space: pre-wrap; font-size: 14px; line-height: 1.6;
  color: var(--text-dim); background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  overflow-x: auto; }

/* content editor (spec 19.5, internal) */
.staff-content-grid { display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; align-items: start; }
@media (max-width: 900px) { .staff-content-grid { grid-template-columns: 1fr; } }
.staff-content-form { display: flex; flex-direction: column; gap: 12px;
  margin-top: 12px; }
.staff-content-form label { display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-faint); }
.staff-content-form textarea.field-input { font-family: inherit;
  font-size: 14px; line-height: 1.6; resize: vertical; }
.staff-content-actions { display: flex; align-items: center; gap: 12px; }
.staff-errors { color: var(--danger); font-size: 14px; margin: 12px 0 0;
  padding-left: 18px; }
.staff-email-default { margin-top: 8px; }
.staff-email-default summary { cursor: pointer; font-size: 14px;
  color: var(--text-dim); margin-bottom: 8px; }
.staff-email-draft { margin-top: 16px; }

/* --- spec 12: ready-for-your-system exports ------------------------------ */
.system-export-card { margin-top: 20px; }
/* the "we spotted X" line moved into the .repeat-card banner at the top of
   the page (operator 2026-08-06), so the page says it once. The system
   picker itself is the .ex-tile grid further down (export page rebuild). */
.system-panel { border-top: 1.5px solid var(--border); margin-top: 16px; padding-top: 14px; font-size: 14px; }
.system-panel p { margin: 0 0 10px; color: var(--text-dim); }
.system-panel ol { margin: 0 0 14px 20px; display: grid; gap: 6px; color: var(--text-dim); }
.system-callout {
  background: var(--surface-alt); border-left: 3px solid var(--accent);
  padding: 10px 14px; border-radius: 0 10px 10px 0; font-size: 14px;
}
/* live connection to the chosen system (spec 26.7 follow-up): the advisory
   banner shape the import page's recognized-format notice already uses */
.ex-connected { margin-top: 16px; }
.ex-connected > span { display: block; margin-top: 6px; font-weight: 400;
  line-height: 1.5; }
.ex-connected a { color: inherit; font-weight: 600; }
.system-fill-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.system-file-input { font-size: 14px; max-width: 100%; }

/* ---------- guides visual layer (spec 11 follow-up) ---------- */
.gmap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin: 16px 0 6px; }
.gmap-node { display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 999px; padding: 7px 14px; font-size: 14px;
  font-weight: 600; color: var(--text); text-decoration: none;
  transition: border-color .15s, background .15s, transform .15s; }
.gmap-node svg { color: var(--accent); flex: none; }
.gmap-node:hover, .gmap-node:focus-visible { border-color: var(--accent);
  background: var(--accent-light); transform: translateY(-1px); }
.gmap-arrow { color: var(--text-faint); font-weight: 700; user-select: none; }
.gstages { list-style: none; margin: 20px 0 8px !important; padding: 0; }
.gstage { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px;
  position: relative; padding-bottom: 10px; margin: 0 !important; }
.gstage:not(:last-child)::before { content: ""; position: absolute;
  left: 16px; top: 38px; bottom: -2px; width: 2px; background: var(--border); }
.gstage-num { width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--white);
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  display: grid; place-items: center; margin-top: 2px; }
.gstage-body h2 { margin: 4px 0 6px; font-size: 20px; }
.gsteps { counter-reset: gstep; list-style: none; margin: 14px 0 !important;
  padding: 0; display: grid; gap: 10px; }
.gsteps li { counter-increment: gstep; position: relative;
  padding-left: 38px; margin: 0 !important; }
.gsteps li::before { content: counter(gstep); position: absolute;
  left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent-hover);
  font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.gknow { border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface); margin: 10px 0; }
.gknow summary { cursor: pointer; padding: 12px 16px; font-size: 14px;
  font-weight: 600; list-style: none; display: flex;
  justify-content: space-between; align-items: baseline; gap: 12px; }
.gknow summary::-webkit-details-marker { display: none; }
.gknow summary::after { content: "+"; color: var(--text-faint);
  font-weight: 700; flex-shrink: 0; }
.gknow[open] summary::after { content: "\2212"; }
.gknow p { padding: 0 16px 12px; margin: 0 !important; }

/* guide vignettes: miniature app windows built from real component classes */
.gstage { scroll-margin-top: 84px; }
.gstage:target .gstage-num { animation: gpulse 1.2s ease 1; }
@keyframes gpulse {
  0% { box-shadow: 0 0 0 0 var(--accent-light); }
  60% { box-shadow: 0 0 0 12px var(--accent-light); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.gvignette { margin: 14px 0 4px; }
.gv-window { border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--bg); overflow: hidden; box-shadow: var(--shadow-card); }
.gv-bar { display: flex; gap: 5px; padding: 9px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface); }
.gv-bar span { width: 9px; height: 9px; border-radius: 50%;
  background: var(--border); }
.gv-body { padding: 14px; display: grid; gap: 10px; }
.gv-body .preset-banner { margin-bottom: 0; }
.gvignette figcaption { font-size: 13px; color: var(--text-dim);
  margin-top: 8px; }
.gvignette .btn-primary, .gvignette .escape-btn { pointer-events: none; }
.gv-drop { border: 2px dashed var(--border); border-radius: 10px;
  padding: 14px; text-align: center; font-size: 14px;
  color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; align-items: center; background: var(--surface); }
.gv-live { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; }
.gv-ring { position: relative; width: 76px; height: 76px; flex: none; }
.gv-ring-pct { position: absolute; inset: 0; display: grid;
  place-items: center; font-family: var(--font-display); font-weight: 600;
  font-size: 17px; }
.gv-live-num { font-family: var(--font-display); font-size: 22px;
  font-weight: 600; }
.gv-live-sub { font-size: 13px; color: var(--text-dim); max-width: 240px; }
.gv-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; display: grid; gap: 10px; }
.gv-top { display: flex; justify-content: space-between;
  align-items: center; gap: 8px; flex-wrap: wrap; }
.gv-actions { display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; }
.gv-files { display: flex; gap: 8px 12px; align-items: center;
  flex-wrap: wrap; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.gv-download { font-size: 14px; font-weight: 600; color: var(--accent); }
/* spec 13: miniature file mockups in the system guides */
.gv-code { display: block; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.7; color: var(--text-dim);
  overflow-x: auto; white-space: pre; }
.gv-code strong { color: var(--text); font-weight: 600; }
.guide h2[id] { scroll-margin-top: 84px; }
.gv-pillrow { display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap; font-size: 13px; color: var(--text-dim); }
.gv-pill { border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; background: var(--surface); font-weight: 600; }

/* guide motion: pure enhancement, finished state is the default */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @supports (animation-timeline: view()) {
    .gstage, .gknow { animation: gfade linear both;
      animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
}
@keyframes gfade {
  from { opacity: .45; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.gknow { interpolate-size: allow-keywords; }
.gknow::details-content { height: 0; overflow: clip;
  transition: height .28s ease, content-visibility .28s allow-discrete; }
.gknow[open]::details-content { height: auto; }

/* guide vignette helpers (11.7: all guides) */
.gv-title { font-family: var(--font-display); font-size: 17px;
  font-weight: 600; }
.gv-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px;
  color: var(--text-dim); margin-top: 5px; }
.gv-stats strong { color: var(--text); font-size: 14px; }
.gv-row { display: flex; align-items: center; gap: 8px 12px;
  flex-wrap: wrap; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 14px; font-size: 14px; }
.gv-row-sub { font-size: 13px; color: var(--text-dim); }
.gv-push { margin-left: auto; }
.gv-arrow { color: var(--text-faint); font-weight: 700; }
/* products-list pieces borrowed by the Products guide's vignettes: the live
   row action fills its table cell and the bulk bar floats over the page,
   neither of which suits a mockup sitting inline in the guide */
.gvignette .pl-action { width: auto; }
.gvignette .pl-bulk-bar { position: static; width: auto; transform: none; }
.gvignette .pl-title-link { margin-bottom: 3px; }
/* savings pieces borrowed by the Duty savings guide's vignettes: the live
   page unwraps its .row-meta sentences through .sv-page, which a guide has no
   wrapper for, and the board is the page's own header rather than a card */
.gvignette .row-meta { white-space: normal; line-height: 1.45; }
.gvignette .sv-board { margin: 0; }

/* floating contextual guide chip (spec 11.9) */
.guide-fab { position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: var(--white);
  border-radius: 999px; padding: 10px 16px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-float); transition: transform .15s, background .15s; }
.guide-fab:hover { background: var(--accent-hover); transform: translateY(-2px); }
.guide-fab svg { flex: none; }
@media print { .guide-fab { display: none; } }

/* guide side panel (spec 11.10): read the guide while using the page */
.guide-panel { position: fixed; top: 0; right: 0; bottom: 0;
  width: min(480px, 100vw); background: var(--surface);
  border-left: 1.5px solid var(--border); box-shadow: var(--shadow-panel);
  /* above the sticky topbar (z 90), the panel has always covered it */
  transform: translateX(105%); z-index: 95;
  display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) {
  .guide-panel { transition: transform .25s ease; }
}
.guide-panel.open { transform: none; }
.guide-panel-head { display: flex; justify-content: space-between;
  align-items: center; padding: 12px 18px;
  border-bottom: 1px solid var(--border); flex: none; }
.guide-panel-title { font-weight: 700; font-size: 13px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); }
.guide-panel-close { background: none; border: none; font-size: 22px;
  line-height: 1; cursor: pointer; color: var(--text-dim); padding: 2px 6px; }
.guide-panel-close:hover { color: var(--text); }
.guide-panel-body { overflow-y: auto; padding: 4px 20px 40px; }
.guide-panel-body .dash-wrap { margin: 0; padding: 0; max-width: none; }
.guide-panel-body .guide-back { display: none; }
.guide-panel-body .dash-title { font-size: 24px; margin-top: 14px; }

/* ---------- help panel tabs + the "Ask for help" chat (spec 21.3) ----------
   The panel is already a flex column at min(480px, 100vw), so the chat is
   mobile-first for free: the thread takes the leftover height and scrolls,
   the composer stays pinned at the bottom at every width. */
.help-tabs { display: flex; gap: 2px; flex: none;
  padding: 0 14px; border-bottom: 1px solid var(--border); }
.help-tab { background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; padding: 9px 10px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--text-dim); }
.help-tab:hover { color: var(--text); }
.help-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.assistant-panel-body { flex: 1; min-height: 0; display: flex;
  padding: 0; overflow: hidden; }
.asst { flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; }
.asst-disclosure { flex: none; margin: 0; padding: 10px 16px 0;
  font-size: 12px; line-height: 1.5; color: var(--text-dim); }

.asst-thread { flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px 16px 4px; }
.asst-empty { margin: 0; font-size: 14px; line-height: 1.6;
  color: var(--text-dim); }
.asst-notice { align-self: stretch; background: var(--warn-light);
  border: 1px solid var(--warn); border-radius: 10px; padding: 11px 13px;
  font-size: 14px; line-height: 1.55; }
.asst-notice p { margin: 0 0 8px; }

.asst-msg { max-width: 92%; border-radius: 13px; padding: 10px 13px;
  font-size: 14px; line-height: 1.55; }
.asst-msg-user { align-self: flex-end; background: var(--accent);
  color: var(--white); border-bottom-right-radius: 4px; }
.asst-msg-bot { align-self: flex-start; background: var(--surface-alt);
  color: var(--text); border-bottom-left-radius: 4px; }
.asst-msg-pending { display: flex; align-items: center; gap: 8px;
  color: var(--text-dim); }
.asst-msg-failed { background: var(--danger-light); }
.asst-msg-failed p { margin: 0 0 8px; }
.asst-working { width: 7px; height: 7px; flex: none; border-radius: 999px;
  background: var(--text-faint); }
@media (prefers-reduced-motion: no-preference) {
  .asst-working { animation: asst-breathe 1.4s var(--ease-smooth) infinite; }
}
@keyframes asst-breathe { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.asst-prose p { margin: 0 0 8px; }
.asst-prose p:last-child { margin-bottom: 0; }
.asst-prose ul, .asst-prose ol { margin: 6px 0 8px; padding-left: 20px; }
.asst-prose li { margin-bottom: 3px; }
.asst-prose code { font-family: var(--font-counter); font-size: 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 4px; }

.asst-codes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.asst-code { display: inline-flex; flex-direction: column; gap: 1px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; padding: 6px 10px; text-decoration: none;
  color: var(--text); }
.asst-code:hover { border-color: var(--accent); }
.asst-code-num { font-family: var(--font-counter); font-size: 13px;
  font-weight: 600; }
.asst-code-title { font-size: 12px; color: var(--text-dim); }
.asst-legal { margin-top: 8px; }
.asst-legal .decision-legal-notice { margin: 0; font-size: 12px; }

/* thumbs on a finished answer (21.6): quiet until used, and always the same
   height so a click never moves the bubble under the reader's cursor */
.asst-rate { margin-top: 10px; }
.asst-rate-row { display: flex; align-items: center; gap: 4px; min-height: 26px; }
.asst-rate-label { flex: 1; min-width: 0; font-size: 12px;
  color: var(--text-faint); }
.asst-rate-btn { flex: none; display: inline-flex; align-items: center;
  justify-content: center; width: 26px; height: 26px; padding: 0;
  cursor: pointer; background: transparent; color: var(--text-faint);
  border: 1px solid transparent; border-radius: 999px; }
.asst-rate-btn:hover { color: var(--accent); background: var(--surface); }
.asst-rate-btn.is-active { color: var(--accent); background: var(--accent-light);
  border-color: var(--accent); }
.asst-rate-comment { display: flex; gap: 6px; margin-top: 8px; }
.asst-rate-input { flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: 13px; line-height: 1.4;
  color: var(--text); background: var(--bg); border: 1px solid var(--border);
  border-radius: 9px; padding: 6px 10px; }
.asst-rate-input:focus { outline: none; border-color: var(--accent);
  box-shadow: var(--ring-accent); }
.asst-rate-save { flex: none; cursor: pointer; background: var(--surface);
  color: var(--accent); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.asst-rate-save:hover { border-color: var(--accent);
  background: var(--accent-light); }

.asst-cites, .asst-actions { display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; margin-top: 10px; }
.asst-cites-label { font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-faint); }
.asst-cite, .asst-action, .asst-suggestion {
  display: inline-block; font-family: var(--font-body); font-size: 13px;
  font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px;
  background: var(--surface); color: var(--accent); }
.asst-cite:hover, .asst-action:hover, .asst-suggestion:hover:not(:disabled) {
  border-color: var(--accent); background: var(--accent-light); }
.asst-suggestion:disabled { opacity: .5; cursor: default; }

.asst-suggestions { flex: none; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 16px 0; }
.asst-suggestions form { display: contents; }

.asst-input { flex: none; display: flex; gap: 8px; align-items: flex-end;
  padding: 12px 16px; margin-top: 12px; background: var(--surface);
  border-top: 1px solid var(--border); }
.asst-textarea { flex: 1; min-width: 0; resize: none;
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: var(--text); background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 11px; }
.asst-textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: var(--ring-accent); }
.asst-textarea:disabled { opacity: .6; }
.asst-send { flex: none; background: var(--accent); color: var(--white);
  border: none; border-radius: 10px; padding: 11px 15px; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; }
.asst-send:hover:not(:disabled) { background: var(--accent-hover); }
.asst-send:disabled { opacity: .5; cursor: default; }

.asst-foot { flex: none; padding: 0 16px 14px; }
.asst-escalate { margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border); }
.asst-escalate-lead { margin: 0 0 8px; font-size: 13px; color: var(--text-dim); }
.asst-escalate-form { display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px; }
.asst-escalate-form .asst-textarea { align-self: stretch; }
.asst-escalate-note { margin: 10px 0 0; font-size: 13px; line-height: 1.55;
  color: var(--text-dim); }
.asst-escalate-mail { color: var(--accent); font-weight: 600; }

/* 380px: the panel is the whole screen, so give the bubbles more of it */
@media (max-width: 420px) {
  .asst-thread { padding: 12px 12px 4px; }
  .asst-disclosure, .asst-suggestions, .asst-input, .asst-foot {
    padding-left: 12px; padding-right: 12px; }
  .asst-msg { max-width: 96%; }
}

/* ---------- supplier code confirmation (operator 2026-07-11) ---------- */
/* magic page: the legal notice shown whenever a code is put to a supplier */
.sp-legal-notice {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
/* magic page: the confirm-a-code question */
.sp-confirm-code {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1.5px solid var(--accent);
  background: var(--accent-tint);
  border-radius: 12px;
  margin-bottom: 14px;
}
.sp-confirm-code-num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.sp-confirm-code-label { font-size: 14px; color: var(--text-dim); line-height: 1.4; }
.swatch-letter.sp-confirm-yes { color: var(--accent); background: var(--accent-light); }
.swatch-letter.sp-confirm-no { color: var(--warn); background: var(--warn-light); }
.sp-confirm-different {
  border-top: 1px dashed var(--border);
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* review card: supplier code-confirmation provenance */
.rq-supplier-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.45;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.rq-supplier-note.confirmed { background: var(--accent-light); color: var(--accent-hover); }
.rq-supplier-note.proposed,
.rq-supplier-note.remark { background: var(--warn-light); color: var(--warn-text); flex-direction: column; }
.rq-supplier-icon { font-weight: 700; }
.rq-supplier-line { font-weight: 600; margin-bottom: 4px; }
.rq-supplier-remark { font-style: italic; color: var(--text-dim); }
.code-block-supplier { border-color: var(--warn); background: var(--warn-light); margin-bottom: 10px; }
.behalf-different { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }

/* ── Bulk accept (improvement idea 3) ──────────────────────────────── */
/* Merchant-facing decision notice (directive 8), shared partial. */
.decision-legal-notice {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 16px 0 0;
}

/* Entry-point banner at the top of the review queue. */
.bulk-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
  padding: 14px 18px;
  background: linear-gradient(0deg, var(--accent-tint), var(--accent-tint)),
    var(--surface);
  border: 1px solid var(--accent-light);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow .2s;
}
.bulk-banner:hover { box-shadow: var(--shadow-card); }
.bulk-banner-icon { color: var(--accent); font-size: 18px; flex-shrink: 0; }
.bulk-banner-text { flex: 1; font-size: 14px; font-weight: 500; }
.bulk-banner-go { font-size: 14px; font-weight: 700; color: var(--accent);
  white-space: nowrap; }

/* The bulk page. */
.bulk-wrap { max-width: 720px; margin: 0 auto; padding: 24px 24px 60px; }
.bulk-head { margin-bottom: 24px; }
.bulk-back { font-size: 14px; font-weight: 600; color: var(--accent);
  text-decoration: none; }
.bulk-back:hover { text-decoration: underline; }
.bulk-title { font-family: var(--font-display); font-size: 28px;
  font-weight: 600; margin: 10px 0 8px; }
.bulk-sub { font-size: 14px; color: var(--text-dim); line-height: 1.6;
  max-width: 620px; }

.bulk-groups { display: flex; flex-direction: column; gap: 16px; }
.bulk-group { animation: fadeUp .4s var(--ease-spring) both; }
.bulk-group-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.bulk-group-thumb { width: 48px; height: 48px; border-radius: 8px;
  object-fit: cover; flex-shrink: 0; background: var(--surface-alt); }
.bulk-group-code { flex: 1; min-width: 180px; }
.bulk-group-chips { display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; }
.bulk-group-meta { font-size: 14px; font-weight: 600; color: var(--text-dim);
  margin: 14px 0 0; }
.bulk-group-titles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
  align-items: center; }
.bulk-group-more { font-size: 13px; color: var(--text-faint); font-weight: 600; }
.bulk-group-form { margin-top: 18px; }
.bulk-accept-btn { width: 100%; }

.bulk-empty { max-width: 460px; margin: 0 auto; padding: 80px 24px;
  text-align: center; animation: fadeUp .5s var(--ease-spring); }
.bulk-empty-icon { width: 60px; height: 60px; border-radius: 16px;
  background: var(--accent-light); color: var(--accent); font-size: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px; }
.bulk-empty-title { font-family: var(--font-display); font-size: 22px;
  font-weight: 600; margin-bottom: 8px; }
.bulk-empty-sub { font-size: 14px; color: var(--text-dim); line-height: 1.6;
  margin-bottom: 22px; }

@media (max-width: 560px) {
  .bulk-wrap { padding: 16px 14px 40px; }
  .bulk-title { font-size: 24px; }
  .bulk-group-chips { flex-direction: row; align-items: center;
    width: 100%; }
  .bulk-banner { flex-wrap: wrap; }
  .bulk-banner-text { flex-basis: 100%; }
}

/* ---------- paste-a-URL import (single product from a link) ---------- */
.url-result { gap: 12px; }
.url-code-card { display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 14px 20px; background: var(--accent-light);
  border-radius: 12px; }
.url-code { font-family: var(--font-counter); font-size: 22px; font-weight: 600;
  color: var(--accent-hover); letter-spacing: .5px; }
.url-code-desc { font-size: 14px; color: var(--text); text-align: center; }
.url-code-note { font-size: 13px; color: var(--text-dim); }
.url-result-actions { display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; justify-content: center; }
.url-result-actions form { margin: 0; }
/* Public pre-signup classifier (spec onboarding/01 P1). Mobile-first (works
   at 380px), tokens only, no new colours or fonts. Reuses .card / .btn-primary
   / .url-code-card / .trust-band from the shared component set. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* htmx injects this rule when loaded; define it too so a no-JS visitor never
   sees a permanently-spinning indicator (the form still works via full POST). */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

.public-shell {
  max-width: 620px;
  margin: 0 auto;
  padding: 28px 16px 56px;
}
.public-lang {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  font-size: 14px;
  margin-bottom: 6px;
}
.public-lang a { color: var(--text-dim); text-decoration: none; }
.public-lang a:hover { color: var(--accent); }
.public-lang-current { color: var(--text); font-weight: 600; }
.public-hero { text-align: center; margin-bottom: 22px; }
.public-logo {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--text);
  text-decoration: none;
  margin-bottom: 18px;
}
.public-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 10px;
}
.public-lead {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 46ch;
}
.public-panel { display: flex; flex-direction: column; gap: 16px; }

.public-try { display: flex; flex-direction: column; gap: 8px; }
.public-try .field-label { margin-top: 4px; }
.public-or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-faint);
  font-size: 14px;
  margin: 4px 0;
}
.public-or::before, .public-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.public-submit {
  width: 100%;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* The shared classify panel (templates/partials/classify_panel.html), which
   the marketing site renders inside its own .classifier card. On this app
   surface there is no such card, so the panel itself IS the card, and it gains
   the link/description tabs /try/ never had, restyled to the app design system.
   Tokens only, no new colors or fonts. */
.classify-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}
.tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 10px;
  background: var(--surface-alt);
}
.tab {
  flex: 1;
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  color: var(--text-dim);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tab.active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.field { position: relative; }
.public-submit-label { display: inline-flex; align-items: center; gap: 8px; }
.arrow { font-size: 18px; transition: transform .15s ease; }
.btn-primary:hover .arrow { transform: translateX(3px); }
.privacy-line {
  margin: 8px 0 0;
  color: var(--text-faint);
  font-size: 12px;
  text-align: center;
}

.public-result { display: flex; flex-direction: column; gap: 12px;
  overflow-wrap: anywhere; }
/* let flex items shrink so long words/codes wrap inside the card on mobile
   instead of pushing the content wider than the card. `anywhere` (not
   break-word) is required: it shrinks the flex item's min-content width. */
.public-result > * { min-width: 0; max-width: 100%; }
.public-why, .public-why > p, .public-rejected li { min-width: 0;
  overflow-wrap: anywhere; }
.public-result .url-code-card { margin: 4px 0 0; }
.public-why {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
}
.public-why > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}
.public-why > p { margin: 8px 0 0; color: var(--text-dim); }
.public-rejected { margin: 10px 0 0; padding-left: 0; list-style: none; }
.public-rejected li {
  color: var(--text-dim);
  padding: 4px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.public-rejected-code {
  font-family: var(--font-counter);
  color: var(--text);
  font-weight: 600;
}
.public-scenario { margin-top: 8px; }
.public-options { margin: 4px 0; padding-left: 18px; }
.public-options li { color: var(--text-dim); font-size: 14px; line-height: 1.6; }
/* clickable answers to a /try/ question (tweak A2) */
.public-choices { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.public-choices form { margin: 0; }
.public-choice {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 14px; font-size: 14px; font-weight: 500;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .12s, color .12s;
}
.public-choice:hover { border-color: var(--accent); color: var(--accent); }
.public-choices-alt { font-size: 14px; margin-top: 2px; }
.public-sample-note {
  color: var(--text-faint);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.public-cta { width: 100%; margin-top: 4px; }
.public-cta-block { display: flex; flex-direction: column; gap: 6px; }
.public-cta-block > * { min-width: 0; max-width: 100%; }
.public-result-error {
  border-left: 3px solid var(--warn);
  background: var(--warn-light);
  color: var(--warn-text);
}
.public-result-error p { margin: 0; }

@media (min-width: 560px) {
  .public-shell { padding-top: 44px; }
  .public-h1 { font-size: 32px; }
  .public-submit, .public-cta { width: auto; align-self: flex-start; }
}

/* ============================================================
   MARKETING SITE, classify tool (apps/site).
   Thin wrapper that centres the embeddable classifier within a marketing
   section; the tool card + form + result states all reuse the .public-*
   component styles above. Tokens only (no new colors/fonts/radii), 380px-safe.
   ============================================================ */
.site-classify {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.site-classify-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
  text-align: center;
}

/* ============================================================
   CODE EXPLORER, public /codes/ surface (spec 16).
   Extends the .public-* external-page shell; all values via tokens.css.
   Mobile-first, works at 380px.
   ============================================================ */
.cx-shell { max-width: 780px; }
.cx-logo { margin-bottom: 14px; }

/* breadcrumb */
.cx-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 14px; margin-bottom: 18px;
}
.cx-crumb {
  color: var(--text-dim); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.cx-crumb:hover { color: var(--accent); }
.cx-crumb-current { color: var(--text); font-weight: 600; }
.cx-crumb-sep { color: var(--text-faint); }

/* node header */
.cx-head { margin-bottom: 22px; }
.cx-head-root { text-align: center; }
.cx-code {
  font-family: var(--font-counter);
  font-size: 30px; font-weight: 700; letter-spacing: .5px;
  color: var(--text); margin: 0 0 12px; overflow-wrap: anywhere;
}
.cx-h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 26px; line-height: 1.15; color: var(--text); margin: 0 0 10px;
}
.cx-lead {
  color: var(--text-dim); font-size: 15px; line-height: 1.5;
  margin: 0 auto; max-width: 48ch;
}
.cx-tariff-label {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 4px;
}
.cx-tariff-text {
  font-size: 16px; line-height: 1.55; color: var(--text); margin: 0;
  overflow-wrap: anywhere;
}
/* ── Tier B plain-language layer (spec 16.9) ────────────────────────────
   The friendly plain title / summary / everyday examples, rendered ABOVE the
   official Danish tariff text (which never disappears). Only present when a
   CodeEnrichment row exists (graceful absence). Tokens only, 380px-first. */
.cx-plain {
  background: var(--accent-light); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; margin: 0 0 16px;
}
.cx-plain-title {
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  line-height: 1.25; color: var(--text); margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.cx-plain-summary {
  font-size: 14px; line-height: 1.55; color: var(--text); margin: 0;
}
.cx-plain-ex-label {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--accent-hover); margin: 12px 0 4px;
}
.cx-plain-ex {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cx-plain-ex-item {
  font-size: 14px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
  overflow-wrap: anywhere;
}

.cx-lifecycle { font-size: 14px; color: var(--text-faint); margin: 10px 0 0; }
.cx-retired-banner {
  border-left: 3px solid var(--warn); background: var(--warn-light);
  color: var(--warn-text); border-radius: 8px; padding: 10px 14px;
  font-size: 14px; margin: 0 0 14px;
}

/* children list */
.cx-children-wrap { margin-top: 8px; }
.cx-children-h {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--text); margin: 0 0 12px;
}
.cx-children { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.cx-child-link {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
  padding: 12px 14px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; transition: border-color .12s, box-shadow .12s;
}
.cx-child-link:hover {
  border-color: var(--accent); box-shadow: var(--shadow-card);
}
.cx-child-code {
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
  color: var(--accent); white-space: nowrap; flex-shrink: 0;
  min-width: 84px; letter-spacing: .3px;
}
.cx-child-title {
  flex: 1 1 7em; min-width: 7em; color: var(--text-dim); font-size: 14px;
  line-height: 1.45; overflow-wrap: anywhere;
}
.cx-retired {
  display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 600;
  color: var(--text-faint); background: var(--surface-alt);
  padding: 2px 8px; border-radius: 6px; white-space: nowrap;
}
.cx-child-empty {
  color: var(--text-faint); font-size: 14px; font-style: italic;
  padding: 12px 2px;
}

/* root: sections + chapters */
.cx-section-block { margin-top: 26px; }
.cx-section-title {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--text-dim); margin: 0 0 12px; line-height: 1.35;
}
.cx-chapter-grid { }
@media (min-width: 620px) {
  .cx-chapter-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
}

/* kn8 notes */
.cx-notes { display: flex; flex-direction: column; gap: 16px; margin: 8px 0 20px; }
.cx-note {
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
}
.cx-note-h {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--text); margin: 0 0 6px;
}
.cx-note-body { font-size: 14px; line-height: 1.55; color: var(--text-dim);
  margin: 0; overflow-wrap: anywhere; }
.cx-ebti { font-size: 14px; margin: 4px 0 0; }
.cx-ebti a { color: var(--accent); text-decoration: underline; }
.cx-ebti a:hover { color: var(--accent-hover); }

/* classify CTA + 404 */
.cx-cta {
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--border);
  text-align: center;
}
.cx-cta-lead { color: var(--text-dim); font-size: 15px; margin: 0 0 12px; }
.cx-cta-btn { }
.cx-notfound { text-align: center; padding: 40px 0; }

/* ── duty in navigation (spec 16.3) ─────────────────────────────────────
   Chips on child rows / fork tables, the node's own range, the KN8 duty
   block, the estimate notice, and the "where the rate changes most" cliffs.
   Tokens only; every figure earns its asterisk into .cx-duty-note. */
.cx-duty {
  display: inline-block; margin-left: auto; flex-shrink: 0; white-space: nowrap;
  font-family: var(--font-counter); font-weight: 700; font-size: 13px;
  padding: 2px 8px; border-radius: 6px; letter-spacing: .2px;
  align-self: center;
}
.cx-duty-rate, .cx-duty-zero {
  color: var(--accent-hover); background: var(--accent-light);
}
.cx-duty-specific { color: var(--warn-text); background: var(--warn-light); }
.cx-duty-none {
  color: var(--text-faint); background: var(--surface-alt); font-weight: 600;
}
.cx-duty-star { font-size: 12px; color: var(--text-faint); margin-left: 1px; }

.cx-node-duty {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 12px 0 0; font-size: 14px; color: var(--text-dim);
}
.cx-node-duty .cx-duty { margin-left: 0; }

/* KN8 duty block */
.cx-duty-block {
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; margin: 8px 0 20px;
}
.cx-duty-block-h {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: var(--text); margin: 0 0 10px;
}
.cx-duty-figure { font-size: 18px; font-weight: 600; color: var(--text); margin: 0; }
.cx-duty-figure .cx-duty-star { font-size: 12px; }
.cx-duty-norate { font-size: 15px; color: var(--text-dim); margin: 0; }
.cx-duty-specific-text {
  font-family: var(--font-counter); font-size: 14px; color: var(--text-dim);
  margin: 8px 0 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere;
}
.cx-duty-unit { font-size: 14px; color: var(--text-dim); margin: 10px 0 0; }
.cx-duty-block .cx-duty-note { margin-top: 14px; }

/* the single estimate notice + the withheld line */
.cx-duty-note {
  font-size: 13px; color: var(--text-faint); line-height: 1.5;
  margin: 22px 0 0; padding-top: 12px; border-top: 1px dashed var(--border);
}
.cx-duty-note .cx-duty-star { font-size: 12px; }
.cx-duty-unavailable {
  font-size: 14px; color: var(--text-faint); font-style: italic; margin: 18px 0 0;
}

/* duty cliffs: where the rate changes most (chapter pages) */
.cx-cliffs { margin-top: 28px; }
.cx-cliffs-h {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--text); margin: 0 0 4px;
}
.cx-cliffs-lead { font-size: 14px; color: var(--text-dim); margin: 0 0 12px; }
.cx-cliffs-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cx-cliffs-link {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
  padding: 12px 14px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; transition: border-color .12s, box-shadow .12s;
}
.cx-cliffs-link:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }
.cx-cliffs-range {
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
  color: var(--warn-text); background: var(--warn-light);
  padding: 2px 8px; border-radius: 6px; white-space: nowrap;
  flex-shrink: 0; min-width: 84px; text-align: center;
}
.cx-cliffs-code {
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
  color: var(--accent); white-space: nowrap; flex-shrink: 0;
}
.cx-cliffs-title {
  flex: 1; min-width: 0; color: var(--text-dim); font-size: 14px;
  line-height: 1.45; overflow-wrap: anywhere;
}

/* ── export to Norway (2026-08-03) ──────────────────────────────────────
   What Norwegian customs charges on the same goods, on HS6 + KN8 pages.
   Tokens only, 380px-first: the rows are flex columns that become two
   columns once there is room, never a fixed table. */
.cx-norway { margin: 0 0 30px; }
.cx-norway-head { margin-bottom: 14px; }
.cx-norway-h {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--text); margin: 0 0 4px;
}
.cx-norway-lead { font-size: 14px; color: var(--text-dim); margin: 0; }
.cx-norway-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cx-norway-row {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 12px;
}
.cx-norway-code {
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
  color: var(--accent); margin: 0 0 2px; white-space: nowrap;
}
.cx-norway-desc {
  font-size: 14px; line-height: 1.45; color: var(--text); margin: 0;
  overflow-wrap: anywhere;
}
.cx-norway-rates {
  display: flex; flex-direction: column; gap: 8px; margin: 0;
}
.cx-norway-rate dt {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 2px;
}
.cx-norway-rate dd {
  font-size: 15px; font-weight: 600; color: var(--text); margin: 0;
  overflow-wrap: anywhere;
}
.cx-norway-rate dd small {
  display: block; margin-top: 2px; font-size: 13px; font-weight: 400;
  line-height: 1.45; color: var(--text-dim);
}
.cx-norway-foot {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.cx-norway-note, .cx-norway-meta, .cx-norway-source {
  font-size: 13px; line-height: 1.5; color: var(--text-faint); margin: 0;
}
/* the licence asks for real links, and a link has to read as one */
.cx-norway-source a { color: var(--accent); text-decoration: underline; }
@media (min-width: 640px) {
  .cx-norway-row {
    flex-direction: row; align-items: flex-start; gap: 20px;
  }
  .cx-norway-id { flex: 1; min-width: 0; }
  .cx-norway-rates {
    flex-direction: row; gap: 24px; flex-shrink: 0; min-width: 300px;
  }
  .cx-norway-rate { flex: 1; min-width: 130px; }
}

/* ── export to the United Kingdom (2026-08-03) ──────────────────────────
   The sibling of the Norway section above, same shape and same tokens: what
   UK customs charges on the same goods, on HS6 + KN8 pages. The extra piece
   is the fold, a native <details> for the codes that carry dozens of UK
   lines. 380px-first, no fixed table anywhere. */
.cx-uk { margin: 0 0 30px; }
.cx-uk-head { margin-bottom: 14px; }
.cx-uk-h {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--text); margin: 0 0 4px;
}
.cx-uk-lead { font-size: 14px; color: var(--text-dim); margin: 0; }
.cx-uk-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cx-uk-row {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 12px;
}
.cx-uk-code {
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
  color: var(--accent); margin: 0 0 2px;
}
.cx-uk-desc {
  font-size: 14px; line-height: 1.45; color: var(--text); margin: 0;
  overflow-wrap: anywhere;
}
.cx-uk-rates {
  display: flex; flex-direction: column; gap: 8px; margin: 0;
}
.cx-uk-rate dt {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 2px;
}
.cx-uk-rate dd {
  font-size: 15px; font-weight: 600; color: var(--text); margin: 0;
  overflow-wrap: anywhere;
}
.cx-uk-rate dd small {
  display: block; margin-top: 2px; font-size: 13px; font-weight: 400;
  line-height: 1.45; color: var(--text-dim);
}
.cx-uk-more { margin-top: 8px; }
.cx-uk-more > .cx-uk-list { margin-top: 8px; }
.cx-uk-more-summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent);
  padding: 8px 2px;
}
.cx-uk-foot {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.cx-uk-note, .cx-uk-meta, .cx-uk-source {
  font-size: 13px; line-height: 1.5; color: var(--text-faint); margin: 0;
}
.cx-uk-source a { color: var(--accent); text-decoration: underline; }
@media (min-width: 640px) {
  .cx-uk-row {
    flex-direction: row; align-items: flex-start; gap: 20px;
  }
  .cx-uk-id { flex: 1; min-width: 0; }
  .cx-uk-rates {
    flex-direction: row; gap: 24px; flex-shrink: 0; min-width: 300px;
  }
  .cx-uk-rate { flex: 1; min-width: 130px; }
}

/* ── trade measures to be aware of (2026-08-03) ─────────────────────────
   Which KINDS of EU measure sit on this code beyond the ordinary duty, on
   the 8-digit pages. Same card language as the sections above (surface-alt
   panel, dashed foot, tokens only, 380px-first), with one addition: a left
   accent stripe whose colour says how much attention the category wants,
   warn for the two that cost money or stop the goods, accent for the two
   that are opportunity or bookkeeping. Cards hold NO figure by design, so
   nothing here takes the estimate notice's asterisk. */
.cx-measures { margin: 0 0 30px; }
.cx-measures-head { margin-bottom: 14px; }
.cx-measures-h {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--text); margin: 0 0 4px;
}
.cx-measures-lead {
  font-size: 14px; line-height: 1.5; color: var(--text-dim); margin: 0;
}
.cx-measures-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cx-measure-card {
  padding: 14px 16px; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 12px;
  border-left: 3px solid var(--accent);
}
.cx-measure-trade_defence, .cx-measure-prohibition_restriction {
  border-left-color: var(--warn);
}
.cx-measure-h {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--text); margin: 0 0 6px;
}
.cx-measure-copy {
  font-size: 14px; line-height: 1.5; color: var(--text); margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.cx-measure-docs {
  margin: 0 0 6px; padding: 0 0 0 18px;
  display: flex; flex-direction: column; gap: 3px;
}
.cx-measure-doc {
  font-size: 14px; line-height: 1.45; color: var(--text-dim);
  overflow-wrap: anywhere;
}
.cx-measure-scope {
  font-size: 13px; line-height: 1.5; color: var(--text-faint); margin: 0 0 6px;
}
.cx-measure-link {
  display: inline-block; font-size: 14px; font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.cx-measure-link:hover { color: var(--accent-hover); text-decoration: underline; }
.cx-measures-meta {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: 13px; line-height: 1.5; color: var(--text-faint);
}

/* ── decision path + fork table + residual (spec 16.4) ──────────────────
   The annotated ancestry, the sibling comparison, and the catch-all links.
   Tokens only, 380px-first (flex rows, no fixed table). */
.cx-path { margin: 6px 0 22px; }
.cx-path-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.cx-path-step {
  position: relative; padding: 6px 0 6px 18px;
  border-left: 2px solid var(--border);
}
.cx-path-step::before {
  content: ""; position: absolute; left: -5px; top: 12px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--border);
}
.cx-path-current { border-left-color: var(--accent); }
.cx-path-current::before { background: var(--accent); }
.cx-path-context { opacity: .75; }
.cx-path-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.cx-path-code {
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
a.cx-path-code:hover { color: var(--accent-hover); text-decoration: underline; }
.cx-path-current .cx-path-code { color: var(--text); }
.cx-path-title { font-size: 14px; color: var(--text-dim); overflow-wrap: anywhere; }
.cx-path-fork { font-size: 13px; color: var(--text-faint); margin: 2px 0 0; }
.cx-path-q { font-size: 14px; color: var(--text-dim); margin: 4px 0 0; font-style: italic; }

.cx-fork { margin-top: 28px; }
.cx-fork-h {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--text); margin: 0 0 6px;
}
.cx-fork-delta-note {
  font-size: 14px; font-weight: 600; color: var(--warn-text);
  background: var(--warn-light); border-radius: 8px; padding: 8px 12px;
  margin: 0 0 12px;
}
.cx-fork-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cx-fork-link {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
  padding: 12px 14px; text-decoration: none; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .12s, box-shadow .12s;
}
a.cx-fork-link:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }
.cx-fork-link-here { background: var(--accent-light); border-color: var(--accent); }
.cx-fork-high .cx-fork-link { border-left: 3px solid var(--warn); }
.cx-fork-low .cx-fork-link { border-left: 3px solid var(--accent); }
.cx-fork-code {
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
  color: var(--accent); white-space: nowrap; flex-shrink: 0;
  min-width: 84px; letter-spacing: .3px;
}
.cx-fork-link-here .cx-fork-code { color: var(--accent-hover); }
.cx-fork-title {
  flex: 1 1 7em; min-width: 7em; color: var(--text-dim); font-size: 14px;
  line-height: 1.45; overflow-wrap: anywhere;
}
.cx-fork-youare {
  display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700;
  color: var(--accent-hover); text-transform: uppercase; letter-spacing: .3px;
}

.cx-residual {
  margin: 4px 0 20px; background: var(--warn-tint);
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
.cx-residual-lead { font-size: 14px; color: var(--text); margin: 0 0 10px; line-height: 1.5; }
.cx-residual-note { font-size: 14px; color: var(--text-dim); margin: 0 0 10px; }
.cx-residual-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cx-residual-link {
  display: flex; align-items: baseline; gap: 10px; text-decoration: none;
  padding: 6px 8px; border-radius: 8px;
}
.cx-residual-link:hover { background: var(--surface); }
.cx-residual-code {
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
  color: var(--accent); white-space: nowrap; flex-shrink: 0;
}
.cx-residual-title {
  flex: 1; min-width: 0; color: var(--text-dim); font-size: 14px;
  overflow-wrap: anywhere;
}

/* ── related-codes panel (spec 16.5) ────────────────────────────────────
   Typed edges (legal_ref / similar / confused) as grouped, linked blocks.
   Tokens only, 380px-first (flex rows). */
.cx-rel { margin-top: 28px; display: flex; flex-direction: column; gap: 24px; }
.cx-rel-h {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--text); margin: 0 0 8px;
}
.cx-rel-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cx-rel-link {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
  padding: 12px 14px; text-decoration: none; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .12s, box-shadow .12s;
}
.cx-rel-link:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }
.cx-rel-code {
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
  color: var(--accent); white-space: nowrap; flex-shrink: 0;
  min-width: 84px; letter-spacing: .3px;
}
.cx-rel-title {
  flex: 1 1 7em; min-width: 7em; color: var(--text-dim); font-size: 14px;
  line-height: 1.45; overflow-wrap: anywhere;
}
.cx-rel-note {
  font-size: 14px; color: var(--text-faint); line-height: 1.5;
  margin: 4px 0 0 4px;
}

/* ── semantic search (spec 16.6) ────────────────────────────────────────
   A plain GET form (header-compact + page-prominent) and the result list.
   Tokens only, 380px-first. The honeypot is removed from layout + a11y tree. */
.cx-hp { position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; }
.cx-search-form { margin: 0; }
.cx-search-header { width: 100%; margin: 10px 0 14px; }
.cx-search-page { margin: 4px 0 26px; }
.cx-search-label { position: absolute; left: -9999px; }  /* visible label = placeholder */
.cx-search-row { display: flex; gap: 8px; align-items: stretch; }
.cx-search-input {
  flex: 1; min-width: 0; font-family: var(--font-body); font-size: 15px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
}
.cx-search-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.cx-search-header .cx-search-input { font-size: 14px; padding: 8px 12px; }
.cx-search-btn { flex-shrink: 0; white-space: nowrap; }
.cx-search-header .cx-search-btn { padding-left: 16px; padding-right: 16px; }

.cx-search-results {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cx-search-link {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
  padding: 12px 14px; text-decoration: none; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .12s, box-shadow .12s;
}
.cx-search-link:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }
.cx-search-code {
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
  color: var(--accent); white-space: nowrap; flex-shrink: 0;
  min-width: 84px; letter-spacing: .3px;
}
.cx-search-body { flex: 1 1 8em; min-width: 8em; display: flex;
  flex-direction: column; gap: 2px; }
.cx-search-title { color: var(--text-dim); font-size: 14px; line-height: 1.45;
  overflow-wrap: anywhere; }
.cx-search-ancestry {
  font-family: var(--font-counter); font-size: 13px; color: var(--text-faint);
}
.cx-search-msg {
  font-size: 15px; color: var(--text-dim); line-height: 1.55; margin: 18px 0 0;
}

/* code-router results (2026-08-04): the exact hit the visitor typed leads the
   page, marked with the accent so it reads as "this is your code", and the
   ordinary rows below it carry a group heading ("Other codes under 8711 60"). */
.cx-search-exact { margin: 18px 0 0; }
.cx-search-exact-label {
  font-family: var(--font-counter); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin: 0;
}
.cx-search-exact .cx-search-results { margin-top: 6px; }
.cx-search-result-exact > .cx-search-link {
  border-color: var(--accent); background: var(--accent-tint);
  box-shadow: var(--ring-accent);
}
.cx-search-exact-note {
  font-size: 14px; color: var(--text-dim); line-height: 1.5; margin: 8px 0 0;
}
.cx-search-group {
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--text-dim); margin: 22px 0 0;
}

/* retired-code forward guidance (spec 16.6, AC2-retired) */
.cx-retired-guide {
  margin: 4px 0 22px; background: var(--warn-tint);
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
.cx-retired-guide-lead { font-size: 14px; color: var(--text); margin: 0 0 10px; line-height: 1.5; }
.cx-retired-guide-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cx-retired-guide-link {
  display: flex; align-items: baseline; gap: 10px; text-decoration: none;
  padding: 6px 8px; border-radius: 8px;
}
.cx-retired-guide-link:hover { background: var(--surface); }
.cx-retired-guide-code {
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
  color: var(--accent); white-space: nowrap; flex-shrink: 0;
}
.cx-retired-guide-title {
  flex: 1; min-width: 0; color: var(--text-dim); font-size: 14px;
  overflow-wrap: anywhere;
}

/* ============================================================
   CODE EXPLORER, redesigned landing + search framing (spec 16 refinement,
   per operator mock docs/codes-redesign.html). Extends the .public- and .cx-
   shell. Tokens only (no new colors/fonts/radii); the mock's Inter to DM Sans,
   Georgia to Fraunces, and every hex maps to the nearest existing token. The
   mock's decorative flourishes (radial glow, navy grid overlay) are dropped:
   components.css uses design tokens only, never raw colour literals.
   Mobile-first, 380px-safe.
   ============================================================ */

/* the landing/search widen the shared 780px shell to hold the 2-col hero +
   directory; every OTHER explorer page leaves this block empty and stays 780 */
.cxr-shell-wide { max-width: 1120px; padding-left: 20px; padding-right: 20px; }

.cxr-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cxr-jsonly { display: none; }              /* JS-only affordances: hidden with JS off */
.cxr-js .cxr-jsonly { display: flex; }
.cxr mark { padding: 0 2px; border-radius: 3px; color: inherit; background: var(--accent-light); }
.cxr a:focus-visible, .cxr button:focus-visible, .cxr summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── hero ──────────────────────────────────────────────────────────────── */
.cxr-hero { padding: 6px 0 36px; }
.cxr-hero-copy { min-width: 0; }
.cxr-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  color: var(--accent); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.cxr-eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; }
.cxr-h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 5vw, 58px); line-height: 1.05; letter-spacing: -.02em;
  color: var(--text); margin: 0 0 16px;
}
.cxr-lead {
  color: var(--text-dim); font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55;
  margin: 0 0 24px; max-width: 44ch;
}

/* big hero search field (page variant of _search_form) */
.cxr-searchbar { margin: 0; max-width: 640px; }
.cxr-search-field {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 44px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card);
  transition: border-color .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth);
}
.cxr-search-field:focus-within { border-color: var(--accent); box-shadow: var(--ring-accent); }
.cxr-search-icon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--accent);
}
.cxr-search-field .cx-search-input {
  flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; padding: 12px 2px; font-size: 16px; color: var(--text);
}
.cxr-search-field .cx-search-input:focus { outline: none; border: 0; box-shadow: none; }
.cxr-kbd {
  flex-shrink: 0; padding: 4px 9px; border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 7px; color: var(--text-faint);
  background: var(--surface-alt); font-family: var(--font-counter);
  font-size: 13px; font-weight: 700; line-height: 1;
}
.cxr-search-btn { flex-shrink: 0; }

/* ── overview card (mock navy → nearest brand-dark token, accent-hover) ─── */
.cxr-overview {
  padding: 24px; border-radius: 20px; color: var(--white);
  background: var(--accent-hover); box-shadow: var(--shadow-float);
}
.cxr-overview-kicker {
  margin: 0 0 16px; color: var(--accent-light); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.cxr-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cxr-metric { padding: 14px 8px; border: 1px solid var(--board-seam); border-radius: 12px; text-align: left; }
.cxr-metric strong {
  display: block; margin-bottom: 3px; font-family: var(--font-display);
  font-weight: 500; font-size: 26px; line-height: 1; color: var(--white);
  font-variant-numeric: tabular-nums;
}
.cxr-metric span { color: var(--accent-light); font-size: 12px; }

/* ── directory ─────────────────────────────────────────────────────────── */
.cxr-directory { padding: 4px 0 44px; }
.cxr-directory-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }

.cxr-sidebar { min-width: 0; }
.cxr-section-nav { display: none; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.cxr-section-nav-h {
  margin: 0 0 12px; font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.cxr-section-links { display: grid; gap: 2px; }
.cxr-section-link {
  display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center;
  min-height: 34px; padding: 5px 7px; border-radius: 8px; text-decoration: none;
  color: var(--text-dim); font-size: 12px; font-weight: 600;
}
.cxr-section-link:hover { color: var(--accent); background: var(--accent-light); }
.cxr-section-link b { color: var(--accent); font-size: 12px; letter-spacing: .04em; }
.cxr-section-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cxr-classify {
  margin-top: 12px; padding: 18px; border-radius: 16px; background: var(--warn-light);
  display: flex; flex-direction: column; gap: 12px;
}
.cxr-classify-copy strong {
  display: block; margin-bottom: 4px; font-family: var(--font-display);
  font-weight: 600; font-size: 17px; line-height: 1.2; color: var(--text);
}
.cxr-classify-copy p { margin: 0; color: var(--warn-text); font-size: 13px; line-height: 1.5; }
.cxr-classify-link { color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: none; }
.cxr-classify-link:hover { color: var(--accent-hover); }

.cxr-directory-main { min-width: 0; }
.cxr-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  min-height: 54px; margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cxr-result-count { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.4; }
.cxr-result-count strong { color: var(--text); font-weight: 700; }
.cxr-toolbar-actions { align-items: center; gap: 8px; }   /* display via .cxr-js */
.cxr-text-btn {
  min-height: 34px; padding: 0 10px; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--accent); background: transparent; font-size: 13px; font-weight: 600;
}
.cxr-text-btn:hover { background: var(--accent-light); }
.cxr-view-switch { display: flex; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.cxr-view-btn {
  width: 34px; height: 30px; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--text-faint); background: transparent; font-size: 14px; line-height: 1;
}
.cxr-view-btn.cxr-active { color: var(--text); background: var(--surface-alt); box-shadow: var(--shadow-card); }

/* sections (server-rendered <details>, open by default for no-JS browse) */
.cxr-sections { display: grid; gap: 12px; }
.cxr-section { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.cxr-section[open] { box-shadow: var(--shadow-card); }
.cxr-section-summary {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 24px; gap: 14px;
  align-items: center; min-height: 74px; padding: 13px 16px; cursor: pointer; list-style: none;
}
.cxr-section-summary::-webkit-details-marker { display: none; }
.cxr-roman {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px;
  color: var(--accent); background: var(--accent-light);
  font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .04em;
}
.cxr-section-head { min-width: 0; }
.cxr-section-head small {
  display: block; margin-bottom: 3px; color: var(--text-faint); font-size: 12px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.cxr-section-name {
  font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1.3;
  color: var(--text); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cxr-section-count {
  white-space: nowrap; padding: 5px 9px; border-radius: 999px; color: var(--text-dim);
  background: var(--surface-alt); font-size: 12px; font-weight: 700;
}
.cxr-chevron {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  color: var(--accent); background: var(--accent-light);
  transition: transform .18s var(--ease-smooth);
}
.cxr-section[open] .cxr-chevron { transform: rotate(180deg); }
.cxr-chapters { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0 16px 16px; }
.cxr-chapter {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 12px;
  align-items: start; min-height: 72px; padding: 13px; text-decoration: none;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  transition: transform .18s var(--ease-smooth), border-color .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth);
}
.cxr-chapter:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-float); }
/* the JS filter hides non-matching rows with [hidden]; the display rules above
   would otherwise win over the UA [hidden] { display:none } */
.cxr-chapter[hidden], .cxr-section[hidden] { display: none; }
.cxr-chapter-code {
  font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.cxr-chapter-title {
  display: -webkit-box; overflow: hidden; color: var(--text-dim); font-size: 13px;
  font-weight: 600; line-height: 1.45; overflow-wrap: anywhere;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.cxr-chapter-arrow { align-self: center; color: var(--accent); font-size: 16px; transition: transform .18s var(--ease-smooth); }
.cxr-chapter:hover .cxr-chapter-arrow { transform: translateX(3px); }
/* list view (JS toggle on .cxr-directory) */
.cxr-view-list .cxr-chapters { grid-template-columns: 1fr; }
.cxr-view-list .cxr-chapter { min-height: 0; }

/* empty state (shown by JS when a filter matches nothing) */
.cxr-empty { padding: 52px 24px; border: 1px dashed var(--border); border-radius: 16px; text-align: center; background: var(--surface); }
.cxr-empty-icon {
  display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 14px;
  border-radius: 14px; color: var(--accent); background: var(--accent-light);
}
.cxr-empty h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--text); }
.cxr-empty p { margin: 0 0 16px; color: var(--text-dim); }

/* search page reuses the hero framing (compact, centred, no directory) */
.cxr-hero-compact { text-align: center; padding: 6px 0 4px; }
.cxr-hero-compact .cxr-h1 { font-size: clamp(28px, 4vw, 42px); }
.cxr-hero-compact .cxr-lead { margin-left: auto; margin-right: auto; }
.cxr-hero-compact .cxr-searchbar { margin: 0 auto; }
.cxr-search-out { max-width: 720px; margin: 20px auto 0; }

/* ── responsive: 700px → 2-col chapters + toolbar; 980px → full 2-col ───── */
@media (min-width: 700px) {
  .cxr-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cxr-view-list .cxr-chapters { grid-template-columns: 1fr; }
}
@media (min-width: 980px) {
  .cxr-hero:not(.cxr-hero-compact) { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: end; }
  .cxr-directory-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 34px; }
  .cxr-section-nav { display: block; position: sticky; top: 16px; max-height: min(64vh, 560px); overflow: auto; scrollbar-width: thin; }
  .cxr-chapters { padding-left: 76px; }
}

/* ── small screens: keep the mock's density, extend down to 380px ──────── */
@media (max-width: 560px) {
  .cxr-section-summary { grid-template-columns: 42px minmax(0, 1fr) 22px; gap: 11px; min-height: 66px; padding: 12px; }
  .cxr-roman { width: 42px; height: 42px; border-radius: 11px; }
  .cxr-section-count { display: none; }
  .cxr-metric strong { font-size: 22px; }
  .cxr-toolbar { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .cxr-chapter, .cxr-chapter-arrow, .cxr-chevron, .cxr-search-field { transition: none; }
  .cxr-chapter:hover { transform: none; }
  .cxr-chapter:hover .cxr-chapter-arrow { transform: none; }
}

/* ============================================================
   CODE EXPLORER, redesigned detail pages (spec 16 refinement, per operator
   mock docs/code-51-redesign.html). Chapter / heading / HS6 pages get the
   humanized hero + rate card, journey stepper, filterable code browser,
   attention band (duty cliffs) and neighbour strip; the KN8 leaf reuses the
   hero + rate card in the narrow shell. Tokens only (mock navy -> the brand
   accent-hover dark, amber accents -> warn tokens, serif -> Fraunces); the
   mock's decorative grid/glow overlays are dropped (no raw colour literals).
   Mobile-first, 380px-safe, reduced-motion safe; with JS off everything is
   visible and expanded (the <details> fold-out is native HTML).
   ============================================================ */

/* ── hero: copy + rate card ────────────────────────────────────────────── */
.cxr-detail-hero { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 4px 0 26px; }
.cxr-detail-copy { min-width: 0; }
.cxr-detail-hero .cxr-h1 { font-size: clamp(30px, 4.6vw, 52px); margin-bottom: 14px; }
.cxr-detail-hero .cx-plain { max-width: 640px; }
.cxr-hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: 4px;
}
.cxr-official { min-width: 0; }
.cxr-official[open] { flex-basis: 100%; }
.cxr-official-summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 0 10px; border-radius: 9px; color: var(--accent); cursor: pointer;
  font-size: 14px; font-weight: 700; list-style: none;
}
.cxr-official-summary::-webkit-details-marker { display: none; }
.cxr-official-summary::after { content: "⌄"; font-size: 13px; }
.cxr-official[open] .cxr-official-summary::after { content: "⌃"; }
.cxr-official-summary:hover { background: var(--accent-light); }
.cxr-official-copy {
  margin: 6px 0 2px; padding: 14px 16px; max-width: 560px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-card);
}

.cxr-rate-card {
  padding: 24px; border-radius: 20px; color: var(--white);
  background: var(--accent-hover); box-shadow: var(--shadow-float);
  align-self: start;
}
.cxr-rate-kicker {
  margin: 0 0 14px; color: var(--accent-light); font-size: 12px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.cxr-rate-value {
  margin: 0 0 8px; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 4vw, 46px); line-height: 1; color: var(--white);
  overflow-wrap: anywhere;
}
.cxr-rate-value .cx-duty-star { font-size: 14px; color: var(--accent-light); }
.cxr-rate-none { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.25; }
.cxr-rate-copy { margin: 0 0 8px; color: var(--accent-light); font-size: 13px; line-height: 1.5; }
.cxr-rate-copy .cx-duty-star { color: var(--accent-light); }
.cxr-rate-specific-text { margin-bottom: 10px; }
.cxr-rate-card .cxr-rate-unavailable {
  color: var(--accent-light); margin: 0 0 8px; font-size: 14px;
}
.cxr-rate-meta {
  display: flex; gap: 10px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--board-seam);
}
.cxr-rate-meta span { flex: 1; min-width: 0; }
.cxr-rate-meta strong {
  display: block; color: var(--white); font-family: var(--font-counter);
  font-weight: 700; font-size: 16px; white-space: nowrap;
}
.cxr-rate-meta small { color: var(--accent-light); font-size: 12px; }

/* ── journey stepper (the decision path, re-skinned) ───────────────────── */
.cxr-journey {
  margin: 0 0 28px; padding: 18px; border: 1px solid var(--border);
  border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-card);
}
.cxr-journey-head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: end; gap: 10px 16px; margin-bottom: 14px;
}
.cxr-journey-h {
  margin: 0 0 4px; font-family: var(--font-display); font-weight: 600;
  font-size: 20px; color: var(--text);
}
.cxr-journey-lead { margin: 0; color: var(--text-dim); font-size: 13px; }
.cxr-journey-status {
  padding: 6px 10px; border-radius: 999px; color: var(--accent-hover);
  background: var(--accent-light); font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.cxr-journey-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.cxr-step {
  position: relative; min-height: 88px; padding: 14px 44px 14px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
}
.cxr-step-active { border-color: var(--warn); background: var(--warn-light); }
.cxr-step-kicker {
  display: block; margin-bottom: 6px; color: var(--text-faint);
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.cxr-step-code {
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
a.cxr-step-code:hover { color: var(--accent-hover); text-decoration: underline; }
.cxr-step-active .cxr-step-code { color: var(--text); }
.cxr-step-title {
  display: block; margin-top: 2px; color: var(--text); font-size: 14px;
  font-weight: 600; line-height: 1.35; overflow-wrap: anywhere;
}
.cxr-step .cx-path-fork { display: block; }
.cxr-step-check {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; color: var(--white);
  background: var(--accent); font-size: 12px; font-weight: 800;
}
.cxr-step-check-active { background: var(--warn); }

/* ── code browser: side card + head + rows ─────────────────────────────── */
.cxr-browser {
  display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start;
  margin: 0 0 30px; scroll-margin-top: 16px;
}
.cxr-help-card {
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 16px; color: var(--white);
  background: var(--accent-hover);
}
.cxr-help-icon {
  display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px;
  border-radius: 10px; color: var(--accent-hover); background: var(--accent-light);
  font-weight: 800;
}
.cxr-help-copy { min-width: 0; }
.cxr-help-copy strong {
  display: block; margin-bottom: 3px; font-family: var(--font-display);
  font-weight: 600; font-size: 16px; line-height: 1.25; color: var(--white);
}
.cxr-help-copy p { margin: 0; color: var(--accent-light); font-size: 13px; line-height: 1.5; }
.cxr-help-link {
  margin-left: auto; color: var(--accent-light); font-weight: 700;
  font-size: 14px; text-decoration: none; white-space: nowrap;
}
.cxr-help-link:hover { color: var(--white); }

.cxr-browser-main { min-width: 0; }
.cxr-browser-head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: end; gap: 12px 20px; margin-bottom: 14px;
}
.cxr-browser-title h2 {
  margin: 0 0 4px; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px); color: var(--text);
}
.cxr-browser-title p { margin: 0; color: var(--text-dim); font-size: 14px; }
.cxr-browser-search { flex: 1 1 260px; max-width: 380px; margin: 0; }
.cxr-browser-field { padding: 4px 6px 4px 40px; }
.cxr-browser-field .cx-search-input { padding: 9px 2px; font-size: 14px; }
.cxr-results-line { margin: 0 0 12px; color: var(--text-dim); font-size: 13px; }
.cxr-results-line strong { color: var(--text); font-weight: 700; }

.cxr-code-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cxr-code-item[hidden] { display: none; }
.cxr-code-row {
  display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr) auto 18px;
  gap: 8px 14px; align-items: center; min-height: 66px; padding: 12px 14px;
  text-decoration: none; border: 1px solid var(--border); border-radius: 13px;
  background: var(--surface);
  transition: transform .18s var(--ease-smooth), border-color .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth);
}
.cxr-code-row:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: var(--shadow-card); }
.cxr-code-num {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cxr-code-copy { min-width: 0; }
.cxr-code-title {
  display: block; color: var(--text-dim); font-size: 14px; font-weight: 600;
  line-height: 1.4; overflow-wrap: anywhere;
}
.cxr-code-row .cx-duty { margin-left: 0; min-width: 68px; text-align: center; }
.cxr-row-arrow { color: var(--accent); font-size: 15px; transition: transform .18s var(--ease-smooth); }
.cxr-code-row:hover .cxr-row-arrow { transform: translateX(3px); }
.cxr-empty h3 {
  margin: 0 0 8px; font-family: var(--font-display); font-weight: 600;
  font-size: 22px; color: var(--text);
}

/* ── attention band: the duty cliffs, dark ─────────────────────────────── */
.cxr-attention {
  margin: 0 0 30px; padding: 26px 24px; border-radius: 20px;
  color: var(--white); background: var(--accent-hover); box-shadow: var(--shadow-float);
}
.cxr-attention-eyebrow {
  margin: 0 0 8px; color: var(--accent-light); font-size: 12px;
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.cxr-attention-h {
  margin: 0 0 6px; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.1; color: var(--white);
}
.cxr-attention-lead { margin: 0 0 18px; color: var(--accent-light); font-size: 14px; max-width: 60ch; }
.cxr-attention-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cxr-attention-card {
  display: block; min-height: 132px; padding: 18px; text-decoration: none;
  border: 1px solid var(--board-seam); border-radius: 14px;
  transition: transform .18s var(--ease-smooth), border-color .18s var(--ease-smooth);
}
.cxr-attention-card:hover { transform: translateY(-2px); border-color: var(--accent-light); }
.cxr-attention-rate {
  display: inline-flex; margin-bottom: 14px; padding: 5px 9px; border-radius: 7px;
  color: var(--accent-hover); background: var(--accent-light);
  font-family: var(--font-counter); font-size: 12px; font-weight: 800;
}
.cxr-attention-rate .cx-duty-star { color: var(--accent-hover); }
.cxr-attention-code {
  display: block; margin-bottom: 4px; color: var(--white);
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
}
.cxr-attention-title {
  display: block; color: var(--accent-light); font-size: 12px; line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ── neighbour strip: previous / current / next at this level ──────────── */
.cxr-neighbours { margin: 0 0 30px; }
.cxr-neighbours-head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: end; gap: 10px 16px; margin-bottom: 14px;
}
.cxr-neighbours-h {
  margin: 0 0 4px; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(21px, 2.4vw, 27px); color: var(--text);
}
.cxr-neighbours-lead { margin: 0; color: var(--text-dim); font-size: 13px; }
.cxr-all-link { color: var(--accent); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cxr-all-link:hover { color: var(--accent-hover); }
.cxr-neighbour-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cxr-neighbour-card {
  display: block; min-height: 116px; padding: 16px; text-decoration: none;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
a.cxr-neighbour-card { transition: transform .18s var(--ease-smooth), border-color .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth); }
a.cxr-neighbour-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-card); }
.cxr-neighbour-current { border-color: transparent; background: var(--accent); box-shadow: var(--shadow-card); }
.cxr-neighbour-dir {
  display: block; margin-bottom: 10px; color: var(--text-faint); font-size: 12px;
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.cxr-neighbour-current .cxr-neighbour-dir { color: var(--accent-light); }
.cxr-neighbour-num {
  display: block; margin-bottom: 4px; color: var(--text);
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.cxr-neighbour-current .cxr-neighbour-num { color: var(--white); }
.cxr-neighbour-title {
  margin: 0; color: var(--text-dim); font-size: 13px; font-weight: 600;
  line-height: 1.45; overflow-wrap: anywhere;
}
.cxr-neighbour-current .cxr-neighbour-title { color: var(--accent-light); }
.cxr-neighbour-blank { display: none; border-style: dashed; background: transparent; }

/* on the redesigned detail pages the fork table / relations sit between two
   section headings: give them breathing room below (the shared .cx-fork /
   .cx-rel only set a top margin) */
.cxr-detail .cx-fork { margin-bottom: 30px; }
.cxr-detail .cx-rel { margin-bottom: 30px; }

/* ── search + not-found coherence polish ───────────────────────────────── */
.cxr-search-out .cx-search-link {
  border-radius: 13px;
  transition: transform .18s var(--ease-smooth), border-color .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth);
}
.cxr-search-out .cx-search-link:hover { transform: translateY(-1px); }
.cxr-notfound .cxr-h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 12px; }
.cxr-notfound-lead { margin: 0 auto 20px; max-width: 52ch; }

/* ── responsive: 700px -> multi-col cards; 980px -> hero + browser 2-col ── */
@media (min-width: 700px) {
  .cxr-journey-steps { grid-template-columns: repeat(2, 1fr); }
  .cxr-attention-grid { grid-template-columns: repeat(3, 1fr); }
  .cxr-neighbour-grid { grid-template-columns: 1fr 1.15fr 1fr; }
  .cxr-neighbour-blank { display: block; }
}
@media (min-width: 980px) {
  .cxr-shell-wide .cxr-detail-hero { grid-template-columns: minmax(0, 1fr) 330px; gap: 48px; align-items: center; }
  .cxr-journey-steps { grid-template-columns: repeat(3, 1fr); }
  .cxr-shell-wide .cxr-browser { grid-template-columns: 240px minmax(0, 1fr); gap: 34px; }
  .cxr-shell-wide .cxr-side { position: sticky; top: 16px; }
  .cxr-shell-wide .cxr-help-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 18px; }
  .cxr-shell-wide .cxr-help-link { margin-left: 0; }
}

/* ── small screens: keep the density, extend down to 380px ─────────────── */
@media (max-width: 560px) {
  .cxr-code-row { grid-template-columns: minmax(52px, auto) minmax(0, 1fr) 16px; gap: 4px 10px; }
  .cxr-code-num { grid-row: 1 / span 2; align-self: start; font-size: 17px; }
  .cxr-code-row .cx-duty { grid-column: 2; grid-row: 2; justify-self: start; }
  .cxr-row-arrow { grid-column: 3; grid-row: 1 / span 2; }
  .cxr-rate-card { padding: 18px; }
  .cxr-journey { padding: 14px; }
  .cxr-step { padding-right: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .cxr-code-row, .cxr-row-arrow, .cxr-attention-card, a.cxr-neighbour-card,
  .cxr-search-out .cx-search-link { transition: none; }
  .cxr-code-row:hover, .cxr-attention-card:hover, a.cxr-neighbour-card:hover,
  .cxr-search-out .cx-search-link:hover { transform: none; }
  .cxr-code-row:hover .cxr-row-arrow { transform: none; }
}

/* ── mobile audit fixes (2026-07-22): wrapping, stacking, tap targets.
   Findings 1-8 of the app-side mobile audit; scoped to small screens so the
   reviewed desktop layout is untouched. ── */
@media (max-width: 700px) {
  /* fork table (finding 1): the name gets the full row width and words wrap
     at word boundaries only; code + duty chip share the first line */
  .cx-fork-title { flex: 1 1 100%; order: 3; overflow-wrap: break-word; }
  .cx-fork-link { align-items: center; }
  .cx-fork-link .cx-duty { order: 2; margin-left: auto; }
  /* browser + relation rows (findings 3, 4): no mid-word breaks, chips sit
     at the top of tall rows instead of stranded mid-whitespace */
  .cxr-code-title, .cx-rel-title { overflow-wrap: break-word; }
  .cxr-code-row .cx-duty, .cx-rel-link .cx-duty { align-self: flex-start; margin-top: 2px; }
  /* detail-page classify callout (finding 2): stack like the landing card */
  .cxr-help-card { display: block; }
  .cxr-help-icon { margin: 0 0 10px; }
  .cxr-help-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; }
  /* "/" keyboard hint is meaningless on touch (finding 5) */
  .cxr-kbd { display: none; }
  /* micro-label legibility floor (finding 7) */
  .cxr-eyebrow, .cxr-overview-kicker, .cx-fork-youare,
  .cxr-step-num, .cxr-journey-status { font-size: 12px; }
  /* tap targets (finding 8) */
  .public-lang a, .public-lang-current { display: inline-block; padding: 10px 8px; }
  .cx-crumbs { line-height: 2.1; }
  .cx-crumb { display: inline-block; padding: 6px 2px; }
  .cxr-view-btn { width: 42px; height: 40px; }
  .cxr-text-btn { min-height: 40px; }
  .cxr-classify-link, .cxr-help-link, .cxr-all-link {
    display: inline-flex; align-items: center; min-height: 40px; }
}

/* ============================================================
   MY COLLECTION: the save button on the public /codes/ surface, the
   anonymous signup nudge, and the authenticated collection page (apps.ui +
   spec 16 caching constraint). Tokens only, 380px-safe. The public save
   button ships NEUTRAL in the cached HTML; _save_support.html hydrates it.
   ============================================================ */

/* ── the neutral save button (public pages) ──────────────────────────────
   Deliberately the ONLY warm-amber control on the codes surface (operator:
   the save action must stand apart from the rest of the content); green
   stays reserved for primary CTAs and links, so the bookmark reads at a
   glance. Warn-family tokens only, no new colors. */
.cxr-save {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  text-decoration: none; cursor: pointer; line-height: 1; white-space: nowrap;
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  color: var(--warn-text); background: var(--warn-light);
  border: 1.5px solid var(--warn); border-radius: 999px;
  padding: 8px 14px; min-height: 40px;
  transition: border-color .16s var(--ease-smooth),
              background .16s var(--ease-smooth), color .16s var(--ease-smooth),
              transform .16s var(--ease-spring), box-shadow .16s var(--ease-smooth);
}
.cxr-save:hover {
  border-color: var(--warn-text); transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.cxr-save:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }
.cxr-save-icon { display: inline-flex; color: var(--warn); }
.cxr-save-icon svg { display: block; }
.cxr-save-label { white-space: nowrap; }
/* saved: the chip fills solid amber with dark text + a filled bookmark
   (unambiguous, and never icon-only, per the operator; dark-on-amber keeps
   AA contrast where white-on-amber would not) */
.cxr-save-on {
  color: var(--text); background: var(--warn);
  border-color: var(--warn-text);
}
.cxr-save-on .cxr-save-icon { color: var(--text); }
.cxr-save-on .cxr-save-icon svg { fill: currentColor; stroke: currentColor; }
.cxr-save-busy { opacity: .55; pointer-events: none; }
/* prominent variant in the KN8 hero action row */
.cxr-save-hero { font-size: 14px; padding: 9px 16px; }

/* a KN8 child row now carries its code link + a save button, side by side.
   The [hidden] live-filter rule keeps winning (higher specificity). */
.cxr-code-item { display: flex; align-items: stretch; gap: 8px; }
.cxr-code-item > .cxr-code-row { flex: 1 1 auto; min-width: 0; }
.cxr-code-item > .cxr-save { align-self: center; }
/* a search result row: link + save button */
.cx-search-result { display: flex; align-items: stretch; gap: 8px; }
.cx-search-result > .cx-search-link { flex: 1 1 auto; min-width: 0; }
.cx-search-result > .cxr-save { align-self: center; }

/* ── the anonymous signup nudge (a small dismissible modal) ─────────────── */
.cxr-nudge-backdrop {
  position: fixed; inset: 0; z-index: 60; background: var(--overlay);
}
.cxr-nudge {
  position: fixed; z-index: 61; left: 50%; bottom: 24px;
  transform: translateX(-50%); width: calc(100% - 32px); max-width: 380px;
  padding: 22px 22px 20px; text-align: left; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-float);
}
.cxr-nudge[hidden], .cxr-nudge-backdrop[hidden] { display: none; }
.cxr-nudge-close {
  position: absolute; top: 10px; right: 12px; border: 0; background: none;
  color: var(--text-faint); font-size: 22px; line-height: 1; cursor: pointer;
  padding: 4px 8px; border-radius: 8px;
}
.cxr-nudge-close:hover { color: var(--text); background: var(--surface-alt); }
.cxr-nudge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 12px;
  color: var(--accent); background: var(--accent-light);
}
.cxr-nudge-title {
  margin: 0 0 8px; font-family: var(--font-display); font-weight: 600;
  font-size: 20px; line-height: 1.2; color: var(--text);
}
.cxr-nudge-body {
  margin: 0 0 16px; color: var(--text-dim); font-size: 14px; line-height: 1.55;
}
.cxr-nudge-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.cxr-nudge-login {
  color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: none;
  min-height: 40px; display: inline-flex; align-items: center;
}
.cxr-nudge-login:hover { text-decoration: underline; }

/* ── the authenticated saved-codes library (/collection/) ────────────────
   One card: a toolbar (search, level filter, sort) over compact rows, each
   row a code tile + title + hierarchy + saved date on the left and the EU
   duty chip + actions on the right. Search / filter / sort / compare / CSV
   are client-side over a json_script payload, so every control that needs
   JavaScript ships [hidden] and the script reveals it; the row itself, its
   duty chip and its remove form are plain server-rendered HTML. */
.collection-page .dash-sub a { color: var(--accent); font-weight: 600; white-space: nowrap; }
/* the JS-only affordances above: these carry a display of their own, so
   [hidden] has to win over it */
.collection-page [hidden] { display: none !important; }

/* the header rides the shared syspage family; the right slot holds the
   page's one action rather than a fact aside */
.sc-head { margin-bottom: 20px; }
.sc-head .intro { margin-bottom: 0; }
.sc-head-cta { display: inline-block; text-decoration: none; }

/* ── toolbar ── */
.sc-toolbar {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.sc-search { position: relative; display: flex; align-items: center; flex: 1 1 16em; min-width: 0; }
.sc-search-icon {
  position: absolute; left: 12px; display: inline-flex; pointer-events: none;
  color: var(--text-faint);
}
.sc-search-input { padding-left: 36px; padding-right: 38px; }
.sc-key {
  position: absolute; right: 10px; font-family: var(--font-body);
  font-size: 12px; font-weight: 600; color: var(--text-faint);
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 6px; pointer-events: none;
}
.sc-filters {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  background: var(--surface-alt); border-radius: 10px;
}
.sc-filter {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 6px 12px; border: 0; border-radius: 8px; background: transparent;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.sc-filter:hover { color: var(--text); }
.sc-filter.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
.sc-filter-n { font-size: 12px; font-weight: 700; color: var(--text-faint); }
.sc-filter.is-on .sc-filter-n { color: var(--accent); }
.sc-sort { display: inline-flex; align-items: center; }
.sc-sort .field-select { min-height: 40px; }
.sc-count { font-size: 13px; color: var(--text-dim); margin: 14px 0 2px; }

/* ── rows ── */
.sc-list { list-style: none; margin: 0; padding: 0; }
.sc-row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.sc-tile {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  gap: 4px; min-width: 6.5em; padding: 10px 12px; border-radius: 12px;
  background: var(--accent-light); text-align: center;
}
.sc-tile-code {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  color: var(--accent-hover); white-space: nowrap; letter-spacing: .2px;
}
.sc-tile-level { font-size: 12px; font-weight: 600; color: var(--accent-hover); }
.sc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sc-title {
  font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text);
  text-decoration: none; overflow-wrap: anywhere;
}
.sc-title:hover { color: var(--accent-hover); text-decoration: underline; }
.sc-crumbs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px;
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim);
}
.sc-sep { color: var(--text-faint); }
.sc-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin: 0; font-size: 13px; color: var(--text-faint);
}
.sc-retired { margin-left: 0; }
.sc-side {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
  gap: 10px;
}
.sc-duty { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sc-duty-label {
  font-size: 12px; font-weight: 600; line-height: 1.35; text-align: right;
  color: var(--text-faint); max-width: 13em;
}
.sc-actions {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 8px;
}
.sc-remove { margin: 0; }
.sc-compare {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--text-dim);
  cursor: pointer;
}
.sc-compare-check { width: 16px; height: 16px; accent-color: var(--accent); }
.sc-compare-check:disabled { cursor: not-allowed; }
.sc-compare-check:disabled + span { color: var(--text-faint); }

.sc-nomatch { padding: 32px 16px; }
.sc-nomatch .btn-sm { margin-top: 14px; }
.sc-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding-top: 16px;
}
.sc-foot-link { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.sc-foot-link:hover { text-decoration: underline; }

/* ── the compare tray + dialog ── */
.sc-tray {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: 12px 18px;
  flex-wrap: wrap; width: max-content; max-width: min(38em, calc(100% - 32px));
  padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-float);
}
.sc-tray-copy { min-width: 0; }
.sc-tray-names { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.sc-tray-hint { margin: 2px 0 0; font-size: 13px; color: var(--text-dim); }
.sc-tray-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sc-tray-go { padding: 9px 18px; }
.sc-tray-go:disabled { opacity: .5; cursor: not-allowed; }
.sc-modal { width: 46em; max-height: 86vh; overflow-y: auto; }
.sc-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.sc-modal-close {
  border: 0; background: none; color: var(--text-faint); font-size: 22px;
  line-height: 1; padding: 4px 8px; border-radius: 8px; cursor: pointer;
}
.sc-modal-close:hover { color: var(--text); background: var(--surface-alt); }
.sc-cmp-grid {
  display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) minmax(0, 1fr);
}
.sc-cmp-label {
  display: flex; align-items: center; padding: 10px 12px 10px 0;
  border-top: 1px solid var(--border); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint);
}
.sc-cmp-val {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px;
  border-top: 1px solid var(--border); font-size: 14px; line-height: 1.45;
  color: var(--text); overflow-wrap: anywhere;
}
.sc-cmp-who { display: none; font-size: 12px; font-weight: 700; color: var(--text-faint); }
.sc-cmp-note { font-size: 12px; line-height: 1.4; color: var(--text-faint); }
.sc-cmp-link { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.sc-cmp-link:hover { text-decoration: underline; }
.sc-modal-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.sc-modal-actions { justify-content: flex-end; margin-top: 16px; }
.sc-toast { display: inline-flex; align-items: center; gap: 14px; }
.sc-toast-undo {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  color: var(--accent-light); text-decoration: underline;
}

.collection-empty { text-align: center; padding: 32px 16px; }
.collection-empty-icon { display: inline-flex; color: var(--accent); margin-bottom: 6px; }

@media (prefers-reduced-motion: no-preference) {
  .sc-filter { transition: background .14s var(--ease-smooth), color .14s var(--ease-smooth); }
  .sc-title, .sc-foot-link { transition: color .14s var(--ease-smooth); }
}

@media (max-width: 720px) {
  .sc-toolbar { flex-direction: column; align-items: stretch; }
  /* a px/em flex-basis becomes a HEIGHT once the wrapper is a column */
  .sc-search, .sc-filters, .sc-sort { flex: 0 0 auto; }
  .sc-filters { justify-content: flex-start; }
  .sc-sort .field-select { width: 100%; }
  .sc-cmp-grid { grid-template-columns: minmax(0, 1fr); }
  .sc-cmp-label { padding: 14px 0 4px; }
  .sc-cmp-val { border-top: 0; padding: 0 0 10px; }
  .sc-cmp-who { display: block; }
}

@media (max-width: 560px) {
  /* keep the row save button compact next to a narrow code row */
  .cxr-code-item > .cxr-save { padding: 8px 12px; font-size: 13px; gap: 6px; }
  .sc-head-cta { width: 100%; text-align: center; }
  .sc-row { flex-wrap: wrap; gap: 12px; }
  .sc-tile { flex: 0 0 auto; min-width: 5.5em; padding: 8px 10px; }
  .sc-body { flex: 1 1 10em; }
  .sc-side {
    flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: space-between;
  }
  .sc-duty { align-items: flex-start; }
  .sc-duty-label { text-align: left; }
  .sc-actions { justify-content: flex-start; }
  .sc-tray {
    left: 12px; right: 12px; bottom: 12px; transform: none;
    width: auto; max-width: none;
  }
  .sc-tray-actions { margin-left: 0; width: 100%; }
  .sc-tray-actions .btn-sm, .sc-tray-go { flex: 1 1 auto; }
  .sc-toast { left: 12px; right: 12px; transform: none; max-width: none; }
}

/* team management (spec 17): member + invitation rows, mobile-first */
.team-list { display: flex; flex-direction: column; }
.team-row { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--border); }
.team-row:first-child { padding-top: 0; }
.team-row:last-child { border-bottom: none; padding-bottom: 0; }
.team-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.team-name { font-size: 14px; font-weight: 600; color: var(--text); }
.team-email { font-size: 13px; color: var(--text-faint); word-break: break-word; }
.team-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.team-role-form { display: flex; align-items: center; gap: 8px; }
.team-remove { color: var(--warn); }
.empty-note { font-size: 14px; color: var(--text-faint); margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 480px) {
  .team-row { flex-direction: column; align-items: stretch; }
  .team-actions { justify-content: space-between; }
  .team-role-form { flex: 1; }
  .team-role-form .field-select { flex: 1; }
}

/* ---------- impersonation banner (spec 17.4) ----------
   Persistent full-width warning bar on every page of a hijacked session,
   injected before </body> by hijack's middleware. z-index sits above every
   other fixed element (max in this file is 120: the guide FAB is 40) so it is
   never obscured; it hugs the bottom edge, leaving those bottom-right controls
   clickable above it. Warn tokens make it unmissable. */
.hijack-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 18px;
  padding: 12px 20px;
  background: var(--warn); color: var(--white);
  font-family: var(--font-body); font-size: 14px;
  box-shadow: var(--shadow-float);
}
.hijack-bar-msg { font-weight: 600; text-align: center; word-break: break-word; }
.hijack-bar-form { margin: 0; }
.hijack-bar-btn {
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--warn); background: var(--white);
  border: none; border-radius: 8px; padding: 7px 16px; cursor: pointer;
  transition: transform .12s var(--ease-smooth);
}
.hijack-bar-btn:hover { transform: translateY(-1px); }

@media (max-width: 480px) {
  .hijack-bar { flex-direction: column; gap: 8px; padding: 10px 14px; }
  .hijack-bar-btn { width: 100%; }
}

/* ---------- billing / plans (spec 18.5) ---------- */
.billing-trial { border-color: var(--accent); background: var(--accent-tint); }
.billing-trial-lead { font-family: var(--font-display); font-size: 19px;
  font-weight: 600; margin: 0 0 6px; }
.billing-muted { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin: 0; }
.billing-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-dim); margin: 0 0 2px; }

.billing-current { margin-top: 20px; }
.billing-current-head { display: flex; justify-content: space-between;
  align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.billing-meter { margin-top: 20px; }
.billing-meter .progress-track { height: 10px; }
.billing-meter-line { margin: 10px 0 2px; font-size: 14px; color: var(--text); }
.billing-meter-period { font-size: 14px; }

.billing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-top: 20px; }
.billing-plan { display: flex; flex-direction: column; position: relative; }
.billing-plan.is-current { border-color: var(--accent); }
.billing-plan-badge { position: absolute; top: 16px; right: 16px; }
.billing-plan-name { font-family: var(--font-display); font-size: 20px;
  font-weight: 600; margin: 0 0 4px; }
.billing-price { margin: 14px 0 0; font-size: 14px; color: var(--text-dim); }
.billing-price-amount { font-family: var(--font-display); font-size: 30px;
  font-weight: 600; color: var(--text); }
.billing-price-alt { margin: 4px 0 0; font-size: 14px; color: var(--text-dim); }
.billing-savings { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--accent); }
.billing-plan-cta { margin-top: auto; padding-top: 18px; }
.billing-plan-monthly { margin-top: 8px; }
.billing-plan-cta.is-disabled { opacity: .55; cursor: default; text-align: center; }

.billing-topup, .billing-maintain { margin-top: 20px; }
.billing-topup { display: flex; justify-content: space-between;
  align-items: center; gap: 16px; flex-wrap: wrap; }
.billing-maintain { border-color: var(--accent); }

@media (max-width: 560px) {
  .billing-grid { grid-template-columns: 1fr; }
  .billing-current-head { flex-direction: column; }
}

/* ---------- usage meter as value + held work (spec 18 §1.8/§1.4, task 18.6) ---------- */
/* Shared meter partial: calm, tokens-only, never a red scare wall. */
.usage-meter-trial { margin: 0 0 14px; display: flex; flex-direction: column;
  gap: 2px; padding: 12px 14px; border-radius: 12px;
  background: var(--accent-tint); border: 1px solid var(--accent-light); }
.usage-meter-trial-days { font-family: var(--font-display); font-size: 17px;
  font-weight: 600; color: var(--text); }
.usage-meter-line { margin: 12px 0 2px; font-size: 15px; color: var(--text); }
.usage-meter-period { font-size: 14px; }
.usage-meter-nudge { margin: 12px 0 0; font-size: 14px; color: var(--warn-text);
  background: var(--warn-tint); border: 1px solid var(--warn-light);
  border-radius: 10px; padding: 10px 12px; }
.usage-meter-nudge a { color: var(--accent); font-weight: 600;
  white-space: nowrap; }

/* Dashboard: the usage panel's monitoring teaser line. */
.dash-monitoring-teaser { margin: 14px 0 0; font-size: 14px; }
.dash-monitoring-teaser a { color: var(--accent); font-weight: 600; }

/* Dashboard held-work card: waiting products at the plan's cap. */
.dash-held { margin-top: 16px; border-color: var(--accent); }

/* Dashboard "confirm your email" banner: a calm heads-up, not an alarm. Warm
   amber tokens, one line of explanation, one quiet button; it removes itself
   the moment the address is confirmed. */
.verify-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 0 0 20px; padding: 14px 18px;
  background: var(--warn-light);
  border: 1px solid var(--warn);
  border-radius: 12px;
}
.verify-banner-text { flex: 1; min-width: 220px; }
.verify-banner-title { font-size: 14px; font-weight: 600; color: var(--text);
  margin: 0; }
.verify-banner-sub { font-size: 14px; color: var(--text-dim); margin: 4px 0 0;
  line-height: 1.5; }
.verify-banner form { margin: 0; }
@media (max-width: 560px) {
  .verify-banner { padding: 12px 14px; }
  .verify-banner form, .verify-banner .btn-sm { width: 100%; }
}

/* Products / review quiet held-work notice: subtle, no scare styling. */
.held-notice { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: 10px;
  background: var(--surface-alt); font-size: 14px; }
.held-notice-count { font-weight: 600; color: var(--text); }
.held-notice a { color: var(--accent); font-weight: 600; }

/* ---------- dashboard onboarding (empty state) ----------
   Rebuild of the new-user dashboard from the approved visual concept
   docs/dashboard-onboarding-v2.html. Everything is scoped under .onboarding
   and uses ONLY tokens: green -> --accent*, amber -> --warn*, blue -> --info*,
   navy panel -> --navy*, paper -> --bg, card -> --surface. Per-card accent is
   carried on --ca (fill), --cat (accent text) and --cs (soft background) so the
   three illustrations share one rule set. Derived tints use color-mix over the
   same tokens, never a raw colour. */
.onboarding {
  position: relative;
  background:
    radial-gradient(52% 54% at 102% 104%, color-mix(in srgb, var(--warn-light) 48%, transparent), transparent 72%);
}
/* the mint blob behind the intro bleeds up under the topbar like the concept's
   off-canvas circle; it fades radially so it never shows a clipped edge, and
   z-index -1 tucks it behind every surface (the topbar is opaque). Bleeding
   top/left only, so it can never create horizontal scroll. */
.onboarding::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -64px;
  left: -140px;
  /* capped by the viewport: the circle bleeds left/top only, so it can
     never extend past the right edge and create horizontal scroll */
  width: min(540px, 100vw);
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-light) 52%, transparent), transparent);
  pointer-events: none;
}

/* intro row: display headline + copy */
.onboarding .intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 28px;
}
.onboarding .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.onboarding .eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
}
.onboarding .onb-h1 {
  max-width: 810px;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--text);
}
.onboarding .intro-copy {
  max-width: 760px;
  margin: 0;
  color: var(--text-dim);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.5;
}
/* main layout: choice panel + navy "what happens next" panel */
.onboarding .onboarding-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: stretch;
}
.onboarding .choice-panel {
  padding: 27px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.onboarding .panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 20px;
}
.onboarding .choice-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}
.onboarding .panel-heading p { margin: 0; color: var(--text-dim); font-size: 14px; }
.onboarding .choice-note {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.onboarding .path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.onboarding .path-card {
  --ca: var(--accent);
  --cat: var(--accent-hover);
  --cs: var(--accent-light);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 372px;
  padding: 10px 18px 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  transition: transform .2s var(--ease-smooth),
              border-color .2s var(--ease-smooth),
              box-shadow .2s var(--ease-smooth);
}
.onboarding .path-card.feed { --ca: var(--warn); --cat: var(--warn-text); --cs: var(--warn-light); }
.onboarding .path-card.file { --ca: var(--info); --cat: var(--info); --cs: var(--info-light); }
.onboarding .path-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--ca);
}
.onboarding .path-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--ca) 35%, var(--border));
  box-shadow: var(--shadow-card);
}
/* the illustration is a second way into the card's own action (operator
   2026-08-06), so it reads as clickable and lights the button it duplicates.
   Hovering it also lifts the card, because the hover reaches .path-card
   through the anchor. */
/* the illustration is a second way into the card's own action (operator
   2026-08-06), so it reads as clickable and lights the button it duplicates.
   Hovering it also lifts the card, because the hover reaches .path-card
   through the anchor. The stage's bleed sits on the anchor, not inside it, so
   the whole picture is clickable out to its edges. */
.onboarding .path-visual {
  display: block;
  margin: 0 -8px 18px;
  text-decoration: none;
  cursor: pointer;
}
.onboarding .path-visual:hover ~ .path-action { color: var(--white); background: var(--ca); }
.onboarding .path-visual:hover ~ .path-action span { transform: translateX(3px); }
.onboarding .visual-stage {
  position: relative;
  height: 128px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--cs);
}
.onboarding .visual-stage::after {
  content: attr(data-step);
  position: absolute;
  top: 9px;
  right: 11px;
  color: var(--cat);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

/* system illustration: familiar sources converge on one catalog */
.onboarding .system-map {
  position: absolute;
  inset: 28px 14px 13px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 35px 22px 31px;
  column-gap: 8px;
  align-items: center;
}
.onboarding .source-node {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 8px;
  color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-size: 12px;
  font-weight: 800;
}
.onboarding .system-rails { position: relative; grid-column: 1 / -1; height: 22px; }
.onboarding .system-rails::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 16.7%;
  left: 16.7%;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}
.onboarding .system-rails::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 1px;
  height: 17px;
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}
.onboarding .source-node::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 14px;
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}
.onboarding .catalog-hub {
  grid-column: 1 / -1;
  justify-self: center;
  position: relative;
  z-index: 2;
  min-width: 104px;
  padding: 7px 13px;
  border-radius: 8px;
  color: var(--white);
  background: var(--accent);
  box-shadow: var(--shadow-float);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

/* feed illustration: records flow from a URL into a catalog */
.onboarding .feed-flow {
  position: absolute;
  inset: 33px 13px 18px;
  display: grid;
  grid-template-columns: 1fr 23px 60px;
  gap: 7px;
  align-items: center;
}
.onboarding .feed-source {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 22%, transparent);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.onboarding .feed-url {
  display: block;
  overflow: hidden;
  color: var(--warn-text);
  font-family: var(--font-counter);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onboarding .feed-records { display: flex; gap: 4px; margin-top: 8px; }
.onboarding .feed-records span {
  display: block;
  width: 28%;
  height: 13px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--warn) 55%, var(--surface));
}
.onboarding .feed-records span:nth-child(2) { width: 38%; opacity: .74; }
.onboarding .feed-records span:nth-child(3) { width: 22%; opacity: .5; }
.onboarding .flow-arrow {
  position: relative;
  height: 1px;
  background: color-mix(in srgb, var(--warn) 68%, var(--surface));
}
.onboarding .flow-arrow::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid color-mix(in srgb, var(--warn) 68%, var(--surface));
  border-right: 1px solid color-mix(in srgb, var(--warn) 68%, var(--surface));
  transform: rotate(45deg);
}
.onboarding .feed-destination {
  display: grid;
  place-items: center;
  height: 64px;
  border-radius: 9px;
  color: var(--warn-text);
  background:
    linear-gradient(color-mix(in srgb, var(--warn) 14%, transparent) 1px, transparent 1px) 0 0 / 100% 14px,
    var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 18%, transparent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

/* file illustration: a tangible spreadsheet, not an upload arrow */
.onboarding .sheet-scene { position: absolute; inset: 26px 20px 12px; }
.onboarding .format-tabs {
  position: absolute;
  top: 9px;
  left: 0;
  z-index: 3;
  display: grid;
  gap: 5px;
}
.onboarding .format-tabs span {
  min-width: 38px;
  padding: 4px 6px;
  border-radius: 5px;
  color: var(--info);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.onboarding .spreadsheet {
  position: absolute;
  top: 0;
  right: 3px;
  width: 126px;
  height: 88px;
  padding: 18px 9px 9px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--info) 22%, transparent);
  border-radius: 8px 17px 8px 8px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  transform: rotate(-2deg);
}
.onboarding .spreadsheet::before {
  content: "PRODUCTS.XLSX";
  position: absolute;
  top: 5px;
  left: 9px;
  color: var(--info);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.onboarding .spreadsheet::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 20px;
  height: 20px;
  border-bottom-left-radius: 5px;
  background: linear-gradient(225deg, var(--info-light) 0 49%,
              color-mix(in srgb, var(--info) 32%, var(--surface)) 50% 53%, var(--surface) 54%);
}
.onboarding .sheet-grid {
  display: grid;
  grid-template-columns: 1.1fr .75fr .8fr;
  grid-template-rows: repeat(4, 1fr);
  width: 100%;
  height: 100%;
  border-top: 1px solid color-mix(in srgb, var(--info) 26%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--info) 26%, transparent);
}
.onboarding .sheet-grid span {
  border-right: 1px solid color-mix(in srgb, var(--info) 26%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--info) 26%, transparent);
}
.onboarding .sheet-grid span:nth-child(-n+3) { background: color-mix(in srgb, var(--info) 20%, var(--surface)); }
.onboarding .sheet-grid span:nth-child(7),
.onboarding .sheet-grid span:nth-child(11) { background: color-mix(in srgb, var(--info) 9%, var(--surface)); }

.onboarding .path-kicker {
  margin: 0 0 6px;
  color: var(--cat);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.onboarding .path-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}
.onboarding .path-lede {
  margin: 0 0 17px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
}
.onboarding .path-action {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--ca) 38%, var(--border));
  border-radius: 9px;
  color: var(--cat);
  background: var(--cs);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s var(--ease-smooth), background .18s var(--ease-smooth);
}
.onboarding .path-action:hover { color: var(--white); background: var(--ca); }
.onboarding .path-action span { font-size: 17px; transition: transform .18s var(--ease-smooth); }
.onboarding .path-action:hover span { transform: translateX(3px); }

/* navy "what happens next" panel */
.onboarding .next-panel {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  border: 1px solid transparent;
  border-radius: 22px;
  color: var(--navy-heading);
  background: var(--navy);
  box-shadow: var(--shadow-float);
}
.onboarding .next-label {
  margin: 0 0 13px;
  color: var(--navy-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.onboarding .next-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--navy-heading);
}
.onboarding .next-intro { margin: 0 0 22px; color: var(--navy-text); font-size: 14px; line-height: 1.55; }
.onboarding .steps { display: grid; margin-bottom: 22px; }
.onboarding .step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding-bottom: 20px;
}
.onboarding .step:last-child { padding-bottom: 0; }
.onboarding .step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 3px;
  left: 16px;
  width: 1px;
  background: var(--navy-line);
}
.onboarding .step-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--navy-line);
  border-radius: 9px;
  color: var(--navy-step);
  background: var(--navy-fill);
  font-size: 12px;
  font-weight: 800;
}
.onboarding .step strong { display: block; margin: 1px 0 4px; font-size: 14px; color: var(--navy-heading); }
.onboarding .step p { margin: 0; color: var(--navy-text-dim); font-size: 13px; line-height: 1.5; }
.onboarding .control-note {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding: 13px;
  border: 1px solid var(--navy-note-line);
  border-radius: 11px;
  background: var(--navy-note-fill);
}
.onboarding .control-check {
  display: grid;
  flex: 0 0 26px;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--navy);
  background: var(--accent-light);
  font-size: 13px;
  font-weight: 800;
}
.onboarding .control-note p { margin: 0; color: var(--navy-text); font-size: 13px; line-height: 1.5; }
.onboarding .control-note strong { color: var(--navy-heading); }

/* try-one-product row: free tools + the demo door */
.onboarding .try-panel {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr);
  gap: 30px;
  align-items: center;
  margin-top: 18px;
  padding: 22px 26px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.onboarding .try-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}
.onboarding .try-copy p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.onboarding .tool-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.onboarding .tool-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border));
  border-radius: 10px;
  color: var(--warn-text);
  background: var(--warn-light);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color .18s var(--ease-smooth), border-color .18s var(--ease-smooth),
              background .18s var(--ease-smooth), transform .18s var(--ease-smooth);
}
.onboarding .tool-link:hover {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  transform: translateY(-2px);
}
.onboarding .tool-link-text { display: block; }
.onboarding .tool-link small {
  display: block;
  margin-top: 2px;
  color: color-mix(in srgb, var(--warn-text) 65%, var(--surface));
  font-size: 13px;
  font-weight: 500;
}
.onboarding .tool-link-arrow { flex: 0 0 auto; color: var(--warn); font-size: 16px; }
.onboarding .free-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 5px;
  color: var(--warn-text);
  background: color-mix(in srgb, var(--warn) 28%, transparent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* /import/ renders the same shared layout, but closes it with the add-one-
   product form instead of the dashboard's free-tool links (same panel, same
   rhythm, no new colors) */
.onboarding .try-form { display: grid; gap: 6px; }
.onboarding .try-form .feed-form { gap: 0; }
.onboarding .try-form .field-label { margin-bottom: 8px; }

@media (max-width: 1120px) {
  .onboarding .onboarding-layout { grid-template-columns: 1fr; }
  .onboarding .next-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; }
  .onboarding .next-panel .steps { margin: 0; }
  .onboarding .control-note { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .onboarding .try-panel { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 860px) {
  .onboarding .intro { grid-template-columns: 1fr; gap: 20px; }
  .onboarding .path-grid { grid-template-columns: 1fr 1fr; }
  .onboarding .path-card.system { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .onboarding .choice-panel { padding: 20px; border-radius: 18px; }
  .onboarding .panel-heading { display: block; }
  .onboarding .choice-note { display: inline-block; margin-top: 11px; }
  .onboarding .path-grid { grid-template-columns: 1fr; }
  .onboarding .path-card { min-height: auto; }
  .onboarding .path-card.system { grid-column: auto; }
  .onboarding .next-panel { display: flex; grid-template-columns: none; border-radius: 18px; }
  .onboarding .next-panel .steps { margin-bottom: 22px; }
  .onboarding .try-panel { padding: 20px; }
  .onboarding .tool-actions { grid-template-columns: 1fr; }
}

/* ---------- product-feed page (spec 08 §3) ----------
   Dedicated "connect an XML feed" page, rebuilt from the approved concept
   docs/import-feed-guide.html. Everything is scoped under .feed-page and uses
   ONLY tokens: green -> --accent*, amber -> --warn*, red -> --danger*, paper ->
   --bg, card -> --surface, muted -> --text-dim, line -> --border, navy panel ->
   --navy* family, Fraunces -> --font-display, DM Sans -> --font-body, mono ->
   --font-counter. Derived tints use color-mix over the same tokens. The two
   ambient blobs are painted as background radial-gradients (never sized,
   absolutely-positioned circles) so they can never create horizontal scroll. */
.feed-page {
  position: relative;
  background:
    radial-gradient(46% 40% at 0% 0%, color-mix(in srgb, var(--accent-light) 42%, transparent), transparent 62%),
    radial-gradient(52% 48% at 100% 100%, color-mix(in srgb, var(--warn-light) 46%, transparent), transparent 72%);
}
.feed-page h1, .feed-page h2 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  line-height: 1.08;
  color: var(--text);
}

.feed-page .breadcrumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
}
.feed-page .breadcrumbs a { color: var(--text-dim); text-decoration: none; }
.feed-page .breadcrumbs a:hover { color: var(--accent); }
.feed-page .breadcrumbs span[aria-current="page"] { color: var(--text); }
.feed-page .breadcrumb-arrow { color: var(--text-faint); }

/* intro row: eyebrow + display headline + copy, time-note aside on the right */
.feed-page .intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 28px;
}
.feed-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  color: var(--warn);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.feed-page .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.feed-page .intro h1 {
  max-width: 770px;
  margin: 0 0 10px;
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 500;
}
.feed-page .intro-copy {
  max-width: 720px;
  margin: 0;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.6;
}
.feed-page .time-note {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 210px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  color: var(--text-dim);
  font-size: 13px;
}
.feed-page .clock {
  position: relative;
  display: block;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  border: 2px solid var(--accent);
  border-radius: 50%;
}
.feed-page .clock::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 15px;
  width: 2px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: bottom;
  transform: rotate(-32deg);
}
.feed-page .clock::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.feed-page .time-note strong { display: block; color: var(--text); font-size: 14px; }

/* two-column workflow: the import card + the navy help aside, with the
   after-card and existing-card spanning full width below */
.feed-page .workflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
.feed-page .import-card,
.feed-page .after-card,
.feed-page .existing-card {
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.feed-page .import-card {
  min-width: 0;
  padding: 30px;
  border-radius: 22px;
}

/* three-step progress strip */
.feed-page .process-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 30px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-alt);
}
.feed-page .process-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 12px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
}
.feed-page .process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 25px;
  height: 1px;
  background: color-mix(in srgb, var(--text-faint) 45%, var(--border));
}
.feed-page .process-number {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--text-faint) 45%, var(--border));
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-counter);
}
.feed-page .process-step.active { color: var(--text); }
.feed-page .process-step.active .process-number {
  border-color: var(--accent);
  color: var(--surface);
  background: var(--accent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* form heading with the pure-CSS feed-mark illustration */
.feed-page .form-heading {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 25px;
}
.feed-page .feed-mark {
  position: relative;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--warn-light);
}
.feed-page .feed-sheet {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 38px;
  height: 44px;
  padding: 10px 7px 6px;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: 7px 12px 7px 7px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--warn-text) 14%, transparent);
}
.feed-page .feed-sheet::before {
  content: "< >";
  position: absolute;
  top: 3px;
  left: 7px;
  color: var(--warn-text);
  font: 900 7px/1 var(--font-counter);
}
.feed-page .feed-sheet i {
  display: block;
  height: 3px;
  margin: 4px 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--warn) 55%, var(--surface));
}
.feed-page .feed-sheet i:nth-child(2) { width: 72%; opacity: .7; }
.feed-page .feed-sheet i:nth-child(3) { width: 86%; opacity: .45; }
.feed-page .feed-pulse {
  position: absolute;
  right: 10px;
  bottom: 13px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid var(--warn);
  border-radius: 50%;
  color: var(--warn);
  background: var(--warn-light);
  font-size: 13px;
  font-weight: 900;
}
.feed-page .feed-pulse::before {
  content: "";
  position: absolute;
  width: 31px;
  height: 31px;
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-radius: 50%;
}
.feed-page .form-heading h2 { margin: 0 0 6px; font-size: 29px; font-weight: 600; }
.feed-page .form-heading p { margin: 0; color: var(--text-dim); font-size: 14px; }

/* the URL field */
.feed-page .field-label {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 9px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}
.feed-page .required { color: var(--text-dim); font-size: 13px; font-weight: 600; }
.feed-page .input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.feed-page .url-control {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--text-faint) 45%, var(--border));
  border-radius: 12px;
  background: var(--surface);
  transition: border-color .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth);
}
.feed-page .url-control:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.feed-page .url-control.invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 10%, transparent);
}
.feed-page .protocol {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 13px;
  border-right: 1px solid var(--border);
  border-radius: 11px 0 0 11px;
  color: var(--text-dim);
  background: var(--surface-alt);
  font: 700 13px/1 var(--font-counter);
}
.feed-page .url-input {
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0 15px;
  border: 0;
  outline: 0;
  border-radius: 0 11px 11px 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
}
.feed-page .url-input::placeholder { color: var(--text-faint); opacity: 1; }
.feed-page .primary-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-width: 150px;
  min-height: 58px;
  padding: 0 20px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  color: var(--surface);
  background: var(--accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 20%, transparent);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s var(--ease-smooth), background .18s var(--ease-smooth),
              border-color .18s var(--ease-smooth);
}
.feed-page .primary-button:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.feed-page .primary-button:disabled { cursor: wait; opacity: .72; transform: none; }
.feed-page .button-arrow { font-size: 17px; }
.feed-page .spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid color-mix(in srgb, var(--surface) 40%, transparent);
  border-top-color: var(--surface);
  border-radius: 50%;
  animation: feed-spin .7s linear infinite;
}
.feed-page .primary-button.loading .spinner { display: block; }
.feed-page .primary-button.loading .button-arrow { display: none; }
@keyframes feed-spin { to { transform: rotate(360deg); } }

.feed-page .field-message {
  min-height: 21px;
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 14px;
}
.feed-page .field-message.error { color: var(--danger); }
.feed-page .field-message.success { color: var(--accent); font-weight: 700; }
.feed-page .example-link {
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}
.feed-page .example-link.is-hidden { display: none; }

/* reassurance note */
.feed-page .safe-note {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 12px;
  color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent-light) 40%, var(--surface));
  font-size: 14px;
  line-height: 1.5;
}
.feed-page .safe-icon {
  display: grid;
  flex: 0 0 24px;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 8px;
  color: var(--accent);
  background: var(--accent-light);
  font-size: 13px;
  font-weight: 900;
}
.feed-page .safe-note strong { color: var(--text); }

/* recognized-fields chips */
.feed-page .recognized {
  margin-top: 24px;
  padding-top: 23px;
  border-top: 1px solid var(--border);
}
.feed-page .recognized-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}
.feed-page .recognized-heading strong { font-size: 14px; color: var(--text); }
.feed-page .recognized-heading span { color: var(--text-dim); font-size: 13px; }
.feed-page .field-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.feed-page .field-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  background: var(--surface-alt);
  font-size: 13px;
  font-weight: 700;
}
.feed-page .field-chip::before { content: "✓"; color: var(--accent); font-size: 12px; font-weight: 900; }

/* navy help aside */
.feed-page .help-card {
  padding: 26px 24px 22px;
  border: 1px solid transparent;
  border-radius: 22px;
  color: var(--navy-heading);
  background: var(--navy);
  box-shadow: var(--shadow-float);
}
.feed-page .help-kicker {
  margin: 0 0 11px;
  color: var(--navy-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.feed-page .help-card h2 { margin: 0 0 8px; font-size: 27px; font-weight: 500; color: var(--navy-heading); }
.feed-page .help-intro { margin: 0 0 21px; color: var(--navy-text); font-size: 14px; line-height: 1.55; }
.feed-page .find-steps { display: grid; gap: 0; }
.feed-page .find-step {
  position: relative;
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 11px;
  padding-bottom: 19px;
}
.feed-page .find-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 3px;
  left: 16px;
  width: 1px;
  background: var(--navy-line);
}
.feed-page .find-number {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border: 1px solid var(--navy-line);
  border-radius: 10px;
  color: var(--navy-accent);
  background: var(--navy-fill);
  font-size: 12px;
  font-weight: 900;
  font-family: var(--font-counter);
}
.feed-page .find-step strong { display: block; margin: 2px 0 3px; font-size: 14px; color: var(--navy-heading); }
.feed-page .find-step p { margin: 0; color: var(--navy-text-dim); font-size: 13px; line-height: 1.5; }
.feed-page .search-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.feed-page .search-terms span {
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--navy-text);
  background: var(--navy-fill);
  font: 700 12px/1.4 var(--font-counter);
}
.feed-page .message-box {
  margin-top: 3px;
  padding: 14px;
  border: 1px solid var(--navy-note-line);
  border-radius: 12px;
  background: var(--navy-note-fill);
}
.feed-page .message-box p { margin: 0 0 11px; color: var(--navy-text); font-size: 13px; line-height: 1.55; }
.feed-page .copy-button {
  width: 100%;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--navy-accent) 35%, transparent);
  border-radius: 9px;
  color: var(--navy-accent);
  background: color-mix(in srgb, var(--navy-accent) 10%, transparent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s var(--ease-smooth);
}
.feed-page .copy-button:hover { background: color-mix(in srgb, var(--navy-accent) 16%, transparent); }
.feed-page .copy-button.copied { color: var(--navy); background: var(--navy-accent); }

/* after-card: what happens on repeat checks */
.feed-page .after-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
  gap: 30px;
  align-items: center;
  padding: 25px 28px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.feed-page .after-copy .mini-label {
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.feed-page .after-copy h2 { margin: 0 0 6px; font-size: 25px; font-weight: 600; }
.feed-page .after-copy p { margin: 0; color: var(--text-dim); font-size: 14px; }
.feed-page .after-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.feed-page .after-step {
  position: relative;
  min-height: 96px;
  padding: 15px 15px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.feed-page .after-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 2;
  top: 36px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--accent);
  background: var(--bg);
  font-size: 12px;
}
.feed-page .after-step small {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.feed-page .after-step strong { display: block; margin-bottom: 2px; font-size: 14px; color: var(--text); }
.feed-page .after-step span { color: var(--text-dim); font-size: 12px; line-height: 1.4; }

/* existing-card: the store's real connected feeds */
.feed-page .existing-card {
  grid-column: 1 / -1;
  padding: 20px 22px;
  border-radius: 16px;
  box-shadow: none;
}
.feed-page .existing-head { display: grid; grid-template-columns: 43px minmax(0, 1fr); gap: 13px; align-items: center; margin-bottom: 16px; }
.feed-page .existing-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 12px;
  color: var(--warn-text);
  background: var(--warn-light);
  font: 900 12px/1 var(--font-counter);
}
.feed-page .existing-card h2 { margin: 0 0 3px; font-size: 19px; font-weight: 600; }
.feed-page .existing-head p { margin: 0; color: var(--text-dim); font-size: 13px; }
.feed-page .feed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.feed-page .feed-item {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.feed-page .feed-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feed-page .feed-item-name { font-size: 14px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.feed-page .feed-item-url { font-size: 13px; color: var(--text-faint); overflow-wrap: anywhere; }
.feed-page .feed-item-checked { font-size: 13px; color: var(--text-dim); }
.feed-page .feed-check-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--text-faint) 45%, var(--border));
  border-radius: 10px;
  color: var(--text);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: color .18s var(--ease-smooth), border-color .18s var(--ease-smooth);
}
.feed-page .feed-check-btn:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 1080px) {
  .feed-page .workflow { grid-template-columns: 1fr; }
  .feed-page .after-card { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 860px) {
  .feed-page .intro { grid-template-columns: 1fr; gap: 18px; }
  .feed-page .time-note { width: 100%; min-width: 0; }
  .feed-page .feed-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .feed-page .breadcrumbs { margin-bottom: 18px; flex-wrap: wrap; }
  .feed-page .intro h1 { font-size: 34px; }
  .feed-page .import-card { padding: 20px; border-radius: 18px; }
  .feed-page .process-strip { grid-template-columns: 1fr; gap: 9px; }
  .feed-page .process-step { padding: 0 4px; }
  .feed-page .process-step:not(:last-child)::after { display: none; }
  .feed-page .form-heading { grid-template-columns: 58px 1fr; gap: 13px; }
  .feed-page .feed-mark { width: 58px; height: 58px; border-radius: 15px; }
  .feed-page .feed-sheet { top: 9px; left: 9px; }
  .feed-page .feed-pulse { right: 5px; bottom: 8px; }
  .feed-page .form-heading h2 { font-size: 23px; }
  .feed-page .input-row { grid-template-columns: 1fr; }
  .feed-page .primary-button { width: 100%; }
  .feed-page .protocol { display: none; }
  .feed-page .url-input { border-radius: 11px; }
  .feed-page .recognized-heading { display: block; }
  .feed-page .recognized-heading span { display: block; margin-top: 3px; }
  .feed-page .help-card { padding: 23px 20px; border-radius: 18px; }
  .feed-page .after-card { padding: 21px 20px; }
  .feed-page .after-steps { grid-template-columns: 1fr; }
  .feed-page .after-step { min-height: auto; }
  .feed-page .after-step:not(:last-child)::after { display: none; }
  .feed-page .existing-card { padding: 18px 18px; }
  .feed-page .feed-item { flex-wrap: wrap; }
  .feed-page .feed-check-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .feed-page *, .feed-page *::before, .feed-page *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Connect-a-system page (dedicated /import/system/) ----------
   Rebuilt from the approved concept docs/import-system-guide.html. Everything
   is scoped under .syspage and uses ONLY tokens: green -> --accent*, amber ->
   --warn*, blue -> --info*, paper -> --bg, card -> --surface, muted ->
   --text-dim, line -> --border, navy panel -> --navy* family, per-system
   accents -> --sys-* (tokens.css), Fraunces -> --font-display, DM Sans ->
   --font-body, mono -> --font-counter. Derived tints use color-mix over the
   same tokens (precedent: .onboarding + .feed-page). Kept self-contained
   rather than folding into .feed-page selectors: the eyebrow/accent colour and
   most components differ, so shared selectors would not be clean. The two
   ambient blobs are painted as background radial-gradients (never sized,
   absolutely-positioned circles) so they can never create horizontal scroll. */
.syspage {
  position: relative;
  background:
    radial-gradient(44% 38% at 0% 0%, color-mix(in srgb, var(--accent-light) 40%, transparent), transparent 62%),
    radial-gradient(50% 46% at 100% 92%, color-mix(in srgb, var(--info-light) 40%, transparent), transparent 72%);
}
.syspage h1, .syspage h2, .syspage h3 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  line-height: 1.08;
  color: var(--text);
}

.syspage .breadcrumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 23px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
}
.syspage .breadcrumbs a { color: var(--text-dim); text-decoration: none; }
.syspage .breadcrumbs a:hover { color: var(--accent); }
.syspage .breadcrumbs span[aria-current="page"] { color: var(--text); }
.syspage .breadcrumb-arrow { color: var(--text-faint); }

/* intro: eyebrow (green) + display headline + copy, time-note aside right */
.syspage .intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 26px;
}
.syspage .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.syspage .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.syspage .intro h1 {
  max-width: 820px;
  margin: 0 0 10px;
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 500;
}
.syspage .intro-copy {
  max-width: 760px;
  margin: 0;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.6;
}
.syspage .time-note {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 220px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  color: var(--text-dim);
  font-size: 13px;
}
.syspage .time-note strong { display: block; color: var(--text); font-size: 14px; }
.syspage .file-stack {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}
.syspage .file-stack::before,
.syspage .file-stack::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 30px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-light) 45%, var(--surface));
}
.syspage .file-stack::before { top: 2px; left: 3px; transform: rotate(-7deg); opacity: .55; }
.syspage .file-stack::after { top: 5px; left: 9px; box-shadow: inset 0 -12px 0 var(--accent-light); }

/* three-step journey strip */
.syspage .journey-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 18px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-alt);
}
.syspage .journey-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 14px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
}
.syspage .journey-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 28px;
  height: 1px;
  background: color-mix(in srgb, var(--text-faint) 45%, var(--border));
}
.syspage .journey-number {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--text-faint) 45%, var(--border));
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-counter);
}
.syspage .journey-step.active { color: var(--text); }
.syspage .journey-step.active .journey-number {
  border-color: var(--accent);
  color: var(--white);
  background: var(--accent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* systems-card + workspace-card shells */
.syspage .systems-card,
.syspage .workspace-card {
  scroll-margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.syspage .systems-card { padding: 27px; }
.syspage .systems-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 26px;
  align-items: end;
  margin-bottom: 18px;
}
.syspage .systems-heading h2 { margin: 0 0 5px; font-size: 29px; font-weight: 600; }
.syspage .systems-heading p { margin: 0; color: var(--text-dim); font-size: 14px; }
.syspage .system-search-wrap { position: relative; }
.syspage .search-symbol {
  position: absolute;
  top: 50%;
  left: 13px;
  color: var(--text-dim);
  font-size: 17px;
  transform: translateY(-51%);
  pointer-events: none;
}
.syspage .system-search {
  width: 100%;
  height: 44px;
  padding: 0 13px 0 39px;
  border: 1px solid color-mix(in srgb, var(--text-faint) 40%, var(--border));
  border-radius: 11px;
  outline: 0;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body);
  transition: border-color .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth);
}
.syspage .system-search:focus {
  border-color: var(--accent);
  box-shadow: var(--ring-accent);
}
.syspage .system-search::placeholder { color: var(--text-faint); opacity: 1; }

.syspage .system-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 15px;
}
.syspage .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.syspage .filter-chip {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  background: var(--surface-alt);
  font-size: 12px;
  font-weight: 700;
  transition: color .18s var(--ease-smooth), border-color .18s var(--ease-smooth), background .18s var(--ease-smooth);
}
.syspage .filter-chip:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.syspage .filter-chip.active {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent);
  background: var(--accent-light);
}
.syspage .system-count { flex: 0 0 auto; color: var(--text-dim); font-size: 13px; }

/* the 4-column tile grid */
.syspage .system-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.syspage .system-tile {
  --system: var(--info);
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  gap: 11px;
  align-items: center;
  min-width: 0;
  min-height: 78px;
  padding: 11px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 13px;
  text-align: left;
  text-decoration: none;
  background: var(--surface);
  transition: transform .18s var(--ease-smooth), border-color .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth);
}
.syspage .system-tile::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--system);
  opacity: 0;
  transition: opacity .18s var(--ease-smooth);
}
.syspage a.system-tile:hover {
  z-index: 1;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--system) 40%, var(--border));
  box-shadow: var(--shadow-card);
}
.syspage a.system-tile:hover::before,
.syspage .system-tile.selected::before { opacity: 1; }
.syspage .system-tile.selected {
  border-color: color-mix(in srgb, var(--system) 48%, var(--border));
  background: color-mix(in srgb, var(--system) 5%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--system) 14%, transparent);
}
.syspage .system-tile[hidden] { display: none; }
.syspage .system-tile.is-soon {
  cursor: not-allowed;
  color: var(--text-faint);
  background: var(--surface-alt);
  opacity: .75;
}
.syspage .system-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--system);
  background: color-mix(in srgb, var(--system) 12%, var(--surface));
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.syspage .system-mark svg,
.syspage .selected-mark svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.syspage .system-copy { min-width: 0; }
.syspage .system-copy strong {
  display: block;
  overflow: hidden;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.syspage .system-copy small {
  display: block;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.syspage .tile-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: transparent;
  background: var(--surface-alt);
  font-size: 12px;
  font-weight: 800;
}
.syspage .system-tile.selected .tile-check {
  border-color: var(--accent);
  color: var(--white);
  background: var(--accent);
}
.syspage .soon-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 3px 5px;
  border-radius: 5px;
  color: var(--text-dim);
  background: color-mix(in srgb, var(--surface-alt) 60%, var(--border));
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.syspage .empty-systems {
  display: none;
  padding: 26px;
  border: 1px dashed color-mix(in srgb, var(--text-faint) 40%, var(--border));
  border-radius: 13px;
  color: var(--text-dim);
  background: var(--surface-alt);
  font-size: 14px;
  text-align: center;
}
.syspage .empty-systems.visible { display: block; }
.syspage .request-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
}
.syspage .request-row a { color: var(--accent); font-weight: 800; text-decoration: none; }
.syspage .request-row a:hover { text-decoration: underline; text-underline-offset: 3px; }
.syspage .guide-ready {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 700;
}
.syspage .guide-ready::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  color: var(--accent);
  background: var(--accent-light);
  font-size: 12px;
  font-weight: 800;
}

/* workspace-card: selected system + guide reader + navy upload panel */
.syspage .workspace-card { margin-top: 18px; overflow: hidden; }
.syspage .workspace-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  min-height: 76px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
/* the optional per-system tip atop the guide column (guide registry
   import_advice): a colleague's recommendation, styled like the guide
   callouts, never like a warning; the upload panel keeps full prominence
   beside it (GPT design pass 2026-08-08) */
.syspage .import-advice { background: var(--accent-light);
  color: var(--accent-hover); margin: 0 0 16px; padding: 12px 16px;
  border-radius: 10px; line-height: 1.5; }
.syspage .import-advice-eyebrow { display: block; font-size: 12px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 2px; }
.syspage .import-advice-title { display: block; font-size: 16px;
  margin-bottom: 4px; }
.syspage .import-advice p { font-size: 14px; margin: 0 0 6px; }
.syspage .import-advice a { color: inherit; font-weight: 600;
  font-size: 14px; text-decoration: underline;
  text-underline-offset: .18em; }
/* when the tip opens the column, the guide's own lead-in callout right
   below it goes plain, one green voice at a time (the green-wall fix) */
.syspage .import-advice + .guide-wrap .guide > .guide-callout:first-child {
  background: transparent; color: inherit; padding-left: 0;
  padding-right: 0; }
.syspage .selected-system { display: flex; align-items: center; gap: 12px; min-width: 0; }
.syspage .selected-mark {
  --system: var(--info);
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--system);
  background: color-mix(in srgb, var(--system) 12%, var(--surface));
  font-size: 12px;
  font-weight: 800;
}
.syspage .selected-system small {
  display: block;
  margin-bottom: 2px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.syspage .selected-system h2 {
  overflow: hidden;
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.syspage .change-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--text-faint) 40%, var(--border));
  border-radius: 9px;
  color: var(--text);
  background: var(--surface);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: color .18s var(--ease-smooth), border-color .18s var(--ease-smooth);
}
.syspage .change-button:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }

.syspage .workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(330px, .68fr);
  align-items: stretch;
}

/* guide reader: the REAL guide article, embedded chrome-less (spec 11.10
   panel path). The guide's own dash-wrap/guide-wrap wrappers are neutralised
   so the article fills the pane; long guides scroll inside the pane on desktop
   so the upload panel stays visible, and flow naturally when stacked. */
.syspage .guide-reader {
  min-width: 0;
  max-height: 620px;
  padding: 6px 30px 24px;
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.syspage .guide-reader .dash-wrap { margin: 0; padding: 0; max-width: none; }
.syspage .guide-reader .guide-wrap { max-width: none; }

/* navy upload panel */
.syspage .upload-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 27px 24px 23px;
  color: var(--navy-heading);
  background: var(--navy);
}
.syspage .upload-kicker {
  margin-bottom: 10px;
  color: var(--navy-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.syspage .upload-panel h3 { margin: 0 0 7px; font-size: 27px; font-weight: 500; color: var(--navy-heading); }
.syspage .upload-intro { margin: 0 0 20px; color: var(--navy-text); font-size: 13px; line-height: 1.55; }
.syspage .upload-error {
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent);
  border-radius: 10px;
  color: var(--navy-heading);
  background: color-mix(in srgb, var(--danger) 30%, transparent);
  font-size: 13px;
  line-height: 1.5;
}
.syspage .upload-zone {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 22px 16px;
  border: 1px dashed color-mix(in srgb, var(--navy-accent) 48%, transparent);
  border-radius: 14px;
  background: var(--navy-fill);
  text-align: center;
  transition: border-color .18s var(--ease-smooth), background .18s var(--ease-smooth);
}
.syspage .upload-zone:hover,
.syspage .upload-zone.dragover {
  border-color: var(--navy-accent);
  background: color-mix(in srgb, var(--navy-accent) 8%, transparent);
}
.syspage .upload-visual { position: relative; width: 58px; height: 56px; margin-bottom: 12px; }
.syspage .upload-page {
  position: absolute;
  top: 3px;
  left: 9px;
  width: 39px;
  height: 49px;
  border: 1px solid color-mix(in srgb, var(--navy-heading) 35%, transparent);
  border-radius: 8px 14px 8px 8px;
  background: var(--navy-fill);
}
.syspage .upload-page::before,
.syspage .upload-page::after {
  content: "";
  position: absolute;
  left: 8px;
  width: 21px;
  height: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--navy-accent) 50%, transparent);
}
.syspage .upload-page::before { top: 24px; }
.syspage .upload-page::after { top: 32px; width: 15px; }
.syspage .upload-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  color: var(--navy);
  background: var(--navy-accent);
  font-size: 15px;
  font-weight: 800;
}
.syspage .upload-zone strong { display: block; margin-bottom: 3px; font-size: 14px; color: var(--navy-heading); }
.syspage .upload-zone p { margin: 0 0 13px; color: var(--navy-text-dim); font-size: 12px; }
.syspage .file-button {
  min-height: 39px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--navy-accent) 42%, transparent);
  border-radius: 9px;
  color: var(--navy-heading);
  background: color-mix(in srgb, var(--navy-accent) 12%, transparent);
  font-size: 12px;
  font-weight: 800;
}
.syspage .file-button:hover { background: color-mix(in srgb, var(--navy-accent) 18%, transparent); }
.syspage .file-state {
  display: none;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
}
.syspage .file-state.visible { display: grid; animation: fadeUp .22s var(--ease-smooth) both; }
.syspage .file-state-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--navy);
  background: var(--navy-accent);
  font-size: 12px;
  font-weight: 800;
}
.syspage .file-state-copy { min-width: 0; }
.syspage .file-state strong {
  display: block;
  overflow: hidden;
  margin: 0;
  font-size: 12px;
  color: var(--navy-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.syspage .file-state small { display: block; margin-top: 2px; color: var(--navy-text-dim); font-size: 12px; }
.syspage .remove-file {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  border: 1px solid var(--navy-line);
  border-radius: 8px;
  color: var(--navy-text);
  background: var(--navy-note-fill);
  font-size: 13px;
}
.syspage .upload-checks { display: grid; gap: 8px; margin: 17px 0; }
.syspage .upload-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: start;
  color: var(--navy-text);
  font-size: 12px;
  line-height: 1.45;
}
.syspage .upload-check span:first-child {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  color: var(--navy-accent);
  background: color-mix(in srgb, var(--navy-accent) 12%, transparent);
  font-size: 12px;
  font-weight: 800;
}
.syspage .review-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin-top: auto;
  border: 1px solid var(--navy-accent);
  border-radius: 11px;
  color: var(--navy);
  background: var(--navy-accent);
  font-size: 13px;
  font-weight: 800;
  transition: background .18s var(--ease-smooth), transform .18s var(--ease-smooth);
}
.syspage .review-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--navy-accent) 80%, var(--white));
  transform: translateY(-1px);
}
.syspage .review-button:disabled {
  cursor: not-allowed;
  border-color: var(--navy-line);
  color: var(--navy-text-dim);
  background: var(--navy-note-fill);
}
.syspage .privacy-note { margin: 10px 0 0; color: var(--navy-text-dim); font-size: 14px; line-height: 1.5; text-align: center; }

/* responsive: tiles 4 -> 3 -> 2 -> 1, workbench stacks, nothing meaningful
   is hidden (the time-note is restyled compact, never display:none) */
@media (max-width: 1080px) {
  .syspage .system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .syspage .workbench { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 860px) {
  .syspage .intro { grid-template-columns: 1fr; gap: 18px; }
  .syspage .time-note { width: 100%; min-width: 0; }
  .syspage .systems-heading { grid-template-columns: 1fr; gap: 15px; }
  .syspage .system-search-wrap { max-width: 360px; }
  .syspage .system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .syspage .workbench { grid-template-columns: 1fr; }
  .syspage .guide-reader { max-height: none; overflow-y: visible; border-right: 0; border-bottom: 1px solid var(--border); }
}
@media (max-width: 620px) {
  .syspage .breadcrumbs { margin-bottom: 18px; flex-wrap: wrap; }
  .syspage .intro h1 { font-size: 34px; }
  .syspage .journey-strip { grid-template-columns: 1fr; gap: 9px; }
  .syspage .journey-step:not(:last-child)::after { display: none; }
  .syspage .systems-card { padding: 20px; border-radius: 18px; }
  .syspage .system-toolbar { display: block; }
  .syspage .system-count { display: block; margin-top: 10px; }
  .syspage .system-grid { grid-template-columns: 1fr; }
  .syspage .request-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .syspage .workspace-card { border-radius: 18px; }
  .syspage .workspace-heading { align-items: flex-start; }
  .syspage .selected-system h2 { white-space: normal; overflow: visible; }
  .syspage .guide-reader { padding: 6px 19px 20px; }
  .syspage .upload-panel { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .syspage *, .syspage *::before, .syspage *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- General file-upload page (dedicated /import/upload/) ----------
   Rebuilt from the approved concept docs/import-file-guide.html. Scoped under
   .filepage and uses ONLY tokens: ink -> --text, muted -> --text-dim, paper ->
   --bg, card -> --surface, line -> --border, green -> --accent*, blue upload
   accent -> --info*, conversion accent (mockup purple, no purple token) ->
   --warn*, navy source panel -> --navy* family, red -> --danger, Fraunces ->
   --font-display, DM Sans -> --font-body, mono -> --font-counter. Derived tints
   use color-mix over the same tokens (precedent: .feed-page + .syspage). The
   two ambient blobs are painted as background radial-gradients, never sized,
   absolutely-positioned circles, so they can never create horizontal scroll. */
.filepage {
  position: relative;
  background:
    radial-gradient(44% 38% at 0% 0%, color-mix(in srgb, var(--info-light) 48%, transparent), transparent 62%),
    radial-gradient(50% 46% at 100% 100%, color-mix(in srgb, var(--accent-light) 40%, transparent), transparent 72%);
}
.filepage h1, .filepage h2, .filepage h3 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  line-height: 1.08;
  color: var(--text);
}

.filepage .breadcrumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
}
.filepage .breadcrumbs a { color: var(--text-dim); text-decoration: none; }
.filepage .breadcrumbs a:hover { color: var(--accent); }
.filepage .breadcrumbs span[aria-current="page"] { color: var(--text); }
.filepage .breadcrumb-arrow { color: var(--text-faint); }

/* intro row: eyebrow + display headline + copy, flex-note aside on the right */
.filepage .intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 26px;
}
.filepage .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  color: var(--info);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.filepage .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.filepage .intro h1 {
  max-width: 780px;
  margin: 0 0 10px;
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 500;
}
.filepage .intro-copy {
  max-width: 740px;
  margin: 0;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.6;
}
.filepage .flex-note {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 224px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  color: var(--text-dim);
  font-size: 13px;
}
.filepage .format-stack {
  position: relative;
  display: block;
  width: 42px;
  height: 38px;
  flex: 0 0 42px;
}
.filepage .format-stack i {
  position: absolute;
  display: grid;
  place-items: center;
  width: 28px;
  height: 31px;
  border: 1px solid var(--info);
  border-radius: 7px;
  color: var(--info);
  background: var(--info-light);
  font: 900 7px/1 var(--font-counter);
}
.filepage .format-stack i:first-child { top: 1px; left: 1px; transform: rotate(-7deg); opacity: .62; }
.filepage .format-stack i:last-child { right: 1px; bottom: 1px; }
.filepage .flex-note strong { display: block; color: var(--text); font-size: 14px; }

/* journey strip (01 active / 02 / 03) */
.filepage .journey-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 18px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-alt);
}
.filepage .journey-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 14px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
}
.filepage .journey-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 28px;
  height: 1px;
  background: color-mix(in srgb, var(--text-faint) 45%, var(--border));
}
.filepage .journey-number {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--text-faint) 45%, var(--border));
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-counter);
}
.filepage .journey-step.active { color: var(--text); }
.filepage .journey-step.active .journey-number {
  border-color: var(--info);
  color: var(--white);
  background: var(--info);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--info) 20%, transparent);
}

/* upload-layout: upload card (left) + navy source guide (right) */
.filepage .upload-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
.filepage .upload-card,
.filepage .source-guide,
.filepage .conversion-card,
.filepage .ready-card {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.filepage .upload-card { min-width: 0; padding: 28px; }
.filepage .card-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 25px;
  margin-bottom: 20px;
}
.filepage .card-heading h2 { margin: 0 0 6px; font-size: 28px; font-weight: 600; }
.filepage .card-heading p { max-width: 560px; margin: 0; color: var(--text-dim); font-size: 14px; }
.filepage .format-badges { display: flex; gap: 6px; flex: 0 0 auto; }
.filepage .format-badge {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 31px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--info) 35%, var(--border));
  border-radius: 8px;
  color: var(--info);
  background: var(--info-light);
  font: 900 12px/1 var(--font-counter);
}
.filepage .upload-error {
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius: 10px;
  color: var(--danger);
  background: var(--danger-light);
  font-size: 14px;
  line-height: 1.5;
}

/* drop-zone: pure-CSS sheet illustration + choose/drag, blue accent */
.filepage .drop-zone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 28px;
  border: 1px dashed color-mix(in srgb, var(--info) 45%, var(--border));
  border-radius: 17px;
  background:
    linear-gradient(color-mix(in srgb, var(--info) 4%, transparent) 1px, transparent 1px) 0 0 / 100% 31px,
    color-mix(in srgb, var(--info-light) 26%, var(--surface));
  text-align: center;
  transition: border-color .18s var(--ease-smooth), background .18s var(--ease-smooth);
}
.filepage .drop-zone:hover,
.filepage .drop-zone.dragover {
  border-color: var(--info);
  background:
    linear-gradient(color-mix(in srgb, var(--info) 6%, transparent) 1px, transparent 1px) 0 0 / 100% 31px,
    color-mix(in srgb, var(--info-light) 42%, var(--surface));
}
.filepage .sheet-visual {
  position: relative;
  width: 78px;
  height: 73px;
  margin: 0 auto 14px;
}
.filepage .sheet-page {
  position: absolute;
  top: 2px;
  left: 11px;
  width: 52px;
  height: 63px;
  padding: 22px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--info) 40%, var(--border));
  border-radius: 9px 19px 9px 9px;
  background: var(--surface);
  box-shadow: 0 9px 18px color-mix(in srgb, var(--info) 12%, transparent);
  transform: rotate(-2deg);
}
.filepage .sheet-page::before {
  content: "PRODUCTS";
  position: absolute;
  top: 8px;
  left: 8px;
  color: var(--info);
  font: 900 7px/1 var(--font-counter);
}
.filepage .sheet-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  border-top: 1px solid color-mix(in srgb, var(--info) 30%, var(--border));
  border-left: 1px solid color-mix(in srgb, var(--info) 30%, var(--border));
}
.filepage .sheet-grid span {
  border-right: 1px solid color-mix(in srgb, var(--info) 30%, var(--border));
  border-bottom: 1px solid color-mix(in srgb, var(--info) 30%, var(--border));
}
.filepage .sheet-grid span:nth-child(-n+3) { background: var(--info-light); }
.filepage .upload-arrow {
  position: absolute;
  right: 4px;
  bottom: 1px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--white);
  background: var(--info);
  box-shadow: 0 6px 13px color-mix(in srgb, var(--info) 24%, transparent);
  font-size: 17px;
  font-weight: 900;
}
.filepage .empty-drop strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--text); }
.filepage .empty-drop p { margin: 0 0 15px; color: var(--text-dim); font-size: 13px; }
.filepage .choose-button {
  min-height: 43px;
  padding: 0 15px;
  border: 1px solid var(--info);
  border-radius: 10px;
  color: var(--white);
  background: var(--info);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s var(--ease-smooth), transform .18s var(--ease-smooth);
}
.filepage .choose-button:hover { background: color-mix(in srgb, var(--info) 86%, black); transform: translateY(-1px); }

/* file-selected state: extension chip + name + size + remove, honest "ready
   for the structure check on the next screen" (no client-side row/column scan) */
.filepage .file-result {
  display: none;
  width: 100%;
  text-align: left;
}
.filepage .file-result.visible { display: block; animation: fadeUp .22s var(--ease-smooth) both; }
.filepage .file-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 13px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--info) 30%, var(--border));
  border-radius: 12px;
  background: var(--surface);
}
.filepage .file-type {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: var(--info);
  background: var(--info-light);
  font: 900 12px/1 var(--font-counter);
}
.filepage .file-copy { min-width: 0; }
.filepage .file-copy strong {
  display: block;
  overflow: hidden;
  margin-bottom: 3px;
  font-size: 14px;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filepage .file-copy small { color: var(--text-dim); font-size: 12px; }
.filepage .remove-file {
  width: 31px;
  height: 31px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-dim);
  background: var(--surface-alt);
  font-size: 14px;
  cursor: pointer;
}
.filepage .scan-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.filepage .scan-label::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  color: var(--accent);
  background: var(--accent-light);
  font-size: 12px;
}

.filepage .upload-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 17px;
}
.filepage .safe-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
}
.filepage .safe-note > span:first-child {
  display: grid;
  flex: 0 0 22px;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: var(--accent);
  background: var(--accent-light);
  font-size: 12px;
  font-weight: 900;
}
.filepage .safe-note strong { color: var(--text); }
.filepage .review-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 170px;
  min-height: 48px;
  padding: 0 17px;
  border: 1px solid var(--accent);
  border-radius: 11px;
  color: var(--white);
  background: var(--accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 16%, transparent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s var(--ease-smooth), transform .18s var(--ease-smooth);
}
.filepage .review-button:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
.filepage .review-button:disabled {
  cursor: not-allowed;
  border-color: var(--border);
  color: var(--text-faint);
  background: var(--surface-alt);
  box-shadow: none;
}

/* navy source guide aside */
.filepage .source-guide {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  border: 1px solid transparent;
  color: var(--navy-heading);
  background: var(--navy);
  box-shadow: var(--shadow-float);
}
.filepage .guide-kicker {
  margin: 0 0 11px;
  color: var(--navy-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.filepage .source-guide h2 { margin: 0 0 8px; font-size: 26px; font-weight: 500; color: var(--navy-heading); }
.filepage .guide-intro { margin: 0 0 18px; color: var(--navy-text); font-size: 13px; line-height: 1.55; }
.filepage .source-list { display: grid; gap: 7px; margin-bottom: 18px; }
.filepage .source-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--navy-line);
  border-radius: 10px;
  background: var(--navy-fill);
}
.filepage .source-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--navy-accent);
  background: color-mix(in srgb, var(--navy-accent) 12%, transparent);
  font: 900 12px/1 var(--font-counter);
}
.filepage .source-item strong { display: block; margin-bottom: 1px; font-size: 12px; color: var(--navy-heading); }
.filepage .source-item span:last-child { color: var(--navy-text-dim); font-size: 13px; }
.filepage .rules-title {
  margin: 0 0 10px;
  color: var(--navy-heading);
  font-size: 12px;
  font-weight: 800;
}
.filepage .rules { display: grid; gap: 10px; }
.filepage .rule {
  display: grid;
  grid-template-columns: 23px 1fr;
  gap: 9px;
  color: var(--navy-text);
  font-size: 12px;
  line-height: 1.45;
}
.filepage .rule span:first-child {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid var(--navy-line);
  border-radius: 7px;
  color: var(--navy-accent);
  background: var(--navy-fill);
  font: 900 12px/1 var(--font-counter);
}
.filepage .recognized-note {
  margin: 16px 0 0;
  color: var(--navy-text-dim);
  font-size: 12px;
  line-height: 1.5;
}
.filepage .template-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 43px;
  margin-top: auto;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--navy-accent) 30%, transparent);
  border-radius: 9px;
  color: var(--navy-accent);
  background: color-mix(in srgb, var(--navy-accent) 8%, transparent);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: background .18s var(--ease-smooth);
}
.filepage .source-list + .rules-title,
.filepage .recognized-note + .template-link { margin-top: 16px; }
.filepage .template-link:hover { background: color-mix(in srgb, var(--navy-accent) 14%, transparent); }

/* conversion card: format toggles switch server-rendered instruction panels */
.filepage .conversion-card {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 28px;
  margin-top: 18px;
  padding: 28px;
}
.filepage .conversion-copy .mini-label {
  margin: 0 0 8px;
  color: var(--warn);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.filepage .conversion-copy h2 { margin: 0 0 7px; font-size: 26px; font-weight: 600; }
.filepage .conversion-copy > p { margin: 0 0 18px; color: var(--text-dim); font-size: 14px; }
.filepage .conversion-note {
  display: flex;
  gap: 9px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 24%, var(--border));
  border-radius: 10px;
  color: var(--warn-text);
  background: var(--warn-light);
  font-size: 12px;
  line-height: 1.45;
}
.filepage .conversion-note span:first-child {
  display: grid;
  flex: 0 0 22px;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  font: 900 12px/1 var(--font-body);
}
.filepage .converter { min-width: 0; }
.filepage .converter-label { margin: 0 0 10px; color: var(--text-dim); font-size: 12px; font-weight: 800; }
.filepage .format-options {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 15px;
}
.filepage .format-option {
  min-width: 0;
  min-height: 62px;
  padding: 8px 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  background: var(--surface-alt);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s var(--ease-smooth), background .18s var(--ease-smooth), transform .18s var(--ease-smooth);
}
.filepage .format-option:hover { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); transform: translateY(-1px); }
.filepage .format-option.active {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  color: var(--warn-text);
  background: var(--warn-light);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 10%, transparent);
}
.filepage .format-option span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin: 0 auto 4px;
  border-radius: 8px;
  color: var(--warn);
  background: var(--surface);
  font: 900 12px/1 var(--font-counter);
}
.filepage .conversion-instructions {
  min-height: 126px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-alt);
}
.filepage .conversion-panel {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 15px;
}
.filepage .conversion-panel[hidden] { display: none; }
.filepage .conversion-head h3 { margin: 0 0 5px; font-size: 18px; font-weight: 600; }
.filepage .conversion-head p { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.filepage .conversion-steps { display: grid; gap: 7px; }
.filepage .conversion-step {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}
.filepage .conversion-step span:first-child {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  font: 900 12px/1 var(--font-counter);
}

/* ready card: field pills, essential/recommended tags from the real mapper */
.filepage .ready-card {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  gap: 28px;
  align-items: center;
  margin-top: 18px;
  padding: 24px 27px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: none;
}
.filepage .ready-copy .mini-label {
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.filepage .ready-copy h2 { margin: 0 0 6px; font-size: 24px; font-weight: 600; }
.filepage .ready-copy p { margin: 0; color: var(--text-dim); font-size: 13px; }
.filepage .field-row { display: flex; flex-wrap: wrap; gap: 7px; }
.filepage .field-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
}
.filepage .field-pill::before { content: "✓"; color: var(--accent); font-size: 12px; font-weight: 900; }
.filepage .field-pill.optional::before { content: "+"; color: var(--info); }
.filepage .field-pill small {
  padding: 2px 5px;
  border-radius: 5px;
  color: var(--text-dim);
  background: var(--surface-alt);
  font-size: 12px;
  font-weight: 800;
}

/* responsive: two-col layouts stack, format-options 6 -> 3 -> 2, nothing
   meaningful is hidden (the flex-note is restyled compact, never display:none;
   an uncapped decorative circle previously caused 26-96px horizontal scroll) */
@media (max-width: 1080px) {
  .filepage .upload-layout { grid-template-columns: 1fr; }
  .filepage .conversion-card { grid-template-columns: 1fr; gap: 19px; }
  .filepage .format-options { grid-template-columns: repeat(3, 1fr); }
  .filepage .ready-card { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 860px) {
  .filepage .intro { grid-template-columns: 1fr; gap: 18px; }
  .filepage .flex-note { width: 100%; min-width: 0; }
}
@media (max-width: 620px) {
  .filepage .breadcrumbs { margin-bottom: 18px; flex-wrap: wrap; }
  .filepage .intro h1 { font-size: 34px; }
  .filepage .journey-strip { grid-template-columns: 1fr; gap: 9px; }
  .filepage .journey-step:not(:last-child)::after { display: none; }
  .filepage .upload-card { padding: 20px; border-radius: 18px; }
  .filepage .card-heading { display: block; }
  .filepage .format-badges { margin-top: 13px; }
  .filepage .drop-zone { min-height: 250px; padding: 20px 14px; }
  .filepage .upload-footer { grid-template-columns: 1fr; }
  .filepage .review-button { width: 100%; }
  .filepage .source-guide { padding: 23px 20px; border-radius: 18px; }
  .filepage .conversion-card { padding: 22px 19px; border-radius: 18px; }
  .filepage .format-options { grid-template-columns: repeat(2, 1fr); }
  .filepage .conversion-panel { grid-template-columns: 1fr; }
  .filepage .ready-card { padding: 21px 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .filepage *, .filepage *::before, .filepage *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Active dashboard v2 (concept docs/dashboard-active-v2.html) ─────────
   A focused working surface for a store that has started classifying. Scoped
   under .dashv2 so it never touches the empty-state onboarding or the shared
   chrome. Tokens only (color-mix for tints); the dark time-card reuses the
   --navy family already lifted for the onboarding next-panel. The catalog ring
   is the existing SVG ring (count-up JS drives .ring-fill); the time counter
   reuses the shipped .sb-digit flip tiles ([data-countup-digits]). */
.dashv2 { --line-strong: color-mix(in srgb, var(--border) 65%, var(--text-dim)); }

/* page intro: date eyebrow + greeting + one calm sub-line */
.dashv2 .page-intro { margin: 4px 0 22px; }
.dashv2 .eyebrow { display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 9px; color: var(--accent); font-size: 12px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; }
.dashv2 .eyebrow::before { content: ""; width: 20px; height: 2px;
  background: currentColor; }
.dashv2 .page-greeting { font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 4vw, 46px); letter-spacing: -.02em; line-height: 1.08;
  margin: 0 0 6px; }
.dashv2 .page-sub { margin: 0; color: var(--text-dim); font-size: 14px; }

/* hero: catalog progress on the left, time-saved card on the right */
.dashv2 .hero { display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .72fr);
  overflow: hidden; border: 1px solid var(--border); border-radius: 24px;
  background: var(--surface); box-shadow: var(--shadow-float); }
.dashv2 .hero-progress { display: flex; flex-direction: column;
  padding: 32px 36px 28px; }
.dashv2 .hero-topline { display: flex; justify-content: space-between;
  align-items: center; gap: 20px; margin-bottom: 24px; }
.dashv2 .running-label { display: inline-flex; align-items: center; gap: 9px;
  color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; }
.dashv2 .running-mark { display: grid; place-items: center; width: 25px;
  height: 25px; border-radius: 8px; color: var(--accent);
  background: var(--accent-light); font-size: 14px; }
.dashv2 .running-mark.pulse { background: var(--accent-light); }
.dashv2 .running-mark .pulse-dot { width: 9px; height: 9px; }
.dashv2 .sample-badge { padding: 6px 9px; border-radius: 7px;
  color: var(--warn-text); background: var(--warn-light); font-size: 12px;
  font-weight: 800; letter-spacing: .04em; }

.dashv2 .progress-main { display: grid;
  grid-template-columns: 150px minmax(0, 1fr); gap: 30px; align-items: center; }
.dashv2 .ring-wrap { width: 150px; height: 150px; }
.dashv2 .ring-wrap .ring { width: 150px; height: 150px; }
.dashv2 .ring-pct { flex-direction: column; gap: 2px; }
.dashv2 .ring-num { white-space: nowrap; }
.dashv2 .ring-pct small { font-family: var(--font-body); font-size: 12px;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-dim); }
.dashv2 .hero-message h2 { font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 3vw, 36px); letter-spacing: -.02em; line-height: 1.12;
  margin: 0 0 8px; max-width: 460px; }
.dashv2 .hero-lede { max-width: 520px; margin: 0 0 18px; color: var(--text-dim);
  font-size: 14px; line-height: 1.55; }
.dashv2 .hero-lede strong { color: var(--text); font-weight: 700; }

.dashv2 .status-strip { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; }
.dashv2 .status-metric { min-width: 0; padding: 11px 13px; border-radius: 11px;
  background: var(--surface-alt); }
.dashv2 .status-metric strong { display: block; font-family: var(--font-display);
  font-weight: 600; font-size: 23px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.dashv2 .status-metric span { display: block; margin-top: 4px;
  color: var(--text-dim); font-size: 12px; font-weight: 700;
  line-height: 1.35; }
.dashv2 .status-metric.ready strong { color: var(--accent); }
.dashv2 .status-metric.check strong { color: var(--warn); }

.dashv2 .flow-rail { display: grid; grid-template-columns: 3fr 2fr 1fr; gap: 4px;
  height: 7px; margin-top: 24px; overflow: hidden; border-radius: 999px; }
.dashv2 .flow-rail span:nth-child(1) { background: var(--accent); }
.dashv2 .flow-rail span:nth-child(2) { background: var(--warn); }
.dashv2 .flow-rail span:nth-child(3) { background: var(--accent-light); }

/* time-saved card: dark navy panel, reused flip-tile counter */
.dashv2 .time-card { position: relative; display: flex; flex-direction: column;
  justify-content: center; overflow: hidden; padding: 34px 36px; color: var(--white);
  background: radial-gradient(circle at 100% 0%,
      color-mix(in srgb, var(--navy-accent) 22%, transparent), transparent 15rem),
    var(--navy); }
.dashv2 .time-card::before, .dashv2 .time-card::after { content: "";
  position: absolute; border: 1px solid var(--navy-line); border-radius: 50%;
  pointer-events: none; }
.dashv2 .time-card::before { top: -116px; right: -94px; width: 255px; height: 255px; }
.dashv2 .time-card::after { top: -66px; right: -47px; width: 165px; height: 165px; }
.dashv2 .time-label { position: relative; z-index: 1; margin-bottom: 16px;
  color: var(--navy-accent); font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; }
.dashv2 .time-display { position: relative; z-index: 1; display: flex;
  align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.dashv2 .time-card .sb-tiles { gap: 7px; }
.dashv2 .time-card .sb-digit { width: 66px; height: 86px; font-size: 56px;
  border: 1px solid var(--navy-line); border-radius: 11px; color: var(--white);
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--white) 5%, transparent) 0 49.5%,
      color-mix(in srgb, black 12%, transparent) 50% 100%),
    color-mix(in srgb, black 35%, var(--navy));
  box-shadow: 0 13px 24px color-mix(in srgb, black 18%, transparent); }
.dashv2 .time-card .sb-digit::after { border-top-color: color-mix(in srgb, black 35%, transparent); }
.dashv2 .time-unit { padding-bottom: 8px; color: var(--navy-text);
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dashv2 .time-caption { position: relative; z-index: 1; margin: 0;
  color: var(--navy-text); font-size: 13px; line-height: 1.55; max-width: 260px; }
.dashv2 .time-copy { position: relative; z-index: 1; max-width: 320px;
  margin: 16px 0 0; padding-top: 15px; border-top: 1px solid var(--navy-line);
  color: var(--navy-text-dim); font-size: 13px; line-height: 1.6; }

/* workspace grid: attention panel + side stack, activity spans full width */
.dashv2 .workspace-grid { display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 18px; margin-top: 18px; }
.dashv2 .panel { min-width: 0; border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow-card); }
.dashv2 .panel-header { display: flex; justify-content: space-between;
  align-items: flex-end; gap: 20px; padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border); }
.dashv2 .panel-header h2 { font-family: var(--font-display); font-weight: 600;
  font-size: 22px; margin: 0 0 4px; }
.dashv2 .panel-header p { margin: 0; color: var(--text-dim); font-size: 13px; }
.dashv2 .text-link { flex: 0 0 auto; border: 0; padding: 0; color: var(--accent);
  background: transparent; font-size: 13px; font-weight: 700; text-decoration: none;
  white-space: nowrap; }
.dashv2 .text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* action cards (override the legacy .action-card layout) */
.dashv2 .action-list { display: grid; gap: 10px; padding: 14px; }
.dashv2 .action-card { --action: var(--accent); position: relative; display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  min-height: 90px; padding: 16px; overflow: hidden; border: 1px solid var(--border);
  border-left: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  animation: none; transition: transform .18s ease, border-color .18s ease,
    box-shadow .18s ease; }
.dashv2 .action-card:hover { transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--action) 34%, var(--border));
  box-shadow: var(--shadow-card); }
.dashv2 .action-card::before { content: ""; position: absolute; top: 0; bottom: 0;
  left: 0; width: 3px; background: var(--action); }
.dashv2 .action-card.kind-supplier, .dashv2 .action-card.kind-alerts { --action: var(--warn); }
.dashv2 .action-card.kind-caught_up { --action: var(--accent); }
.dashv2 .action-icon { display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; color: var(--action);
  background: color-mix(in srgb, var(--action) 12%, var(--surface));
  font-size: 18px; font-weight: 800; text-align: center; }
.dashv2 .action-copy { min-width: 0; }
.dashv2 .action-copy strong { display: block; min-width: 0; margin-bottom: 3px;
  font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.dashv2 .action-copy p { overflow-wrap: anywhere; }
.dashv2 .action-copy p { margin: 0; color: var(--text-dim); font-size: 13px;
  line-height: 1.5; }
.dashv2 .product-chip { display: inline-block; margin-top: 8px; padding: 4px 9px;
  border-radius: 999px; color: var(--action);
  background: color-mix(in srgb, var(--action) 12%, var(--surface));
  font-size: 12px; font-weight: 800; }
.dashv2 .action-button, .dashv2 .primary-button, .dashv2 .ghost-button {
  display: inline-flex; justify-content: center; align-items: center; gap: 7px;
  min-height: 42px; padding: 0 16px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background .18s ease,
    transform .18s ease; }
.dashv2 .action-button.primary, .dashv2 .primary-button { color: var(--white);
  border-color: var(--accent); background: var(--accent); }
.dashv2 .action-button:hover, .dashv2 .ghost-button:hover { transform: translateY(-1px);
  border-color: var(--accent); color: var(--accent); }
.dashv2 .action-button.primary:hover, .dashv2 .primary-button:hover {
  transform: translateY(-1px); color: var(--white); background: var(--accent-hover);
  border-color: var(--accent-hover); }

/* side stack: usage meter, quick-add, held work */
.dashv2 .side-stack { display: grid; gap: 18px; align-content: start; }
.dashv2 .usage-panel { padding: 22px 24px; }
.dashv2 .usage-top { display: flex; justify-content: space-between;
  align-items: baseline; gap: 16px; margin-bottom: 14px; }
.dashv2 .usage-top h2 { font-family: var(--font-display); font-weight: 600;
  font-size: 20px; margin: 0; }
.dashv2 .usage-panel .usage-meter { margin: 0; }
.dashv2 .dash-monitoring-teaser { margin-top: 14px; font-size: 13px; }

.dashv2 .quick-add { padding: 24px; color: var(--white); border-color: transparent;
  background: radial-gradient(circle at 92% 18%,
      color-mix(in srgb, var(--white) 8%, transparent), transparent 9rem),
    var(--accent); }
.dashv2 .quick-add-label { margin: 0 0 10px; color: var(--accent-light);
  font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.dashv2 .quick-add h2 { font-family: var(--font-display); font-weight: 500;
  font-size: 24px; margin: 0 0 7px; }
.dashv2 .quick-add p { margin: 0 0 16px;
  color: color-mix(in srgb, var(--white) 82%, var(--accent)); font-size: 13px; }
.dashv2 .quick-add .primary-button { width: 100%; color: var(--accent);
  border-color: var(--white); background: var(--white); }
.dashv2 .quick-add .primary-button:hover { color: var(--accent-hover);
  background: var(--accent-light); border-color: var(--accent-light); }

.dashv2 .held-panel { padding: 22px 24px; }
.dashv2 .held-label { margin: 0 0 8px; color: var(--warn-text); font-size: 12px;
  font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.dashv2 .held-heading { font-family: var(--font-display); font-weight: 600;
  font-size: 19px; margin: 0 0 6px; }
.dashv2 .held-panel .dash-held { margin: 0 0 14px; border: 0; }
.dashv2 .held-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.dashv2 .held-cta .primary-button, .dashv2 .held-cta .ghost-button {
  min-height: 40px; }

/* activity panel: three lazy tabs */
.dashv2 .activity-panel { grid-column: 1 / -1; }
.dashv2 .tabbar { display: flex; align-items: center; gap: 6px; padding: 0 24px;
  border-bottom: 1px solid var(--border); }
.dashv2 .tab { position: relative; min-height: 52px; padding: 0 12px; border: 0;
  background: transparent; color: var(--text-dim); font-family: var(--font-body);
  font-size: 13px; font-weight: 700; cursor: pointer; }
.dashv2 .tab:hover { color: var(--text); }
.dashv2 .tab.is-active { color: var(--accent); }
.dashv2 .tab.is-active::after { content: ""; position: absolute; right: 10px;
  bottom: -1px; left: 10px; height: 2px; background: var(--accent);
  border-radius: 2px 2px 0 0; }
.dashv2 .dash-tab-body { padding: 6px 10px 10px; }
.dashv2 .tab-loading { padding: 32px 14px; color: var(--text-faint);
  font-size: 14px; text-align: center; }
.dashv2 .completed-summary { padding: 14px 14px 4px; margin: 0; font-size: 14px;
  color: var(--text-dim); }
.dashv2 .completed-summary strong { color: var(--text); font-family: var(--font-display);
  font-weight: 600; }
.dashv2 .completed-foot { padding: 8px 14px 12px; font-size: 13px; }
.dashv2 .empty-state { padding: 40px 20px; }
.dashv2 .empty-state .text-link { display: inline-block; margin-top: 12px; }

@media (max-width: 1120px) {
  .dashv2 .hero { grid-template-columns: minmax(0, 1fr) 320px; }
  .dashv2 .workspace-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 900px) {
  .dashv2 .hero { grid-template-columns: minmax(0, 1fr); }
  .dashv2 .time-card { min-height: 260px; }
  .dashv2 .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .dashv2 .side-stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 650px) {
  .dashv2 .hero-progress { padding: 24px 20px; }
  .dashv2 .progress-main { grid-template-columns: 1fr; gap: 22px; justify-items: center;
    text-align: center; }
  .dashv2 .hero-message { text-align: left; width: 100%; }
  .dashv2 .status-strip { grid-template-columns: 1fr; }
  .dashv2 .status-metric { display: flex; justify-content: space-between;
    align-items: center; }
  .dashv2 .status-metric span { margin: 0; }
  .dashv2 .time-card { padding: 26px 22px; }
  .dashv2 .side-stack { grid-template-columns: minmax(0, 1fr); }
  .dashv2 .panel-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dashv2 .action-card { grid-template-columns: 40px minmax(0, 1fr); }
  .dashv2 .action-button { grid-column: 1 / -1; width: 100%; }
  .dashv2 .tabbar { padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
  .dashv2 .tabbar::-webkit-scrollbar { display: none; }
  .dashv2 .tab { white-space: nowrap; }
}
@media (max-width: 430px) {
  .dashv2 .hero { border-radius: 16px; }
  .dashv2 .panel { border-radius: 15px; }
  .dashv2 .time-card .sb-digit { width: 58px; height: 76px; font-size: 48px; }
}

/* ---------- product detail page, /products/<pk>/ (.pd-) ----------
   The product workspace (mockup docs/product-classified-redesign.html): a
   heading that names the product and its situation, then three areas, the
   product context on the left, the classification in the middle and the
   actions on the right. The middle and the right live in #pd-stage, the one
   HTMX target every case action redraws, so the stage is display:contents and
   its children sit in the page grid themselves. Tablet puts the actions beside
   the classification with the product below; from 860px everything stacks,
   classification first. Tokens only, and it reuses the review workspace
   primitives (.card, .badge, .conf-chip, .trust-band, .detail-rows, .rq-thumb)
   so the screens read as one system. */
.pd-wrap { max-width: 1500px; }
.pd-back {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.pd-back:hover { color: var(--accent); }

.pd-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.pd-heading-copy { min-width: 0; }
.pd-title { font-size: 34px; line-height: 1.14; overflow-wrap: anywhere; }
.pd-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 9px;
  font-size: 14px;
  color: var(--text-dim);
}
.pd-meta-dot {
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-faint);
}
.pd-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.pd-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.pd-status-ok    { color: var(--accent-hover); background: var(--accent-light); }
.pd-status-warn  { color: var(--warn-text); background: var(--warn-light); }
.pd-status-info  { color: var(--info); background: var(--info-light); }
.pd-status-quiet { color: var(--text-dim); background: var(--surface-alt); }

/* the three areas */
.pd-workspace {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 340px;
  grid-template-areas: "product main record";
  gap: 16px;
  align-items: start;
}
/* the swap wrapper is not a box of its own: its two children are the grid's
   own items, so an HTMX swap never disturbs the layout */
.pd-stage { display: contents; }
.pd-product-panel { grid-area: product; }
.pd-main {
  grid-area: main;
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}
.pd-record { grid-area: record; }

/* panels: a bordered head, then a body, instead of the plain .card padding */
.pd-panel { padding: 0; overflow: hidden; }
.pd-panel-head { padding: 18px 20px 15px; border-bottom: 1px solid var(--border); }
/* a panel with nothing to act on (working, not classified) is its head alone,
   so the hairline would float under an empty card */
.pd-panel-head:last-child { border-bottom: 0; padding-bottom: 18px; }
.pd-panel-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}
.pd-panel-sub { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin-top: 5px; }
.pd-panel-body { padding: 16px 20px 20px; }
.pd-eyebrow {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* left, the product context */
.pd-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pd-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pd-variants { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.pd-variants-note { white-space: normal; margin-top: 6px; }
.pd-variant-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.pd-variant-link { color: var(--text); text-decoration: none; font-weight: 600; }
.pd-variant-link:hover { color: var(--accent); }

/* centre, the applied code hero */
.pd-hero { padding: 0; overflow: hidden; border-color: var(--accent); }
.pd-hero-top {
  padding: 24px 26px 22px;
  background: linear-gradient(135deg, var(--accent-light), var(--surface) 68%);
}
.pd-hero-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.pd-hero-kicker span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--white);
  font-size: 12px;
}
.pd-hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 180px);
  gap: 22px;
  align-items: start;
}
.pd-hero-copy { min-width: 0; }
.pd-code-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-hero-code {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pd-copy {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.pd-copy:hover { border-color: var(--accent); }
.pd-hero-desc { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin-top: 9px; }
.pd-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 15px; }
.pd-pill-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--info);
  background: var(--info-light);
}
.pd-duty { min-width: 0; padding-left: 18px; border-left: 1px solid var(--border); }
.pd-duty-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.pd-duty-rate {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--accent-hover);
  margin-top: 2px;
}
.pd-duty-est,
.pd-duty-extra,
.pd-duty-note {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.45;
  margin-top: 5px;
}
.pd-duty-note { color: var(--text-faint); }
.pd-hero-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-top: 1px solid var(--border);
}

/* centre, the evidence card wrapping the shared "here's why": the shared
   partial is never forked, only re-dressed here as a full-width disclosure */
.pd-evidence-lead { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.pd-evidence .here-why {
  margin: 12px 0 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.pd-evidence .here-why-summary { padding: 12px 14px; font-size: 14px; }
.pd-evidence .here-why-body { margin: 0 12px 12px; background: var(--surface); }

/* centre, the support tiles */
.pd-support {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.pd-support-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.pd-support-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.pd-support-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--info-light);
  color: var(--info);
  font-size: 14px;
}
.pd-support-copy { min-width: 0; }
.pd-support-copy strong { display: block; font-size: 14px; line-height: 1.35; }
.pd-support-desc {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.45;
}

/* centre, the state cards for everything that is not settled yet */
.pd-state-card .pd-eyebrow { margin-bottom: 8px; }
.pd-state-line { font-size: 14px; line-height: 1.55; margin-bottom: 4px; }
.pd-state-line.quiet { color: var(--text-dim); }
.pd-state-card .pd-code-card { margin-top: 16px; margin-bottom: 0; }
.pd-state-card .here-why { margin-bottom: 0; }
.pd-state-note { margin-top: 8px; font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.pd-quiet-link { color: var(--text-dim); font-size: 14px; font-weight: 600; text-decoration: none; }
.pd-quiet-link:hover { color: var(--accent); }

/* centre, waiting for the supplier: the applied-code hero's shape in the info
   tone, so a product waiting on somebody else reads as calm progress and
   never as a warning */
.pd-wait { border-color: var(--info); }
.pd-wait .pd-hero-top {
  background: linear-gradient(135deg, var(--info-light), var(--surface) 68%);
}
.pd-wait .pd-hero-kicker { color: var(--info); }
.pd-wait .pd-hero-kicker span { background: var(--info); }
.pd-wait-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.16;
}
.pd-wait-lead {
  max-width: 64ch;
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
}
/* the facts strip under a hero: label over value, hairline-separated */
.pd-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}
.pd-fact { min-width: 0; padding: 14px 20px; border-right: 1px solid var(--border); }
.pd-fact:last-child { border-right: 0; }
.pd-fact > span {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  color: var(--text-dim);
}
.pd-fact strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.pd-fact-info { color: var(--info); }
/* the calm "this has been sitting a while" line under a fact */
.pd-fact-note { display: block; margin-top: 3px; font-size: 12px;
  color: var(--warn-text); }

/* centre, the question itself: the frozen words a supplier is looking at, or
   the one the review queue will put to the merchant */
.pd-question-box {
  position: relative;
  padding: 16px 18px 16px 46px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--info-light);
}
.pd-question-box::before {
  content: "?";
  position: absolute;
  left: 15px;
  top: 15px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--info);
  font-size: 14px;
  font-weight: 800;
}
.pd-question-box strong { display: block; margin-bottom: 5px; font-size: 14px; }
.pd-question-box p { font-size: 14px; line-height: 1.6; }
.pd-question-context,
.pd-question-note {
  margin-top: 11px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
}
.pd-panel-body > .pd-code-card { margin-top: 14px; }

/* centre, the plain-language reason a question exists at all */
.pd-why-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg);
}
.pd-why-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 14px;
}
.pd-why-copy { min-width: 0; }
.pd-why-copy strong { display: block; margin-bottom: 3px; font-size: 14px; }
.pd-why-copy p { font-size: 13px; color: var(--text-dim); line-height: 1.6; }

/* centre, what the platform does next, numbered so the wait feels finite */
.pd-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  list-style: none;
}
.pd-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.pd-step-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}
.pd-step-copy { min-width: 0; }
.pd-step-copy strong { display: block; margin-bottom: 3px; font-size: 13px; }
.pd-step-copy > span {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* right, who the product is waiting for */
.pd-supplier-card {
  margin-bottom: 14px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-alt);
}
.pd-supplier-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pd-supplier-name { display: block; font-size: 14px; overflow-wrap: anywhere; }
.pd-supplier-line {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.pd-code-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 20px 22px;
  border: 1.5px solid var(--accent);
  border-radius: 16px;
  background: var(--accent-tint);
}
.pd-code-card + .pd-code-card { margin-top: 12px; }
/* the kicker reads like the workspace suggestion card: accent, wide caps */
.pd-code-card .field-label { color: var(--accent); font-weight: 800;
  letter-spacing: .1em; }
.pd-code-card.muted .field-label, .pd-code-card.imported .field-label {
  color: var(--text-dim); }
.pd-code-card.muted { border-color: var(--border); background: var(--surface-alt); }
.pd-code-card.imported { border-color: var(--border); background: var(--surface-alt); }
.pd-code-card.flagged { border-color: var(--warn); background: var(--warn-light); }
.pd-code-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pd-code-card.flagged .pd-code-num { color: var(--warn); }
.pd-code-card.muted .pd-code-num, .pd-code-card.imported .pd-code-num { color: var(--text); }
/* the file's own code is a record, not the headline: it never competes with
   the applied-code hero above it */
.pd-code-card.imported, .pd-code-card.flagged { padding: 17px 20px; }
.pd-code-card.imported .pd-code-num, .pd-code-card.flagged .pd-code-num { font-size: 24px; }
/* a code that the public Code Explorer publishes is a link to its page there:
   same look as the plain number, with an underline on hover as the only hint */
.pd-code-link { text-decoration: none; }
.pd-code-link:hover, .pd-code-link:focus-visible { text-decoration: underline; }
.pd-code-title { font-size: 14px; color: var(--text-dim); line-height: 1.45; }
.pd-code-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
/* a long plain-language badge (the invalid-import explanation) wraps inside
   the card instead of pushing the page sideways at 380px */
.pd-code-card .badge { white-space: normal; max-width: 100%; }

/* country of origin (spec 23 §3): the same record card, with the value and
   its edit button on one line that wraps at narrow widths */
.pd-origin, .pd-origin-row, .pd-origin-form { width: 100%; }
/* the origin hint is a full sentence, so it must wrap: .row-meta's nowrap
   min-content was propping the whole middle column open on phones */
.pd-origin .row-meta { min-width: 0; white-space: normal; line-height: 1.5; }
.pd-origin-row { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px; }
.pd-origin-name { font-weight: 600; }
.pd-origin-form { display: flex; flex-direction: column; gap: 10px; }
.pd-origin-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* right, the action panel */
.pd-record-actions { display: flex; flex-direction: column; gap: 8px; }
.pd-action {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.pd-action:hover { border-color: var(--accent); }
.pd-action-arrow { flex: none; color: var(--text-faint); }
.pd-action.accent {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}
.pd-action.accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.pd-action.accent .pd-action-arrow { color: var(--white); }
.pd-action.warn {
  border-color: var(--warn);
  background: var(--warn-light);
  color: var(--warn-text);
}
.pd-action.warn .pd-action-arrow { color: var(--warn); }
.pd-action.danger { color: var(--danger); }
.pd-action.danger:hover { border-color: var(--danger); background: var(--danger-light); }
.pd-action.danger .pd-action-arrow { color: var(--danger); }
/* the one-line explanation under a revert action (take back / reset) */
.pd-action-note { white-space: normal; margin: 2px 0 4px; line-height: 1.5; }
.pd-assign-box { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.pd-assign-box #assign-results { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 1180px) {
  .pd-workspace {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
      "main record"
      "product record";
  }
}
@media (max-width: 860px) {
  .pd-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "product"
      "record";
  }
}
@media (max-width: 560px) {
  .pd-title { font-size: 27px; }
  .pd-panel-head, .pd-panel-body { padding-left: 16px; padding-right: 16px; }
  .pd-hero-top { padding: 20px 16px; }
  .pd-hero-check { padding-left: 16px; padding-right: 16px; }
  .pd-hero-main { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pd-hero-code { font-size: 34px; }
  .pd-duty {
    margin-top: 18px;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .pd-code-card { padding: 18px 15px; }
  .pd-code-num { font-size: 26px; }
  .pd-wait-title { font-size: 24px; }
  .pd-facts { grid-template-columns: minmax(0, 1fr); }
  .pd-fact {
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .pd-fact:last-child { border-bottom: 0; }
  .pd-steps { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- products list, /products/ (.pl-) ----------
   Phase 2 of retiring the products slide-over (mockup
   docs/products-list-redesign.html): a supervision table where every row
   leads somewhere, either the full product page or the review workspace.
   Tokens only, and it borrows the review workspace's (.rw-) and the product
   detail's (.pd-) language so the three screens read as one system. The
   table restacks into cards at 820px, nothing informative is hidden. */
.pl-page { max-width: 1500px; margin: 0 auto; padding: 32px 24px 110px; }

.pl-header {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, .9fr);
  gap: 36px;
  align-items: end;
  margin-bottom: 18px;
}
.pl-header-copy { min-width: 0; }
.pl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.pl-eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; }
.pl-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.pl-lead { font-size: 15px; color: var(--text-dim); line-height: 1.5; }
.pl-header-link { margin-top: 10px; font-size: 14px; }
.pl-header-link a { color: var(--accent); font-weight: 700; text-decoration: none; }
.pl-header-link a:hover { text-decoration: underline; text-underline-offset: 3px; }

.pl-tools { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.pl-search-form { flex: 1; max-width: 520px; min-width: 0; }
.pl-search { position: relative; display: block; }
.pl-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}
.pl-search input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}
.pl-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-accent); }
.pl-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.pl-filter-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent-hover);
  background: var(--accent-light);
}

.pl-filter-panel {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 12px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  animation: fadeUp .25s ease;
}
.pl-filter-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
}
.pl-filter-field select {
  width: 100%;
  height: 43px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}
.pl-filter-field select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-accent); }
.pl-apply {
  min-height: 43px;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.pl-apply:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.pl-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.pl-active-label { color: var(--text-dim); font-size: 13px; font-weight: 700; }
.pl-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
}
.pl-chip-clear { color: var(--text-faint); font-size: 15px; line-height: 1; text-decoration: none; }
.pl-chip-clear:hover { color: var(--danger); }

.pl-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pl-tabs::-webkit-scrollbar { display: none; }
.pl-tabs .status-tab { flex: none; text-decoration: none; white-space: nowrap; }

.pl-panel {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.pl-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.pl-table col.pl-col-check { width: 48px; }
.pl-table col.pl-col-product { width: 36%; }
.pl-table col.pl-col-price { width: 110px; }
.pl-table col.pl-col-code { width: 19%; }
.pl-table col.pl-col-status { width: 21%; }
.pl-table col.pl-col-action { width: 180px; }
.pl-table thead th {
  position: sticky;
  /* the app bar is sticky too, park the head below it instead of underneath */
  top: var(--topbar-h);
  z-index: 5;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .065em;
  text-align: left;
  text-transform: uppercase;
}
.pl-table thead th:first-child { padding-left: 18px; border-top-left-radius: 18px; }
.pl-table thead th:last-child { border-top-right-radius: 18px; }
.pl-sort { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.pl-sort:hover { color: var(--accent); }
.pl-sort-mark { font-size: 12px; letter-spacing: 0; }
.pl-hidden-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pl-row { cursor: pointer; transition: background .16s var(--ease-smooth); }
.pl-row:hover { background: var(--accent-tint); box-shadow: inset 3px 0 var(--accent-light); }
.pl-row.is-selected { background: var(--accent-light); }
.pl-row td {
  height: 88px;
  padding: 14px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.pl-row:last-child td { border-bottom: 0; }
.pl-row td:first-child { padding-left: 18px; }

.pl-copy, .pl-code-inner, .pl-status-inner { display: block; min-width: 0; }
.pl-product-inner { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-thumb {
  flex: none;
  overflow: hidden;
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
}
.pl-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* no photo (or a url that failed): a quiet block, never a broken frame */
.pl-thumb-empty { border-style: dashed; }
.pl-title-link {
  display: block;
  margin-bottom: 5px;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-title-link:hover { color: var(--accent); }
.pl-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text-dim);
  font-size: 13px;
}
.pl-meta-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-variant-pill {
  flex: none;
  padding: 3px 8px;
  border-radius: 99px;
  color: var(--accent-hover);
  background: var(--accent-light);
  font-size: 13px;
  font-weight: 700;
}
.pl-price-cell { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }

.pl-code-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--accent-hover);
  background: var(--accent-light);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pl-code-pill.muted { color: var(--text-dim); background: var(--surface-alt); }
.pl-code-hint {
  display: block;
  margin-top: 5px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.35;
}
.pl-code-hint.pl-marker { color: var(--accent); font-weight: 700; }
.pl-code-hint.pl-marker.warn { color: var(--danger); }
.pl-dash { color: var(--text-faint); font-size: 17px; }

.pl-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 29px;
  padding: 0 10px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.pl-badge::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pl-badge.classified { color: var(--accent); background: var(--accent-light); }
.pl-badge.review, .pl-badge.question { color: var(--warn); background: var(--warn-light); }
.pl-badge.supplier { color: var(--info); background: var(--info-light); }
.pl-badge.working { color: var(--accent); background: var(--surface-alt); }
.pl-badge.undecided { color: var(--danger); background: var(--danger-light); }
.pl-badge.no-code { color: var(--text-dim); border: 1px solid var(--border); background: transparent; }
.pl-status-sub {
  display: block;
  margin-top: 5px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.35;
}
.pl-status-sub.pending { color: var(--warn); font-weight: 700; }

.pl-action {
  display: inline-flex;
  width: 100%;
  min-height: 41px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s var(--ease-smooth), background .18s var(--ease-smooth);
}
.pl-action:hover { border-color: var(--accent); color: var(--accent-hover); }
.pl-action.review { border-color: var(--warn); color: var(--warn); background: var(--warn-light); }
.pl-action.question { border-color: var(--warn); color: var(--white); background: var(--warn); }
.pl-action.question:hover { color: var(--white); }
.pl-action.retry { border-color: var(--danger); color: var(--danger); background: var(--danger-light); }
.pl-action.review:hover, .pl-action.retry:hover { border-color: currentColor; color: inherit; }
.pl-action.waiting { cursor: default; color: var(--info); background: var(--info-light); }

.pl-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 15px 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.pl-page-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.pl-page-button:hover { border-color: var(--accent); color: var(--accent-hover); }
.pl-pagination > :first-child { justify-self: start; }
.pl-pagination > :last-child { justify-self: end; }
.pl-page-copy { color: var(--text-dim); font-weight: 600; }

.pl-empty {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 42px 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.pl-empty-inner { max-width: 540px; }
.pl-empty-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  margin: 0 auto 15px;
  border-radius: 16px;
  color: var(--accent);
  background: var(--accent-light);
  font-size: 22px;
}
.pl-empty-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin-bottom: 8px; }
.pl-empty-sub { color: var(--text-dim); font-size: 14px; margin-bottom: 18px; }

.pl-bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(calc(100% - 32px), 720px);
  min-height: 58px;
  padding: 9px 10px 9px 18px;
  border: 1px solid var(--navy-line);
  border-radius: 15px;
  background: var(--navy);
  color: var(--navy-heading);
  box-shadow: var(--shadow-float);
  transform: translateX(-50%);
}
.pl-bulk-count { margin-right: auto; font-size: 14px; font-weight: 700; }
.pl-bulk-action {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--navy-note-line);
  border-radius: 9px;
  background: var(--navy-fill);
  color: var(--navy-heading);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.pl-bulk-action:hover { background: var(--navy-note-fill); }
.pl-bulk-clear { border-color: transparent; background: transparent; color: var(--navy-text); }

@media (max-width: 1100px) {
  .pl-table col.pl-col-product { width: 32%; }
  .pl-table col.pl-col-action { width: 160px; }
}

@media (max-width: 1040px) {
  .pl-header { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .pl-tools { justify-content: flex-start; }
  .pl-search-form { max-width: none; }
}

@media (max-width: 820px) {
  .pl-page { padding: 24px 16px 120px; }
  .pl-panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .pl-table, .pl-table tbody { display: block; }
  .pl-table colgroup {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .pl-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pl-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0 12px;
    margin-bottom: 11px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
  }
  .pl-row td {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    height: auto;
    min-width: 0;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
  }
  .pl-row td::before {
    content: attr(data-label);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .pl-row td:first-child {
    display: block;
    grid-row: 1 / 6;
    padding: 3px 0 0;
    border-bottom: 0;
  }
  .pl-row td:first-child::before { content: none; }
  .pl-row td:not(:first-child) { grid-column: 2; }
  .pl-row td.pl-product-cell { display: block; padding-top: 0; }
  .pl-row td.pl-product-cell::before { content: none; }
  .pl-row td.pl-action-cell { padding-bottom: 0; border-bottom: 0; }
  .pl-action { width: auto; justify-self: start; }
  .pl-pagination { border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
}

@media (max-width: 560px) {
  .pl-tools { align-items: stretch; flex-direction: column; }
  .pl-filter-toggle { justify-content: center; }
  .pl-filter-panel { grid-template-columns: minmax(0, 1fr); }
  .pl-active-label { width: 100%; }
  .pl-row { grid-template-columns: 24px minmax(0, 1fr); gap: 0 9px; padding: 13px; }
  .pl-row td { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 10px; }
  .pl-title-link { white-space: normal; line-height: 1.35; }
  .pl-meta { align-items: flex-start; flex-direction: column; gap: 4px; }
  .pl-meta-text { white-space: normal; line-height: 1.35; }
  .pl-badge { white-space: normal; }
  .pl-pagination { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .pl-page-copy { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .pl-bulk-bar { align-items: stretch; flex-wrap: wrap; min-height: 0; padding: 12px; }
  .pl-bulk-count { width: 100%; }
  .pl-bulk-action { flex: 1 1 150px; }
  .pl-bulk-clear { flex: 0 0 auto; }
}

@media (max-width: 400px) {
  .pl-row { padding-inline: 11px; }
  .pl-action { width: 100%; }
}

/* ============================================================
   CODE EXPLORER, the KN8 LEAF page (spec 16 refinement, per operator mock
   docs/code-25041000-final-redesign.html). The end of the journey gets its
   own confirmation language on top of the shared detail styles above: a
   "final code reached" hero badge, the confirmation + "what a final code
   means" pair, sibling compare cards, the verify checklist, and the
   relations panel in its dark variant. Tokens only (the mock's navy maps to
   the accent-hover dark already used by the rate card and the attention
   band, its mint to accent-light, its serif to Fraunces); the mock's radial
   glows and grid overlays are dropped. Mobile-first, 380px-safe.
   ============================================================ */

/* ── hero: the "final code reached" marker + the copy affordance ───────── */
.cxr-final-badge {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px;
  padding: 6px 12px 6px 7px; border-radius: 999px;
  color: var(--accent-hover); background: var(--accent-light);
  font-size: 12px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase;
}
.cxr-final-badge-tick {
  display: inline-grid; place-items: center; width: 17px; height: 17px;
  border-radius: 50%; color: var(--white); background: var(--accent);
  font-size: 12px; line-height: 1;
}
.cxr-detail-leaf .cxr-lead { max-width: 58ch; margin-bottom: 14px; }
.cxr-detail-retired .cxr-detail-hero .cx-retired-banner { margin-bottom: 12px; }

.cxr-js .cxr-copy.cxr-jsonly { display: inline-flex; align-items: center; }
.cxr-copy { border: 0; cursor: pointer; white-space: nowrap; }
.cxr-copy-done { background: var(--accent-hover); }
.cxr-copy-status {
  align-self: center; color: var(--accent); font-size: 13px; font-weight: 700;
}

/* ── the journey card, leaf variant (every level settled) ──────────────── */
.cxr-journey-leaf { box-shadow: var(--shadow-float); }

/* ── confirmation card + "what a final code means" ────────────────────── */
.cxr-final {
  display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 30px;
  align-items: stretch;
}
.cxr-final-card {
  padding: 24px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface); box-shadow: var(--shadow-card);
}
.cxr-final-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  color: var(--accent); font-size: 12px; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
}
.cxr-final-kicker-tick {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 7px; color: var(--white); background: var(--accent);
  font-size: 12px; line-height: 1;
}
.cxr-final-code {
  margin: 0 0 10px; color: var(--accent); font-family: var(--font-display);
  font-weight: 600; font-size: clamp(32px, 5vw, 52px); line-height: 1;
  letter-spacing: .02em; overflow-wrap: anywhere;
}
.cxr-final-h {
  margin: 0 0 10px; max-width: 40ch; color: var(--text);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1.18;
  overflow-wrap: anywhere;
}
.cxr-final-copy {
  margin: 0 0 18px; max-width: 60ch; color: var(--text-dim); font-size: 14px;
  line-height: 1.55;
}
.cxr-final-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.cxr-final-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  color: var(--accent); font-size: 14px; font-weight: 700;
  text-decoration: none;
}
.cxr-final-link:hover { color: var(--accent-hover); text-decoration: underline; }

.cxr-meaning-card {
  padding: 22px; border-radius: 20px; color: var(--white);
  background: var(--accent); box-shadow: var(--shadow-card);
}
.cxr-meaning-h {
  margin: 0 0 6px; color: var(--white); font-family: var(--font-display);
  font-weight: 600; font-size: 21px;
}
.cxr-meaning-lead { margin: 0 0 16px; color: var(--accent-light); font-size: 13px; }
.cxr-meaning-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cxr-meaning-item {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 11px;
  align-items: start; padding: 12px; border: 1px solid var(--board-seam);
  border-radius: 12px; background: var(--navy-fill);
}
.cxr-meaning-icon {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 9px; color: var(--accent-hover); background: var(--accent-light);
  font-family: var(--font-counter); font-size: 13px; font-weight: 800;
}
.cxr-meaning-copy { min-width: 0; }
.cxr-meaning-copy strong {
  display: block; margin-bottom: 2px; color: var(--white); font-size: 14px;
  overflow-wrap: anywhere;
}
.cxr-meaning-copy small {
  display: block; color: var(--accent-light); font-size: 12px; line-height: 1.45;
}

/* ── sibling compare cards (the leaf's fork treatment) ─────────────────── */
.cxr-compare { margin: 0 0 30px; }
.cxr-compare-head { margin-bottom: 14px; }
.cxr-compare-h {
  margin: 0 0 4px; color: var(--text); font-family: var(--font-display);
  font-weight: 600; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.1;
}
.cxr-compare-lead { margin: 0; max-width: 62ch; color: var(--text-dim); font-size: 14px; }
.cxr-compare .cx-fork-delta-note { margin-bottom: 12px; }
.cxr-compare-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cxr-compare-item { min-width: 0; display: flex; }
.cxr-compare-card {
  position: relative; display: block; flex: 1 1 auto; min-width: 0;
  padding: 18px 18px 20px; text-decoration: none;
  border: 1px solid var(--border); border-radius: 17px;
  background: var(--surface);
}
a.cxr-compare-card {
  transition: transform .18s var(--ease-smooth),
              border-color .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth);
}
a.cxr-compare-card:hover {
  transform: translateY(-2px); border-color: var(--accent);
  box-shadow: var(--shadow-card);
}
.cxr-compare-current {
  color: var(--white); border-color: transparent;
  background: var(--accent-hover); box-shadow: var(--shadow-float);
}
.cx-fork-high > .cxr-compare-card { border-left: 3px solid var(--warn); }
.cx-fork-low > .cxr-compare-card { border-left: 3px solid var(--accent); }
.cxr-compare-state {
  display: inline-flex; margin-bottom: 16px; padding: 5px 9px;
  border-radius: 999px; color: var(--text-dim); background: var(--surface-alt);
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
}
.cxr-compare-current .cxr-compare-state {
  color: var(--accent-hover); background: var(--accent-light);
}
.cxr-compare-code {
  display: block; margin-bottom: 5px; color: var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.cxr-compare-current .cxr-compare-code { color: var(--accent-light); }
.cxr-compare-title {
  display: block; margin-bottom: 10px; color: var(--text-dim); font-size: 14px;
  font-weight: 600; line-height: 1.45; overflow-wrap: break-word;
}
.cxr-compare-current .cxr-compare-title { color: var(--accent-light); }
.cxr-compare-card .cx-duty { margin-left: 0; }
.cxr-compare-arrow {
  position: absolute; right: 16px; bottom: 14px; color: var(--accent);
  font-size: 16px; transition: transform .18s var(--ease-smooth);
}
a.cxr-compare-card:hover .cxr-compare-arrow { transform: translateX(3px); }

/* ── verify: the generic pre-filing checklist + the one classify CTA ───── */
.cxr-verify {
  display: grid; grid-template-columns: 1fr; gap: 22px; margin: 0 0 30px;
  align-items: start;
}
.cxr-verify-copy { min-width: 0; }
.cxr-verify-h {
  margin: 0 0 10px; color: var(--text); font-family: var(--font-display);
  font-weight: 500; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.08;
}
.cxr-verify-lead { margin: 0 0 18px; max-width: 52ch; color: var(--text-dim); font-size: 14px; }
.cxr-verify-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cxr-verify-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  color: var(--accent); font-size: 14px; font-weight: 700; text-decoration: none;
}
.cxr-verify-link:hover { color: var(--accent-hover); text-decoration: underline; }
.cxr-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cxr-check-row {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px;
  padding: 15px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface);
}
.cxr-check-num {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 11px; color: var(--accent); background: var(--accent-light);
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
}
.cxr-check-copy { min-width: 0; }
.cxr-check-copy strong {
  display: block; margin-bottom: 3px; color: var(--text); font-size: 14px;
}
.cxr-check-copy span {
  display: block; color: var(--text-dim); font-size: 13px; line-height: 1.5;
  overflow-wrap: break-word;
}

/* ── relations, dark variant (the leaf's "worth comparing" panel) ──────── */
.cxr-rel-dark {
  margin: 0 0 30px; padding: 26px 22px; gap: 22px; border-radius: 20px;
  background: var(--accent-hover); box-shadow: var(--shadow-float);
}
.cxr-rel-head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: end; gap: 10px 18px;
}
.cxr-rel-intro { min-width: 0; }
.cxr-rel-kicker {
  margin: 0 0 6px; color: var(--accent-light); font-size: 12px;
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.cxr-rel-lead { margin: 0; max-width: 56ch; color: var(--accent-light); font-size: 13px; }
.cxr-rel-browse {
  color: var(--accent-light); font-size: 14px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.cxr-rel-browse:hover { color: var(--white); text-decoration: underline; }
.cxr-rel-dark .cx-rel-h { color: var(--white); }
.cxr-rel-dark .cx-rel-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cxr-rel-dark .cx-rel-row { min-width: 0; }
.cxr-rel-dark .cx-rel-link {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px;
  height: 100%; padding: 16px; border: 1px solid var(--board-seam);
  border-radius: 15px; background: var(--navy-fill);
}
.cxr-rel-dark .cx-rel-link:hover {
  border-color: var(--accent-light); box-shadow: none;
}
.cxr-rel-dark .cx-rel-code {
  flex: 1 1 100%; color: var(--accent-light); font-family: var(--font-display);
  font-weight: 700; font-size: 18px;
}
.cxr-rel-dark .cx-rel-title { color: var(--white); font-size: 13px; }
.cxr-rel-dark .cx-rel-note { color: var(--accent-light); }

/* ── responsive: two-column pairings from 700px, mock proportions at 980 ── */
@media (min-width: 700px) {
  .cxr-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cxr-verify { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; }
  .cxr-rel-dark .cx-rel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cxr-rel-dark { padding: 30px 26px; }
}
@media (min-width: 980px) {
  .cxr-shell-wide .cxr-final { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 20px; }
  /* a retired code carries no "what a final code means" card, so its
     confirmation card keeps a readable measure instead of stretching wide */
  .cxr-shell-wide .cxr-final-solo { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .cxr-shell-wide .cxr-final-card { padding: 30px; }
  .cxr-shell-wide .cxr-journey-leaf { margin-top: -20px; }
  .cxr-rel-dark .cx-rel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── small screens: keep every section readable down to 380px ──────────── */
@media (max-width: 560px) {
  .cxr-final-card { padding: 18px; }
  .cxr-meaning-card { padding: 18px; }
  .cxr-compare-card { padding: 15px 15px 18px; }
  .cxr-compare-arrow { position: static; display: block; margin-top: 6px; text-align: right; }
  .cxr-rel-dark { padding: 20px 16px; }
  .cxr-check-row { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 13px; }
  .cxr-check-num { width: 34px; height: 34px; border-radius: 9px; font-size: 15px; }
  .cxr-copy, .cxr-verify-btn { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  a.cxr-compare-card, .cxr-compare-arrow { transition: none; }
  a.cxr-compare-card:hover { transform: none; }
  a.cxr-compare-card:hover .cxr-compare-arrow { transform: none; }
}

/* ============================================================
   SIGNUP, two-panel conversion page (operator redesign 2026-07-28, concept
   docs/signup-redesign.html). Tokens only: the concept's navy maps to the
   --navy-* family the onboarding next-panel already uses, its green to
   --accent*, its Inter/Georgia to DM Sans/Fraunces. The concept's decorative
   flourishes (grid overlay, concentric rings, watermark code) are dropped, as
   the Code Explorer redesign dropped its own. Reuses .field-label /
   .field-input / .form-error / .btn-primary / .signup-consent / .signup-check
   / .hp-field / .auth-alt; only the rhythm around them is new.
   ============================================================ */

/* The stage keeps the auth pages' footer-settles-at-bottom behaviour
   (.auth-chrome-wrap), widened for two panels instead of one narrow card. */
.signup-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 76px);
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 20px 48px;
}
.signup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 26px;
  align-items: stretch;
}

/* ---- left: navy value panel ---- */
.signup-value {
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 4vw, 52px);
  border-radius: 22px;
  color: var(--navy-heading);
  background: var(--navy);
  box-shadow: var(--shadow-float);
}
.signup-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-bottom: 24px;
  padding: 7px 12px;
  border: 1px solid var(--navy-line);
  border-radius: 99px;
  color: var(--navy-accent);
  background: var(--navy-fill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.signup-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--navy-step);
}
.signup-h1 {
  margin: 0 0 16px;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--navy-heading);
}
.signup-lead {
  margin: 0 0 28px;
  max-width: 46ch;
  color: var(--navy-text);
  font-size: 16px;
  line-height: 1.55;
}
.signup-benefits {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--navy-line);
}
.signup-benefit {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 0;
  border-bottom: 1px solid var(--navy-line);
}
.signup-benefit-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  color: var(--navy-step);
  background: var(--navy-fill);
}
.signup-benefit strong {
  color: var(--navy-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.signup-plan-note {
  margin: auto 0 0;
  color: var(--navy-text-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* ---- right: form card ---- */
.signup-card {
  align-self: center;
  width: 100%;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
}
.signup-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}
.signup-eyebrow {
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.signup-card-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.signup-card-sub { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.signup-card-badge {
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: 99px;
  color: var(--accent);
  background: var(--accent-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.signup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}
.signup-fields .form-row.full { grid-column: 1 / -1; }
.signup-card .signup-consent { font-size: 13px; }
.signup-card .auth-alt { margin-top: 16px; font-size: 13px; }

/* password show/hide: the button sits inside the input's padding, so the
   field keeps its .field-input look and the text never runs under it */
.signup-pw { position: relative; }
.signup-pw .field-input { padding-right: 48px; }
.signup-pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--text-dim);
  background: transparent;
  transform: translateY(-50%);
  transition: color .15s, background .15s;
}
.signup-pw-toggle:hover { color: var(--accent); background: var(--accent-light); }
.signup-pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.signup-submit {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding: 14px 22px;
}

/* ---- trust row under both panels ---- */
.signup-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 32px;
  margin: 0;
  padding: 28px 0 0;
  list-style: none;
  color: var(--text-dim);
  font-size: 13px;
}
.signup-trust-item { display: inline-flex; align-items: center; gap: 8px; }
.signup-trust-item svg { color: var(--accent); flex: 0 0 auto; }

@media (max-width: 1000px) {
  .signup-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 20px; }
  .signup-card { padding: 26px 22px; }
  .signup-fields { grid-template-columns: minmax(0, 1fr); }
  .signup-fields .form-row.full { grid-column: auto; }
}

/* single column: the value panel states the offer first, the form follows */
@media (max-width: 760px) {
  .signup-stage { padding: 24px 16px 40px; min-height: 0; }
  .signup-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .signup-value { padding: 28px 22px; }
  .signup-h1 { font-size: clamp(30px, 8vw, 40px); max-width: none; }
  .signup-lead { margin-bottom: 22px; font-size: 15px; }
  .signup-plan-note { margin-top: 4px; }
  .signup-trust { flex-direction: column; align-items: center; gap: 10px; padding-top: 22px; }
}

@media (max-width: 420px) {
  .signup-stage { padding: 18px 12px 32px; }
  .signup-value { padding: 24px 18px; border-radius: 18px; }
  .signup-kicker { margin-bottom: 18px; font-size: 12px; letter-spacing: .06em; }
  .signup-benefit { gap: 11px; padding: 12px 0; }
  .signup-benefit-icon { width: 28px; height: 28px; }
  .signup-benefit strong { font-size: 14px; }
  .signup-card { padding: 22px 16px; border-radius: 16px; }
  .signup-card-head { display: block; }
  .signup-card-badge { display: inline-block; margin-top: 10px; }
  .signup-card-title { font-size: 24px; }
}

/* ── Duty changes on applied codes (operator 2026-08-03) ──────────────
   The pull half of monitoring: /duty-changes/ and the link the alerts
   page carries to it. Layout only, every value from tokens.css; the base
   rules are the 380px layout and one media query widens the filter row. */
.dc-page .dash-sub { max-width: 620px; }
.dc-page .text-link,
.alerts-page .dash-sub .text-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.dc-page .text-link:hover,
.alerts-page .dash-sub .text-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dc-filter { display: flex; flex-direction: column; gap: 12px;
  margin: 20px 0 22px; }
.dc-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-presets .status-tab { text-decoration: none; }
.dc-filter-date { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; }
.dc-filter-date .field-label { margin-bottom: 0; }
.dc-filter-date .field-input { width: auto; flex: 1 1 150px; min-width: 0; }
.dc-summary { font-size: 15px; font-weight: 600; line-height: 1.5;
  margin-bottom: 14px; }
.dc-group { margin-bottom: 14px; }
.dc-group-top { align-items: baseline; flex-wrap: wrap; }
.dc-code { font-size: 20px; }
.dc-group-count { white-space: nowrap; }
.dc-code-title { font-size: 14px; color: var(--text-dim); line-height: 1.45;
  margin-top: 2px; }
.dc-changes { list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.dc-change { font-size: 14px; line-height: 1.55; padding: 10px 12px;
  border-radius: 10px; background: var(--surface-alt); }
.dc-products { list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.dc-product { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px; font-size: 14px; }
.dc-product-title { color: var(--text); font-weight: 600;
  text-decoration: none; }
.dc-product-title:hover { text-decoration: underline;
  text-underline-offset: 3px; }
.dc-product-sku { font-variant-numeric: tabular-nums; }
.dc-more { display: inline-block; margin-top: 12px; }
/* the composite-duty explanation: one line for the whole page, above the
   sections that quote the TARIC tokens */
.dc-composition { max-width: 620px; line-height: 1.5; margin-bottom: 16px; }
.dc-locked { padding: 32px 20px; }
/* the three destination sections (EU, Norway, United Kingdom): the lead
   explains how a foreign line was matched, the line number sits above its
   sentences so the merchant reads whose number it is before what it did */
.dc-section { margin-bottom: 26px; }
.dc-section-title { font-family: var(--font-display); font-size: 20px;
  line-height: 1.25; margin-bottom: 4px; }
.dc-section-lead { font-size: 14px; color: var(--text-dim); line-height: 1.5;
  max-width: 620px; margin-bottom: 14px; }
.dc-summary-foreign { font-weight: 500; }
.dc-foreign-change { display: flex; flex-direction: column; gap: 4px; }
.dc-foreign-code { font-family: var(--font-counter); font-size: 14px;
  font-weight: 600; letter-spacing: .02em; color: var(--text-dim); }
.watching-more { margin-top: 14px; }

@media (min-width: 720px) {
  .dc-filter { flex-direction: row; align-items: flex-end;
    justify-content: space-between; }
}

/* measures panel: fold long document-condition lists (2026-08-04) */
.cx-measure-more { margin-top: 4px; }
.cx-measure-more > .cx-measure-docs { margin-top: 6px; }
.cx-measure-more-summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent);
  padding: 6px 2px;
}

/* ── duty savings finder (spec 23.4, redesign) ────────────────────────
   A hero card (copy + the dark documentation panel), four score cards, a
   queue of horizontal row cards with a status rail, and a two-column footer.
   Nothing new in the palette: the rails and badges reuse --warn / --info /
   --accent, the dark panel reuses the shipped --navy* family, the notes reuse
   .row-meta. Everything stacks to one column from 380px up. */

/* hero */
.sv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.sv-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 24px 26px;
}
.sv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sv-eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; }
.sv-hero-title {
  max-width: 18ch;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(27px, 4vw, 38px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
}
.sv-hero-lead {
  max-width: 62ch;
  margin-bottom: 18px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
}
.sv-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sv-hero-cta, .sv-hero-guide {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* a count plus a sentence: the label wraps rather than clipping at 380px */
  white-space: normal;
  text-align: left;
}
.sv-hero-guide { text-decoration: none; }
.sv-hero-guide:hover { border-color: var(--accent); color: var(--accent); }

/* the dark documentation-progress panel */
.sv-progress {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 26px 24px;
  color: var(--navy-heading);
  background: var(--navy);
}
.sv-progress-label {
  margin-bottom: 16px;
  color: var(--navy-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sv-progress-main { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.sv-progress-ring {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: conic-gradient(var(--navy-accent) 0 var(--sv-progress, 0%),
                             var(--navy-fill) var(--sv-progress, 0%) 100%);
}
.sv-progress-ring::before {
  content: "";
  grid-area: 1 / 1;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--navy);
}
.sv-progress-value { grid-area: 1 / 1; z-index: 1; text-align: center; }
.sv-progress-value strong {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sv-progress-value > span {
  display: block;
  margin-top: 6px;
  color: var(--navy-text-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sv-progress-copy { min-width: 0; flex: 1 1 200px; }
.sv-progress-copy h2 {
  margin-bottom: 6px;
  color: var(--navy-heading);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
}
.sv-progress-copy p {
  margin: 0;
  color: var(--navy-text);
  font-size: 13px;
  line-height: 1.55;
}
.sv-progress-next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--navy-line);
  color: var(--navy-text);
  font-size: 13px;
  line-height: 1.5;
}
.sv-next-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--navy-note-line);
  border-radius: 9px;
  color: var(--navy-accent);
  background: var(--navy-fill);
  font-weight: 800;
}
.sv-next-copy strong { display: block; color: var(--navy-heading); font-size: 13px; }
.sv-next-link {
  color: var(--navy-accent);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.sv-next-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* score cards: every figure a count or a percentage point, never money */
.sv-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.sv-score {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.sv-score-label {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sv-score-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.sv-score-value.accent { color: var(--accent); }
.sv-score-value.warn { color: var(--warn); }
.sv-score-unit { font-size: 15px; font-weight: 600; color: var(--text-dim); }
.sv-score-context { color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.sv-score-bar {
  display: block;
  overflow: hidden;
  height: 5px;
  margin-top: auto;
  border-radius: 99px;
  background: var(--surface-alt);
}
.sv-score-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

/* the products that have a code but no country yet */
.sv-origin-banner {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px 14px;
  align-items: center;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
  border-radius: 14px;
  background: var(--warn-light);
}
.sv-notice-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--warn);
  background: var(--surface);
  font-weight: 800;
}
.sv-notice-copy strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}
.sv-notice-copy > span { color: var(--warn-text); font-size: 13px; line-height: 1.5; }
.sv-notice-link {
  grid-column: 2;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.sv-notice-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* queue head and its controls */
.sv-queue-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin: 24px 0 12px;
}
.sv-section-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 6px;
}
.sv-section-lead {
  max-width: 660px;
  margin-bottom: 4px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
}
.sv-queue-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.sv-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  transition: color .15s, background .15s;
}
.sv-filter:hover { color: var(--text); }
.sv-filter.is-on { color: var(--accent-hover); background: var(--accent-light); }
.sv-filter-count { font-variant-numeric: tabular-nums; font-weight: 800; }
.sv-sorts { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-sorts .status-tab { text-decoration: none; }
.sv-queue-empty {
  padding: 32px 20px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--text-dim);
  font-size: 14px;
  text-align: center;
}

/* one product per card, with a rail in the colour of its state */
.sv-queue { display: flex; flex-direction: column; gap: 10px; }
.sv-row { position: relative; overflow: hidden; padding: 0; }
.sv-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--warn);
}
.sv-row[data-status="requested"]::before { background: var(--info); }
.sv-row[data-status="documented"]::before { background: var(--accent); }
.sv-row-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 18px 18px 16px 22px;
}
.sv-row-primary { min-width: 0; }
.sv-title {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}
.sv-title:hover { color: var(--accent); text-decoration: underline;
  text-underline-offset: 3px; }
.sv-origin-line { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
.sv-block-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sv-rate-block, .sv-value-block, .sv-status-block { min-width: 0; }
.sv-rate-move {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.sv-rate-block .sv-code { display: inline-block; margin-bottom: 5px; font-size: 14px; }
.sv-rate-std { color: var(--text-dim); font-size: 14px; text-decoration: line-through; }
.sv-rate-arrow { color: var(--text-faint); }
.sv-rate-pref {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}
.sv-gap {
  display: inline-block;
  margin-top: 8px;
  color: var(--warn-text);
  background: var(--warn-light);
}
.sv-row[data-status="documented"] .sv-gap { color: var(--accent-hover);
  background: var(--accent-light); }
.sv-example { margin: 0; font-size: 13px; line-height: 1.5; }
.sv-page .origin-status .badge { white-space: normal; line-height: 1.4; }
.sv-page .origin-status .row-meta { font-size: 12px; }

/* the actions, stacked: the supplier's name makes for a long label */
.sv-actions { display: flex; flex-direction: column; gap: 8px; }
/* the ask block is a wrapper Alpine can hide on its own; it must not become
   a box of its own inside the stack */
.sv-ask-block { display: contents; }
/* the quiet way back out of a state, under the badges it belongs to */
.origin-back { align-self: flex-start; margin-top: 2px; padding: 0;
  font-size: 13px; }
.sv-actions .btn-primary, .sv-actions .btn-secondary {
  width: 100%;
  /* a supplier's name can be long: the label wraps, it never clips */
  white-space: normal;
  line-height: 1.35;
}
.sv-page .btn-secondary, .gv-body .btn-secondary {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  transition: border-color .15s, color .15s;
}
.sv-page .btn-secondary:hover, .gv-body .btn-secondary:hover {
  border-color: var(--accent); color: var(--accent); }
/* The duty-savings guide shows these same components inside a narrow vignette
   window. The page's own breakpoints are viewport-based, so without this the
   demo would wear the wide desktop layout in a 600px box. */
.gv-body .sv-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gv-body .sv-row-main { grid-template-columns: minmax(0, 1fr); }
.gv-body .sv-estimate-panel { grid-template-columns: minmax(0, 1fr); }
.gv-body .sv-estimate-result { padding: 14px 0 0; border-top: 1px solid var(--border);
  border-left: 0; }
.gv-body .sv-actions { flex-direction: column; }
/* the vignette fakes the fold and the field with spans, so they need the
   block flow the real <summary> and <input> bring with them */
.gv-body .sv-estimate-toggle { display: block; }
.gv-body .sv-estimate-input .field-input { display: block; }
.sv-pick { border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.sv-pick-toggle { cursor: pointer; display: block; text-align: center; }
.sv-pick-form { display: flex; flex-direction: column; gap: 8px;
  padding: 10px 8px 8px; }

/* the merchant's own figure, the only route to a yearly amount */
.sv-estimate { border-top: 1px solid var(--border); background: var(--bg); }
.sv-estimate-toggle {
  cursor: pointer;
  padding: 12px 18px 12px 22px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.sv-estimate-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 2px 18px 18px 22px;
}
.sv-estimate-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.sv-estimate-field { flex: 1 1 200px; min-width: 0; }
.sv-estimate-input { position: relative; }
.sv-estimate-input .field-input { padding-right: 44px; }
.sv-estimate-unit {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--text-dim);
  font-size: 13px;
  transform: translateY(-50%);
}
.sv-estimate-save { flex: 0 0 auto; }
.sv-estimate-error { flex: 1 1 100%; margin: 0; }
.sv-estimate-result { padding-top: 14px; border-top: 1px solid var(--border); }
.sv-estimate-amount {
  margin: 0 0 6px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
}

/* the bucket that claims no gap at all */
.sv-section { margin-top: 30px; }
.sv-composition-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.sv-composition-head > div { min-width: 0; }
.sv-composition-count {
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--text-dim);
  background: var(--surface-alt);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.sv-composition-list { display: flex; flex-direction: column; gap: 10px;
  margin-top: 12px; }
.sv-row-composition { display: grid; gap: 14px; padding: 18px 20px 18px 24px; }
.sv-row-composition::before { background: var(--border); }
.sv-comp-product { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.sv-comp-rate { margin: 0; }
.sv-rate-verbatim { font-size: 14px; font-weight: 600; color: var(--text); }

/* the notes and the shared legal notice */
.sv-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.sv-notes-list { display: flex; flex-direction: column; gap: 8px; }
.sv-notes .row-meta { line-height: 1.5; }
.sv-legal .decision-legal-notice { margin: 0; }
/* savings-page .row-meta carries whole sentences, not table cells: the base
   nowrap/ellipsis must never clip a disclaimer or stretch a card (spec 23.4,
   mobile-full-content rule) */
.sv-page .row-meta, .origin-status .row-meta { white-space: normal;
  line-height: 1.45; }
.origin-status { display: flex; flex-direction: column; gap: 4px;
  align-items: flex-start; }

@media (min-width: 700px) {
  .sv-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sv-origin-banner { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .sv-notice-link { grid-column: auto; }
}

@media (min-width: 760px) and (max-width: 1039px) {
  .sv-row-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap;
    align-items: center; }
  .sv-actions .btn-primary, .sv-actions .btn-secondary { width: auto; }
}

@media (min-width: 900px) {
  .sv-hero { grid-template-columns: minmax(0, 1.12fr) minmax(320px, .7fr); }
  .sv-estimate-panel { grid-template-columns: minmax(0, 1fr) minmax(230px, .55fr); }
  .sv-estimate-result { padding: 0 0 0 20px; border-top: 0;
    border-left: 1px solid var(--border); }
  .sv-notes { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
}

@media (min-width: 1040px) {
  .sv-row-main {
    grid-template-columns:
      minmax(0, 1.1fr) minmax(140px, .7fr) minmax(140px, .7fr)
      minmax(140px, .7fr) minmax(180px, .9fr);
    align-items: start;
  }
}

/* ── Countries of origin workbench (spec 24 §3, task 24.2, redesigned
   2026-08-06 to the operator's mockup) ────────────────────────────────
   A denser, image-free cousin of the products list: it reuses .pl-page,
   .pl-table, the tabs, the chips and the pagination, and adds a hero with
   the navy coverage panel (the same idiom as /savings/), a viewbar, a
   two-column workspace whose right column is the assignment card, and the
   history cards. Colors, radii and spacing come from tokens.css, as
   everywhere; the navy family and warn-on-navy are precedented on
   /savings/. Nothing here is hidden by a media query: the assignment card
   simply moves below the table on a narrow screen. */
.ow-error { margin-bottom: 14px; }
.ow-filter-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ow-filter-panel .pl-apply { grid-column: 1 / -1; justify-self: start; }

/* hero: copy left, the coverage panel right from 900px up */
.ow-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.ow-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 24px 26px;
}
.ow-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.ow-eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; }
.ow-hero-title {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.ow-hero-lead { max-width: 62ch; color: var(--text-dim); font-size: 15px; line-height: 1.55; }

/* the navy coverage panel */
.ow-coverage {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 24px;
  color: var(--navy-heading);
  background: var(--navy);
}
.ow-coverage-label {
  margin-bottom: 14px;
  color: var(--navy-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ow-coverage-main { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.ow-coverage-ring {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: conic-gradient(var(--navy-accent) 0 var(--ow-coverage, 0%),
                             var(--navy-fill) var(--ow-coverage, 0%) 100%);
}
.ow-coverage-ring::before {
  content: "";
  grid-area: 1 / 1;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--navy);
}
.ow-coverage-value { grid-area: 1 / 1; z-index: 1; text-align: center; }
.ow-coverage-value strong {
  display: block;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ow-coverage-value > span {
  display: block;
  margin-top: 5px;
  color: var(--navy-text-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ow-coverage-copy { min-width: 0; flex: 1 1 190px; }
.ow-coverage-copy h2 {
  margin-bottom: 6px;
  color: var(--navy-heading);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}
.ow-coverage-copy p { margin: 0; color: var(--navy-text); font-size: 13px; line-height: 1.55; }
.ow-coverage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 15px;
  border-top: 1px solid var(--navy-line);
}
.ow-coverage-fact { color: var(--navy-text); font-size: 12px; line-height: 1.4; }
.ow-coverage-fact strong {
  display: block;
  margin-bottom: 3px;
  color: var(--navy-heading);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* the number that needs work, in the warm tint the rest of the app uses for
   attention, light enough to carry on the navy */
.ow-coverage-fact.attention strong { color: var(--warn-light); }

/* viewbar: the origin tabs, the search and the filter toggle in one row */
.ow-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
/* the tabs scroll inside their own strip rather than widening the page: a
   flex item keeps its content width otherwise, and the viewbar overflows on
   a phone */
.ow-tabs { flex: 0 1 auto; min-width: 0; max-width: 100%; margin-bottom: 0; }
.ow-search-form { flex: 1 1 240px; max-width: 520px; margin-left: auto; }

/* workspace: the table, and the assignment card beside it from 1030px up */
.ow-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
/* the strip owns the panel's top corners now. No overflow clipping on the
   panel: the table head is sticky, and a clipping ancestor would strand it */
.ow-panel .pl-table thead th { border-radius: 0; }

.ow-select-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  border-radius: 17px 17px 0 0;
  background: var(--surface-alt);
}
.ow-select-count { font-size: 14px; font-weight: 700; }
.ow-select-note { margin-right: auto; color: var(--text-dim); font-size: 13px; font-weight: 600; }
.ow-select-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ow-select-all-msg { color: var(--accent-hover); font-size: 13px; font-weight: 600; }

.ow-table col.ow-col-product { width: 30%; }
.ow-table col.ow-col-number { width: 11%; }
.ow-table col.ow-col-brand { width: 12%; }
.ow-table col.ow-col-supplier { width: 15%; }
.ow-table col.ow-col-category { width: 15%; }
.ow-table col.ow-col-origin { width: 17%; }
/* denser than /products/: no thumbnail, so the row is text height */
.ow-row td { height: 56px; padding-block: 9px; }
.ow-row .pl-title-link { display: block; }
.ow-number-cell, .ow-brand-cell, .ow-supplier-cell, .ow-category-cell {
  color: var(--text-dim);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ow-origin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 99px;
  color: var(--accent-hover);
  background: var(--accent-light);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.ow-origin-badge.is-missing { color: var(--warn-text); background: var(--warn-light); }
.ow-origin-code { color: var(--text-dim); font-size: 12px; letter-spacing: .05em; }
/* the mark a bulk apply obeys: the supplier stated this country */
.ow-supplier-mark {
  display: block;
  margin-top: 5px;
  color: var(--info);
  font-size: 12px;
  font-weight: 700;
}

/* the assignment card */
.ow-assign {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.ow-assign-empty { padding: 26px 20px; text-align: center; }
.ow-assign-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 13px;
  color: var(--accent);
  background: var(--accent-light);
  font-size: 18px;
}
.ow-assign-empty strong { display: block; margin-bottom: 5px; font-size: 14px; }
.ow-assign-empty > span:last-child { display: block; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.ow-assign-head { padding: 20px 20px 16px; border-bottom: 1px solid var(--border); }
.ow-assign-step {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ow-assign-head h2 {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
}
.ow-assign-head p { color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.ow-assign-body { padding: 16px 20px 20px; }
.ow-assign-count {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  padding: 11px;
  border-radius: 11px;
  background: var(--accent-tint);
}
.ow-assign-number {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  color: var(--white);
  background: var(--accent);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ow-assign-count-copy strong { display: block; font-size: 13px; }
.ow-assign-count-copy span { display: block; color: var(--text-dim); font-size: 12px; }
.ow-assign-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
}
.ow-country-search, .ow-country-select {
  width: 100%;
  min-height: 40px;
  margin-bottom: 13px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}
.ow-country-search:focus, .ow-country-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring-accent);
}
/* the browser paints the option popup on its own background while the
   options inherit the control's text color: explicit colors, or the country
   list can end up white on white (regression seen on desktop) */
.ow-country-select option {
  color: var(--text);
  background: var(--surface);
}
.ow-mode-options { display: grid; gap: 8px; margin-bottom: 16px; }
.ow-mode-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
}
.ow-mode-option:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.ow-mode-option input { margin-top: 3px; accent-color: var(--accent); }
.ow-mode-copy strong { display: block; font-size: 13px; }
.ow-mode-copy span { display: block; margin-top: 2px; color: var(--text-dim); font-size: 12px; line-height: 1.4; }
.ow-assign-submit { width: 100%; min-height: 44px; }
.ow-assign-note {
  display: flex;
  gap: 7px;
  margin-top: 11px;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.45;
}

/* narrow screens: a slim bar that counts the selection and scrolls the
   assignment card into view. Alpine decides whether it is in the page, so
   no stylesheet ever hides workbench content. It sits above the guide
   button rather than on top of it. */
.ow-mobile-bar {
  position: fixed;
  left: 50%;
  bottom: 74px;
  z-index: 39;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: min(calc(100% - 24px), 540px);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  transform: translateX(-50%);
}
.ow-mobile-bar strong { margin-right: auto; font-size: 14px; }

/* history */
.ow-jobs { margin-top: 30px; }
.ow-jobs-title { font-family: var(--font-display); font-size: 20px; margin-bottom: 10px; }
.ow-jobs-list { list-style: none; display: grid; gap: 8px; }
.ow-job {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.ow-job-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  color: var(--accent);
  background: var(--accent-light);
  font-size: 16px;
}
.ow-job-copy { min-width: 0; }
.ow-job-link {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.ow-job-link:hover { color: var(--accent); }
.ow-job-meta { display: block; color: var(--text-dim); font-size: 13px; }
.ow-job-count { color: var(--text-dim); font-size: 13px; font-weight: 700; }
.ow-job-undone-mark { color: var(--text-faint); font-size: 13px; font-weight: 700; }

.ow-confirm, .ow-job-wrap { max-width: 660px; }
/* the preview step: the chosen country first, then the counts as a dotted
   summary, so the merchant reads WHAT before HOW MANY */
.ow-confirm-country {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 11px;
  background: var(--accent-tint);
}
.ow-confirm-country-mark {
  display: grid;
  flex: none;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  color: var(--accent);
  background: var(--surface);
  font-size: 17px;
}
.ow-confirm-country strong { display: block; font-size: 14px; }
.ow-confirm-country-code { color: var(--text-dim); font-size: 13px; letter-spacing: .05em; }
.ow-confirm-country small { display: block; color: var(--text-dim); font-size: 12px; }
.ow-confirm-list { list-style: none; display: flex; flex-direction: column;
  gap: 9px; margin-bottom: 16px; font-size: 14px; line-height: 1.5; }
.ow-confirm-list li { display: flex; align-items: baseline; gap: 10px; }
.ow-confirm-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.ow-confirm-dot.skip { background: var(--text-faint); }
.ow-confirm-warn { color: var(--warn-text); font-weight: 700; }
.ow-confirm-optin {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  font-size: 14px;
  line-height: 1.45;
}
.ow-confirm-actions { display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px; margin-bottom: 10px; }
.ow-confirm-form .row-meta, .ow-confirm-list li { white-space: normal; }

.ow-job-card { text-align: left; }
.ow-job-counts { list-style: none; display: flex; flex-direction: column;
  gap: 7px; margin: 12px 0 16px; font-size: 14px; line-height: 1.5; }
.ow-job-undone { margin-bottom: 14px; font-size: 14px; }
.ow-job-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ow-job-wrap .row-meta { white-space: normal; line-height: 1.45; }
.ow-progress {
  overflow: hidden;
  height: 8px;
  margin: 12px 0;
  border-radius: 99px;
  background: var(--surface-alt);
}
.ow-progress-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transition: width .3s var(--ease-smooth);
}

@media (max-width: 820px) {
  /* the products-list card flip, with room for this table's seven cells */
  .ow-row td:first-child { grid-row: 1 / 8; }
  .ow-number-cell, .ow-brand-cell, .ow-supplier-cell, .ow-category-cell {
    white-space: normal;
  }
  /* the panel loses its frame here, so the strip becomes a card of its own */
  .ow-select-tools {
    margin-bottom: 11px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
  }
  .ow-origin-badge { white-space: normal; }
}

@media (max-width: 700px) {
  .ow-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .ow-filter-panel { grid-template-columns: minmax(0, 1fr); }
  .ow-viewbar { align-items: stretch; flex-direction: column; }
  .ow-search-form { max-width: none; margin-left: 0; }
  .ow-select-count, .ow-select-note { width: 100%; }
  .ow-select-actions { width: 100%; }
  .ow-job { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .ow-job-count { grid-column: 2; }
  .ow-job-undo-form, .ow-job-undone-mark { grid-column: 3; grid-row: 1 / 3; }
}

@media (min-width: 900px) {
  .ow-hero { grid-template-columns: minmax(0, 1.12fr) minmax(320px, .7fr); }
}

@media (min-width: 1030px) {
  .ow-workspace { grid-template-columns: minmax(0, 1fr) 320px; }
  /* the app bar is sticky, so the card parks below it like .pl-table thead */
  .ow-assign { position: sticky; top: calc(var(--topbar-h) + 12px); }
}

/* ── Supplier directory (spec 07.6 / 09.3, rebuilt 2026-08-06 to the
   operator's design direction) ─────────────────────────────────────────
   Same family as the origin workbench and the savings finder: a two-column
   hero whose aside is the navy panel, a row of counting cards, and one
   directory card holding tabs, a client-side search and the rows. Colors,
   radii, spacing and motion all come from tokens.css. Nothing is hidden by
   a media query: the rows become stacked cards on a phone and every cell
   stays in the page. */
/* the directory works a table, so it gets the same width as /products/
   and /review/; .sup-record below re-caps the record page for reading
   (same specificity, later in the file, so it wins) */
.sup-page { max-width: 1500px; }
.sup-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.sup-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 24px 26px;
}
.sup-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.sup-eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; }
.sup-hero-title {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.sup-hero-lead { max-width: 60ch; color: var(--text-dim); font-size: 15px; line-height: 1.55; }
.sup-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sup-hero-cta, .sup-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  text-decoration: none;
}

/* "Right now": the outbox, in the navy the app uses for a standing panel */
.sup-now {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 24px;
  color: var(--navy-heading);
  background: var(--navy);
}
.sup-now-label {
  margin-bottom: 12px;
  color: var(--navy-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sup-now-title {
  margin-bottom: 8px;
  color: var(--navy-heading);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 600;
  line-height: 1.18;
}
.sup-now-names {
  margin-bottom: 8px;
  color: var(--navy-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
.sup-now-body { color: var(--navy-text); font-size: 13px; line-height: 1.55; }
.sup-now-link {
  align-self: flex-start;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--navy-line);
  color: var(--navy-accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.sup-now-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the three counts, the savings board's card in this page's prefix */
.sup-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.sup-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.sup-stat-label {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sup-stat-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.sup-stat-value.accent { color: var(--accent); }
.sup-stat-value.warn { color: var(--warn); }
.sup-stat-context { color: var(--text-dim); font-size: 12px; line-height: 1.45; }

/* the directory card. No overflow clipping: the row menus hang out of it */
.sup-directory {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.sup-dir-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.sup-tabs { flex: 0 1 auto; min-width: 0; max-width: 100%; margin-bottom: 0; }
.sup-search {
  display: flex;
  flex: 1 1 220px;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  max-width: 420px;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.sup-search:focus-within { border-color: var(--accent); box-shadow: var(--ring-accent); }
.sup-search-icon { color: var(--text-faint); font-size: 16px; }
.sup-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}
.sup-search input::placeholder { color: var(--text-faint); }
.sup-dir-meta {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
}

.sup-rows { list-style: none; }
.sup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.sup-row:last-child { border-bottom: 0; }
.sup-row:hover { background: var(--accent-tint); }
.sup-row.is-archived .sup-avatar { opacity: .75; }

.sup-identity { display: flex; min-width: 0; align-items: center; gap: 12px; }
.sup-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}
.sup-avatar.tint-a { color: var(--accent-hover); background: var(--accent-light); }
.sup-avatar.tint-b { color: var(--info); background: var(--info-light); }
.sup-avatar.tint-c { color: var(--text-dim); background: var(--surface-alt); }
.sup-identity-copy { display: grid; min-width: 0; gap: 4px; }
.sup-name { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sup-email { color: var(--text-dim); font-size: 13px; overflow-wrap: anywhere; }
.sup-no-email { justify-self: start; }
.sup-marks { display: flex; flex-wrap: wrap; gap: 5px; }

.sup-products-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.sup-products-link strong {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: var(--accent-hover);
  background: var(--accent-light);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.sup-products-link:hover { color: var(--accent); }
.sup-products-none { color: var(--text-faint); font-size: 13px; }

.sup-contact { display: grid; min-width: 0; gap: 3px; }
.sup-contact strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.sup-contact-none { color: var(--text-faint); font-weight: 500; }
.sup-contact span { color: var(--text-dim); font-size: 13px; overflow-wrap: anywhere; }

.sup-dot {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.sup-dot::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 0 4px var(--surface-alt);
}
.sup-dot.ready { color: var(--accent-hover); }
.sup-dot.ready::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-light); }
.sup-dot.attention { color: var(--warn-text); }
.sup-dot.attention::before { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-light); }

.sup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sup-quiet-link {
  color: var(--warn-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.sup-quiet-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sup-actions .btn-sm { text-decoration: none; }
/* the row's single action confirms in this dialog before it posts; the
   supplier it is about is named between the question and the consequence */
.sup-confirm-name { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
@media (max-width: 560px) {
  /* .actions-row already does this for .btn-ghost; the archive choice is the
     primary button, and it stacks with the rest instead of sitting narrow */
  .sup-confirm .actions-row .btn-primary { width: 100%; }
}

.sup-empty { padding: 44px 20px; text-align: center; }
.sup-empty .btn-primary, .sup-empty .text-link { margin-top: 14px; }
.sup-empty-search { border-top: 1px solid var(--border); }

.sup-dir-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
}
.sup-foot-link {
  margin-left: auto;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.sup-foot-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the add drawer, the same idiom as the review queue's supplier hatch */
.sup-scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  justify-content: flex-end;
  background: var(--overlay);
  animation: fadeIn .2s ease;
}
.sup-drawer {
  display: flex;
  width: min(480px, 100%);
  height: 100%;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  animation: slideIn .25s var(--ease-spring);
}
.sup-drawer-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--border);
}
.sup-drawer-eyebrow {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sup-drawer-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.2; }
.sup-drawer-sub { margin-top: 8px; color: var(--text-dim); font-size: 14px; line-height: 1.55; }
.sup-drawer-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
}
.sup-drawer-close:hover { border-color: var(--accent); color: var(--accent); }
.sup-form { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.sup-form-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.sup-form-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.sup-form-note {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  padding: 13px 14px;
  border-radius: 11px;
  background: var(--accent-light);
  color: var(--accent-hover);
  font-size: 13px;
  line-height: 1.5;
}
.sup-form-note-mark {
  display: grid;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  background: var(--surface);
  font-weight: 800;
}
.sup-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
}

/* ── the record page, /suppliers/<pk>/ ────────────────────────────────
   The same identity block as a directory row, at page scale, then the
   contact card and the end-of-life controls kept apart at the bottom. */
.sup-record { max-width: 860px; }
.sup-back {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.sup-back:hover { color: var(--accent); }
.sup-record-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.sup-record-head .sup-identity { flex: 1 1 300px; align-items: flex-start; gap: 14px; }
.sup-record-head .sup-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: 16px;
}
/* the identity copy is a grid, so the inline pieces need their own start */
.sup-record-head .sup-dot,
.sup-record-head .sup-marks { justify-self: start; }
.sup-record-head .sup-dot { margin-top: 3px; }
.sup-record-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.sup-record-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sup-record-card { margin-bottom: 18px; }
.sup-record-card .card-title { margin-bottom: 14px; }
.sup-record-card .sup-form-note { margin: 0 0 18px; }
.sup-record-form .btn-primary { margin-top: 4px; }

/* end of life: separated, muted, the reasoning beside its single button */
.sup-danger {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-alt);
}
.sup-danger-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.sup-danger-copy {
  flex: 1 1 320px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
}
.sup-danger .btn-sm { background: var(--surface); }

@media (min-width: 620px) {
  .sup-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .sup-hero { grid-template-columns: minmax(0, 1.12fr) minmax(320px, .7fr); }
}

/* the row becomes a real table-ish grid only when there is room for it;
   below this it stays the stacked card the phone gets */
@media (min-width: 1000px) {
  /* The five tracks belong to the LIST, and every row is a subgrid of it, so
     all rows share one set of columns. Sizing them per row instead gets both
     halves wrong: a fr track in column 4 leaves a wide hole on the rows with
     no status (operator screenshot 2026-08-06), and a content-sized one
     staggers Products and Contact by up to 126px between a row that has a
     status and a row that has none (gate measurement, same day). Shared
     tracks give the alignment; minmax(0, auto) on column 4 gives the
     collapse, because a track no row fills is a track with nothing to size
     it. Where some rows do carry a status, every row gets a column exactly
     as wide as the widest of them. */
  .sup-rows {
    display: grid;
    grid-template-columns:
      minmax(0, 2.2fr) minmax(110px, .8fr) minmax(140px, 1.1fr)
      minmax(0, auto) auto;
    /* matches the row's own column gap: a subgrid whose gutter differs from
       its parent's would not sit on the parent's track edges */
    column-gap: 16px;
  }
  /* the row keeps its padding, border and hover background and spans the
     whole list; its 16px side padding comes out of the first and last
     tracks, which is what keeps the cells lined up with the search and count
     rows above (both 16px in from the card edge) */
  .sup-row {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
  /* the actions stay pinned to the last column rather than sliding left into
     a collapsed track, so mixed lists keep their right edge */
  .sup-actions { grid-column: 5; justify-content: flex-end; }
}

@media (max-width: 999px) {
  /* stacked card: every cell keeps its label so nothing needs a header row */
  .sup-products::before, .sup-contact::before, .sup-status::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--text-faint);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
}

@media (max-width: 560px) {
  .sup-dir-head { align-items: stretch; flex-direction: column; }
  /* the row layout's 220px flex-basis would become HEIGHT in the column */
  .sup-search { flex: 0 0 auto; max-width: none; margin-left: 0; }
  .sup-hero-actions .btn-primary, .sup-hero-actions .btn-ghost { flex: 1 1 auto; justify-content: center; }
  .sup-form-pair { grid-template-columns: minmax(0, 1fr); }
  .sup-dir-foot { align-items: flex-start; flex-direction: column; }
  .sup-foot-link { margin-left: 0; }
}

@media (max-width: 560px) {
  /* the record header: everything stacks, the facts line up under the name.
     Pin the flex-basis back to auto: the row layout's px basis would
     become HEIGHT in the column (same trap as .sup-search). */
  .sup-record-head { align-items: flex-start; flex-direction: column; gap: 14px; }
  .sup-record-head .sup-identity { flex: 0 0 auto; }
  .sup-record-head .sup-avatar { width: 48px; height: 48px; border-radius: 14px; }
  .sup-danger-row { align-items: flex-start; flex-direction: column; }
  .sup-danger-copy { flex: 0 0 auto; }
}

/* ---------- public API reference (/api/docs/) ----------------------------
   A long-form documentation page on the app host, wearing the marketing
   chrome. Prose reuses the .guide typography; only the reference furniture
   (endpoint cards, parameter/field tables, contents) is new, tokens only.
   Wider than .public-shell because the tables need the room, and every table
   scrolls inside its own wrapper so the page never scrolls sideways. */
.apidoc-shell { max-width: 880px; margin: 0 auto; padding: 28px 16px 64px; }
.apidoc-head { margin-bottom: 22px; }
.apidoc-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 10px;
}
.apidoc-lead { color: var(--text-dim); font-size: 15px; line-height: 1.6;
  margin: 0 0 14px; max-width: 62ch; }
.apidoc-formats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.apidoc-toc { margin-bottom: 24px; }
.apidoc-toc ul { list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 28px; }
.apidoc-toc li { font-size: 14px; line-height: 1.6;
  break-inside: avoid; }
.apidoc-toc a { color: var(--text-dim); text-decoration: none; }
.apidoc-toc a:hover { color: var(--accent); }
.apidoc-body { max-width: none; }
.apidoc-body h3[id] { scroll-margin-top: 84px; }
.apidoc-op {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px 18px 18px;
  margin: 18px 0;
}
.apidoc-op h3 { margin-top: 18px; }
.apidoc-endpoint { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; }
.apidoc-endpoint code { font-family: monospace; font-size: 14px;
  word-break: break-all; }
.apidoc-meta { color: var(--text-dim); }
.apidoc-h4 { font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint); margin: 18px 0 6px; }
.apidoc-table-wrap { overflow-x: auto; }
.apidoc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.apidoc-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  white-space: nowrap;
}
.apidoc-table td { padding: 8px 10px; border-bottom: 1px solid var(--border);
  vertical-align: top; color: var(--text); line-height: 1.55; }
.apidoc-table tr:last-child td { border-bottom: none; }
.apidoc-table td:first-child { white-space: nowrap; }
.apidoc-legal p:last-child { margin-bottom: 0; }
.apidoc-notice { font-size: 14px; }
.apidoc-changelog { margin: 12px 0 0; }
.apidoc-changelog dt { font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint); }
.apidoc-changelog dd { margin: 4px 0 16px; font-size: 14px; line-height: 1.65;
  color: var(--text); }

@media (max-width: 700px) {
  .apidoc-toc ul { columns: 1; }
  .apidoc-title { font-size: 25px; }
  .apidoc-op { padding: 4px 14px 14px; }
}

/* API documentation overview on /api-keys/ (operator 2026-08-06): three link
   tiles saying what each documentation surface is for. Tokens only; stacks to
   one column on a phone, where the px basis trap does not apply (grid). */
.api-doc-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.api-doc-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color .12s, transform .12s var(--ease-smooth);
}
.api-doc-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.api-doc-tile-title { font-size: 15px; font-weight: 600; color: var(--text); }
.api-doc-tile-url { font-family: monospace; font-size: 13px;
  color: var(--accent); word-break: break-all; }
.api-doc-tile-note { font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.api-doc-stability { margin-bottom: 0; }
.api-doc-stability a { color: var(--accent); }

@media (max-width: 820px) {
  .api-doc-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ── /export/ rebuilt: route chooser over three panels (operator 2026-08-06)
   ─────────────────────────────────────────────────────────────────────────
   One destination choice at the top (spreadsheet, a named system, Shopify's
   fill service), then one panel at a time. Nothing new in the palette: the
   route/format/layout/scope cards are the .option treatment (accent border on
   the accent tint), the system tiles reuse the Connect-a-system tile shape and
   its per-system accent tokens, and the history table reuses .badge. */
/* the header rides the syspage family (breadcrumb, eyebrow, display
   headline, readiness aside), same as /import/system/ */
.exportpage .ex-head, .api-head { margin-bottom: 20px; }
.exportpage .ex-head .intro, .api-head .intro { margin-bottom: 0; }

/* the three routes */
.ex-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.ex-route {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 14px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-align: left;
  transition: border-color .15s var(--ease-smooth), background .15s var(--ease-smooth), transform .15s var(--ease-smooth);
}
.ex-route:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-1px);
}
.ex-route[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: var(--ring-accent);
}
/* The three route illustrations, drawn in CSS after the mockup's route art:
   pictures of what each route hands over, not copy. Their tiny file labels
   are on the illustration allowlist in tests/test_type_floor.py. */
.ex-route-art {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  height: 76px;
  overflow: hidden;
  border-radius: 13px;
}
.ex-route-art::before, .ex-route-art::after {
  content: "";
  position: absolute;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: .02em;
}
/* spreadsheet: two tilted file cards, CSV in front of XLSX */
.ex-art-files {
  color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.ex-art-files::before, .ex-art-files::after {
  width: 30px;
  height: 38px;
  border: 1px solid currentColor;
  border-radius: 5px;
  background: var(--surface);
  font-size: 9px;
}
.ex-art-files::before { content: "CSV"; top: 12px; left: 7px; transform: rotate(-5deg); }
.ex-art-files::after {
  content: "XLSX";
  right: 6px;
  bottom: 11px;
  transform: rotate(5deg);
  box-shadow: var(--shadow-card);
}
/* system: a file dropping into the ERP's own importer */
.ex-art-system {
  color: var(--info);
  background: color-mix(in srgb, var(--info) 10%, var(--surface));
}
.ex-art-system::before {
  content: "ERP";
  top: 11px;
  left: 12px;
  width: 38px;
  height: 25px;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: var(--surface);
  font-size: 10px;
  /* the sliver of a second card peeking out below (mockup trick) */
  box-shadow: 0 28px 0 -8px var(--surface), 0 28px 0 -7px currentColor;
}
.ex-art-system::after { content: "↓"; top: 39px; right: 0; left: 0; font-size: 14px; }
/* shopify: their own CSV, plus what we add to it */
.ex-art-shopify { color: var(--warn); background: var(--warn-light); }
.ex-art-shopify::before {
  content: "CSV";
  top: 12px;
  left: 14px;
  width: 34px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: var(--surface);
  font-size: 9px;
  transform: rotate(-5deg);
}
.ex-art-shopify::after {
  content: "+";
  right: 6px;
  bottom: 7px;
  width: 21px;
  height: 21px;
  border: 2px solid var(--warn-light);
  border-radius: 50%;
  color: var(--white);
  background: var(--warn);
  font-size: 14px;
}
.ex-route-copy { min-width: 0; }
.ex-route-copy strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 15px;
}
.ex-route-copy span {
  display: block;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.45;
}

/* the panel a route opens */
.ex-panel { margin-bottom: 18px; scroll-margin-top: 20px; }
.ex-panel > .card-title { margin-bottom: 6px; }
.ex-panel > .card-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* format · detail · scope, native radios in card clothing */
.ex-field { margin: 0 0 18px; padding: 0; border: 0; }
.ex-field .field-label { padding: 0; }
.ex-cards { display: grid; gap: 10px; }
.ex-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex-card {
  display: flex;
  /* nowrap, not wrap: a wrap container wraps BEFORE it shrinks, so a long
     title used to push the whole body below the radio dot */
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s var(--ease-smooth), background .15s var(--ease-smooth);
}
.ex-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ex-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: var(--ring-accent);
}
.ex-card:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ex-card input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--accent); }
.ex-card-body { flex: 1 1 auto; min-width: 0; }
.ex-card-title {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.ex-card-fact {
  display: block;
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
}
.ex-tag {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 700;
}
.ex-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.ex-filter .field-select { width: 100%; }

/* what the click will produce, right above the button that produces it */
.ex-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-alt);
}
.ex-summary-label {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ex-summary-line {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}

/* the system picker */
.ex-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 16px 0 12px;
}
.ex-search-wrap { position: relative; flex: 1 1 260px; min-width: 0; }
.ex-search-symbol {
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--text-dim);
  font-size: 17px;
  transform: translateY(-52%);
  pointer-events: none;
}
.ex-search {
  width: 100%;
  height: 44px;
  padding: 0 78px 0 36px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}
.ex-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring-accent);
}
.ex-search::placeholder { color: var(--text-faint); opacity: 1; }
.ex-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  transform: translateY(-50%);
}
.ex-search-clear:hover { border-color: var(--text-dim); color: var(--text); }
.ex-system-count { flex: 0 0 auto; margin: 0; color: var(--text-dim); font-size: 13px; }
.ex-system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.ex-tile {
  --system: var(--info);
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s var(--ease-smooth), background .15s var(--ease-smooth);
}
.ex-tile:hover { border-color: color-mix(in srgb, var(--system) 45%, var(--border)); }
.ex-tile:has(input:checked) {
  border-color: color-mix(in srgb, var(--system) 55%, var(--border));
  background: color-mix(in srgb, var(--system) 5%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--system) 14%, transparent);
}
.ex-tile:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* the radio stays a real radio for the keyboard and for screen readers, the
   tile itself carries the checked state */
.ex-tile input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ex-tile-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--system) 12%, var(--surface));
  color: var(--system);
  font-size: 12px;
  font-weight: 800;
}
.ex-tile-mark svg { width: 20px; height: 20px; fill: currentColor; }
.ex-tile-copy { min-width: 0; }
.ex-tile-copy strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ex-tile-copy small {
  display: block;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.ex-tile-copy small.ex-tile-tag { color: var(--accent-hover); }
.ex-no-results {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 16px 0 0;
  color: var(--text-dim);
  font-size: 14px;
}

/* Shopify's three steps */
.ex-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: ex-step;
}
.ex-steps li {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
}
.ex-steps li::before {
  counter-increment: ex-step;
  content: counter(ex-step, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: 9px;
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 800;
}

/* the pull API, one strip */
.ex-api {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 22px 0 6px;
}
.ex-api > div { flex: 1 1 320px; min-width: 0; }
.ex-api .card-title { margin-bottom: 4px; font-size: 19px; }
.ex-api .card-context { margin-bottom: 0; }
.ex-api-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--info-light);
  color: var(--info);
  font-family: var(--font-counter);
  font-size: 15px;
  font-weight: 700;
}

/* recent exports */
.ex-history-head-row { margin: 26px 0 12px; }
.ex-history-head-row .section-title { margin: 0 0 4px; font-size: 19px; }
.ex-history-head-row .card-context { margin: 0; }
.ex-history {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.ex-history-head,
.ex-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) 150px 120px minmax(0, 1fr) 120px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}
.ex-history-head {
  background: var(--surface-alt);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ex-history-row + .ex-history-row { border-top: 1px solid var(--border); }
.ex-history-file { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ex-history-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 40px;
  border-radius: 8px;
  /* --system set inline for a system-shaped file's vendor mark; a plain
     spreadsheet/CSV mark stays in the neutral accent */
  background: color-mix(in srgb, var(--system, var(--text-dim)) 11%, var(--surface));
  color: var(--system, var(--text-dim));
  font-size: 12px;
  font-weight: 800;
}
.ex-history-mark svg { width: 19px; height: 19px; fill: currentColor; }
.ex-history-mark svg[fill="none"] { fill: none; }
.ex-history-copy { min-width: 0; }
.ex-history-copy strong { display: block; color: var(--text); font-size: 14px; }
.ex-history-copy small {
  display: block;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}
.ex-history-copy small.ex-history-error { color: var(--danger); }
.ex-history-cell { color: var(--text-dim); font-size: 13px; }
.ex-history .badge.failed { background: var(--danger-light); color: var(--danger); }
/* the column name travels with every value for a screen reader, and becomes
   visible when the table stacks and the header row is gone */
.ex-cell-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ex-download { color: var(--accent); font-size: 14px; font-weight: 600; }
.ex-history-wait { color: var(--text-faint); font-size: 13px; }
.ex-history .empty-state { padding: 36px 20px; }

@media (max-width: 1080px) {
  .ex-routes { grid-template-columns: 1fr; }
  .ex-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-history-head,
  .ex-history-row { grid-template-columns: minmax(0, 1.6fr) 130px 110px 110px; }
  .ex-history-head > :nth-child(4),
  .ex-history-row > .ex-history-cell:nth-child(4) { display: none; }
}
@media (max-width: 760px) {
  .ex-cards-2,
  .ex-cards-3,
  .ex-filters,
  .ex-steps,
  .ex-system-grid { grid-template-columns: minmax(0, 1fr); }
  /* a px flex-basis becomes a HEIGHT the moment these wrap to a column
     (CLAUDE.md §9), so pin both back to their content */
  .ex-api > div,
  .ex-search-wrap { flex: 1 1 auto; }
  .ex-search-row { display: block; }
  .ex-system-count { margin-top: 10px; }
  .ex-api .btn-ghost { width: 100%; text-align: center; }
  /* the table stacks, and every value keeps its own label instead of a
     header row that is no longer there */
  .ex-history-head { display: none; }
  .ex-history-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
  }
  /* the tablet layout dropped the Rows column for width; stacked rows have
     room again, and the count is part of the row's story */
  .ex-history-row > .ex-history-cell:nth-child(4) { display: block; }
  .ex-history-file { width: 100%; }
  .ex-cell-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0 6px 0 0;
    overflow: visible;
    clip: auto;
    color: var(--text-faint);
    font-weight: 700;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ex-route,
  .ex-card,
  .ex-tile { transition: none; }
  .ex-route:hover { transform: none; }
}

/* ── Connections, spec 26.5 (apps/integrations) ─────────────────────── */
/* Cards, chips and run rows for the connector screens. Tokens only, and
   nothing here invents a size below the readability floor (§9): body copy
   comes from .card-context/.field-hint, chips are 12px. */
.int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.int-card { --system: var(--sys-other); display: flex; flex-direction: column; gap: 12px; }
.int-card-head { display: flex; align-items: center; gap: 12px; }
.int-card-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.int-card-name .card-title { margin: 0; }
.int-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--system);
  background: color-mix(in srgb, var(--system) 12%, var(--surface));
  font-size: 13px;
  font-weight: 800;
}
.int-mark svg { width: 26px; height: 26px; }
.int-card-actions,
.int-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.int-card .card-context { margin: 0; }
.int-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.int-chip {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  background: var(--surface-alt);
  font-size: 12px;
  font-weight: 600;
}
.int-head {
  --system: var(--sys-other);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.int-head .dash-title { margin-bottom: 4px; }
.int-head .dash-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.int-form { display: flex; flex-direction: column; gap: 16px; }
.int-form .card { margin: 0; }
.int-saved { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.int-alert { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
/* "Test connection" verdict dialog (26.7 follow-up): the ONE place a test
   result is reported, so it reads at a glance. Shared modal shell above. */
.int-result { text-align: center; }
.int-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 14px;
  border-radius: 50%;
}
.int-result-ok { color: var(--accent); background: var(--accent-light); }
.int-result-bad { color: var(--danger); background: var(--danger-light); }
.int-result-line { margin-bottom: 0; }
.int-result-hint { margin-top: 10px; }
.int-result-actions { justify-content: center; margin-top: 20px; }
.int-send .card-top { flex-wrap: wrap; gap: 10px; }
.int-run { padding: 12px 0; border-bottom: 1px solid var(--border); }
.int-run:last-child { border-bottom: 0; }
.int-run-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.int-run-when { color: var(--text); font-size: 14px; font-weight: 600; }
.int-run-mode { color: var(--text-dim); font-size: 14px; }
.int-run-counts { margin: 4px 0 0; color: var(--text-dim); font-size: 14px; }
.int-run-error { margin: 4px 0 0; color: var(--danger); font-size: 14px; }
.int-problems { margin-top: 8px; }
.int-problems > summary { color: var(--text-dim); font-size: 14px; cursor: pointer; }
.int-problem-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 14px;
}
.int-problem-list li { display: flex; flex-wrap: wrap; gap: 8px; }
.int-problem-what { color: var(--text-dim); }
.int-problem-why { color: var(--text-faint); }
.int-remove { margin-top: 14px; }
.int-remove > summary { color: var(--text-dim); font-size: 14px; cursor: pointer; }
.int-remove .card-context { margin: 8px 0; }
.int-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }

@media (max-width: 640px) {
  .int-grid { grid-template-columns: minmax(0, 1fr); }
  /* a px flex-basis becomes a HEIGHT once these stack (CLAUDE.md §9) */
  .int-head { flex-wrap: wrap; }
  .int-mark { flex: 0 0 auto; }
  .int-card-actions .btn-primary,
  .int-card-actions .btn-ghost,
  .int-actions form,
  .int-actions .btn-primary,
  .int-actions .btn-ghost { width: 100%; text-align: center; }
  .int-actions button { width: 100%; }
}