/* 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;
    /* dvh, not vh: mobile 100vh is the URL-bar-hidden viewport, which let the
       menu run past the visible bottom without ever becoming scrollable */
    max-height: calc(100vh - var(--topbar-h) - 20px);
    max-height: calc(100dvh - var(--topbar-h) - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    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; }
}
/* while the burger menu is open the page behind it must not scroll; the
   toggle lives on <html> via the topbar's x-effect (base.html) */
.nav-locked, .nav-locked body { overflow: hidden; }
@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; }

/* ── what the store does with its goods (spec 47 §2) ───────────────────
   Three stacked option cards on create-store and Store settings, in the
   clothing of the code page's export/import switch (spec 45 §2) at app
   scale: 12px kicker, 16px title, 14px line. Plain radios do the choosing,
   so the group works with no JavaScript; the card IS the label, and the
   chosen one is filled while the others stay outlined. Full width at every
   size, which is also what keeps it readable at 380px. */
.dir-field { border: 0; margin: 0 0 14px; padding: 0; }
.dir-field .field-label { padding: 0; }
.dir-options { display: grid; gap: 10px; }
.dir-option {
  display: flex; flex-direction: column; gap: 4px;
  position: relative; padding: 13px 15px;
  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);
}
.dir-option:hover { border-color: var(--accent); }
.dir-option:has(input:checked) {
  border-color: var(--accent-hover); background: var(--accent);
}
.dir-option:has(input:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* the radio does the work but says nothing the card does not already say,
   so it stays out of sight while keeping focus and keyboard behavior */
.dir-option-input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  margin: 0; pointer-events: none;
}
.dir-option-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent-hover); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.dir-option:has(input:checked) .dir-option-kicker { color: var(--white); }
/* the tick marks the chosen option, so it rides in all three and shows in one */
.dir-option-tick { display: none; }
.dir-option:has(input:checked) .dir-option-tick { display: inline; }
.dir-option-title {
  color: var(--text); font-family: var(--font-display); font-weight: 600;
  font-size: 16px; line-height: 1.25;
}
.dir-option:has(input:checked) .dir-option-title { color: var(--white); }
.dir-option-line { color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.dir-option:has(input:checked) .dir-option-line { color: var(--accent-light); }
/* 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-cell { display: flex; flex-direction: column; }
.guide-cell .guide-card { flex: 1 1 auto; }
.guide-card { display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: var(--text); transition: border-color .15s; }
/* spec 69: the specific guides under a main topic, title links only */
.guide-card-children { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px;
  display: flex; flex-direction: column; gap: 4px; }
.guide-card-children li { font-size: 13px; line-height: 1.45; }
.guide-card-children a { color: var(--text-dim); text-decoration: none; }
.guide-card-children a:hover { color: var(--accent); }
.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); }
/* the label may wrap, the value keeps its shape: a part number like
   MW-2210-BLK must not break at its hyphens into three lines */
.detail-row > span:first-child { color: var(--text-dim); flex: 1 1 auto; min-width: 0; }
.detail-row > span:last-child { text-align: right; flex: 0 0 auto; max-width: 62%; overflow-wrap: anywhere; }
.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-state-consistency { color: var(--warn); }
.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 (spec 49 §1): the shared code card carries the look, so
   this is only the wrapper that holds the card, the repick hint and, for a
   store that imports, the duty stack under it */
.rw-suggestion { margin: 16px 0; }
.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-question-kicker span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--accent-light);
}
.rw-code-desc { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin-top: 8px; }
/* the duty stack sits under the code card in its own quiet block, the same
   step the import block keeps on the product page */
.rw-duty {
  min-width: 0;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.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 card (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 .app-code-card,
.rw-suggestion.is-repick:focus-visible .app-code-card {
  box-shadow: var(--ring-accent);
}
.rw-suggestion-repick {
  display: block;
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  color: var(--accent);
}

/* 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; }
/* the compare table (spec 49 §2): the codes near this one, read side by side.
   The public sibling compare's row is the model (.cx-fork-*), grown one column
   for the "use this code" control; the rate column exists only for a store
   that imports. Flex rows, so it folds instead of scrolling at 380px. */
.rw-compare { display: flex; flex-direction: column; gap: 8px; }
.rw-compare-head,
.rw-compare-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
  gap: 8px 14px;
  align-items: center;
  width: 100%;
  text-align: left;
}
.rw-compare-head {
  margin: 0;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rw-compare-row {
  padding: 12px 14px;
  font-family: var(--font-body);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
button.rw-compare-row:hover { border-color: var(--accent); }
.rw-compare-row.is-picked {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: var(--ring-accent);
}
.rw-compare-suggested {
  cursor: default;
  border-color: var(--accent);
  background: var(--accent-tint);
}
.rw-compare-code {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rw-compare-title {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.rw-compare-rate { display: flex; align-items: center; gap: 6px; }
.rw-compare-est { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.rw-compare-mark {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-hover);
  white-space: nowrap;
}
.rw-compare-pick {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
/* the codes the analysis weighed and dropped, under the table */
.rw-ruled-out { margin-top: 18px; }
.rw-ruled-out-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.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-desc { font-size: 14px; margin: 8px 0 10px; }
/* the code inside a compared choice is the shared card, with the chip under it */
.rw-choice .app-code-card + .duty-chip { margin-top: 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;
}
/* the advisory consistency card reuses the same two-up grid (spec 30 §3
   30.C), one column per compared product */
.rw-choice-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 10px;
  word-break: break-word;
}
.rw-choice-facts {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}
.rw-choice-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.rw-choice-link:hover { text-decoration: underline; }
.rw-scope-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  margin-top: 8px;
}

/* the fork card (spec 30 §3 30.D): one question at the top, then one block
   per product with its own answers and its own save button. Single column at
   every width, so the list reads the same on a phone as on a desktop. */
.rw-fork-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.rw-fork-product {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px 16px 14px;
}
.rw-fork-product-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 12px;
}
.rw-fork-thumb { border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.rw-fork-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  word-break: break-word;
  flex: 1 1 auto;
  min-width: 0;
}
.rw-fork-product-head .rw-choice-link { margin-top: 0; flex: 0 0 auto; }
.rw-fork-answers { margin-bottom: 10px; }
.rw-fork-form { margin: 0; }
.rw-fork-save {
  width: 100%;
  border: 1.5px solid var(--accent);
  border-radius: 11px;
  background: var(--accent-tint);
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 14px;
  cursor: pointer;
}
.rw-fork-save:hover:not(:disabled) { background: var(--accent-light); }
.rw-fork-save:disabled {
  border-color: var(--border);
  background: var(--bg);
  color: var(--text-dim);
  cursor: not-allowed;
}
.rw-bulk-answers { margin-bottom: 14px; }
/* the customs code a bulk branch asserts, and how much of the card it covers,
   under the first offering product's wording */
.rw-bulk-answers .option-code,
.rw-bulk-answers .option-coverage {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.rw-bulk-hint { font-size: 13px; color: var(--text-dim); margin: 0 0 10px; }
.rw-bulk-left-out-note { margin: 6px 0 0; }
/* the bulk answer's background job (spec 32): its progress bar and the
   sections of its finished panel, inside the same .rw-reco box */
.rw-job-progress { margin: 10px 0 8px; }
#fork-bulk-panel .rw-bulk-scope { margin: 10px 0 0; }
#fork-bulk-panel .rw-primary { margin-top: 12px; }
.rw-bulk-scope {
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--bg);
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}
.rw-bulk-scope strong {
  display: block;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}
.rw-bulk-scope ul { list-style: none; margin: 0; padding: 0; }
.rw-bulk-scope li { word-break: break-word; }

/* 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-alt { grid-template-columns: minmax(0, 1fr) 130px 28px; }
  /* three panes in this width leave the stage too narrow for four columns:
     the code keeps its line, the rest wraps under it */
  .rw-compare-head { display: none; }
  .rw-compare-row { grid-template-columns: 96px minmax(0, 1fr); }
  .rw-compare-rate, .rw-compare-mark, .rw-compare-pick { grid-column: 2; }
}

/* 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-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; }
  /* the fork card's product blocks stay full width, the thumb keeps its own
     size (a px flex-basis would become a height in a column) */
  .rw-fork-product-head { align-items: flex-start; }
  .rw-fork-thumb { flex: 0 0 auto; }
}

@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-question { padding: 16px 15px; }
  .rw-product-name { font-size: 23px; }
  .rw-question-title { font-size: 21px; }
  .rw-compare-row { padding: 12px; }
  .rw-queue-item { flex-basis: 200px; }
  .rw-drawer-panel { padding: 18px 14px; }
  .rw-fork-product { padding: 14px 12px 12px; }
}

/* ---------- 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-sources { list-style: none; display: flex; flex-direction: column;
  gap: 6px; margin-top: 4px; }
.dossier-source { display: flex; flex-direction: column; gap: 2px;
  font-size: 14px; line-height: 1.5; }
.dossier-source-url { word-break: break-all; }
.dossier-source-meta { font-size: 13px; color: var(--text-dim);
  line-height: 1.5; }
.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; }

/* spec 50: the code card leads the decision section, the direction lines sit
   under the detail rows, and the path + the ruled-out codes borrow the code
   pages' own families (.cxr-journey-steps / .cx-fork-list). Layout only. */
.dossier .app-code-card { margin-bottom: 16px; }
.dossier-direction { margin-top: 14px; }
.dossier-direction-line { font-size: 14px; line-height: 1.55;
  color: var(--text); margin-top: 6px; }
/* The sentence may start with a translated country phrase that carries an
   article ("the United States"): the first letter of the sentence is capital
   whatever the phrase, without a second msgid per country. */
.dossier-direction-line::first-letter { text-transform: uppercase; }

.dossier-direction .cx-duty-note { margin-top: 12px; }
/* the US line says which of the three kinds of answer it was (spec 83 §3.8) */
.dossier-direction-label {
  display: block; margin-top: 2px; color: var(--text-dim); font-size: 13px;
  line-height: 1.45;
}
/* the dossier column is 820px wide whatever the window is, so the steps stay
   in one readable column instead of following the viewport-width grid */
.cxr-journey-steps.dossier-journey { grid-template-columns: 1fr; }
.dossier-journey .cxr-step { min-height: 0; }
.dossier-considered .cx-fork-row + .cx-fork-row { margin-top: 12px; }
.dossier-considered .dossier-reasoning { margin: 6px 0 0; padding: 0 14px; }

@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; }
  /* the code card prints outlined: a dark fill is ink the reader pays for,
     and the code has to stay legible on paper (spec 50 §4) */
  .dossier .app-code-card { break-inside: avoid; box-shadow: none;
    color: var(--text); background: none; border: 1px solid var(--border); }
  .dossier .app-code-card .cxr-code-card-kicker,
  .dossier .app-code-card .cxr-code-card-value,
  .dossier .app-code-card .app-code-card-title,
  .dossier .app-code-card .cxr-code-card-facts { color: var(--text); }
  .dossier .app-code-card .cxr-code-card-tick { color: var(--text);
    background: none; }
  /* copying and following a link are screen gestures */
  .dossier .cxr-code-card-actions { display: none; }
  /* the path and the ruled-out rows keep their borders on paper */
  .dossier-journey .cxr-step, .dossier-considered .cx-fork-link {
    break-inside: avoid; box-shadow: none; border: 1px solid var(--border); }
}

/* ── 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; }
/* a counting tile that links to its list (operator 2026-09-03) */
a.hero-stat { text-decoration: none; color: inherit; border-radius: 10px;
  padding: 4px 6px; margin: -4px -6px;
  transition: background .15s var(--ease-smooth); }
a.hero-stat:hover { background: var(--accent-light); }
a.hero-stat:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 2px; }
.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; flex-wrap: wrap; 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; }
/* image second pass state per store (spec 35.F, staff-only) */
.store-imagepass { display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 8px; }
.store-imagepass .imagepass-why { font-size: 13px; color: var(--text-dim);
  white-space: normal; }

