/* Drop Zone — Direction 2B "Arena" production tokens (handoff 2026-07-02,
   operator-selected violet accent). Source spec: redesign/2026-07-02_arena/
   HANDOFF_SPEC.md — colors/type/spacing per README, recreated cleanly. */
:root {
  /* ── DEPTH (light) — ported from redesign/2026-08-06_directions/direction_8c.html
     on 2026-08-07. Token NAMES are unchanged from the dark theme on purpose:
     arena.css is fully tokenised (66 var() references, 238 selectors), so the
     whole app flips by replacing values here. Not one selector is touched.

     This is an INVERSION, not a recolour. Three classes of token could not be
     mapped mechanically and were re-derived:
       * semantic hues (positive/warn/hot) must go DARKER on a light ground to
         hold contrast — Depth supplies these and they are used verbatim;
       * tint backgrounds flip from "light colour at low alpha on black" to
         "dark colour at low alpha on white", so both the bg AND its paired fg
         change together;
       * shadows drop from rgba(0,0,0,.45) to a soft blue-black at ~.10, or a
         light theme looks bruised.
     Rule that survives the port: --accent is a SURFACE colour; white type sits
     on --accent-deep, never on --accent. */

  /* ground + surfaces */
  --page-bg: #E7E9F3;
  --surface: #FFFFFF;
  --surface-1: var(--surface);
  --surface-2: #F7F8FC;
  --surface-input: #F1F3FA;

  /* text */
  --text: #262A40;
  --text-strong: #0E1020;
  --text-muted: #4B5170;
  --text-muted-2: #5A6080;
  --text-strike: #8A90AC;
  --text-btn-ghost: #333856;
  --ink: var(--text);
  --ink-2: var(--text-muted);
  --dim: var(--text-muted);
  --mut: var(--text-muted);
  --muted: var(--text-muted);
  --panel: var(--surface);

  /* accent */
  --accent: #4133E0;
  --accent-hover: #3527C4;
  --accent-sub: #EEEDFE;
  --accent-shadow: rgba(65,51,224,0.22);
  --accent-deep: #3527C4;
  --accent-deep-hover: #2A1DA6;
  --accent-on-fill: #FFFFFF;
  --mint: var(--accent-sub);

  /* borders */
  --border: #D8DBEA;
  --border-nav: #E6E8F2;
  --border-feat: #D2D6E8;
  --border-ghost: #E6E8F2;
  --border-img: #DDE0EE;
  --border-hover: #BFC4DC;
  --border-ghost-hover: #CBD0E4;

  /* semantic — Depth values, darkened for contrast on a light ground */
  --positive: #07583A;
  --good: var(--positive);
  --warn: #6F4605;
  --warn-soft: #FBF1DD;
  --warn-line: #ECD3A0;
  --hot: #98240F;
  --hot-badge-bg: rgba(152,36,15,0.10);
  --live: #07583A;
  --title-count-full: #98240F;
  --neutral-spark: #6C7391;

  /* chips — tint on white, foreground darkened to stay legible */
  --chip-lower-bg: rgba(23,74,143,0.10);
  --chip-lower-fg: #174A8F;
  --chip-raise-bg: rgba(7,88,58,0.10);
  --chip-raise-fg: #07583A;
  --chip-offers-bg: rgba(65,51,224,0.10);
  --chip-offers-fg: #3527C4;
  --chip-photo-bg: rgba(111,70,5,0.10);
  --chip-photo-fg: #6F4605;

  /* flash / banners */
  --flash-ok-bg: rgba(7,88,58,0.08);
  --flash-ok-line: rgba(7,88,58,0.28);
  --flash-warn-bg: #FBF1DD;
  --flash-warn-line: #ECD3A0;
  --flash-error-bg: rgba(152,36,15,0.08);
  --flash-error-line: rgba(152,36,15,0.28);
  --flash-error-fg: #98240F;
  --banner-info-bg: rgba(65,51,224,0.08);
  --banner-line: rgba(14,16,32,0.10);

  /* evidence */
  --ev-good-fg: #07583A;
  --ev-stale-fg: #6F4605;
  --ev-absent-line: rgba(111,70,5,0.45);
  --ev-good-line: rgba(7,88,58,0.40);
  --ev-stale-line: rgba(111,70,5,0.40);

  /* inputs */
  --inp-missing-line: rgba(152,36,15,0.45);
  --inp-missing-bg: rgba(152,36,15,0.05);
  --inp-filled-line: rgba(7,88,58,0.30);

  /* reads */
  --reads-low-line: rgba(152,36,15,0.45);
  --reads-empty-bg: rgba(152,36,15,0.07);

  /* cards / thumbs — recessed on light means SUNK, not darker ink */
  --card-feat-a: #FBFCFE;
  --card-feat-b: #F1F3FA;
  --thumb-a: #F1F3FA;
  --thumb-b: #E4E7F3;
  --thumb-ink: #8A90AC;
  --thumb-tag-ink: #9AA0B8;

  /* elevation — a light theme bruises under a black shadow */
  --shadow-pop: rgba(16,20,50,0.14);

  /* type */
  --font-mono: 'Space Mono', ui-monospace, Consolas, monospace;
  --font-disp: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--page-bg); font-family: 'Hanken Grotesk', sans-serif; color: var(--text); }
