/* ==========================================================================
   System C — "clean tech friendly"
   A light-only language for reading tabular data: MarketNinja customer
   surfaces (The BinWorth Report email + the interactive report portal).

   Rules of the language, in priority order:
     1. Text is king. Type, weight and alignment carry the hierarchy; colour
        and chrome only support it.
     2. Whitespace first. Space separates groups before any border does.
     3. One accent (tech blue). Everything interactive wears it or a darker
        grey, so "clickable" is never a guess. No purple on customer surfaces.
     4. Quiet surfaces: off-whites and light greys, light/medium grey borders,
        shadows only to lift a layer off the page — never inside the table.
     5. Tight radii (3–6px). Nothing pill-round except status dots.
     6. Colour has fixed meanings: green→yellow→red = distance from the price
        target; red ink = a human's comment ("graded"); green check = done.
   ========================================================================== */

/* ---------- 1. TOKENS ----------------------------------------------------- */
:root {
  color-scheme: light;               /* never a night-mode surface */

  /* Neutrals — layered off-whites, not one flat white */
  --bg:         #f5f6f8;   /* page */
  --bg-2:       #eef0f3;   /* bands, sunken wells */
  --surface:    #ffffff;   /* cards, table body */
  --surface-2:  #fafbfc;   /* table header, detail panels */
  --surface-3:  #f3f5f7;   /* row hover, zebra (rarely) */
  --line:       #e4e7eb;   /* light border — row separators */
  --line-2:     #d3d8de;   /* medium border — cards, controls */
  --line-3:     #b8bfc8;   /* control hover border */

  /* Text — the boldest thing on the page */
  --ink:     #121519;
  --text:    #1f2328;
  --text-2:  #4a525c;
  --text-3:  #6b7380;
  --text-4:  #9aa1ab;

  /* Accent — tech blue (Dell-blue family). The only hue that means "brand" or "click". */
  --accent-50:  #eff5fc;
  --accent-100: #dce9f9;
  --accent-200: #b8d3f2;
  --accent-400: #3d8ee0;
  --accent-500: #1673d4;
  --accent-600: #0b63c4;   /* primary */
  --accent-700: #0a529f;
  --accent-800: #0b4380;

  /* Price heat — distance of the ask from the selling range */
  --heat-0-bg: #ebf6ee;  --heat-0-fg: #1c6b39;  --heat-0-dot: #2e9b55;   /* on target  (< 2%)   */
  --heat-1-bg: #fdf5d3;  --heat-1-fg: #735400;  --heat-1-dot: #d9a700;   /* light      (2–15%)  */
  --heat-2-bg: #fde9d4;  --heat-2-fg: #924300;  --heat-2-dot: #e67a12;   /* medium     (15–35%) */
  --heat-3-bg: #fbe2df;  --heat-3-fg: #a8231b;  --heat-3-dot: #d63a2f;   /* far off    (35%+)   */

  /* Red pen — a human's comment. Deliberately ink, not a fill, so it never
     reads as a heat chip. */
  --pen:    #c42b2b;
  --pen-50: #fff6f6;
  --pen-100:#fbe4e4;

  /* Done */
  --ok:     #1e7f45;
  --ok-50:  #ebf6ee;
  --ok-100: #cfead8;

  /* Type */
  --font-ui: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px;
  --fs-xl: 19px; --fs-2xl: 24px; --fs-3xl: 32px;

  /* Space — 4px grid, generous by default */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Shape — tight, corporate */
  --r-sm: 3px; --r: 4px; --r-md: 6px;

  /* Elevation — outside the table only */
  --sh-1: 0 1px 2px rgba(16, 24, 40, 0.04);
  --sh-2: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 8px rgba(16, 24, 40, 0.05);
  --sh-3: 0 2px 4px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.08);
  --focus: 0 0 0 3px rgba(22, 115, 212, 0.25);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- 2. BASE ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui); font-size: var(--fs-md); line-height: 1.5;
  font-feature-settings: "cv11", "ss01";   /* Inter: single-storey a off, open digits */
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; letter-spacing: -0.015em; }
h1 { font-size: var(--fs-3xl); font-weight: 700; line-height: 1.15; }
h2 { font-size: var(--fs-2xl); font-weight: 650; line-height: 1.25; }
h3 { font-size: var(--fs-xl);  font-weight: 650; line-height: 1.3; }
h4 { font-size: var(--fs-lg);  font-weight: 600; line-height: 1.35; }
p { margin: 0; }
a { color: var(--accent-600); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.eyebrow {
  display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r); }