/* ── 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); }
/* explainer prose on the staff pages: unlike .row-meta (a one-line truncating
   cell/label style) this wraps, at the instructional-copy floor (14px/1.5) */
.staff-note { font-size: 14px; line-height: 1.5; color: var(--text-dim);
  margin: 0 0 12px; }
.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; }

/* the trial sequence on /staff/emails/ (folded 2026-09-03): seven narrow
   columns pushed the table past its card and made it scroll sideways at
   1280px. It is four columns now, laid out fixed so a long note wraps
   instead of widening the table, and it stacks into labelled blocks on a
   phone (the .sup-row pattern, done with the cells' own data-label). */
.staff-seq-table { table-layout: fixed; }
.staff-seq-table th, .staff-seq-table td { vertical-align: top; }
.staff-seq-table th:nth-child(1) { width: 31%; }
.staff-seq-table th:nth-child(2) { width: 23%; }
.staff-seq-table th:nth-child(3) { width: 20%; }
.staff-seq-table th:nth-child(4) { width: 26%; }
/* these cells carry sentences, not one-line labels: the base .row-meta
   clips with an ellipsis, which is what forced the width before */
.staff-seq-table .row-meta { white-space: normal; overflow: visible;
  text-overflow: clip; line-height: 1.45; }
/* dates stay on one line */
.staff-seq-table .row-meta.row-nowrap { white-space: nowrap; }
.staff-seq-variant { margin-bottom: 4px; }
.staff-seq-variant:last-child { margin-bottom: 0; }
/* the settings cell stacks: the pill, then the save form, then reset. As
   inline-flex the two forms tried to share a line and pushed the column
   wider than its track. */
.staff-seq-table .staff-inline-form { display: flex; margin-top: 8px; }
.staff-seq-table .field-input { width: 5.5em; }

@media (max-width: 720px) {
  /* stacked blocks: every cell is full width and names itself, so the
     header row is not needed */
  .staff-seq-table, .staff-seq-table tbody, .staff-seq-table tr,
  .staff-seq-table td { display: block; width: auto; }
  .staff-seq-table thead { display: none; }
  .staff-seq-table tr { padding: 12px 0;
    border-bottom: 1px solid var(--border); }
  .staff-seq-table tr:last-child { border-bottom: none; }
  .staff-seq-table td { padding: 6px 0; border-bottom: none; }
  .staff-seq-table td[data-label]::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: 720px) {
  .staff-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── AI spend and budgets (spec 71 §1 71.D, internal) ───────────────── */
.spend-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; }
.spend-card { margin-bottom: 16px; }
.spend-figures { margin-bottom: 14px; }
.spend-today { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px; margin: 0 0 10px; }
.spend-today strong { font-family: var(--font-display); font-size: 28px;
  font-weight: 600; line-height: 1.1; }
.spend-dkk { font-size: 14px; color: var(--text-dim); }
.spend-line { margin: 8px 0 0; }
.spend-chips { margin: 10px 0 0; }
/* the bar reuses .progress-track/.progress-fill; only the fill colour
   changes with the state, all three from tokens.css */
.progress-fill.spend-fill-warn { background: var(--warn); }
.progress-fill.spend-fill-danger { background: var(--danger); }
.progress-fill.spend-fill-off { background: var(--border); }
.spend-form { margin-top: 4px; }
@media (max-width: 720px) {
  .spend-cards { grid-template-columns: minmax(0, 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; }
/* the micro-label treatment is for the FIELD's own label (a direct child)
   only: a radio or checkbox choice label sits nested inside the widget and is
   a sentence meant to be read, not a label (readability floor, CLAUDE.md §9) */
.staff-form-row > label { font-size: 12px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-faint); }
.staff-form-row > div label { font-size: 14px; line-height: 1.5;
  text-transform: none; letter-spacing: normal; color: var(--text); }
/* a field's help text is reading copy (readability floor): it wraps and
   is never cut with an ellipsis like a table row's meta */
.staff-form-row .row-meta { font-size: 14px; line-height: 1.5;
  white-space: normal; overflow: visible; text-overflow: clip; }
.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; }
/* the created-person panel (spec 17 §5): the one-shot password is what the
   operator carries away, so it reads big next to its copy button. The notes
   around it use the shared .staff-note (explainer prose, 14px/1.5) */
.staff-password { display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin: 8px 0 4px; }
.staff-password code { font-size: 20px; letter-spacing: 1px; padding: 8px 12px;
  border-radius: 6px; background: var(--bg); border: 1px solid var(--border); }
@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; }
/* grid items default to min-width:auto, and a textarea's intrinsic width then
   pushes the card past a phone's viewport (spec 59.3 gate, 390px) */
.staff-content-grid > * { min-width: 0; }
.staff-content-form .field-input { width: 100%; max-width: 100%; box-sizing: border-box; }
@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; flex-wrap: wrap; 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; }

/* "How customs codes work" (the knowledge guide): three vignettes drawn from
   tokens only, no images. The digit-group ruler, the two-column "which length
   do I need" rows and the vertical path down the tariff tree. Everything
   stacks at 380px; nothing is hidden at any width. */
.gcx-code { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2px 6px; align-items: center; padding: 4px 2px 2px; }
.gcx-dg { font-family: var(--font-counter); font-size: 22px;
  font-weight: 700; letter-spacing: 1px; color: var(--text);
  text-align: center; }
.gcx-brk { height: 9px; margin-top: 3px; border: 2px solid var(--border);
  border-top: 0; border-radius: 0 0 7px 7px; }
.gcx-brk-label { font-size: 13px; line-height: 1.4; font-weight: 600;
  color: var(--text-dim); padding-bottom: 8px; }
.gcx-brk-6 { grid-column: 1 / 3; }
.gcx-brk-8 { grid-column: 1 / 4; }
.gcx-brk-10 { grid-column: 1 / 5; }
.gcx-need { margin: 14px 0 !important; padding: 0; display: grid; gap: 2px; }
.gcx-need-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 4px 18px; padding: 11px 2px; border-top: 1px solid var(--border); }
.gcx-need-row:last-child { border-bottom: 1px solid var(--border); }
.gcx-need dt { font-size: 14px; font-weight: 600; color: var(--text); }
.gcx-need dd { margin: 0; font-size: 14px; line-height: 1.5;
  color: var(--text-dim); }
.gcx-path { list-style: none; margin: 0 !important; padding: 0;
  display: grid; gap: 6px; }
.gcx-path li { margin: 0 !important; }
.gcx-step { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 3px 10px; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 9px 12px; }
.gcx-step-code { font-size: 14px; font-weight: 700; color: var(--accent); }
.gcx-step-text { font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.gcx-d1 { margin-left: 8px !important; }
.gcx-d2 { margin-left: 16px !important; }
.gcx-d3 { margin-left: 24px !important; }
.gcx-d4 { margin-left: 32px !important; }
.gcx-d5 { margin-left: 40px !important; }
/* the pages' status chip inside a path step (spec 57 §2.1): the live chip is
   one or two words on a wide row, here it carries the hero's whole sentence,
   so it wraps instead of pushing the step off a narrow screen */
.gcx-step .cxr-row-status { white-space: normal; margin-top: 0; }
/* the last step is the code card itself, so it owns the row and the chip and
   the link sit under it (§2.3) */
.gcx-step-card { display: block; }
.gcx-step-card .app-code-card { margin-bottom: 10px; }
.gcx-step-card .cxr-row-status { margin-right: 10px; }
/* the guide's own `.guide p` colour (0,1,1) beats the card's class rules
   (0,1,0): restate the card's palette for the miniature, or its text renders
   dark on the dark green card (spec 57 gate, 2026-08-23) */
.guide .gcx-step-card .cxr-code-card-kicker { color: var(--accent-light); font-size: 12px; }
.guide .gcx-step-card .cxr-code-card-value,
.guide .gcx-step-card .app-code-card-title { color: var(--white); }
.guide .gcx-step-card .app-code-card-link { color: var(--white); }
.gcx-step-link { font-size: 13px; font-weight: 600; color: var(--accent);
  text-decoration: none; white-space: nowrap; }
.gcx-step-link:hover, .gcx-step-link:focus-visible { color: var(--accent-hover);
  text-decoration: underline; }
/* the mode switch as a miniature: nothing in it is clickable */
.gcx-modes { margin: 0; pointer-events: none; }
/* what a section is for, before the section says it (spec 57 §3) */
.gcx-lead { margin: 0 0 12px !important; padding: 9px 14px;
  border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0;
  background: var(--surface-alt); color: var(--text-dim);
  font-size: 14px; line-height: 1.5; }
.gcx-cta a { font-size: 14px; font-weight: 600; color: var(--accent);
  text-decoration: none; }
.gcx-cta a:hover, .gcx-cta a:focus-visible { color: var(--accent-hover);
  text-decoration: underline; }
/* the import-line mockup borrows the live code page's own classes, which sit
   in a wider column there: keep the code and its wording readable in a guide */
.gvignette .cx-taric-row { gap: 8px; }
.gvignette .cx-taric-h { font-size: 15px; }
@media (max-width: 560px) {
  .gcx-need-row { grid-template-columns: 1fr; }
  .gcx-dg { font-size: 18px; letter-spacing: 0; }
  /* the steps keep their stagger, at half the width, so the path still reads
     as a path on a narrow screen without pushing the text off the edge */
  .gcx-d1 { margin-left: 4px !important; }
  .gcx-d2 { margin-left: 8px !important; }
  .gcx-d3 { margin-left: 12px !important; }
  .gcx-d4 { margin-left: 16px !important; }
  .gcx-d5 { margin-left: 20px !important; }
}

/* the one help launcher (spec 67 §1, replacing the contextual chip of 11.9):
   the same pill on every signed-in page, so help is always in the same place */
.help-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: none; border-radius: 999px; padding: 11px 17px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  cursor: pointer; box-shadow: var(--shadow-float);
  transition: transform .15s, background .15s; }
.help-fab:hover { background: var(--accent-hover); transform: translateY(-2px); }
.help-fab svg { flex: none; }
@media print { .help-fab { display: none; } }
/* the quiet error pulse (spec 68 §7): one dot in the warn family, warm rather
   than alarming, and an attention beat that plays only where motion is
   welcome and only a few times */
.help-fab-dot { position: absolute; top: 7px; right: 11px;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--warn); box-shadow: 0 0 0 2px var(--white); }
@media (prefers-reduced-motion: no-preference) {
  .help-fab-pulse { animation: help-fab-beat 2.6s ease-in-out 3; }
  @keyframes help-fab-beat {
    0%, 100% { box-shadow: var(--shadow-float); }
    50% { box-shadow: var(--shadow-float), 0 0 0 7px var(--warn-light); }
  }
}
/* the launcher and its offer bubble share one bit of state (spec 68 §12) and
   are both fixed, so their wrapper takes no room of its own */
.help-launcher { display: contents; }
/* the offer bubble (spec 68 §12): the dot's news said out loud, in a small
   speech bubble right above the launcher, caret pointing down at it. Same
   warn family as the dot and the entry row, never wider than a narrow phone
   allows, and never over the button itself. */
.help-offer { position: fixed; right: 16px; bottom: 66px; z-index: 40;
  max-width: 260px; display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 10px 10px 12px;
  background: var(--warn-light); border: 1px solid var(--warn);
  border-radius: 12px; box-shadow: var(--shadow-float);
  font-family: var(--font-body); }
.help-offer::after { content: ""; position: absolute; right: 28px;
  bottom: -6px; width: 10px; height: 10px; background: var(--warn-light);
  border-right: 1px solid var(--warn); border-bottom: 1px solid var(--warn);
  border-bottom-right-radius: 3px; transform: rotate(45deg); }
.help-offer-body { flex: 1 1 auto; min-width: 0; text-align: left;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.45;
  color: var(--warn-text); }