button { cursor: pointer; font-family: inherit; }
a { text-decoration: none; cursor: pointer; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- Nav (rebuilt 2026-08-06) ---------------------------------------------
   Three links inline, everything else behind ONE <details> disclosure that
   reads as "More" on a wide screen and as a hamburger at 860px and under. See
   partials/nav.html for the grouping rationale. Nothing here depends on JS.
   Vertical padding is 10px (was 16px) because the links are now 44px tall tap
   targets — the bar keeps its original 64px height. */
/* z-index here (not only on the panel) so the whole bar is one layer that
   paints above the page — an open panel must never be interleaved with card
   backgrounds. Stays well under the guide modal (1000) and assistant (9998). */
.dz-nav { position: relative; z-index: 40; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 10px 30px;
  border-bottom: 1px solid var(--border-nav); flex-wrap: wrap; row-gap: 6px; }
.dz-nav__left { display: flex; align-items: center; gap: 22px; min-width: 0; }
.dz-brand { display: flex; align-items: center; gap: 10px; margin-right: 4px; flex-shrink: 0; }
.dz-brand__mark { width: 32px; height: 32px; border-radius: 9px; overflow: hidden; flex-shrink: 0; }
.dz-brand__word { font: 700 17px 'Bricolage Grotesque'; color: var(--text); white-space: nowrap; }
.dz-nav__primary { display: flex; align-items: center; gap: 22px; }
/* Base look only. dashboard.html borrows .dz-nav__link for three in-page
   links, so the tap-target geometry below is scoped to .dz-nav — widening it
   would silently retype a page this sprint is not allowed to touch. */
.dz-nav__link { font: 500 14px 'Hanken Grotesk'; color: var(--text-muted-2); }
.dz-nav .dz-nav__link { position: relative; display: inline-flex; align-items: center;
  min-height: 44px; white-space: nowrap; }
.dz-nav .dz-nav__link:hover { color: var(--text); }
.dz-nav .dz-nav__link--active { font-weight: 600; color: var(--text); }
/* The active rule used to be a border-bottom on a text-height box. With 44px
   tap targets that border would float 12px under the word, so it is drawn as a
   pseudo-element pinned just below the text instead — same 2px accent rule,
   same 3px offset, unchanged to the eye. */
.dz-nav .dz-nav__link--active::after { content: ""; position: absolute; left: 0; right: 0;
  top: calc(50% + 11px); height: 2px; border-radius: 2px; background: var(--accent); }
/* "Start trial" — accent-coloured TEXT on a dark surface, so --accent-sub, not
   --accent (which is a surface/border colour and fails AA as type). */
.dz-nav .dz-nav__link--cta { color: var(--accent-sub); font-weight: 700; }
.dz-nav a:focus-visible, .dz-nav button:focus-visible, .dz-nav summary:focus-visible,
.dz-banner a:focus-visible, .dz-banner button:focus-visible {
  outline: 2px solid var(--accent-sub); outline-offset: 3px; border-radius: 6px; }

/* The disclosure. <details>/<summary> is load-bearing: it opens and closes with
   JavaScript disabled and exposes its expanded state to assistive tech without
   an aria-expanded we would have to keep in sync. */
.dz-nav__disc { position: relative; flex-shrink: 0; }
.dz-nav__disc-btn { position: relative; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px;
  border: 1px solid var(--border-ghost); border-radius: 9px; color: var(--text-muted-2);
  font: 600 13px 'Hanken Grotesk'; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.dz-nav__disc-btn::-webkit-details-marker { display: none; }
.dz-nav__disc-btn:hover { border-color: var(--border-ghost-hover); color: var(--text); }
.dz-nav__disc[open] > .dz-nav__disc-btn { border-color: var(--accent); color: var(--text); }
.dz-nav__burger { display: none; width: 18px; height: 12px; flex-shrink: 0;
  background-image: linear-gradient(currentColor, currentColor),
                    linear-gradient(currentColor, currentColor),
                    linear-gradient(currentColor, currentColor);
  background-size: 100% 2px; background-repeat: no-repeat;
  background-position: 0 0, 0 5px, 0 10px; }
.dz-nav__disc-lbl--sm { display: none; }
.dz-nav__caret { width: 0; height: 0; border-left: 4px solid transparent;
  border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.dz-nav__disc[open] .dz-nav__caret { transform: rotate(180deg); }

/* Panel: absolutely positioned so opening it never reflows the bar or shoves
   the page down — the failure mode of the old wrapping nav. */
.dz-nav__panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  display: flex; align-items: flex-start; gap: 26px;
  min-width: 200px; max-width: min(620px, calc(100vw - 28px));
  padding: 14px 18px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 18px 44px var(--shadow-pop); }
.dz-nav__group { min-width: 128px; }
.dz-nav__group--main { display: none; }   /* wide screens show these inline */
.dz-nav__grouptitle { font: 600 10.5px 'Hanken Grotesk'; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-muted); padding: 0 0 2px 10px; }
.dz-nav__grouplinks { display: flex; flex-direction: column; }
.dz-nav .dz-nav__grouplinks .dz-nav__link { padding-left: 10px; }
/* In a vertical list the underline reads as a left rail. (Scoped to .dz-nav so
   it outranks the .dz-nav .dz-nav__link--active::after rule above.) */
.dz-nav .dz-nav__grouplinks .dz-nav__link--active::after { left: 0; right: auto; width: 3px;
  height: 20px; top: 50%; transform: translateY(-50%); }

.dz-nav__right { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dz-live { display: flex; align-items: center; gap: 6px; font: 500 13px 'Hanken Grotesk'; color: var(--text-muted-2); white-space: nowrap; }
.dz-live__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--live); animation: pulse 2s infinite; flex-shrink: 0; }
/* Viewer chip. The old inline style set border-color on an element with no
   border-style — a no-op — so the dot colour was the only visible effect. */