/* ---------- 3. LOGO (existing MarketNinja mark, re-cut in blue) ------------ */
/* The lockup is a rectangle: the mark's top edge = the cap top of "MarketNinja",
   its bottom edge = the baseline of "by Clixion". Each text line is trimmed to
   cap-top..baseline using Inter's metrics (units/em 2048: ascender 1984,
   descender 494, cap height 1490), so the column's height is exactly
   cap(word) + gap + cap(byline) and the gap absorbs the rest of the mark. */
.mn-logo {
  --logo-h: 34px; --logo-word: 20px; --logo-by: 11.5px;
  --cap: 0.7275;        /* cap height / em */
  --trim-top: 0.1357;   /* line-height:1 box top -> cap top, in em */
  --trim-bot: 0.1367;   /* baseline -> line-height:1 box bottom, in em */
  display: inline-flex; align-items: flex-start; gap: 11px;
  color: var(--ink); text-decoration: none !important;
}
.mn-logo .mark {
  width: var(--logo-h); height: var(--logo-h); border-radius: var(--r-md); flex: none;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
  display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(11, 99, 196, 0.25);
}
.mn-logo .mark svg { width: 55%; height: 55%; fill: #fff; }
.mn-logo > span:not(.mark) { display: flex; flex-direction: column; }
.mn-logo .word {
  display: block; font-family: var(--font-display); font-weight: 750; font-size: var(--logo-word);
  letter-spacing: -0.02em; line-height: 1; white-space: nowrap;
  margin-top: calc(var(--trim-top) * -1em); margin-bottom: calc(var(--trim-bot) * -1em);
}
.mn-logo .word .m { color: var(--accent-600); }
.mn-logo .word .n { color: var(--ink); }
.mn-logo .by {
  display: block; font-size: var(--logo-by); font-weight: 500; color: var(--text-3);
  letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
  /* gap = mark height - both cap heights */
  margin-top: calc(var(--logo-h) - var(--cap) * var(--logo-word) - var(--cap) * var(--logo-by) - var(--trim-top) * 1em);
  margin-bottom: calc(var(--trim-bot) * -1em);
}

/* ---------- 4. LAYOUT ----------------------------------------------------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--s-8); }
@media (max-width: 760px) { .wrap { padding: 0 var(--s-4); } }
.stack > * + * { margin-top: var(--s-4); }
.row-flex { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.spacer { flex: 1; }

.card {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.card.lift { box-shadow: var(--sh-2); }
.card.pad { padding: var(--s-6); }
.divider { height: 1px; background: var(--line); border: 0; margin: var(--s-6) 0; }

/* ---------- 5. CONTROLS --------------------------------------------------- */
/* Anything clickable is either accent-filled, accent-outlined, or a darker grey
   bordered button. Plain grey text is never a button. */
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: var(--r);
  font: 600 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.005em; white-space: nowrap;
  cursor: pointer; text-decoration: none !important; user-select: none;
  border: 1px solid transparent; transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary {
  color: #fff; border-color: var(--accent-700);
  background: linear-gradient(180deg, var(--accent-500), var(--accent-600));
  box-shadow: 0 1px 2px rgba(11, 99, 196, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--accent-600), var(--accent-700)); }