.help-offer-close { flex: 0 0 auto; background: none; border: none;
  padding: 0 2px; cursor: pointer; font-size: 16px; line-height: 1.1;
  color: var(--warn-text); }
.help-offer-close:hover { color: var(--warn); }
@media print { .help-offer { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .help-offer { animation: help-offer-rise .28s ease-out; }
  @keyframes help-offer-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: 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 { flex: 1 1 auto; min-height: 0;
  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; }
/* the way back to the panel's guide list (spec 60 §2), a button because the
   list never left the DOM */
.guide-panel-back { display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 12px 0 2px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--text-dim); }
.guide-panel-back:hover { color: var(--accent); }

/* ---------- the help entry screen (spec 67 §2, replacing the mode strip of
   spec 60) ----------
   The panel opens on the question itself, and the chat, the fast path, is the
   recommended answer: the first card, in the warm family. The panel is a flex
   column at min(480px, 100vw), so the entry screen takes the leftover height
   and scrolls, exactly like the two bodies behind it. */
.help-entry { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 22px 20px 34px; }
/* centered via auto margins, not justify-content: on a viewport shorter than
   the content, center + overflow makes the top unreachable; auto margins
   collapse to normal flow instead and everything stays scrollable */
.help-entry-title { margin: auto 0 0; font-family: var(--font-display);
  font-size: 26px; line-height: 1.2; font-weight: 500; color: var(--text); }
.help-entry-lead { margin: 9px 0 22px; font-size: 14px; line-height: 1.55;
  color: var(--text-dim); }
.help-choice { width: 100%; display: grid;
  grid-template-columns: 44px 1fr 18px; gap: 13px; align-items: center;
  text-align: left; cursor: pointer; padding: 16px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text);
  font-family: var(--font-body); }
.help-choice:hover { border-color: var(--accent); }
.help-choice-primary { background: var(--warn-light); border-color: var(--warn);
  box-shadow: inset 0 0 0 1px var(--warn); }
.help-choice-primary:hover { border-color: var(--warn); }
.help-choice-icon { flex: 0 0 auto; width: 44px; height: 44px;
  border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-light); color: var(--accent); }
.help-choice-primary .help-choice-icon { background: var(--surface);
  color: var(--warn); }
.help-choice-icon svg { width: 21px; height: 21px; }
.help-choice-copy { min-width: 0; }
.help-choice-flag { display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 5px; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--warn-text); }
.help-choice-dot { width: 6px; height: 6px; border-radius: 999px;
  background: var(--warn); }
.help-choice-title { display: block; font-size: 16px; font-weight: 500; }
.help-choice-sub { display: block; margin-top: 4px; font-size: 13px;
  line-height: 1.45; color: var(--text-dim); }
.help-choice-arrow { display: grid; place-items: center;
  color: var(--text-faint); }
.help-choice-primary .help-choice-arrow { color: var(--warn); }
.help-choice-arrow svg { width: 18px; height: 18px; }
/* the word between the two choices, hairline on either side */
.help-entry-or { display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px; margin: 16px 2px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); }
.help-entry-or::before, .help-entry-or::after { content: "";
  height: 1px; background: var(--border); }
/* the guide written for the page the reader is standing on (spec 67 §2) */
.help-entry-quick { width: 100%; display: grid;
  grid-template-columns: 32px 1fr 16px; gap: 10px; align-items: center;
  text-align: left; cursor: pointer; margin-top: 12px; padding: 10px 8px;
  background: none; border: none; border-radius: 10px;
  color: var(--text); font-family: var(--font-body); }
.help-entry-quick:hover { background: var(--accent-tint); }
.help-entry-quick-icon { flex: 0 0 auto; width: 32px; height: 32px;
  border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-light); color: var(--accent); }
.help-entry-quick-icon svg { width: 18px; height: 18px; }
.help-entry-quick-copy { min-width: 0; }
.help-entry-quick-title { display: block; font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.help-entry-quick-meta { display: block; margin-top: 1px; font-size: 13px;
  line-height: 1.4; color: var(--text-dim); }
.help-entry-quick-chev { display: grid; place-items: center;
  color: var(--text-faint); }
.help-entry-quick-chev svg { width: 16px; height: 16px; }
/* the error offer (spec 68 §7): the quick link's shape, the warn family's
   colors, so it reads as news about the store rather than an alarm */
.help-entry-alert { width: 100%; display: grid;
  grid-template-columns: 32px 1fr 16px; gap: 10px; align-items: center;
  text-align: left; cursor: pointer; margin-top: 14px; padding: 10px;
  background: var(--warn-light); border: 1px solid var(--warn);
  border-radius: 10px; color: var(--warn-text);
  font-family: var(--font-body); }
.help-entry-alert:hover { border-color: var(--warn-text); }
.help-entry-alert-icon { flex: 0 0 auto; width: 32px; height: 32px;
  border-radius: 9px; display: grid; place-items: center;
  background: var(--white); color: var(--warn); }
.help-entry-alert-icon svg { width: 18px; height: 18px; }
.help-entry-alert-copy { min-width: 0; font-size: 13px; font-weight: 600;
  line-height: 1.45; }
.help-entry-alert-chev { display: grid; place-items: center;
  color: var(--warn); }
.help-entry-alert-chev svg { width: 16px; height: 16px; }
.help-entry-note { margin: 20px 0 auto; text-align: center;
  font-size: 13px; line-height: 1.5; color: var(--text-dim); }

/* the way back to the entry screen, one per screen (spec 67 §3) */
.help-back { flex: none; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  margin: 12px 20px 0; padding: 4px 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--text-dim); }
.help-back:hover { color: var(--accent); }
.help-back svg { flex: none; width: 16px; height: 16px; }

/* the Guide mode's landing view: the whole library, searched client side */
.help-guide-lead { margin: 6px 0 18px; font-size: 14px; line-height: 1.55;
  color: var(--text-dim); }
.help-search { position: relative; margin-bottom: 18px; }
.help-search-icon { position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%); display: grid; place-items: center;
  color: var(--text-faint); pointer-events: none; }
.help-search-icon svg { width: 16px; height: 16px; }
.help-search-input { width: 100%; padding: 10px 12px 10px 36px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-alt); color: var(--text);
  font-family: var(--font-body); font-size: 14px; }
.help-search-input::placeholder { color: var(--text-faint); }
.help-search-input:focus { outline: none; border-color: var(--accent);
  box-shadow: var(--ring-accent); }
.help-guide-group { margin-bottom: 18px; }
.help-group-label { margin: 0 0 4px; font-size: 12px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); }
.help-guide-row { width: 100%; display: grid;
  grid-template-columns: 32px 1fr 16px; gap: 10px; align-items: center;
  text-align: left; cursor: pointer; padding: 11px 4px;
  background: none; border: none; border-bottom: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-family: var(--font-body); }
.help-guide-row:hover { background: var(--accent-tint); }
.help-guide-row.is-current { border: 1px solid var(--accent);
  background: var(--accent-light); }
/* spec 69: a specific guide, one step in under the hub row above it */
.help-guide-row.is-child { padding-left: 22px;
  grid-template-columns: 22px 1fr 16px; }
.help-guide-row.is-child .help-guide-icon { width: 22px; height: 22px;
  border-radius: 7px; }
.help-guide-row.is-child .help-guide-icon svg { width: 14px; height: 14px; }
.help-guide-row.is-child .help-guide-name { font-weight: 500; }
.help-guide-icon { width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--accent-light); color: var(--accent); }
.help-guide-row.is-current .help-guide-icon { background: var(--surface); }
.help-guide-icon svg { width: 18px; height: 18px; }
.help-guide-copy { min-width: 0; }
.help-guide-name { display: block; font-size: 14px; font-weight: 600; }
.help-guide-promise { display: block; margin-top: 1px; font-size: 13px;
  line-height: 1.4; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.help-guide-chev { color: var(--text-faint); display: grid;
  place-items: center; }
.help-guide-chev svg { width: 16px; height: 16px; }
.help-guide-empty, .help-guide-foot { margin: 0; font-size: 13px;
  line-height: 1.55; color: var(--text-dim); }
.help-guide-foot { padding-top: 14px; border-top: 1px solid var(--border); }
.help-guide-switch { padding: 0; background: none; border: none;
  cursor: pointer; font-family: var(--font-body); font-size: 13px;
  font-weight: 600; line-height: 1.55; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px; }
.help-guide-switch:hover { color: var(--accent-hover); }

/* 380px: the panel is the whole screen, so the cards give the copy more room */
@media (max-width: 420px) {
  .help-entry { padding: 18px 14px 26px; }
  .help-entry-title { font-size: 23px; }
  .help-choice { grid-template-columns: 40px 1fr 16px;
    gap: 11px; padding: 14px; }
  .help-choice-icon { width: 40px; height: 40px; }
  .help-back { margin-left: 14px; margin-right: 14px; }
  .guide-panel-body { padding-left: 14px; padding-right: 14px; }
}

/* ---------- the Chat support mode (spec 21.3, reshaped by spec 60 §3) ---- */
.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; }
/* the welcome, folded away for good once the conversation has started */
.asst-intro { flex: none; padding: 14px 16px 0; }
.asst-lead { margin: 6px 0 12px; font-size: 14px; line-height: 1.55;
  color: var(--text-dim); }
.asst-welcome { display: inline-block; max-width: 92%; margin: 0; }
/* the status line: a dot and the transparency disclosure, always visible */
.asst-disclosure { flex: none; display: flex; align-items: flex-start;
  gap: 8px; margin: 0; padding: 10px 16px 0;
  font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.asst-status-dot { flex: none; width: 8px; height: 8px; margin-top: 6px;
  border-radius: 999px; background: var(--accent); }

.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; }
/* the pulse's own question, first in the row (spec 68 §7) */
.asst-suggestion-alert { border-color: var(--warn);
  background: var(--warn-light); color: var(--warn-text); }
.asst-suggestion-alert:hover:not(:disabled) { border-color: var(--warn-text);
  background: var(--warn-light); }

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

/* the composer is one bordered card (spec 60 §3): the textarea carries no box
   of its own and grows to about four lines, the send button is a round icon */
.asst-input { flex: none; padding: 12px 16px; margin-top: 12px;
  background: var(--surface); border-top: 1px solid var(--border); }
.asst-composer { display: grid; grid-template-columns: 1fr auto; gap: 8px;
  align-items: end; padding: 7px 7px 7px 4px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; }
.asst-composer:focus-within { border-color: var(--accent);
  box-shadow: var(--ring-accent); }
.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-composer .asst-textarea { min-height: 60px; max-height: 92px;
  overflow-y: auto; border: none; background: transparent; padding: 9px; }
.asst-textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: var(--ring-accent); }
.asst-composer .asst-textarea:focus { box-shadow: none; }
.asst-textarea:disabled { opacity: .6; }
.asst-send { flex: none; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--accent); color: var(--white);
  border: none; border-radius: 999px; }
.asst-send svg { width: 18px; height: 18px; }
.asst-send:hover:not(:disabled) { background: var(--accent-hover); }
.asst-send:disabled { opacity: .5; cursor: default; }

/* check if fixed (spec 68 §6): the chip an answer about blockers leaves
   behind, and the answer it brings back. Both stay ordinary chat furniture:
   the chip is outlined rather than filled, and the answer carries one accent
   edge to say it was read from the store itself, not written for it. */
.asst-verify { border-style: dashed; }
.asst-verify:hover:not(:disabled) { border-style: solid; }
.asst-verify:disabled { opacity: .5; cursor: default; }
.asst-msg-verify { border-left: 2px solid var(--accent); }
.asst-msg-verify .asst-prose li { font-size: 13px; line-height: 1.55; }

.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; }
/* a TEXT button, deliberately not .asst-send: that one is the composer's
   round 36px icon circle (spec 60 §3) and swallows a label whole */