.dz-live--viewer .dz-live__dot { background: var(--accent-sub); }
/* Reads chip — the card-read balance, persistent in the nav on every surface.
   Brief: "unique, prominent, not distracting, easily seen." So it gets its own
   mark (the aperture ring — used nowhere else, so the glyph alone identifies
   it), the NUMBER carries the prominence, and the resting state stays as quiet
   as .dz-live beside it. It earns colour only when the seller is about to run
   out: --low goes warm, --empty goes hot and drops the pulse on the mark. */
.dz-reads { display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--border-ghost); border-radius: 999px;
  font: 500 13px 'Hanken Grotesk'; color: var(--text-muted-2); }
.dz-reads__mark { display: flex; color: var(--accent-sub); }
.dz-reads__num { font: 700 13px 'Hanken Grotesk'; color: var(--text-strong);
  font-variant-numeric: tabular-nums; }
.dz-reads__label { color: var(--text-muted); }
.dz-reads--low { border-color: var(--reads-low-line); }
.dz-reads--low .dz-reads__mark, .dz-reads--low .dz-reads__num { color: var(--hot); }
.dz-reads--empty { border-color: var(--hot); background: var(--reads-empty-bg); }
.dz-reads--empty .dz-reads__mark { color: var(--hot); animation: pulse 2s infinite; }
.dz-reads--empty .dz-reads__num, .dz-reads--empty .dz-reads__label { color: var(--hot); }
.dz-reads__btn { padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent-sub);
  font: 600 12px 'Hanken Grotesk'; white-space: nowrap; }