.btn-secondary { color: var(--text); background: var(--surface); border-color: var(--line-2); box-shadow: var(--sh-1); }
.btn-secondary:hover { border-color: var(--line-3); background: var(--surface-2); }
.btn-tertiary { color: var(--accent-600); background: transparent; border-color: transparent; padding: 0 8px; }
.btn-tertiary:hover { background: var(--accent-50); }
.btn.sm { height: 28px; padding: 0 10px; font-size: var(--fs-xs); }
.btn.lg { height: 44px; padding: 0 22px; font-size: var(--fs-md); }

/* The hero CTA (email + portal marketing) */
.btn-cta {
  display: inline-block; padding: 16px 40px; border-radius: var(--r-md);
  font: 650 17px/1.2 var(--font-ui); color: #fff !important; text-decoration: none !important;
  background: linear-gradient(180deg, #2a86e2 0%, #0b63c4 100%);
  border: 1px solid #0a55a8;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 2px 4px rgba(11, 99, 196, 0.18), 0 6px 16px rgba(11, 99, 196, 0.22);
}
.btn-cta:hover { background: linear-gradient(180deg, #1b7ad8 0%, #0a55a8 100%); }

/* Icon button — row actions */
.ibtn {
  appearance: none; display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 9px; border-radius: var(--r);
  font: 600 var(--fs-xs)/1 var(--font-ui); color: var(--text-2);
  background: var(--surface); border: 1px solid var(--line-2); cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ibtn svg { width: 15px; height: 15px; flex: none; }
.ibtn:hover { border-color: var(--line-3); color: var(--ink); background: var(--surface-2); }
.ibtn.only { width: 30px; padding: 0; justify-content: center; }
.ibtn.done.on   { color: #fff; background: var(--ok); border-color: #176a39; }
.ibtn.skip.on   { color: var(--ink); background: var(--bg-2); border-color: var(--line-3); }
.ibtn.note.has  { color: var(--pen); border-color: #e7b4b4; background: var(--pen-50); }

/* Inputs */
.input {
  height: 34px; padding: 0 10px; border-radius: var(--r); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text); font: 400 var(--fs-sm)/1 var(--font-ui);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.input:hover { border-color: var(--line-3); }
.input:focus { outline: none; border-color: var(--accent-500); box-shadow: var(--focus); }
.input-icon { position: relative; display: inline-flex; align-items: center; }
.input-icon svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--text-3); pointer-events: none; }
.input-icon .input { padding-left: 32px; }
textarea.input { height: auto; min-height: 72px; padding: 9px 10px; line-height: 1.45; resize: vertical; width: 100%; }

/* Segmented control — mutually exclusive choices (sort, status) */
.seg { display: inline-flex; padding: 2px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); }
.seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  height: 28px; padding: 0 12px; border-radius: var(--r);
  font: 500 var(--fs-sm)/1 var(--font-ui); color: var(--text-2); white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }
.seg button .ct { color: var(--text-3); font-weight: 500; margin-left: 4px; }

/* Filter tabs — the vertical filter: text tabs with counts, accent underline */
.ftabs { display: flex; gap: var(--s-6); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ftabs button {
  appearance: none; border: 0; background: none; cursor: pointer; white-space: nowrap;
  padding: 10px 0 11px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font: 500 var(--fs-md)/1 var(--font-ui); color: var(--text-2);
}
.ftabs button:hover { color: var(--ink); }
.ftabs button.on { color: var(--accent-700); border-bottom-color: var(--accent-600); font-weight: 600; }
.ftabs button .ct { margin-left: 6px; font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.ftabs button.on .ct { color: var(--accent-600); }

/* Switch */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { width: 32px; height: 18px; border-radius: 9px; background: var(--line-2); position: relative; transition: background 0.15s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.15s var(--ease); }
.switch input:checked + .track { background: var(--accent-600); }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { box-shadow: var(--focus); }

/* ---------- 6. CHIPS, BADGES, HEAT ---------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  border-radius: var(--r-sm); font: 600 var(--fs-xs)/1 var(--font-ui); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.heat-0 { background: var(--heat-0-bg); color: var(--heat-0-fg); } .heat-0 .dot { background: var(--heat-0-dot); }
.heat-1 { background: var(--heat-1-bg); color: var(--heat-1-fg); } .heat-1 .dot { background: var(--heat-1-dot); }
.heat-2 { background: var(--heat-2-bg); color: var(--heat-2-fg); } .heat-2 .dot { background: var(--heat-2-dot); }
.heat-3 { background: var(--heat-3-bg); color: var(--heat-3-fg); } .heat-3 .dot { background: var(--heat-3-dot); }
.chip.neutral { background: var(--bg-2); color: var(--text-2); }

/* Recognition badges — outlined, never loud. Earned, not sold. */
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 6px;
  border-radius: var(--r-sm); border: 1px solid; background: var(--surface);
  font: 600 var(--fs-xs)/1 var(--font-ui); white-space: nowrap;
}
.badge svg { width: 13px; height: 13px; flex: none; }
.badge.best { color: var(--accent-700); border-color: var(--accent-200); background: var(--accent-50); }
.badge.top  { color: #1c6b39; border-color: #bfe0ca; background: #f3faf5; }
.badge.move { color: #5b4a00; border-color: #eadb9c; background: #fffbea; }

/* ---------- 7. THE REPORT TABLE ------------------------------------------- */
/* Div grid, not <table>: comment rows and detail panels must span the full row
   width regardless of columns, and the row must reflow to a card on phones. */
.rt { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--sh-2); overflow: hidden; }
.rt-cols {
  display: grid; align-items: center; column-gap: 14px;
  grid-template-columns: 28px 30px minmax(240px, 1fr) 84px 150px 172px 88px 214px;
}
.rt-head {
  padding: 0 var(--s-5); height: 40px; background: var(--surface-2); border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); letter-spacing: 0.02em;
}
.rt-head .r, .rt-row .r, .rt-sub .r { text-align: right; justify-self: end; }

/* Section header rows ("report order" mode) */
.rt-section {
  padding: var(--s-6) var(--s-5) var(--s-2); background: var(--surface);
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; border-bottom: 1px solid var(--line);
}
.rt-section h4 { font-size: 15px; }
.rt-section .ct { font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }
.rt-section p { font-size: var(--fs-sm); color: var(--text-3); flex-basis: 100%; }

/* A line item = data row + (optional) comments + (optional) detail. Items stack
   edge to edge; only a hairline separates them. */
.rt-item { position: relative; border-bottom: 1px solid var(--line); background: var(--surface); transition: background 0.15s; }
.rt-item:last-child { border-bottom: 0; }
.rt-item::before {   /* the red-pen rule: shown when the item carries comments */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background 0.15s;
}
.rt-item.has-notes::before { background: var(--pen); }
.rt-item.done   { background: #fcfefd; }
.rt-item.skipped .rt-row .c-item .t { color: var(--text-2); }
.rt-row { padding: 14px var(--s-5); min-height: 64px; }
.rt-row:hover { background: var(--surface-3); }
.rt-item.open > .rt-row { background: var(--surface-2); }

.tog {
  appearance: none; width: 26px; height: 26px; border-radius: var(--r); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text-2); cursor: pointer; display: grid; place-items: center;
  transition: border-color 0.12s, background 0.12s;
}
.tog:hover { border-color: var(--line-3); color: var(--ink); }
.tog svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.rt-item.open .tog svg { transform: rotate(90deg); }

.c-no { font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }
.c-item { min-width: 0; }
.c-item .t {
  color: var(--ink); font-weight: 550; font-size: var(--fs-md); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.c-item .sub { margin-top: 3px; font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.c-item .sub .pn { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); }
.c-item .sub .sep { color: var(--line-3); }
.c-item .flag { display: inline-flex; margin-left: 6px; vertical-align: -2px; color: var(--pen); }
.c-item .flag svg { width: 15px; height: 15px; }
.c-money { font-variant-numeric: tabular-nums; font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.c-money .u { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); }
.c-range .v { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--text); font-weight: 500; }

/* Range bar: the selling band as a track, the ask as a marker */
.rbar { position: relative; height: 6px; margin-top: 7px; background: var(--bg-2); border-radius: 3px; }
.rbar .band { position: absolute; top: 0; bottom: 0; background: #b9dcc4; border-radius: 3px; }
.rbar .ask { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--ink); border-radius: 1px; transform: translateX(-1px); }
.rbar .ask.off { background: var(--heat-3-dot); }

.c-rec .v { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.c-rec .v.quiet { font-weight: 500; color: var(--text-2); }
.c-rec .chips { margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; }
.c-mkt { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.35; font-variant-numeric: tabular-nums; text-align: right; }
.c-mkt b { color: var(--ink); font-weight: 600; }
.c-act { display: flex; gap: 6px; justify-content: flex-end; }

/* Collapsible regions — grid-rows animation, no height math */
.fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.24s var(--ease); }
.fold > .fold-in { overflow: hidden; min-height: 0; }
.fold.open { grid-template-rows: 1fr; }

/* Comment rows — below the data, spanning the full width, in red pen */
.notes { padding: 0 var(--s-5) 12px calc(var(--s-5) + 28px + 30px + 28px); }
.cmt {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r); background: var(--pen-50); border: 1px solid var(--pen-100);
}
.cmt + .cmt { margin-top: 6px; }
.cmt .ic { color: var(--pen); flex: none; margin-top: 1px; }
.cmt .ic svg { width: 16px; height: 16px; }
.cmt .body { flex: 1; min-width: 0; }
.cmt .txt { color: var(--pen); font-size: var(--fs-md); font-weight: 550; line-height: 1.45; }
.cmt .reason { display: inline-block; font-weight: 700; margin-right: 6px; }
.cmt .corr { display: inline-flex; margin-left: 6px; padding: 1px 6px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--pen-100); color: var(--pen); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.cmt .meta { margin-top: 3px; font-size: var(--fs-xs); color: var(--text-3); }
.cmt .tools { display: flex; gap: 2px; }
.cmt .tools button { appearance: none; border: 0; background: none; cursor: pointer; color: var(--text-3); padding: 3px; border-radius: var(--r-sm); }
.cmt .tools button:hover { color: var(--ink); background: rgba(0,0,0,0.04); }
.cmt .tools svg { width: 14px; height: 14px; display: block; }

/* The inline editor */
.editor { padding: 0 var(--s-5) 16px calc(var(--s-5) + 28px + 30px + 28px); }
.editor-box { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-2); padding: var(--s-4); }
.editor-box .q { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.reasons { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.reasons button {
  appearance: none; height: 28px; padding: 0 10px; border-radius: var(--r); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font: 500 var(--fs-xs)/1 var(--font-ui);
}
.reasons button:hover { border-color: var(--line-3); color: var(--ink); }
.reasons button.on { border-color: var(--accent-500); background: var(--accent-50); color: var(--accent-700); font-weight: 600; }
.editor-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.editor-foot .price { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); }
.editor-foot .price .input { width: 96px; height: 28px; }

/* Detail panel — "more data" behind the toggle */
.detail { padding: 4px var(--s-5) 20px calc(var(--s-5) + 28px + 30px + 28px); }
.detail-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--s-6); padding: var(--s-5); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.detail h5 { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.detail p, .detail li { font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.detail ul { margin: 0; padding-left: 18px; }
.detail .read { font-size: var(--fs-md); color: var(--ink); line-height: 1.5; }
.detail .sugg { margin-top: 10px; padding: 8px 10px; border-left: 2px solid var(--accent-500); background: var(--accent-50); font-size: var(--fs-sm); color: var(--accent-800); border-radius: 0 var(--r) var(--r) 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: var(--fs-sm); }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; color: var(--ink); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

/* Where it sold — sub-band histogram (origin-stripped counts) */
.hist { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 4px; height: 72px; margin-top: 4px; }
.hist .b { position: relative; background: #cfe0f3; border-radius: 2px 2px 0 0; min-height: 2px; }
.hist .b.mine { background: var(--accent-500); }
.hist .b span { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.hist-x { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-top: 4px; font-size: 10.5px; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }

/* Hierarchical sub-rows (price-point comparison — planned) */
.rt-sub { display: grid; align-items: center; column-gap: var(--s-4); padding: 9px var(--s-5); border-top: 1px dashed var(--line); background: var(--surface-2); font-size: var(--fs-sm); }
.rt-sub .tree { color: var(--line-3); font-family: var(--font-mono); }

/* Phone: each item becomes a card-ish block */
@media (max-width: 1080px) {
  .rt-head { display: none; }
  .rt-row.rt-cols {
    grid-template-columns: 26px 1fr auto; grid-template-areas:
      "tog item item" ". ask range" ". rec rec" ". mkt mkt" ". act act";
    row-gap: 10px; align-items: start;
  }
  .rt-row .c-tog { grid-area: tog; } .rt-row .c-no { display: none; }
  .rt-row .c-item { grid-area: item; } .rt-row .c-ask { grid-area: ask; justify-self: start; text-align: left; }
  .rt-row .c-range { grid-area: range; } .rt-row .c-rec { grid-area: rec; }
  .rt-row .c-mkt { grid-area: mkt; text-align: left; justify-self: start; } .rt-row .c-act { grid-area: act; justify-content: flex-start; }
  .notes, .editor, .detail { padding-left: calc(var(--s-5) + 26px + var(--s-4)); }
  .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .rt-row, .rt-section, .notes, .editor, .detail { padding-left: var(--s-4); padding-right: var(--s-4); }
  .notes, .editor, .detail { padding-left: var(--s-4); }
  .ibtn .lbl { display: none; } .ibtn { width: 34px; padding: 0; justify-content: center; }
  .seg { flex-wrap: wrap; max-width: 100%; }
}

/* ---------- 8. MODAL ------------------------------------------------------ */
/* One layer above the page: faint scrim, a white card with the strongest (still
   soft) shadow in the system. Opens with a short fade + rise. */
.modal-scrim {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh var(--s-4) var(--s-4); background: rgba(18, 21, 25, 0.28);
  opacity: 0; pointer-events: none; transition: opacity 0.18s var(--ease);
}
.modal-scrim.open { opacity: 1; pointer-events: auto; }
.modal {
  width: 100%; max-width: 620px; max-height: 80vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: 0 4px 8px rgba(16, 24, 40, 0.05), 0 20px 48px rgba(16, 24, 40, 0.16);
  transform: translateY(10px); transition: transform 0.22s var(--ease);
}
.modal-scrim.open .modal { transform: none; }
.modal-head { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-6) var(--s-6) var(--s-4); border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 20px; }
.modal-head p { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-3); }
.modal-head .x { margin-left: auto; flex: none; }
.modal-body { padding: var(--s-5) var(--s-6); overflow-y: auto; }
.modal-body .sect { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; }
.modal-body .sect + .cmt, .modal-body .cmt + .sect { margin-top: 0; }
.modal-body .list { margin-bottom: var(--s-6); }
.modal-body .empty-note { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--s-6); }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: var(--s-4) var(--s-6); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-md) var(--r-md); }
.modal-foot .hint { font-size: var(--fs-xs); color: var(--text-3); }
.cmt .topic { display: inline-block; margin-right: 6px; font-weight: 700; }
@media (max-width: 520px) { .modal-scrim { padding: var(--s-3); align-items: flex-end; } .modal { max-height: 88vh; } }

/* Count bubble on a button (e.g. Feedback 2) */
.btn .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: var(--accent-700); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.btn-secondary .count { background: var(--pen); color: #fff; }

/* ---------- 9. TOAST ------------------------------------------------------ */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 16px; border-radius: var(--r-md);
  background: #1f2328; color: #fff; font-size: var(--fs-sm); box-shadow: var(--sh-3); z-index: 50;
  transition: opacity 0.18s, transform 0.18s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { appearance: none; border: 0; background: none; color: #8fc1f5; font: 600 var(--fs-sm)/1 var(--font-ui); cursor: pointer; padding: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}