.asst-escalate-send { cursor: pointer; padding: 9px 16px;
  background: var(--accent); color: var(--white);
  border: none; border-radius: 9px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.asst-escalate-send:hover:not(:disabled) { background: var(--accent-hover); }
.asst-escalate-send:disabled { opacity: .5; cursor: default; }
.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, .asst-intro {
    padding-left: 12px; padding-right: 12px; }
  .asst-msg { max-width: 96%; }
  .asst-send { flex: 0 0 auto; }
}

/* ---------- 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;
}
/* magic page: the shared code card takes the step the old box kept, and its
   own words carry the code, so nothing here restyles it (spec 55 §1) */
.sp-confirm .app-code-card { margin-bottom: 14px; }
/* magic page: ready-made answers under "a different code" (spec 55 §2). Full
   width rows so a thumb can hit them, the chosen one in the accent tint. */
.sp-siblings { display: flex; flex-direction: column; gap: 6px; }
.sp-siblings-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.sp-sibling {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s var(--ease-smooth),
              background .15s var(--ease-smooth);
}
.sp-sibling:hover, .sp-sibling:focus-visible { border-color: var(--accent); }
.sp-sibling.chosen {
  border-color: var(--accent);
  background: var(--accent-light);
}
.sp-sibling-code {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sp-sibling-title {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

/* 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%; }
}

/* ---------- grouped approval workspace (spec 33 §1 33.A) ----------
   Mobile-first: the rows stack on a phone and the expand-then-accept flow
   works with the same markup at 380px. Tokens only, no new colors. */
.gw-wrap { max-width: 760px; margin: 0 auto; padding: 24px 24px 60px; }
.gw-head { margin-bottom: 22px; }
.gw-back { font-size: 14px; font-weight: 600; color: var(--accent);
  text-decoration: none; }
.gw-back:hover { text-decoration: underline; }
.gw-title { font-family: var(--font-display); font-size: 28px;
  font-weight: 600; margin: 10px 0 8px; }
.gw-sub { font-size: 14px; color: var(--text-dim); line-height: 1.6;
  max-width: 620px; }

.gw-groups { display: flex; flex-direction: column; gap: 16px; }
.gw-group { animation: fadeUp .4s var(--ease-spring) both; }
.gw-group-head { display: flex; align-items: flex-start; gap: 14px;
  flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.gw-group-code { flex: 1 1 200px; min-width: 180px; }
.gw-group-chips { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; }
.gw-count { font-size: 13px; font-weight: 700; color: var(--text-dim); }

.gw-rows { list-style: none; margin: 0; padding: 0; }
.gw-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--border); }
.gw-row:last-child { border-bottom: 0; }
.gw-row-check { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 12px;
  accent-color: var(--accent); }
.gw-row-body { display: flex; flex: 1 1 220px; align-items: center; gap: 12px;
  min-width: 0; cursor: pointer; }
.gw-thumb { position: relative; display: grid; flex: 0 0 auto; width: 44px;
  height: 44px; place-items: center; overflow: hidden; border: 1px solid
  var(--border); border-radius: 10px; background: var(--surface-alt); }
.gw-thumb-letter { font-size: 15px; font-weight: 800; color: var(--text-dim); }
.gw-thumb img { position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover; }
.gw-row-copy { display: grid; min-width: 0; gap: 3px; }
.gw-row-title { font-size: 14px; font-weight: 700; line-height: 1.35;
  overflow-wrap: anywhere; }
.gw-row-spec { font-size: 13px; color: var(--text-dim); line-height: 1.45;
  overflow-wrap: anywhere; }
.gw-row-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 2px; }
.gw-row-more { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.gw-band-least_sure { color: var(--warn-text); background: var(--warn-light); }
.gw-attention { flex: 1 1 100%; margin-left: 30px; font-size: 13px;
  font-weight: 600; color: var(--accent); text-decoration: none;
  line-height: 1.45; }
.gw-attention:hover { text-decoration: underline; }

.gw-pick-note { margin: 14px 0 10px; font-size: 14px;
  color: var(--text-dim); line-height: 1.5; }
/* collapsed, this IS the way forward: a full-width button, not a hint */
.gw-expand { display: flex; width: 100%; align-items: center; gap: 8px;
  justify-content: center; margin-top: 14px; padding: 13px 20px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); font-size: 15px; font-weight: 700;
  color: var(--accent); text-align: center; text-decoration: none;
  transition: border-color .15s, background .15s; }
.gw-expand:hover { border-color: var(--accent); background: var(--accent-light); }
.gw-collapse { margin-top: 10px; font-size: 14px; font-weight: 600;
  color: var(--text-dim); }
.gw-collapse:hover { border-color: var(--text-dim);
  background: var(--surface); color: var(--text); }
.gw-loading { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.gw-accept { width: 100%; }

.gw-empty { max-width: 460px; margin: 0 auto; padding: 80px 24px;
  text-align: center; animation: fadeUp .5s var(--ease-spring); }
.gw-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; }
.gw-empty-title { font-family: var(--font-display); font-size: 22px;
  font-weight: 600; margin-bottom: 8px; }
.gw-empty-sub { font-size: 14px; color: var(--text-dim); line-height: 1.6;
  margin-bottom: 22px; }

/* the queue's summary card for the same groups */
.rw-grouped-note { margin-top: 16px; padding: 14px 16px;
  background: var(--surface-alt); border-radius: 12px; }
.rw-grouped-note p { font-size: 14px; color: var(--text-dim);
  line-height: 1.55; margin: 0; }

@media (max-width: 560px) {
  .gw-wrap { padding: 16px 14px 40px; }
  .gw-title { font-size: 24px; }
  .gw-row-check { margin-top: 10px; }
  .gw-attention { margin-left: 0; }
}

/* ---------- review levels, "how carefully should we double-check?" ----------
   (spec 34 §2 34.E) Mobile-first: the level cards, the product rows and the
   batch list all stack at 380px. Tokens only, no new colors, no new fonts. */
.ps-wrap { max-width: 760px; margin: 0 auto; padding: 24px 24px 60px; }
.ps-head { margin-bottom: 22px; }
.ps-back { font-size: 14px; font-weight: 600; color: var(--accent);
  text-decoration: none; }
.ps-back:hover { text-decoration: underline; }
.ps-title { font-family: var(--font-display); font-size: 28px;
  font-weight: 600; margin: 10px 0 8px; }
.ps-sub { font-size: 14px; color: var(--text-dim); line-height: 1.6;
  max-width: 620px; }
.ps-empty-note { margin-bottom: 18px; padding: 14px 16px; border-radius: 12px;
  background: var(--surface-alt); font-size: 14px; color: var(--text-dim);
  line-height: 1.55; }

.ps-result { margin-bottom: 20px; border-left: 3px solid var(--accent);
  animation: fadeUp .4s var(--ease-spring) both; }
.ps-result-title { font-family: var(--font-display); font-size: 19px;
  font-weight: 600; margin-bottom: 6px; }
.ps-result-line { font-size: 14px; color: var(--text-dim); line-height: 1.6;
  margin-bottom: 10px; }

.ps-levels { display: flex; flex-direction: column; gap: 16px; }
.ps-level { animation: fadeUp .4s var(--ease-spring) both; }
.ps-level.is-current { border-color: var(--accent); }
.ps-level-head { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 6px; }
.ps-level-name { font-family: var(--font-display); font-size: 20px;
  font-weight: 600; }
.ps-level-desc { font-size: 14px; color: var(--text); line-height: 1.6; }

.ps-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
  margin: 14px 0 0; padding: 0; }
.ps-fact { flex: 1 1 150px; min-width: 140px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-alt); }
.ps-fact strong { display: block; font-family: var(--font-counter);
  font-size: 20px; font-weight: 600; line-height: 1.2; }
.ps-fact span { display: block; margin-top: 2px; font-size: 13px;
  color: var(--text-dim); line-height: 1.45; }

.ps-risk { margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--warn-light); color: var(--warn-text); font-size: 14px;
  line-height: 1.55; }

.ps-look { display: flex; width: 100%; align-items: center; gap: 8px;
  justify-content: center; margin-top: 14px; padding: 12px 20px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); font-size: 15px; font-weight: 700;
  color: var(--accent); text-align: center; text-decoration: none;
  transition: border-color .15s, background .15s; }
.ps-look:hover { border-color: var(--accent); background: var(--accent-light); }
.ps-loading { font-size: 13px; font-weight: 600; color: var(--text-dim); }

.ps-form { margin-top: 16px; }
.ps-ack { display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 12px; padding: 12px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.ps-ack input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  accent-color: var(--accent); }
.ps-choose { width: 100%; }
.ps-note { margin-top: 10px; font-size: 13px; color: var(--text-dim);
  line-height: 1.5; }

.ps-products { margin-top: 14px; padding: 14px; border-radius: 12px;
  background: var(--surface-alt); }
.ps-products-lead { font-size: 14px; color: var(--text-dim); line-height: 1.5;
  margin-bottom: 8px; }
.ps-rows { list-style: none; margin: 0; padding: 0; }
.ps-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--border); }
.ps-row:last-child { border-bottom: 0; }
.ps-thumb { position: relative; display: grid; flex: 0 0 auto; width: 44px;
  height: 44px; place-items: center; overflow: hidden; border: 1px solid
  var(--border); border-radius: 10px; background: var(--surface); }
.ps-thumb-letter { font-size: 15px; font-weight: 800; color: var(--text-dim); }
.ps-thumb img { position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover; }
.ps-row-copy { display: grid; flex: 1 1 220px; min-width: 0; gap: 3px; }
.ps-row-title { font-size: 14px; font-weight: 700; line-height: 1.35;
  overflow-wrap: anywhere; }
.ps-row-code { font-size: 13px; color: var(--text-dim); line-height: 1.45;
  overflow-wrap: anywhere; }
.ps-row-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 2px; }
.ps-row-more { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.ps-row-action { flex: 0 0 auto; margin-left: auto; }

.ps-pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; }
.ps-pager-link { font-size: 14px; font-weight: 600; color: var(--accent);
  text-decoration: none; }
.ps-pager-link:hover { text-decoration: underline; }
.ps-pager-at { font-size: 13px; color: var(--text-dim); }

.ps-batch-actions { margin-bottom: 16px; }
.ps-batches { margin-top: 28px; }
.ps-batches-title { font-family: var(--font-display); font-size: 20px;
  font-weight: 600; margin-bottom: 12px; }
.ps-batch-list { list-style: none; margin: 0; padding: 0; }
.ps-batch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--border); }
.ps-batch-link { flex: 1 1 200px; min-width: 180px; text-decoration: none;
  color: var(--text); font-size: 14px; }
.ps-batch-link:hover strong { text-decoration: underline; }
.ps-batch-when { display: block; margin-top: 2px; font-size: 13px;
  color: var(--text-dim); }
.ps-batch-marks { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; }
.ps-batch-count { font-size: 13px; font-weight: 700; color: var(--text-dim); }

/* the plain way in, from the review queue and the dashboard */
.ps-teaser { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: space-between; margin: 14px 0; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); text-decoration: none; font-size: 14px;
  color: var(--text); transition: border-color .15s; }
.ps-teaser:hover { border-color: var(--accent); }
.ps-teaser-text { font-weight: 600; }
.ps-teaser-go { font-weight: 700; color: var(--accent); }
.dash-posture-link { display: inline-block; margin-top: 12px; }

@media (max-width: 560px) {
  .ps-wrap { padding: 16px 14px 40px; }
  .ps-title { font-size: 24px; }
  .ps-fact { flex: 1 1 100%; }
  .ps-row-action { margin-left: 0; flex: 1 1 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; }

/* Browser check inside the shared classify panel (operator, 2026-08-20). The
   widget draws its own state, so the wrapper only owns the rhythm around it,
   the way .signup-check does on the signup form. */
.classify-check { margin: 8px 0 4px; }
.classify-check altcha-widget { display: block; max-width: 100%; }
.classify-check-note { font-size: 14px; line-height: 1.5; color: var(--text-dim); }

.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; }
/* which half of the code page to open (spec 52 §2): two small toggles under
   the result card, outlined until one is chosen. A JavaScript affordance
   (it rewrites a link's hash and remembers the answer in this browser), so
   it hides behind .cxr-jsonly like the code pages' own JS-only controls. */