.dz-reads__btn:hover { background: var(--accent-deep); color: #fff; }

.dz-avatar-form { display: inline; flex-shrink: 0; }
.dz-avatar { position: relative; width: 32px; height: 32px; border-radius: 999px; background: var(--accent-deep); color: #fff; border: none; font: 600 12px 'Hanken Grotesk'; }
/* 44px hit area on a 32px badge — the target grows, the design does not.
   Same trick on the small reads pill. */
.dz-avatar::after, .dz-reads__btn::after { content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 100%; height: 44px; min-width: 44px; }
.dz-reads__btn { position: relative; }

/* Layout */
.dz-main { max-width: 1180px; margin: 0 auto; padding: 26px 30px 34px; display: flex; flex-direction: column; gap: 24px; }
.dz-head { display: flex; align-items: flex-end; justify-content: space-between; }
.dz-h1 { font: 800 34px 'Bricolage Grotesque'; color: var(--text-strong); letter-spacing: -0.02em; }
.dz-sub { font: 400 14px 'Hanken Grotesk'; color: var(--text-muted-2); margin-top: 4px; }
.dz-head__actions { display: flex; gap: 10px; align-items: stretch; }

/* Buttons */
.dz-btn-ghost { background: transparent; border: 1px solid var(--border-ghost); color: var(--text-btn-ghost); border-radius: 9px; padding: 9px 16px; font: 600 13px 'Hanken Grotesk'; }
.dz-btn-ghost:hover { border-color: var(--border-ghost-hover); }
/* White-on-accent fills use --accent-deep (5.05:1), not --accent (4.04:1 -- a
   WCAG AA failure that shipped on the primary button of every page until
   2026-08-06). Hover goes DARKER (6.23:1); the old --accent-hover was 3.34:1,
   i.e. hovering the button made its label harder to read, not easier. */
.dz-btn-run { background: var(--accent-deep); border: none; border-radius: 10px; padding: 9px 20px; box-shadow: 0 8px 24px var(--accent-shadow); text-align: center; }
.dz-btn-run:hover { background: var(--accent-deep-hover); }
.dz-btn-run__l1 { font: 700 14px 'Hanken Grotesk'; color: #fff; }
.dz-btn-run__l2 { font: 500 10px 'Hanken Grotesk'; color: var(--accent-on-fill); }
.dz-btn-approve { flex: 1; background: var(--accent-deep); color: #fff; border: none; border-radius: 8px; font: 700 13px 'Hanken Grotesk'; }
.dz-btn-approve:hover { background: var(--accent-deep-hover); }
.dz-btn-snooze { flex: 1; background: transparent; border: 1px solid var(--border-ghost); color: var(--text-btn-ghost); border-radius: 8px; font: 600 13px 'Hanken Grotesk'; }

/* Metrics */
.dz-metrics { display: flex; gap: 14px; }
.dz-metric { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 15px 17px; display: flex; flex-direction: column; gap: 12px; }
.dz-metric__label { font: 600 11px 'Hanken Grotesk'; color: var(--text-muted); text-transform: uppercase; letter-spacing: .09em; }
.dz-metric__row { display: flex; justify-content: space-between; align-items: flex-end; }
.dz-metric__value { font: 700 24px 'Bricolage Grotesque'; color: var(--text); }
.dz-metric__delta { font: 500 12px 'Hanken Grotesk'; color: var(--text-muted); margin-top: 2px; }

/* Sections */
.dz-sec { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.dz-sec__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--hot); }
.dz-sec__title { font: 700 14px 'Bricolage Grotesque'; color: var(--text); }
.dz-sec__tail { font: 400 13px 'Hanken Grotesk'; color: var(--text-muted); }
.dz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 980px) { .dz-grid { grid-template-columns: repeat(2, 1fr); } .dz-metrics { flex-wrap: wrap; } .dz-metric { min-width: 44%; } }
@media (max-width: 640px) { .dz-grid { grid-template-columns: 1fr; } }

/* Cards */
.dz-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 15px; display: flex; flex-direction: column; gap: 12px; }
.dz-card--featured { background: linear-gradient(180deg, var(--card-feat-a), var(--card-feat-b)); border-color: var(--border-feat); border-radius: 16px; gap: 13px; }
.dz-card:hover { border-color: var(--border-hover); }
.dz-card__top { display: flex; gap: 12px; }
.dz-card--featured .dz-card__top { gap: 13px; }
.dz-thumb { border-radius: 6px; border: 1px solid var(--border-img); flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: repeating-linear-gradient(135deg, var(--thumb-a), var(--thumb-a) 6px, var(--thumb-b) 6px, var(--thumb-b) 12px); background-size: cover; background-position: center; }
.dz-thumb--sm { width: 50px; height: 70px; }
.dz-thumb--lg { width: 74px; height: 104px; border-radius: 8px; }
.dz-thumb__init { font: 800 13px 'Bricolage Grotesque'; color: var(--thumb-ink); }
.dz-thumb--lg .dz-thumb__init { font-size: 18px; }
.dz-thumb__tag { font: 400 8px 'Space Mono'; color: var(--thumb-tag-ink); letter-spacing: .1em; }
.dz-card__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dz-card__name { font: 600 14px 'Hanken Grotesk'; color: var(--text); line-height: 1.35; }
.dz-card__meta { font: 400 12px 'Hanken Grotesk'; color: var(--text-muted); }
.dz-price { display: flex; align-items: baseline; gap: 8px; }
.dz-price__old { font: 400 13px 'Space Mono'; color: var(--text-strike); text-decoration: line-through; }
.dz-price__new { font: 700 17px 'Bricolage Grotesque'; color: var(--text-strong); }
.dz-card--featured .dz-price__new { font-size: 20px; }
.dz-card__priceline { display: flex; align-items: center; justify-content: space-between; }
.dz-note { font: 400 12px 'Hanken Grotesk'; color: var(--text-muted); }
/* Advisory warning on a setting the seller may still choose (guided autonomy):
   visible amber, never a block. Matches .dz-flash--warn's token. */
.dz-warn-inline { font: 400 12px 'Hanken Grotesk'; color: var(--chip-photo-fg); }
.dz-card__btns { display: flex; gap: 8px; }
.dz-card__btns button { padding: 10px; }
.dz-card--featured .dz-card__btns button { padding: 11px; }

/* Chips + badges */
.dz-chip { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 6px; font: 600 11px 'Hanken Grotesk'; }
.dz-chip--lower { background: var(--chip-lower-bg); color: var(--chip-lower-fg); }
.dz-chip--raise { background: var(--chip-raise-bg); color: var(--chip-raise-fg); }
.dz-chip--offers { background: var(--chip-offers-bg); color: var(--chip-offers-fg); }
.dz-chip--photo { background: var(--chip-photo-bg); color: var(--chip-photo-fg); }
.dz-hot { font: 600 9px 'Hanken Grotesk'; text-transform: uppercase; letter-spacing: .07em; color: var(--hot); background: var(--hot-badge-bg); padding: 3px 6px; border-radius: 4px; margin-left: 7px; vertical-align: 2px; }

/* Toasts / flash */
.dz-flash { border-radius: 10px; padding: 11px 15px; font: 500 13px 'Hanken Grotesk'; }
.dz-flash--ok { background: var(--flash-ok-bg); color: var(--chip-raise-fg); border: 1px solid var(--flash-ok-line); }
.dz-flash--warn { background: var(--flash-warn-bg); color: var(--chip-photo-fg); border: 1px solid var(--flash-warn-line); }
.dz-flash--error { background: var(--flash-error-bg); color: var(--flash-error-fg); border: 1px solid var(--flash-error-line); }
.dz-inline-toast { border-radius: 12px; padding: 22px 16px; text-align: center; font: 500 13px 'Hanken Grotesk'; border: 1px solid var(--border); }
.dz-inline-toast--ok { color: var(--chip-raise-fg); } .dz-inline-toast--warn { color: var(--chip-photo-fg); } .dz-inline-toast--error { color: var(--flash-error-fg); }

/* Login */
.dz-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.dz-login__card { width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 30px; display: flex; flex-direction: column; gap: 16px; }
.dz-login__brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 4px; }
.dz-input { background: var(--surface-input); border: 1px solid var(--border-ghost); border-radius: 8px; padding: 11px 12px; color: var(--text); font: 500 14px 'Hanken Grotesk'; width: 100%; }
.dz-input:focus { outline: none; border-color: var(--accent); }
.dz-label { font: 600 11px 'Hanken Grotesk'; color: var(--text-muted); text-transform: uppercase; letter-spacing: .09em; }
.dz-empty { border: 1px dashed var(--border-ghost); border-radius: 14px; padding: 40px; text-align: center; color: var(--text-muted); font: 500 14px 'Hanken Grotesk'; }