.classify-situation {
  flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.5;
}
.classify-situation-opt {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-dim); background: var(--surface);
  font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.classify-situation-opt:hover { border-color: var(--accent); color: var(--accent); }
.classify-situation-opt[aria-pressed="true"] {
  border-color: var(--accent); color: var(--white); background: var(--accent);
}
.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; }

/* 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-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-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;
}

.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;
}

/* kn8 notes, inside the hero's official fold since spec 44 §1.6 */
.cx-note {
  margin-top: 12px; 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; }

/* 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 and fork tables, the specific-duty text and the single
   estimate notice. (The KN8 duty block and the cliffs list moved into the
   redesign's rate card and attention band; their rules went with them.)
   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; }
/* the current code's "the rate is on the line" chip is a sentence, not a
   figure, so it wraps instead of running off a 380px card */
.cx-duty-taric { white-space: normal; }
.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;
}

/* 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;
}

/* ── 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, .cx-us { margin: 0 0 30px; }
.cx-uk-head, .cx-us-head { margin-bottom: 14px; }
.cx-uk-h, .cx-us-h {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--text); margin: 0 0 4px;
}
.cx-uk-lead, .cx-us-lead { font-size: 14px; color: var(--text-dim); margin: 0; }
.cx-uk-list, .cx-us-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cx-uk-row, .cx-us-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, .cx-us-code {
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
  color: var(--accent); margin: 0 0 2px;
}
.cx-uk-desc, .cx-us-desc {
  font-size: 14px; line-height: 1.45; color: var(--text); margin: 0;
  overflow-wrap: anywhere;
}
.cx-uk-rates, .cx-us-rates {
  display: flex; flex-direction: column; gap: 8px; margin: 0;
}
.cx-uk-rate dt, .cx-us-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, .cx-us-rate dd {
  font-size: 15px; font-weight: 600; color: var(--text); margin: 0;
  overflow-wrap: anywhere;
}
.cx-uk-rate dd small, .cx-us-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, .cx-us-more { margin-top: 8px; }
.cx-uk-more > .cx-uk-list, .cx-us-more > .cx-us-list { margin-top: 8px; }
.cx-uk-more-summary, .cx-us-more-summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent);
  padding: 8px 2px;
}
.cx-uk-foot, .cx-us-foot {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.cx-uk-note, .cx-uk-meta, .cx-uk-source,
.cx-us-note, .cx-us-meta, .cx-us-source {
  font-size: 13px; line-height: 1.5; color: var(--text-faint); margin: 0;
}
.cx-uk-source a, .cx-us-source a { color: var(--accent); text-decoration: underline; }
@media (min-width: 640px) {
  .cx-uk-row, .cx-us-row {
    flex-direction: row; align-items: flex-start; gap: 20px;
  }
  .cx-uk-id, .cx-us-id { flex: 1; min-width: 0; }
  .cx-uk-rates, .cx-us-rates {
    flex-direction: row; gap: 24px; flex-shrink: 0; min-width: 300px;
  }
  .cx-uk-rate, .cx-us-rate { flex: 1; min-width: 130px; }
}

/* ── on an import declaration (spec 42, 2026-08-20) ─────────────────────
   What an EU import declaration carries on top of the 8-digit code: either
   the "+ 00" fact or the EU's own list of import lines. Same card language
   as the UK section above (surface-alt panel, dashed foot, tokens only,
   380px-first, native details for the fold). The dash depth mirrors the
   tariff's own indent, and the line a visitor arrived at through the anchor
   is tinted with the accent family so it is findable without a scroll hunt. */
.cx-taric { margin: 0 0 30px; }
.cx-taric-head { margin-bottom: 14px; }
.cx-taric-h {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--text); margin: 0 0 4px;
}
.cx-taric-lead {
  font-size: 14px; line-height: 1.5; color: var(--text-dim); margin: 0 0 8px;
}
.cx-taric-one {
  padding: 14px 16px; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 12px;
}
.cx-taric-one .cx-taric-lead { color: var(--text); }
.cx-taric-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.cx-taric-copy {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text);
}
.cx-taric-copy.cxr-copy-done {
  background: var(--accent-light); border-color: var(--accent);
  color: var(--accent-hover);
}
.cx-taric-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cx-taric-row {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 12px;
}
/* the tariff prints its lines one dash deeper per level; the steps stay
   small so a deep line still reads at 380px */
.cx-taric-d1 { margin-left: 10px; }
.cx-taric-d2 { margin-left: 20px; }
.cx-taric-d3 { margin-left: 30px; }
.cx-taric-d4 { margin-left: 40px; }
/* a grouping text is a label above the lines it introduces, not a code */
.cx-taric-group {
  background: none; border: 0; border-radius: 0;
  padding: 8px 2px 0; gap: 0;
}
.cx-taric-group .cx-taric-desc {
  font-weight: 600; color: var(--text-dim);
}
.cx-taric-code {
  font-family: var(--font-counter); font-weight: 700; font-size: 14px;
  color: var(--accent); margin: 0 0 2px;
}
.cx-taric-one .cx-taric-code { font-size: 17px; margin-bottom: 6px; }
.cx-taric-desc {
  font-size: 14px; line-height: 1.45; color: var(--text); margin: 0;
  overflow-wrap: anywhere;
}
.cx-taric-side {
  display: flex; flex-direction: column; gap: 6px;
}
.cx-taric-rate { margin: 0; }
/* a suspended duty is the SECONDARY figure under the standard rate: the
   standard rate is what the declaration charges unless the goods really are
   what the line describes (spec 42.5) */
.cx-taric-susp {
  font-size: 13px; line-height: 1.4; font-weight: 600;
  color: var(--text-dim); margin: 0;
}
.cx-taric-susp-cond {
  font-size: 13px; line-height: 1.4; color: var(--text-faint); margin: 0;
}
.cx-taric-links {
  display: flex; flex-wrap: wrap; gap: 14px; margin: 0;
}
.cx-taric-link {
  font-size: 13px; font-weight: 600; color: var(--accent);
  text-decoration: none; white-space: nowrap;
}
.cx-taric-link:hover { color: var(--accent-hover); text-decoration: underline; }
/* the line the visitor followed a 10-digit number to */
.cx-taric-row:target, .cx-taric-one:target {
  border-color: var(--accent); background: var(--accent-light);
}
.cx-taric-foot {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.cx-taric-note {
  font-size: 13px; line-height: 1.5; color: var(--text-faint); margin: 0;
}
@media (min-width: 640px) {
  .cx-taric-row {
    flex-direction: row; align-items: flex-start; gap: 20px;
  }
  .cx-taric-group { flex-direction: column; }
  .cx-taric-id { flex: 1 1 auto; min-width: 0; }
  .cx-taric-side {
    flex: 0 0 auto; align-items: flex-end; min-width: 180px;
    text-align: right;
  }
}

/* ── 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-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;
}
/* grouped document conditions (content review, 2026-08-21): one plain
   sentence and a count per group, the EU's own wording folded underneath */
.cx-measure-group {
  margin: 0 0 8px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px;
}
.cx-measure-group-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin: 0 0 4px;
}
.cx-measure-group-name {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  line-height: 1.4; color: var(--text);
}
.cx-measure-group-count {
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  white-space: nowrap;
}
.cx-measure-group-copy {
  font-size: 14px; line-height: 1.5; color: var(--text); margin: 0;
}
.cx-measure-scope {
  font-size: 13px; line-height: 1.5; color: var(--text-faint); margin: 0 0 6px;
}
.cx-measure-scope-link {
  font-size: 13px; font-weight: 600; color: var(--accent);
  text-decoration: none;
}
.cx-measure-scope-link:hover { text-decoration: underline; }
.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);
}

/* ── fork question + fork table + residual (spec 16.4) ──────────────────
   The per-level fork line inside the stepper, the sibling comparison, and the
   catch-all links. (The ancestry list itself is the redesign's path strip and
   journey stepper, .cxr-path / .cxr-journey.)
   Tokens only, 380px-first (flex rows, no fixed table). */
.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;
}
/* the rows themselves are the code-browser rows since spec 53.1
   (.cxr-code-item / .cxr-code-row, further down): one row family across the
   whole explorer, so the old .cx-search-link family is gone with them. */
.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 > .cxr-code-row {
  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;
}
/* the leaf lead may point at the import-line block (content review,
   2026-08-20); existing tokens only, no new colour */
.cxr-lead a { color: var(--accent); text-decoration: underline; }
.cxr-lead a:hover { color: var(--accent-hover); }

/* 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; }

/* ── the remembered mode line under the hero form (spec 53 §2.2) ───────── */
/* .cxr-jsonly already decides whether it is shown at all (display: flex) */
.cxr-mode-pref {
  flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 14px 0 0; max-width: 640px;
}
.cxr-mode-pref-label { margin: 0; color: var(--text-dim); font-size: 13px; }
.cxr-mode-pref-options { display: flex; flex-wrap: wrap; gap: 8px; }
.cxr-mode-pref-btn {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-dim);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: border-color .18s var(--ease-smooth), background .18s var(--ease-smooth);
}
.cxr-mode-pref-btn:hover { border-color: var(--accent); color: var(--text); }
.cxr-mode-pref-btn.cxr-active {
  border-color: var(--accent); background: var(--accent); color: var(--white);
}

/* ── 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: 13px; line-height: 1.4; }

/* ── 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: 13px; font-weight: 600;
}
.cxr-section-link:hover { color: var(--accent); background: var(--accent-light); }
.cxr-section-link b { color: var(--accent); font-size: 13px; 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-copy { min-width: 0; }
.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; }

/* search as you type on the index (operator 2026-08-10): the chapter filter
   keeps its place as the first group, real code matches arrive underneath.
   Both groups get the same quiet heading so neither reads as the "real" one. */
.cxr-group-h {
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--text-dim); margin: 0 0 10px; letter-spacing: .01em;
}
.cxr-live-group { margin-top: 26px; }
.cxr-live-group .cx-search-results { margin-top: 0; }
.cxr-live-more { margin: 12px 0 0; }
.cxr-live-more-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--accent);
  text-decoration: none;
}
.cxr-live-more-link:hover { text-decoration: underline; }

/* ── 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) auto 22px; gap: 9px; min-height: 66px; padding: 12px; }
  .cxr-roman { width: 42px; height: 42px; border-radius: 11px; }
  .cxr-section-count { padding: 4px 7px; }
  .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 + the card beside it (a rate on a parent page, the code
   itself on a leaf, spec 44 §3.10) ─────────────────────────────────────── */
.cxr-detail-hero { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 4px 0 26px; }
.cxr-detail-copy { min-width: 0; }
/* the leaf hero's third block: enrichment + the official fold, which read
   under the title rather than beside it. One column on a phone, so the
   source order rules there: title and lead, the code card, then this. */
.cxr-detail-more { 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-copy a { color: var(--white); text-decoration: underline; }
.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: 13px; line-height: 1.4; }

/* the import-line count links into the block that lists them */
.cxr-fact-link { color: var(--white); text-decoration: underline; }
.cxr-fact-link:hover { color: var(--accent-light); }

/* ── rate-card signal rows (spec 43 §3.1) ──────────────────────────────
   One line per KIND of thing the EU records against the code, never an
   amount and never a verdict: a signal we do not hold renders nothing. */
.cxr-signals {
  list-style: none; margin: 14px 0 0; padding: 12px 0 0; display: grid;
  gap: 7px; border-top: 1px solid var(--board-seam);
}
.cxr-signal {
  display: flex; align-items: center; gap: 8px; padding: 8px 11px;
  border-radius: 10px; background: var(--navy-fill);
  color: var(--accent-light); font-size: 13px; font-weight: 600;
  line-height: 1.35;
}
.cxr-signal::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-light);
}
.cxr-signal-warn::before { background: var(--warn); }
.cxr-signal-link { color: var(--white); text-decoration: underline; }
.cxr-signal-link:hover { color: var(--accent-light); }