/* ---- Review: eBay bulk-draft row view (2026-07-02) ---- */
.dz-draft-row { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: flex; gap: 16px; margin-bottom: 12px; align-items: flex-start; }
.dz-draft-row:hover { border-color: var(--border-hover); }
.dz-flip { width: 132px; flex-shrink: 0; }
.dz-flip__img { position: relative; width: 132px; aspect-ratio: 5/7; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-img); background: repeating-linear-gradient(135deg,var(--thumb-a),var(--thumb-a) 6px,var(--thumb-b) 6px,var(--thumb-b) 12px); }
.dz-flip__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .18s; }
.dz-flip__img .dz-back { opacity: 0; }
.dz-flip__img:hover .dz-front { opacity: 0; }
.dz-flip__img:hover .dz-back { opacity: 1; }
.dz-flip__hint { font: 400 10px 'Hanken Grotesk'; color: var(--text-muted); text-align: center; margin-top: 5px; }
.dz-draft-meta { width: 190px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.dz-draft-title { font: 600 12.5px 'Hanken Grotesk'; color: var(--text); line-height: 1.35; }
.dz-field { display: flex; flex-direction: column; gap: 3px; }
.dz-field__label { font: 600 9.5px 'Hanken Grotesk'; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.dz-field__label .req { color: var(--hot); margin-left: 3px; }
.dz-inp { background: var(--surface-input); border: 1px solid var(--border-ghost); border-radius: 6px; padding: 6px 8px; color: var(--text); font: 500 12px 'Hanken Grotesk'; width: 100%; }
.dz-inp:focus { outline: none; border-color: var(--accent); }
.dz-inp--missing { border-color: var(--inp-missing-line); background: var(--inp-missing-bg); }
.dz-inp--filled { border-color: var(--inp-filled-line); }
.dz-specs { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; align-content: start; }
.dz-gate { display: flex; align-items: center; gap: 8px; font: 600 11px 'Hanken Grotesk'; padding: 6px 10px; border-radius: 8px; }
.dz-gate--ready { background: var(--flash-ok-bg); color: var(--chip-raise-fg); }
.dz-gate--blocked { background: var(--flash-error-bg); color: var(--flash-error-fg); }
.dz-gate__dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }

/* Editable listing title in the review grid (operator directive 2026-07-23:
   titles must be editable on any card). Keeps the old .dz-draft-title weight
   so the row reads the same, but as a real input. */
.dz-draft-title-inp { font: 600 12.5px 'Hanken Grotesk'; line-height: 1.35; }
.dz-title-count { font: 500 10.5px 'Space Mono', monospace; color: var(--text-muted); opacity: .75; margin-left: 6px; }
.dz-title-count.is-full { color: var(--title-count-full); opacity: 1; }

/* HTMX Loading States */
.htmx-request { opacity: 0.65; pointer-events: none; cursor: wait !important; }
.dz-btn-approve.htmx-request::after { content: " (Applying...)"; font-size: 11px; opacity: 0.8; }
.dz-btn-snooze.htmx-request::after { content: " (Snoozing...)"; font-size: 11px; opacity: 0.8; }

/* ---- Market Movers rows (2026-08-04) ---------------------------------------
   The first mobile screenshot showed row 3 collapsing: the metric column was
   white-space:nowrap around a block that CONTAINED a wrapping sentence ("your
   ask has not moved — 55 pts behind"), so the sentence overflowed across the
   price. And titles hard-truncated to "2026 Topps Chro…", which does not
   identify a card. Rows now stack on narrow screens and titles clamp to two
   lines instead of one. */
.dz-mv-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.dz-mv-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.dz-mv-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
@media (max-width: 640px) {
  .dz-mv-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  /* Metric row reads left-to-right under the title rather than squeezing
     beside it — the percentage is the thing the eye wants, so it anchors right. */
  .dz-mv-right {
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }
  .dz-mv-right > div { text-align: left !important; }
}

/* ---- Price-change report (2026-08-04) --------------------------------------
   Evidence chips encode PRESENCE, not just value: a dashed amber chip means the
   signal was never measured, and must never look like a measured zero. That
   distinction is the whole point of the page. */
.dz-pr-row {
  display: flex; flex-direction: row; align-items: flex-start;
  justify-content: space-between; gap: 14px;
}
.dz-pr-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3;
}
.dz-pr-ev { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.dz-pr-chip {
  font: 500 12px 'Hanken Grotesk', sans-serif; border-radius: 6px;
  padding: 3px 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted-2); white-space: nowrap;
}
.dz-pr-chip--absent {                    /* never measured */
  border-style: dashed; background: transparent;
  color: var(--ev-stale-fg); border-color: var(--ev-absent-line);
}
.dz-pr-chip--good  { border-color: var(--ev-good-line); color: var(--ev-good-fg); }
.dz-pr-chip--stale { border-color: var(--ev-stale-line); color: var(--ev-stale-fg); }
.dz-pr-acts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.dz-pr-money {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; white-space: nowrap; flex-shrink: 0;
}
.dz-pr-px {
  font: 600 14px ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums; color: var(--text-muted-2);
}
.dz-pr-px strong { color: var(--text-strong); }
@media (max-width: 640px) {
  .dz-pr-row { flex-direction: column; align-items: stretch; }
  .dz-pr-money { align-items: flex-start; flex-direction: row; gap: 12px; }
  .dz-pr-chip { white-space: normal; }
}