/* the second half of a split hero title (spec 43 §3.1) */
.cxr-lead-tail { font-weight: 500; }

/* ── the classification path, collapsed to one strip (spec 43 §3.4) ─────
   The chips are the ancestry as links; the stepper below is unchanged and
   simply lives in a native <details>, closed on a leaf and open where the
   reader is still choosing. */
.cxr-path {
  margin: 0 0 26px; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: 16px; background: var(--surface);
  box-shadow: var(--shadow-card);
}
.cxr-path-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
}
.cxr-path-title {
  margin: 0; color: var(--text); font-size: 14px; font-weight: 700;
}
.cxr-path-chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.cxr-path-crumb { display: inline-flex; align-items: center; gap: 4px; }
.cxr-path-chip {
  display: inline-flex; align-items: center; min-height: 30px;
  padding: 3px 10px; border-radius: 999px; background: var(--surface-alt);
  color: var(--text-dim); font-family: var(--font-counter); font-size: 13px;
  font-weight: 700; text-decoration: none; white-space: nowrap;
}
a.cxr-path-chip:hover { color: var(--accent-hover); background: var(--accent-light); }
.cxr-path-chip-here { color: var(--accent-hover); background: var(--accent-light); }
.cxr-path-sep { color: var(--text-faint); font-size: 13px; }
.cxr-path-summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  margin-top: 4px; color: var(--accent); font-size: 14px; font-weight: 700;
  cursor: pointer; list-style: none;
}
.cxr-path-summary::-webkit-details-marker { display: none; }
.cxr-path-summary::after { content: "⌄"; font-size: 13px; }
.cxr-path-fold[open] .cxr-path-summary::after { content: "⌃"; }
.cxr-path-body { padding-top: 6px; }
/* inside the strip the stepper carries the strip's frame, not its own */
.cxr-path-body .cxr-journey {
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
}

/* ── 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;
}
/* single column (phones, narrow tablets): the codes are the page's job, so
   they come first and the "not sure?" help card follows them */
.cxr-browser > .cxr-side { order: 2; }
.cxr-browser > .cxr-browser-main { order: 1; }
.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;
}
/* the ancestry line a search row carries under its title ("57 › 5701 › 5701 10",
   spec 53 §1.1): where in the tariff the row sits, without a second lookup */
.cxr-code-ancestry {
  display: block; margin-top: 3px; font-family: var(--font-counter);
  font-size: 13px; color: var(--text-faint);
}
/* what the row leads to (spec 53 §1.2): a complete code, a retired one, or a
   level with N codes still to choose between. One chip family for every entry
   row, 12px like the other micro-labels. */
.cxr-row-status {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
  padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.cxr-row-complete { color: var(--accent); background: var(--accent-light); }
.cxr-row-below { color: var(--text-dim); background: var(--surface-alt); }
.cxr-row-retired { color: var(--text-faint); background: var(--surface-alt); }
.cxr-row-tick { font-size: 12px; line-height: 1; }

.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: 13px; 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-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; }
  /* the hero is three blocks, not two: the title copy, the code card
     beside it, and what reads under the title (spec 44 §3.10, extended to
     the chapter / heading / subheading pages by spec 46). Only from here, so
     a phone keeps the source order and shows the code first. */
  .cxr-shell-wide .cxr-detail-leaf .cxr-detail-hero,
  .cxr-shell-wide .cxr-detail-parent .cxr-detail-hero { row-gap: 18px; align-items: start; }
  .cxr-shell-wide .cxr-detail-leaf .cxr-detail-copy,
  .cxr-shell-wide .cxr-detail-parent .cxr-detail-copy { grid-column: 1; grid-row: 1; }
  .cxr-shell-wide .cxr-detail-leaf .cxr-code-card,
  .cxr-shell-wide .cxr-detail-parent .cxr-code-card { grid-column: 2; grid-row: 1 / span 2; }
  .cxr-shell-wide .cxr-detail-leaf .cxr-detail-more,
  .cxr-shell-wide .cxr-detail-parent .cxr-detail-more { grid-column: 1; grid-row: 2; }
  .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-browser > .cxr-side { order: 1; }
  .cxr-shell-wide .cxr-browser > .cxr-browser-main { order: 2; }
  .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-code-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 { transition: none; }
  .cxr-code-row:hover, .cxr-attention-card:hover,
  a.cxr-neighbour-card: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-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 is the same .cxr-code-item, save button and all */

/* ── 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); }
/* one-shot: after the first click the release is on its way, so the button
   stops inviting a second submit (spec 17.4 note 2026-09-03) */
.hijack-bar-btn:disabled { cursor: default; transform: none; color: var(--warn-text); background: var(--warn-light); }
.hijack-bar-btn:disabled:hover { transform: none; }

@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, and the same
   card for work waiting on today's processing limit (spec 71 §4). */
.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; }
/* each tile is a link to the list it counts (operator 2026-09-03): whole tile
   clickable, one keyboard stop, hover/focus states from the existing tokens */
.dashv2 .status-metric { display: block; min-width: 0; padding: 11px 13px;
  border-radius: 11px; background: var(--surface-alt); color: inherit;
  text-decoration: none; border: 1px solid transparent;
  transition: background .15s var(--ease-smooth),
    border-color .15s var(--ease-smooth); }
.dashv2 a.status-metric:hover { background: var(--accent-light);
  border-color: var(--accent); }
.dashv2 a.status-metric:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 2px; }
.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.done 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,
.dashv2 .held-panel .dash-held-budget { 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;
}
/* the applied code's own hero left with spec 48: it is the shared code card
   now, and the pills it carried are that card's fact row. What stays here is
   the wait state's hero (kicker, title, lead) and the duty block, which
   became a card of its own. */
.pd-duty { min-width: 0; }
.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); }
/* 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%; }

/* ── the shared code card inside the app (spec 48 §1) ────────────────────
   The dark .cxr-code-card of the public code pages, reused wherever the
   workspace shows a code, so a merchant meets ONE card everywhere. Only the
   sizes belong to the app: the hero code is 40px (32px on a phone), the
   compact one is list size for the places that show several codes. The
   title, the copy button and the explorer link take the card's own palette,
   which is already defined with the family above. Tokens only. */
.app-code-card { width: 100%; }
.app-code-card .cxr-code-card-value { font-size: 40px; margin-bottom: 8px; }
.app-code-card-title {
  margin: 0 0 16px;
  color: var(--accent-light);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.app-code-copy { cursor: pointer; border: 0; white-space: nowrap; }
.app-code-card-link {
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.app-code-card-link:hover, .app-code-card-link:focus-visible {
  color: var(--accent-light);
}
.app-code-card + .app-code-card { margin-top: 12px; }
/* inside a state card the code sits under the sentence explaining it, the
   same step the old boxes kept */
.pd-state-card .app-code-card { margin-top: 16px; }
.app-code-card-compact { padding: 18px 20px; }
.app-code-card-compact .cxr-code-card-value { font-size: 22px; }
.app-code-card-compact .app-code-card-title { margin-bottom: 12px; }
@media (max-width: 560px) {
  .app-code-card .cxr-code-card-value { font-size: 32px; }
  .app-code-card-compact .cxr-code-card-value { font-size: 22px; }
}

/* the quality-check nudge, its own quiet row under the code card */
.pd-check-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
}

/* what the destination charges, each direction its own card (spec 48 §2.2):
   the import duty for a store that imports, the arrival block for one that
   exports. Both reuse patterns already on the page, so neither brings a
   look of its own. */
.pd-duty-card { padding: 18px 22px; }
/* the block used to be the hero's right-hand column, so it carried a divider
   of its own; in its own card it needs none, at any width */
.pd-duty-card .pd-duty { margin-top: 0; padding: 0; border: 0; }
.pd-duty-pref {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
}
.pd-arrival .cx-duty-note { margin: 12px 0 0; }

/* What only the merchant can answer about the US line (spec 83 §3.7, §3.9):
   which of the US lines is their product, and how a measure's condition
   applies. Same card language as the panel around it, tokens only. */
.pd-us-choice, .pd-us-question { margin-top: 14px; }
.pd-us-ask {
  margin: 0; color: var(--text); font-size: 15px; font-weight: 700;
  line-height: 1.4;
}
.pd-us-hint {
  margin: 5px 0 0; color: var(--text-dim); font-size: 14px; line-height: 1.5;
}
.pd-us-options { list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.pd-us-option {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-alt);
}
.pd-us-option-id { flex: 1 1 220px; min-width: 0; }
.pd-us-option-code {
  margin: 0; color: var(--accent); font-family: var(--font-counter);
  font-size: 14px; font-weight: 700;
}
.pd-us-option-desc {
  margin: 2px 0 0; color: var(--text); font-size: 14px; line-height: 1.45;
  overflow-wrap: anywhere;
}
.pd-us-option-rate { flex: 0 0 auto; }
.pd-us-option-figure {
  margin: 0; color: var(--text); font-size: 15px; font-weight: 700;
}
.pd-us-option-label {
  margin: 2px 0 0; color: var(--text-dim); font-size: 13px; line-height: 1.4;
}
.pd-us-fieldset { margin: 0; padding: 0; border: 0; }
.pd-us-choice-row {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 9px;
  color: var(--text); font-size: 14px; line-height: 1.45; cursor: pointer;
}
.pd-us-choice-row input { margin-top: 3px; flex: 0 0 auto; }
.pd-us-legal { margin: 10px 0; }
.pd-us-legal-summary {
  cursor: pointer; padding: 6px 2px; color: var(--accent); font-size: 13px;
  font-weight: 600;
}
.pd-us-legal-summary:hover { color: var(--accent-hover); }

/* 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-check-row { padding-left: 16px; padding-right: 16px; }
  .pd-duty-card { padding: 16px; }
  .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;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  width: min(calc(100% - 32px), 860px);
  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); }
/* the selection scope, count first and the whole-list offer under it */
.pl-bulk-scope {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-right: auto;
}
.pl-bulk-note { color: var(--navy-text); font-size: 13px; line-height: 1.45; }
.pl-bulk-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy-accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
/* destructive, on navy: the danger token mixed down, never a red fill
   (precedent: .syspage .upload-error) */
.pl-bulk-danger {
  border-color: color-mix(in srgb, var(--danger) 50%, transparent);
  background: color-mix(in srgb, var(--danger) 30%, transparent);
}
.pl-bulk-danger:hover { background: color-mix(in srgb, var(--danger) 45%, transparent); }
.pl-delete-count { font-weight: 700; }

@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%; }
  /* keep the scope block a block, never a 150px-tall flex item (the
     flex-basis-becomes-height trap) */
  .pl-bulk-scope { flex: 0 0 auto; 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; }

/* ── the hero's code card (spec 44 §3.10) ──────────────────────────────
   The card beside the title is the CODE, not the import duty: the page's
   default purpose is the export, and the code is what the reader came for.
   The navy the rate card used to hold, so the hero keeps its weight; the
   code is the biggest type on the page, and the two actions, the shared
   notice and a small fact row follow it. Mint on navy for anything the
   reader acts on, because the green primary would sink into this fill. */