/* Always-present price-change entry point on Today. */
.dz-pricecheck {
  display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: 14px;
  text-decoration: none; color: inherit; margin-bottom: 16px;
  border-left: 3px solid var(--accent);
}
@media (max-width: 640px) {
  .dz-pricecheck { flex-direction: column; align-items: flex-start; }
}

/* ---- Nav responsive ladder (2026-08-06) ------------------------------------
   Supersedes the 2026-08-04 wrap-and-shrink patch, which was the only
   mitigation the nav ever had: THIRTEEN flat links plus the brand — roughly
   900px of content — wrapped into three or four stacked rows of tiny links in
   a 375px box and pushed the actual page content off the screen. The 2026-07-02
   handoff spec called for a hamburger; this is it.

   The ladder sheds in order of cost: spacing first, then the sync TIME and the
   word "reads" (both restated in their tooltips), and only then the inline
   links — which do not disappear, they move into the disclosure. */
@media (max-width: 1024px) {
  .dz-nav { padding: 10px 18px; }
  .dz-nav__left { gap: 16px; }
  .dz-nav__primary { gap: 16px; }
  /* The panel hangs from the LEFT edge of the More button, so on a narrow
     desktop its right edge is what runs out of room first. Compacting the
     columns here buys ~80px of headroom at the 861px worst case; without it
     the panel cleared the viewport by a single pixel. */
  .dz-nav__panel { gap: 18px; padding: 14px; }
  .dz-nav__group { min-width: 112px; }
}
@media (max-width: 900px) {
  .dz-live__detail { display: none; }     /* kept in the chip's title= */
  .dz-reads__label { display: none; }     /* the number is the signal */
  .dz-nav__right { gap: 10px; }
}
/* Hamburger from 860 down, not 720: below ~861 the three inline links push the
   More button far enough right that even a compacted panel would overhang the
   viewport, and there is no JS-free way to flip a dropdown's anchor side. */