.cxr-code-card {
  padding: 24px; border-radius: 20px; color: var(--white);
  background: var(--accent-hover); box-shadow: var(--shadow-float);
  align-self: start;
}
.cxr-code-card-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  color: var(--accent-light); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.cxr-code-card-tick {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 7px; color: var(--accent-hover); background: var(--accent-light);
  font-size: 12px; line-height: 1;
}
.cxr-code-card-value {
  margin: 0 0 16px; color: var(--white); font-family: var(--font-display);
  font-weight: 600; font-size: clamp(34px, 4.8vw, 48px); line-height: 1.05;
  letter-spacing: .02em; overflow-wrap: anywhere;
}
.cxr-code-card-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
}
.cxr-code-card .btn-primary { background: var(--accent-light); color: var(--accent-hover); }
.cxr-code-card .btn-primary:hover { background: var(--white); }
.cxr-code-card .cxr-copy-done { background: var(--white); }
.cxr-code-card .cxr-copy-status { color: var(--accent-light); }
.cxr-code-card .cxr-code-notice { margin-top: 16px; color: var(--accent-light); }
.cxr-code-card .cxr-code-notice strong { color: var(--white); }
.cxr-code-card-facts {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 14px 0 0;
  padding-top: 12px; border-top: 1px solid var(--board-seam);
  color: var(--accent-light); font-size: 13px; line-height: 1.4;
}
.cxr-code-card-fact + .cxr-code-card-fact::before {
  content: "·"; margin-right: 10px;
}

/* ── above the leaf: the same card, saying the code is not finished yet
   (spec 46 §1.1) ────────────────────────────────────────────────────────
   A chapter, heading or subheading page carries the code card too, so the
   three levels and the leaf read as one family. What changes is the line
   under the code: this code cannot go on a declaration, and N codes sit
   below it. */
.cxr-code-card-status {
  margin: 0 0 16px; color: var(--accent-light); font-size: 14px;
  line-height: 1.5;
}

/* the duty range, in the head of the browser it varies across (§1.2) */
.cxr-browser-duty {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin: 8px 0 0; color: var(--text-dim); font-size: 14px; line-height: 1.5;
}

/* one code below is an answer, not a list (§1.4) */
.cxr-answer {
  margin: 0 0 14px; padding: 20px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-card);
}
.cxr-answer-kicker {
  margin: 0 0 8px; color: var(--accent); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.cxr-answer-code {
  margin: 0 0 6px; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.05; color: var(--text);
  letter-spacing: .02em; overflow-wrap: anywhere;
}
.cxr-answer-title {
  margin: 0 0 10px; color: var(--text); font-size: 16px; line-height: 1.45;
  overflow-wrap: anywhere;
}
.cxr-answer-lead {
  margin: 10px 0 0; color: var(--text-dim); font-size: 14px; line-height: 1.5;
}
.cxr-answer-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin-top: 14px;
}

/* the compare head: its title and the link up to the whole level (§1.6) */
.cx-fork-head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 4px 16px;
}

.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 mode switch: you export, or you import (spec 45 §2) ───────────
   Replaces spec 44's four sticky tabs and their banner. One large control
   the width of the page, directly under the hero and NOT sticky: two
   card-like options, stacked at phone widths and side by side from 700px.
   Both are plain anchors, so with JavaScript off they are ordinary links
   into a page where every section is visible. The chosen one is filled
   dark green and carries the tick; the other stays outlined. */
.cxr-mode-switch {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 18px;
}
.cxr-mode {
  display: flex; flex-direction: column; gap: 5px; min-height: 72px;
  padding: 16px 18px; border: 1px solid var(--border); border-radius: 17px;
  background: var(--surface); text-decoration: none;
}
.cxr-mode:hover { border-color: var(--accent); background: var(--accent-light); }
.cxr-mode-on, .cxr-mode-on:hover {
  border-color: var(--accent-hover); background: var(--accent);
}
.cxr-mode-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent-hover); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.cxr-mode-on .cxr-mode-kicker { color: var(--white); }
/* the tick marks the chosen option, so it rides in both and shows in one */
.cxr-mode-tick { display: none; }
.cxr-mode-on .cxr-mode-tick { display: inline; }
.cxr-mode-title {
  color: var(--text); font-family: var(--font-display); font-weight: 600;
  font-size: 20px; line-height: 1.2;
}
.cxr-mode-on .cxr-mode-title { color: var(--white); }
.cxr-mode-line { color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.cxr-mode-on .cxr-mode-line { color: var(--accent-light); }

/* ── the six sections and the two modes (spec 45 §1) ───────────────────
   The HTML order IS the export order and the wrapper carries no mode until
   the script sets one, so with no JavaScript the page shows everything.
   A mode only hides the sections the other direction owns: nothing is
   reordered, nothing leaves the DOM, and #check and #classify stand in
   both. A section this code does not have is simply absent. */
.cxr-mode-flow > section, .cxr-mode-note, .cxr-mode-switch { scroll-margin-top: 96px; }
.cxr-mode-flow[data-mode="export"] > #import,
.cxr-mode-flow[data-mode="export"] > #measures,
.cxr-mode-flow[data-mode="import"] > #export,
.cxr-mode-flow[data-mode="import"] > #markets { display: none; }
/* import mode reads in its own order: the import steps and the duty card
   first, then the measures, then the checks and the classification block;
   the HTML (= export) order would put the checks first once the export
   sections are hidden. The wrapper is a flex column for this; the mode
   sentence keeps order 0 and so stays on top. */
.cxr-mode-flow { display: flex; flex-direction: column; }
.cxr-mode-flow[data-mode="import"] > #import { order: 1; }
.cxr-mode-flow[data-mode="import"] > #measures { order: 2; }
.cxr-mode-flow[data-mode="import"] > #check { order: 3; }
.cxr-mode-flow[data-mode="import"] > #classify { order: 4; }
.cxr-mode-flow[data-mode="import"] > :not(section):not(.cxr-mode-note) { order: 5; }

/* the sentence under the switch, so a reader who scrolled past the control
   still knows which mode they are in. Both are in the HTML (the copy
   belongs to the templates), export is the one shown until a mode says
   otherwise, which is also the no-JavaScript state. */
.cxr-mode-note {
  margin: 0 0 22px; max-width: 62ch; color: var(--text-dim); font-size: 15px;
  line-height: 1.55;
}
.cxr-mode-note-import { display: none; }
.cxr-mode-note-export { display: block; }
.cxr-mode-flow[data-mode="import"] .cxr-mode-note-export { display: none; }
.cxr-mode-flow[data-mode="import"] .cxr-mode-note-import { display: block; }

/* ── the export answer (spec 44 §3.4, slimmed in §3.10) ────────────────
   The CN8 is the whole code for goods leaving the EU, so this is the
   page's answer block: the section head says it in words, and the action
   card below says what is left to do. The code itself is the hero's card,
   so this section never repeats it. */
.cxr-export { margin: 0 0 30px; }
.cxr-export-head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-end; gap: 10px 18px; margin-bottom: 16px;
}
.cxr-export-intro { flex: 1 1 380px; min-width: 0; }
.cxr-export-h {
  margin: 0 0 6px; color: var(--text); font-family: var(--font-display);
  font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12;
  overflow-wrap: anywhere;
}
.cxr-export-lead { margin: 0; max-width: 62ch; color: var(--text-dim); font-size: 15px; line-height: 1.55; }
.cxr-export-pill {
  flex: 0 0 auto; margin: 0; padding: 6px 12px; border-radius: 999px;
  color: var(--accent-hover); background: var(--accent-light); font-size: 12px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

/* the one notice a code card carries, in both its homes (directive 8) */
.cxr-code-notice { margin: 18px 0 0; color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.cxr-code-notice strong { color: var(--text); }
.cxr-next-card .cxr-code-notice { margin-top: 14px; color: var(--accent-light); }
.cxr-next-card .cxr-code-notice strong { color: var(--white); }

/* ── the EU import section and the classification check (spec 44 §3.6, §3.8) */
.cxr-import { margin: 0; }
/* the section's opening row: what to do, and what it costs (§3.10). One
   column here, two from 900px, action card first either way. */
.cxr-import-top {
  display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px;
  align-items: start;
}
.cxr-classify { margin: 0 0 30px; }
.cxr-classify-head { margin-bottom: 14px; }
.cxr-classify-h {
  margin: 0 0 6px; color: var(--text); font-family: var(--font-display);
  font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12;
}
.cxr-classify-lead { margin: 0; max-width: 62ch; color: var(--text-dim); font-size: 15px; line-height: 1.55; }
/* where a subheading holds one 8-digit code there is nothing to compare, so
   the page says that in the callout's place rather than inventing advice */
.cxr-classify-alone {
  margin: 0 0 22px; padding: 13px 15px; border-radius: 12px;
  border-left: 3px solid var(--border); color: var(--text-dim);
  background: var(--surface-alt); font-size: 15px; line-height: 1.5;
}

/* ── "what to do now" (spec 43 §3.3) ───────────────────────────────────
   The dark half of the start-here block: the steps this code actually
   asks for, numbered in the order they are done. No step ever claims to
   know the shipment, so none is ticked off or marked "not chosen". */
.cxr-next-card {
  padding: 22px; border-radius: 20px; color: var(--white);
  background: var(--accent); box-shadow: var(--shadow-card);
}
.cxr-next-h {
  margin: 0 0 6px; color: var(--white); font-family: var(--font-display);
  font-weight: 600; font-size: 21px;
}
.cxr-next-intro { margin: 0 0 16px; color: var(--accent-light); font-size: 14px; line-height: 1.5; }
.cxr-next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cxr-next-item {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 6px 11px; align-items: start; padding: 12px;
  border: 1px solid var(--board-seam); border-radius: 12px;
  background: var(--navy-fill);
}
.cxr-next-num {
  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: 14px; font-weight: 800;
}
.cxr-next-copy { min-width: 0; }
.cxr-next-copy strong {
  display: block; margin-bottom: 3px; color: var(--white); font-size: 15px;
  line-height: 1.35; overflow-wrap: anywhere;
}
.cxr-next-copy small {
  display: block; color: var(--accent-light); font-size: 14px; line-height: 1.5;
}
.cxr-next-pill {
  grid-column: 2; justify-self: start; padding: 4px 9px; 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-next-link {
  grid-column: 3; grid-row: 1; display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px; color: var(--white);
  background: var(--navy-fill); text-decoration: none; font-size: 14px;
}
.cxr-next-link:hover { color: var(--accent-hover); background: var(--accent-light); }
/* the export card's foot: the EBTI link as a text link, after the steps
   rather than as a fourth one (spec 44 §3.10) */
.cxr-next-foot { margin: 14px 0 0; }
.cxr-next-foot-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  color: var(--accent-light); font-size: 14px; font-weight: 700;
  text-decoration: underline;
}
.cxr-next-foot-link:hover { color: var(--white); }

/* ── sibling compare cards (the leaf's fork treatment) ─────────────────── */
.cxr-compare { margin: 0 0 30px; }
.cxr-compare-h {
  margin: 0 0 4px; color: var(--text); font-family: var(--font-display);
  font-weight: 600; font-size: 20px; line-height: 1.2;
}
.cxr-compare-lead {
  margin: 0 0 12px; max-width: 62ch; color: var(--text-dim); font-size: 14px;
  line-height: 1.5;
}
/* the rate-spread callout: warn tint, the same family the fork table's line
   uses, at reading size (spec 43 §3.8) */
.cxr-spread {
  margin: 0 0 12px; padding: 11px 14px; border-radius: 12px;
  border-left: 3px solid var(--warn);
  color: var(--warn-text); background: var(--warn-light);
  font-size: 15px; font-weight: 600; line-height: 1.5;
}
.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-mode-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .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; }
}
/* spec 44 §3.10: the import section's opening row pairs the action card
   with the duty card, and the export card's three steps stand side by side.
   Below this the row stacks (action card first) and the steps are a list. */
@media (min-width: 900px) {
  .cxr-import-top { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 18px; }
  .cxr-next-export .cxr-next-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .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-next-card { padding: 18px; }
  .cxr-path { padding: 12px; }
  /* the number and the section link keep their tap size; the copy takes the
     rest of the row, and the pill drops under it */
  .cxr-next-item { gap: 6px 9px; padding: 11px; }
  .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; }
}

/* ── import lines: head, guidance, search, chips, fold (spec 43 §3.5) ────
   The block keeps spec 42's card language (the .cx-taric-* family above, which
   the customs-codes guide's vignette borrows) and gains the layer that makes a
   list of fifteen readable: a section head at page scale, three mini-cards
   that say how to read a line, a filter row built ONLY from signals the lines
   actually carry, and a fold. The fold and the tools are progressive: their
   rules hang off .cxr-js, so with JavaScript off every card is visible and
   nothing is offered that cannot work. Tokens only, 380px-first. */
.cxr-taric-head { margin-bottom: 16px; }
.cxr-taric-h {
  font-size: clamp(21px, 2.4vw, 28px); line-height: 1.12; margin: 0 0 10px;
}
.cxr-taric-pill {
  display: inline-flex; align-items: center; margin: 0; padding: 5px 11px;
  border-radius: 999px; color: var(--accent-hover); background: var(--accent-light);
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
}
.cxr-taric-guide {
  list-style: none; margin: 14px 0 16px; padding: 0;
  display: grid; gap: 9px; counter-reset: cxr-taric-guide;
  /* auto-fit, so one card fills the row instead of leaving two empty thirds */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cxr-taric-guide-item {
  counter-increment: cxr-taric-guide;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px;
  align-items: start; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.cxr-taric-guide-num {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; color: var(--accent-hover); background: var(--accent-light);
  font-family: var(--font-counter); font-size: 14px; font-weight: 800;
}
.cxr-taric-guide-num::before { content: counter(cxr-taric-guide); }
.cxr-taric-guide-copy { min-width: 0; }
.cxr-taric-guide-copy strong {
  display: block; margin-bottom: 3px; color: var(--text); font-size: 15px;
  line-height: 1.35;
}
.cxr-taric-guide-copy small {
  display: block; color: var(--text-dim); font-size: 14px; line-height: 1.5;
}
.cxr-taric-tools { flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; }
.cxr-taric-search { flex: 1 1 240px; min-width: 0; }
.cxr-taric-input {
  width: 100%; min-height: 42px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: var(--text);
  font-family: var(--font-body); font-size: 14px;
}
.cxr-taric-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-accent); }
.cxr-taric-count { margin: 6px 0 0; color: var(--text-dim); font-size: 13px; }
.cxr-taric-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cxr-taric-chip {
  min-height: 34px; padding: 0 12px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); color: var(--text-dim);
  font-family: var(--font-body); font-size: 12px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  white-space: nowrap;
}
.cxr-taric-chip:hover { color: var(--accent-hover); border-color: var(--accent); }
.cxr-taric-chip-on {
  color: var(--accent-hover); background: var(--accent-light);
  border-color: var(--accent);
}
.cxr-taric-empty { margin: 10px 0 0; color: var(--text-dim); font-size: 14px; }
/* the media query below turns a row into a flex box, which would beat the
   hidden attribute the search and the chips set */
.cx-taric-row[hidden] { display: none; }
.cxr-js .cxr-taric-list-folded .cxr-taric-extra { display: none; }
.cxr-js .cxr-taric-more.cxr-jsonly {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; margin-top: 10px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: var(--accent-hover);
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.cxr-js .cxr-taric-more.cxr-jsonly:hover { border-color: var(--accent); background: var(--accent-light); }

/* ── measures: overview card + accordions (spec 43 §3.6) ────────────────
   The panel said five things at once in five equal cards. Now the dark card
   names the order to read them in, with one status word per row, and each card
   body sits in a native <details> so a reader opens only what they came for.
   The first accordion is open, so the section is never a wall of closed
   summaries. No figure enters this block: it reports KINDS of measure, which
   is why it still takes no asterisk into the shared estimate notice. */
.cxr-meas-head { margin-bottom: 16px; }
.cxr-meas-h {
  font-size: clamp(21px, 2.4vw, 28px); line-height: 1.12; margin: 0 0 10px;
}
.cxr-meas-pill {
  display: inline-flex; align-items: center; margin: 10px 0 0; padding: 5px 11px;
  border-radius: 999px; color: var(--text-dim); background: var(--surface-alt);
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
}
.cxr-meas-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.cxr-meas-over {
  padding: 20px; border-radius: 18px; color: var(--white);
  background: var(--accent); box-shadow: var(--shadow-card);
}
.cxr-meas-over-kicker {
  margin: 0 0 6px; color: var(--accent-light); font-size: 12px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.cxr-meas-over-h {
  margin: 0 0 14px; color: var(--white); font-family: var(--font-display);
  font-weight: 600; font-size: 19px; line-height: 1.25;
}
.cxr-meas-over-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cxr-meas-over-link {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--board-seam); background: var(--navy-fill);
  color: var(--white); text-decoration: none;
}
.cxr-meas-over-link:hover { border-color: var(--accent-light); }
.cxr-meas-over-name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.cxr-meas-over-foot {
  margin: 14px 0 0; color: var(--accent-light); font-size: 14px; line-height: 1.5;
}
.cxr-meas-status {
  flex: 0 0 auto; padding: 4px 9px; 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-meas-status-first, .cxr-meas-status-important {
  color: var(--white); background: var(--warn);
}
.cxr-meas-accs { display: grid; gap: 8px; min-width: 0; }
.cxr-meas-acc { padding: 0; }
.cxr-meas-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 14px 16px; cursor: pointer; list-style: none;
}
.cxr-meas-summary::-webkit-details-marker { display: none; }
.cxr-meas-summary .cx-measure-h { flex: 1 1 auto; min-width: 0; margin: 0; }
.cxr-meas-summary::after {
  content: "⌄"; color: var(--text-dim); font-size: 14px; line-height: 1;
}
.cxr-meas-acc[open] > .cxr-meas-summary::after { content: "⌃"; }
.cxr-meas-acc-body { padding: 0 16px 14px; }
.cxr-meas-acc-body > .cx-measure-copy:first-child { margin-top: 0; }
/* origins as chips: a sentence of fifty country names was unreadable, and the
   scopes are a set, not prose (spec 43 §3.6) */
.cxr-morigins { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.cxr-morigin {
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 13px;
  line-height: 1.35;
}
.cxr-morigin-more { color: var(--text-dim); background: var(--surface-alt); font-weight: 700; }

@media (min-width: 980px) {
  .cxr-shell-wide .cxr-meas-body { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 18px; }
}
@media (max-width: 560px) {
  .cxr-meas-over { padding: 16px; }
  /* a px flex-basis becomes a HEIGHT once these stack (CLAUDE.md §9) */
  .cxr-taric-search { flex: 0 0 auto; width: 100%; }
  .cxr-meas-status { flex: 0 0 auto; }
}

/* ── markets: the EU, Norway and Great Britain as a trio (spec 43 §3.7) ──
   Three blocks in a row asked the reader to hold three figures in their head.
   The cards put the headline charge per market side by side, and each
   country's own table folds underneath with its content untouched (the fold
   only calms the heading inside it, nothing is hidden). A market with no line
   on file keeps a muted card, so the row never silently becomes two. Tokens
   only; the grid auto-fits, so it is one column at 380px. */
.cxr-markets { margin: 0 0 30px; }
.cxr-markets-head { margin-bottom: 16px; }
.cxr-markets-h {
  margin: 0 0 8px; color: var(--text); font-family: var(--font-display);
  font-weight: 600; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.12;
}
.cxr-markets-lead {
  margin: 0; max-width: 62ch; color: var(--text-dim); font-size: 14px;
  line-height: 1.5;
}
.cxr-markets-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.cxr-market {
  min-width: 0; padding: 18px; border: 1px solid var(--border);
  border-radius: 17px; background: var(--surface);
}
.cxr-market-empty { background: var(--surface-alt); border-style: dashed; }
.cxr-market-name {
  margin: 0 0 10px; color: var(--text-dim); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.cxr-market-rate {
  margin: 0 0 14px; color: var(--text); font-family: var(--font-display);
  font-weight: 700; font-size: 26px; line-height: 1.15;
  overflow-wrap: break-word;
}
.cxr-market-soft {
  color: var(--text-dim); font-family: var(--font-body); font-weight: 600;
  font-size: 15px; line-height: 1.4;
}
.cxr-market-rows { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; }
.cxr-market-rows li {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 3px 12px;
}
.cxr-market-k {
  flex: 0 0 auto; color: var(--text-dim); font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.cxr-market-v {
  min-width: 0; color: var(--text); font-size: 14px; font-weight: 700;
  line-height: 1.4; text-align: right;
}
.cxr-market-link { color: var(--accent); text-decoration: none; }
.cxr-market-link:hover { color: var(--accent-hover); text-decoration: underline; }
.cxr-market-example {
  margin: 0 0 8px; color: var(--text-dim); font-size: 13px; line-height: 1.5;
  overflow-wrap: break-word;
}
.cxr-market-example-code {
  color: var(--text); font-family: var(--font-counter); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* the US card's label, the only thing the block says about confidence
   (spec 83 §3.8). It sits under the figure and reads as a caption, so it is
   dimmed but never below the readability floor. */
.cxr-market-label {
  margin: -8px 0 12px; color: var(--text-dim); font-size: 13px;
  font-weight: 600; line-height: 1.4;
}
.cxr-market-note { margin: 0 0 8px; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.cxr-market-foot {
  margin: 0; padding-top: 8px; border-top: 1px dashed var(--border);
  color: var(--text-faint); font-size: 13px; line-height: 1.5;
}
.cxr-markets-fold { margin-top: 10px; }
.cxr-markets-fold-summary {
  cursor: pointer; padding: 8px 2px; color: var(--accent); font-size: 14px;
  font-weight: 700;
}
.cxr-markets-fold-summary:hover { color: var(--accent-hover); }
/* inside the fold the country heading is a label, not a page-level head */
.cxr-markets-fold .cx-norway, .cxr-markets-fold .cx-uk,
.cxr-markets-fold .cx-us { margin: 0; }
.cxr-markets-fold .cx-norway-h, .cxr-markets-fold .cx-uk-h,
.cxr-markets-fold .cx-us-h { font-size: 18px; }
@media (max-width: 560px) {
  .cxr-market { padding: 15px; }
  .cxr-market-rate { font-size: 23px; }
  /* the label keeps its own line rather than squeezing the figure */
  .cxr-market-k { flex: 0 0 auto; }
}

/* ============================================================
   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;
}
/* while the browser check is solving (spec 80): the label already says so, so
   the cursor is the only extra signal. No fading: the text stays at full
   contrast, and the wait is under a second. */
.signup-submit:disabled { cursor: wait; }

/* ---- 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; }
/* the group header: the shared compact code card with the product count
   beside it, stacked at narrow widths (spec 54 §2) */
.dc-group-top { display: flex; align-items: flex-start; flex-wrap: wrap;
  justify-content: space-between; gap: 10px; }
.dc-group-top .app-code-card { flex: 1 1 260px; min-width: 0; }
.dc-group-count { white-space: nowrap; }
/* what this page watches, in the store's own situation (spec 54 §2) */
.dc-lead-direction { font-size: 14px; line-height: 1.5; color: var(--text-dim);
  max-width: 620px; margin-top: 6px; }
.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 export-only state (spec 54 §4): the hero keeps its title, one card
   says why this page is the importer's, and points at Store settings */
.sv-hero-explain .sv-hero-title { margin-bottom: 0; }
.sv-explain { padding: 24px; }
.sv-explain-line { max-width: 62ch; font-size: 15px; line-height: 1.6; }
.sv-explain-link { display: inline-block; margin-top: 14px; font-weight: 600; }

/* 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;
}

/* spec 51: what the file's code column holds, and one real row from it. The
   card is the shared .app-code-card, so only the wrapper is styled here. */
.ex-direction { margin: 0 0 18px; }
.ex-direction-line {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}
.ex-example { margin-top: 14px; }
.ex-example-label {
  margin: 0 0 6px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ex-example-title {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ex-example-empty {
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
}

/* 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; }
/* spec 51: which code is pushed, right under the sentence about the push */
.int-push-code { margin-top: -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%; }
}