@media (max-width: 860px) {
  /* Hamburger. One row: brand mark, disclosure, status cluster. The primary
     links fold into the panel's "Main" group — the same markup, emitted from
     the same macro, so the two sets cannot drift. */
  .dz-nav { padding: 8px 12px; gap: 8px; }
  .dz-nav__left { gap: 10px; }
  .dz-nav__right { gap: 8px; }
  .dz-nav__primary { display: none; }
  .dz-nav__group--main { display: block; }
  .dz-nav__burger { display: block; }
  .dz-nav__caret { display: none; }
  .dz-nav__disc-lbl--lg { display: none; }
  /* The phone label stays in the accessibility tree (sr-only) rather than
     display:none, so the hamburger always has a real accessible name. */
  .dz-nav__disc-lbl--sm { display: inline; position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Static details => the panel is positioned against .dz-nav, so it spans the
     full bar instead of hanging off the button. */
  .dz-nav__disc { position: static; }
  .dz-nav__panel { left: 8px; right: 8px; top: calc(100% + 6px); min-width: 0; max-width: none;
    flex-direction: column; gap: 12px; max-height: calc(100vh - 80px); overflow-y: auto; }
  .dz-nav__group { min-width: 0; }
}
@media (max-width: 520px) {
  /* The wordmark costs the row; the mark still brands it. */
  .dz-brand__word { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes dz-nav-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .dz-nav__disc[open] > .dz-nav__panel { animation: dz-nav-pop .16s ease-out; }
  .dz-nav__caret { transition: transform .16s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  /* The two idle pulses in the nav. Reduced motion is a user request, not a
     preference to weigh. */
  .dz-live__dot, .dz-reads--empty .dz-reads__mark { animation: none; }
}

/* ---- Banners under the nav (2026-08-06) ------------------------------------
   Were four inline style="" blocks in nav.html carrying system-ui, a raw
   #e8eaed via the --ink shim, a raw #c9b8ff, and var(--accent,#FF7A1A) — the
   retired orange, still shipping as a fallback three years after the rebrand.
   The setup banner now uses --accent-deep + white (5.05:1) per the accent rule
   rather than near-black type on a mid-violet fill. */
.dz-banner { display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; padding: 8px 16px; background: var(--banner-info-bg);
  color: var(--text); font: 600 13px 'Hanken Grotesk';
  border-bottom: 1px solid var(--banner-line); }
.dz-banner__form { margin: 0; display: flex; }
.dz-banner__link { background: none; border: none; color: var(--accent-sub);
  font: 700 13px 'Hanken Grotesk'; text-decoration: underline; padding: 0 4px;
  min-height: 44px; }
.dz-banner--setup { padding: 10px 16px; min-height: 44px; font-size: 14px;
  background: var(--accent-deep); color: #fff; }
.dz-banner--setup:hover { background: var(--accent-deep-hover); }
.dz-banner__cta { font-weight: 800; white-space: nowrap; text-decoration: underline; }
/* Flash was rendered by 11 templates and MISSING from ~16 others, including
   consignment, where every action silently did nothing visible. Now rendered
   once in the nav partial. */
.dz-flash { margin: 0 0 14px; }

/* ---- Acquisition-cost box on the review row -------------------------------
   Rescued from webapp/static/app.css on 2026-08-06. That file was never
   referenced by any <link> in the repo -- base.html loads arena.css alone --
   so although review_row.html has carried .dz-field--cost / .dz-field__hint /
   .dz-inp--cost since 2026-07-30, none of it has ever rendered: no accent
   rail, no hint styling, no tabular numerals. Moved here, where it loads, and
   re-pointed from the orphaned --dz-accent (which fell back to the retired
   teal #14b8a6) to the live accent token.

   Original intent, preserved: deliberately set apart from the item-specifics
   grid because it is not an eBay aspect and never gates a listing -- it is
   the number that turns revenue-minus-fees into real P&L. */
.dz-field--cost { border-left: 3px solid var(--accent); padding-left: 10px; }
.dz-field--cost .dz-field__label { color: var(--accent-sub); }
.dz-field__hint { font-weight: 400; opacity: .65; font-size: .85em; margin-left: 4px; }
.dz-inp--cost { font-variant-numeric: tabular-nums; }

/* ---- Liquidation (2026-08-06) ----------------------------------------------
   The run dashboard + enrollment surface. Three states, three visual weights:
   PAUSED is the loudest thing on the page but deliberately warm, not hostile —
   it is a stop-work on OUR side, and the seller's store is untouched. The
   terms block is quiet and dense because it is read once, carefully. The
   enrollment CTA is the only accent fill.

   White-on-accent uses --accent-deep via .dz-btn-run; nothing here introduces
   a raw hex or an inline style. */
.dz-liq-paused { background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.dz-liq-paused__title { font: 700 16px 'Bricolage Grotesque'; color: var(--warn); }
.dz-liq-paused__body { font: 400 13.5px 'Hanken Grotesk'; color: var(--text); line-height: 1.6; }
.dz-liq-paused__why { color: var(--text-muted); font-size: 12.5px; }
.dz-liq-link { color: var(--accent-sub); font-weight: 700; text-decoration: underline;
  display: inline-flex; align-items: center; min-height: 44px; margin-right: 8px; }

/* Progress. <progress> is used as a real meter so the fill needs no inline
   width and assistive tech gets the value for free. Both vendor pseudo-
   elements are required — they cannot be combined into one selector list. */
.dz-liq-progress { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.dz-liq-bar { -webkit-appearance: none; appearance: none; width: 100%; height: 10px;
  border: none; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.dz-liq-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
.dz-liq-bar::-webkit-progress-value { background: var(--accent-deep); border-radius: 999px; }
.dz-liq-bar::-moz-progress-bar { background: var(--accent-deep); border-radius: 999px; }
.dz-liq-bar--behind::-webkit-progress-value { background: var(--warn); }
.dz-liq-bar--behind::-moz-progress-bar { background: var(--warn); }
.dz-liq-progress__note { font: 400 12.5px 'Hanken Grotesk'; color: var(--text-muted);
  font-variant-numeric: tabular-nums; }
.dz-liq-pace { color: var(--positive); font-weight: 600; }
.dz-liq-pace--behind { color: var(--warn); }

.dz-liq-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dz-liq-fact { font: 400 12px 'Hanken Grotesk'; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; }
.dz-liq-fact b { color: var(--text); font-weight: 600; margin-right: 5px; }

.dz-liq-note { font: 400 13px 'Hanken Grotesk'; color: var(--text-muted-2);
  line-height: 1.6; margin-top: 14px; max-width: 720px; }
.dz-liq-warn { font: 400 13px 'Hanken Grotesk'; color: var(--text); line-height: 1.6;
  margin-top: 14px; max-width: 720px; background: var(--warn-soft);
  border: 1px solid var(--warn-line); border-radius: 10px; padding: 10px 14px; }

.dz-liq-pitch { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.dz-liq-pitch__lede { font: 400 14.5px 'Hanken Grotesk'; color: var(--text-muted-2); line-height: 1.65; }
.dz-liq-pitch__lede b { color: var(--text); font-weight: 700; }

.dz-liq-terms { margin-top: 18px; max-width: 760px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.dz-liq-terms__title { font: 700 14px 'Bricolage Grotesque'; color: var(--text); margin-bottom: 10px; }
.dz-liq-terms__list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.dz-liq-terms__list li { font: 400 13px 'Hanken Grotesk'; color: var(--text-muted-2);
  line-height: 1.6; padding-left: 14px; border-left: 2px solid var(--accent); }
.dz-liq-terms__list li b { color: var(--text); font-weight: 600; }
.dz-liq-terms__ver { font: 400 11.5px 'Space Mono'; color: var(--text-muted); margin-top: 12px; }

.dz-liq-cardgate { margin-top: 18px; max-width: 620px; background: var(--surface);
  border: 1px solid var(--accent); border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dz-liq-cardgate__title { font: 700 15px 'Bricolage Grotesque'; color: var(--text); }
.dz-liq-cardgate__body { font: 400 13px 'Hanken Grotesk'; color: var(--text-muted-2); line-height: 1.6; }

.dz-liq-form { margin-top: 18px; max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.dz-liq-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dz-liq-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dz-liq-field__label { font: 600 11px 'Hanken Grotesk'; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .09em; }
.dz-liq-field__hint { font: 400 11.5px 'Hanken Grotesk'; color: var(--text-muted); line-height: 1.45; }
.dz-liq-input { width: 100%; min-height: 44px; padding: 9px 12px; border-radius: 9px;
  background: var(--surface-input); border: 1px solid var(--border-ghost);
  color: var(--text); font: 400 14px 'Hanken Grotesk'; }
.dz-liq-input:focus-visible { outline: 2px solid var(--accent-sub); outline-offset: 1px; }
.dz-liq-consent { display: flex; gap: 10px; align-items: flex-start;
  font: 400 13px 'Hanken Grotesk'; color: var(--text-muted-2); line-height: 1.55;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.dz-liq-consent b { color: var(--text); font-weight: 600; }
.dz-liq-consent input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; accent-color: var(--accent-deep); }
.dz-liq-cta { align-self: flex-start; display: flex; flex-direction: column; gap: 2px;
  min-height: 44px; padding: 10px 22px; }

@media (max-width: 720px) {
  .dz-liq-form__grid { grid-template-columns: 1fr; }
  .dz-liq-cta { align-self: stretch; }
}

/* ---- Consignment upsell (tier gate, 2026-08-06) ----------------------------
   Below the entry tier the seller sees what the feature does and which plan
   includes it — never a 403 and never a dead nav link. Seeing the value IS the
   conversion mechanism, so this reads as a product panel, not a paywall. */
.dz-upsell { max-width: 760px; background: var(--surface); border: 1px solid var(--accent);
  border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column;
  gap: 10px; align-items: flex-start; margin-bottom: 18px; }
.dz-upsell__tag { font: 700 10.5px 'Hanken Grotesk'; text-transform: uppercase;
  letter-spacing: .11em; color: var(--accent-sub); }
.dz-upsell__title { font: 700 19px 'Bricolage Grotesque'; color: var(--text-strong); }
.dz-upsell__body { font: 400 13.5px 'Hanken Grotesk'; color: var(--text-muted-2); line-height: 1.65; }
.dz-upsell__body b { color: var(--text); font-weight: 600; }
.dz-upsell__list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dz-upsell__list li { font: 400 13px 'Hanken Grotesk'; color: var(--text-muted-2);
  line-height: 1.55; padding-left: 14px; border-left: 2px solid var(--accent); }
.dz-upsell__cta { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 10px 22px; }

/* Auction — seller-chosen listing format at the pre-list step (rule 5a).
   Collapsed by default: BIN + Best Offer is the norm for singles (rule 8),
   so auction is deliberately one deliberate click away, never the path of
   least resistance. */
.dz-auction { margin-top: 8px; border: 1px solid var(--border-ghost); border-radius: 10px; background: var(--surface-input); }
.dz-auction__toggle { cursor: pointer; padding: 8px 12px; font: 600 12px 'Hanken Grotesk'; color: var(--text-btn-ghost); list-style: none; }
.dz-auction__toggle::-webkit-details-marker { display: none; }
.dz-auction__toggle:hover { color: var(--text); }
.dz-auction[open] .dz-auction__toggle { border-bottom: 1px solid var(--border-ghost); color: var(--text); }
.dz-auction__form { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.dz-auction__row { display: flex; flex-direction: column; gap: 3px; }
.dz-auction__row > span { font: 600 9.5px 'Hanken Grotesk'; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.dz-auction__row > span em { text-transform: none; letter-spacing: 0; color: var(--text-strike); font-style: normal; }
.dz-auction__row > span abbr { color: var(--hot); text-decoration: none; margin-left: 3px; }
.dz-auction__row input, .dz-auction__row select { background: var(--page-bg); border: 1px solid var(--border-ghost); border-radius: 6px; padding: 7px 8px; color: var(--text); font: 500 12px 'Hanken Grotesk'; width: 100%; }
.dz-auction__row input:focus, .dz-auction__row select:focus { outline: none; border-color: var(--accent); }
.dz-auction__note { font: 500 10.5px 'Hanken Grotesk'; color: var(--text-muted); line-height: 1.5; margin: 2px 0 0; }
/* Warn-toned, not accent-toned: an auction can close below the floor, so it
   must not read as the same safe default as List now. White type sits on
   --accent-deep per the token rule; here the fill is warn so the type is dark. */
.dz-btn-auction { background: var(--warn); border: none; border-radius: 8px; padding: 9px 14px; color: #1a1200; font: 700 13px 'Hanken Grotesk'; cursor: pointer; }
.dz-btn-auction:hover { filter: brightness(1.08); }

/* BUNDLE THUMBNAIL. A bundle is N cards, so there is no single photo to show.
   The default .dz-thumb is a diagonal hatch, which reads as a failed image load
   rather than as a deliberate state — that is why bundles looked broken. This
   gives them their own mark: a clean tinted panel, three stacked card
   silhouettes, and the count. Intentional, not a fallback. */
.dz-thumb:has(.dz-thumb__stack) {
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-input) 100%);
  border-color: var(--border);
  gap: 3px;
}
.dz-thumb__stack { display: block; width: 30px; height: 41px; color: var(--accent); }
.dz-thumb__stack svg { width: 100%; height: 100%; display: block; }
.dz-thumb--lg .dz-thumb__stack { width: 40px; height: 55px; }
.dz-thumb__count {
  font: 700 9px 'Space Mono'; letter-spacing: .06em; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border-ghost);
  border-radius: 999px; padding: 0 5px; line-height: 14px;
}
.dz-thumb--lg .dz-thumb__count { font-size: 10px; line-height: 16px; padding: 0 7px; }
/* Hover: the card already lifts 2px, so the mark only deepens its ink. */
.dz-card:hover .dz-thumb__stack { color: var(--accent-deep); transition: color .16s ease; }

/* Inline icon sized to the text it sits in — one family, one stroke weight. */
.dz-ico { width: 1.05em; height: 1.05em; vertical-align: -0.16em; margin-right: .28em; }